From ccd3774f5e2aa73a81a54e1a651dcfb4d722fa53 Mon Sep 17 00:00:00 2001 From: BE-Webdesign Date: Mon, 29 May 2017 23:32:49 -0400 Subject: [PATCH 1/2] Adds basic Toolbar component tests. Adds basic Toolbar component tests. Related to progress on #641. **Testing Instructions** Run npm i && npm run test-unit ensure tests pass. Change component logic to ensure tests fail as they should. --- components/toolbar/test/index.js | 83 ++++++++++++++++++++++++++++++++ 1 file changed, 83 insertions(+) create mode 100644 components/toolbar/test/index.js diff --git a/components/toolbar/test/index.js b/components/toolbar/test/index.js new file mode 100644 index 00000000000000..d842d78ccdab25 --- /dev/null +++ b/components/toolbar/test/index.js @@ -0,0 +1,83 @@ +/** + * External dependencies + */ +import { expect } from 'chai'; +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +import Toolbar from '../'; + +describe( 'Toolbar', () => { + describe( 'basic rendering', () => { + it( 'should render an empty node controls are not passed', () => { + const toolbar = shallow( ); + expect( toolbar.type() ).to.be.null(); + } ); + + it( 'should render an empty node controls are empty', () => { + const toolbar = shallow( ); + expect( toolbar.type() ).to.be.null(); + } ); + + it( 'should render a list of controls with IconButtons', () => { + const clickHandler = ( event ) => event; + const controls = [ + { + icon: 'wordpress', + title: 'WordPress', + subscript: 'wp', + onClick: clickHandler, + isActive: false, + }, + ]; + const toolbar = shallow( ); + const listItem = toolbar.find( 'IconButton' ); + expect( toolbar.type() ).to.equal( 'ul' ); + expect( listItem.props().icon ).to.equal( 'wordpress' ); + expect( listItem.props().label ).to.equal( 'WordPress' ); + expect( listItem.props()[ 'data-subscript' ] ).to.equal( 'wp' ); + expect( listItem.props()[ 'aria-pressed' ] ).to.equal( false ); + expect( listItem.props().className ).to.equal( 'components-toolbar__control' ); + } ); + + it( 'should render a list of controls with IconButtons and active control', () => { + const clickHandler = ( event ) => event; + const controls = [ + { + icon: 'wordpress', + title: 'WordPress', + subscript: 'wp', + onClick: clickHandler, + isActive: true, + }, + ]; + const toolbar = shallow( ); + const listItem = toolbar.find( 'IconButton' ); + expect( listItem.props()[ 'aria-pressed' ] ).to.equal( true ); + expect( listItem.props().className ).to.equal( 'components-toolbar__control is-active' ); + } ); + + it( 'should call the clickHandler on click.', () => { + let clicked = false; + const clickHandler = ( event ) => { + clicked = true; + return event; + }; + const controls = [ + { + icon: 'wordpress', + title: 'WordPress', + subscript: 'wp', + onClick: clickHandler, + isActive: true, + }, + ]; + const toolbar = shallow( ); + const listItem = toolbar.find( 'IconButton' ); + listItem.simulate( 'click', { stopPropagation: () => undefined } ); + expect( clicked ).to.be.true(); + } ); + } ); +} ); From 24e56e9512ddcc9f6029375cc78a5a321d42cddd Mon Sep 17 00:00:00 2001 From: BE-Webdesign Date: Thu, 1 Jun 2017 10:33:51 -0400 Subject: [PATCH 2/2] Cleaning up tests. Cleans up the tests to make use of spies. This also changes the `props()` convention to check whether the keys are included in the object. include is used instead of equal to ensure that the tests do not look at all props like children. Adds in a correction to the function signature of Toolbar so that the component renders properly. --- components/toolbar/index.js | 2 +- components/toolbar/test/index.js | 50 ++++++++++++++++++++++---------- 2 files changed, 35 insertions(+), 17 deletions(-) diff --git a/components/toolbar/index.js b/components/toolbar/index.js index 687fd359a4016b..785c11336b5480 100644 --- a/components/toolbar/index.js +++ b/components/toolbar/index.js @@ -9,7 +9,7 @@ import classNames from 'classnames'; import './style.scss'; import IconButton from '../icon-button'; -function Toolbar( { controls } ) { +function Toolbar( { controls, focus } ) { if ( ! controls || ! controls.length ) { return null; } diff --git a/components/toolbar/test/index.js b/components/toolbar/test/index.js index d842d78ccdab25..112eb8996d215d 100644 --- a/components/toolbar/test/index.js +++ b/components/toolbar/test/index.js @@ -3,6 +3,7 @@ */ import { expect } from 'chai'; import { shallow } from 'enzyme'; +import { spy } from 'sinon'; /** * Internal dependencies @@ -11,12 +12,12 @@ import Toolbar from '../'; describe( 'Toolbar', () => { describe( 'basic rendering', () => { - it( 'should render an empty node controls are not passed', () => { + it( 'should render an empty node, when controls are not passed', () => { const toolbar = shallow( ); expect( toolbar.type() ).to.be.null(); } ); - it( 'should render an empty node controls are empty', () => { + it( 'should render an empty node, when controls are empty', () => { const toolbar = shallow( ); expect( toolbar.type() ).to.be.null(); } ); @@ -35,11 +36,14 @@ describe( 'Toolbar', () => { const toolbar = shallow( ); const listItem = toolbar.find( 'IconButton' ); expect( toolbar.type() ).to.equal( 'ul' ); - expect( listItem.props().icon ).to.equal( 'wordpress' ); - expect( listItem.props().label ).to.equal( 'WordPress' ); - expect( listItem.props()[ 'data-subscript' ] ).to.equal( 'wp' ); - expect( listItem.props()[ 'aria-pressed' ] ).to.equal( false ); - expect( listItem.props().className ).to.equal( 'components-toolbar__control' ); + expect( listItem.props() ).to.include( { + icon: 'wordpress', + label: 'WordPress', + 'data-subscript': 'wp', + 'aria-pressed': false, + className: 'components-toolbar__control', + focus: undefined, + } ); } ); it( 'should render a list of controls with IconButtons and active control', () => { @@ -55,16 +59,15 @@ describe( 'Toolbar', () => { ]; const toolbar = shallow( ); const listItem = toolbar.find( 'IconButton' ); - expect( listItem.props()[ 'aria-pressed' ] ).to.equal( true ); - expect( listItem.props().className ).to.equal( 'components-toolbar__control is-active' ); + expect( listItem.props() ).to.include( { + 'aria-pressed': true, + className: 'components-toolbar__control is-active', + } ); } ); it( 'should call the clickHandler on click.', () => { - let clicked = false; - const clickHandler = ( event ) => { - clicked = true; - return event; - }; + const clickHandler = spy(); + const event = { stopPropagation: () => undefined }; const controls = [ { icon: 'wordpress', @@ -76,8 +79,23 @@ describe( 'Toolbar', () => { ]; const toolbar = shallow( ); const listItem = toolbar.find( 'IconButton' ); - listItem.simulate( 'click', { stopPropagation: () => undefined } ); - expect( clicked ).to.be.true(); + listItem.simulate( 'click', event ); + expect( clickHandler ).to.have.been.calledOnce(); + expect( clickHandler ).to.have.been.calledWith(); + } ); + + it( 'should have a focus property of true.', () => { + const controls = [ + { + icon: 'wordpress', + title: 'WordPress', + subscript: 'wp', + isActive: true, + }, + ]; + const toolbar = shallow( ); + const listItem = toolbar.find( 'IconButton' ); + expect( listItem.prop( 'focus' ) ).to.be.true(); } ); } ); } );