From b76e8ee5514b2f962fdf508a5ea28a5c5dba43d1 Mon Sep 17 00:00:00 2001 From: BE-Webdesign Date: Thu, 1 Jun 2017 13:02:09 -0400 Subject: [PATCH 1/3] Add tests for the BlockMover Component. Adds tests for the BlockMover Component. Related to progress on #641. The tests ensure that the callbacks render properly depending on whether the block isFirst or isLast. --- editor/block-mover/index.js | 2 +- editor/block-mover/test/index.js | 70 ++++++++++++++++++++++++++++++++ 2 files changed, 71 insertions(+), 1 deletion(-) create mode 100644 editor/block-mover/test/index.js diff --git a/editor/block-mover/index.js b/editor/block-mover/index.js index 2113ff378bd96d..b66ab40c4bf69c 100644 --- a/editor/block-mover/index.js +++ b/editor/block-mover/index.js @@ -19,7 +19,7 @@ import { isFirstBlock, isLastBlock, getBlockIndex, getBlock } from '../selectors import { getBlockMoverLabel } from './mover-label'; import { selectBlock } from '../actions'; -function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, blockType, firstIndex } ) { +export function BlockMover( { onMoveUp, onMoveDown, isFirst, isLast, uids, blockType, firstIndex } ) { // We emulate a disabled state because forcefully applying the `disabled` // attribute on the button while it has focus causes the screen to change // to an unfocused state (body as active element) without firing blur on, diff --git a/editor/block-mover/test/index.js b/editor/block-mover/test/index.js new file mode 100644 index 00000000000000..f589ed375c5552 --- /dev/null +++ b/editor/block-mover/test/index.js @@ -0,0 +1,70 @@ +/** + * External dependencies + */ +import { expect } from 'chai'; +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +import { BlockMover } from '../'; + +describe( 'BlockMover', () => { + describe( 'basic rendering', () => { + it( 'should render two IconButton components with the following props', () => { + const blockMover = shallow( ); + expect( blockMover.hasClass( 'editor-block-mover' ) ); + + const moveUp = blockMover.childAt( 0 ); + const moveDown = blockMover.childAt( 1 ); + expect( moveUp.type().name ).to.equal( 'IconButton' ); + expect( moveDown.type().name ).to.equal( 'IconButton' ); + expect( moveUp.props() ).to.include( { + className: 'editor-block-mover__control', + onClick: undefined, + icon: 'arrow-up-alt2', + 'aria-disabled': undefined, + } ); + expect( moveDown.props() ).to.include( { + className: 'editor-block-mover__control', + onClick: undefined, + icon: 'arrow-down-alt2', + 'aria-disabled': undefined, + } ); + } ); + + it( 'should render the up arrow with a onMoveUp callback', () => { + const onMoveUp = ( event ) => event; + const blockMover = shallow( ); + const moveUp = blockMover.childAt( 0 ); + expect( moveUp.prop( 'onClick' ) ).to.equal( onMoveUp ); + } ); + + it( 'should render the down arrow with a onMoveDown callback', () => { + const onMoveDown = ( event ) => event; + const blockMover = shallow( ); + const moveDown = blockMover.childAt( 1 ); + expect( moveDown.prop( 'onClick' ) ).to.equal( onMoveDown ); + } ); + + it( 'should render with a disabled up arrown when the block isFirst', () => { + const onMoveUp = ( event ) => event; + const blockMover = shallow( ); + const moveUp = blockMover.childAt( 0 ); + expect( moveUp.props() ).to.include( { + onClick: null, + 'aria-disabled': true, + } ); + } ); + + it( 'should render with a disabled down arrow when the block isLast', () => { + const onMoveDown = ( event ) => event; + const blockMover = shallow( ); + const moveDown = blockMover.childAt( 1 ); + expect( moveDown.props() ).to.include( { + onClick: null, + 'aria-disabled': true, + } ); + } ); + } ); +} ); From 0b9c616d3d64ca812bc3845e7784f848ebb44c75 Mon Sep 17 00:00:00 2001 From: BE-Webdesign Date: Fri, 9 Jun 2017 23:40:56 -0400 Subject: [PATCH 2/3] Update tests. Updating the tests to incorporate new changes to BlockMover. --- editor/block-mover/test/index.js | 40 ++++++++++++++++++++++++++++---- 1 file changed, 35 insertions(+), 5 deletions(-) diff --git a/editor/block-mover/test/index.js b/editor/block-mover/test/index.js index f589ed375c5552..6eac30eb4bbbd1 100644 --- a/editor/block-mover/test/index.js +++ b/editor/block-mover/test/index.js @@ -11,8 +11,14 @@ import { BlockMover } from '../'; describe( 'BlockMover', () => { describe( 'basic rendering', () => { + const selectedUids = [ 'IisUID', 'IisOtherUID' ]; + + const blockType = { + title: 'yolo-block', + }; + it( 'should render two IconButton components with the following props', () => { - const blockMover = shallow( ); + const blockMover = shallow( ); expect( blockMover.hasClass( 'editor-block-mover' ) ); const moveUp = blockMover.childAt( 0 ); @@ -23,33 +29,51 @@ describe( 'BlockMover', () => { className: 'editor-block-mover__control', onClick: undefined, icon: 'arrow-up-alt2', + label: 'Move 2 blocks from position 1 up by one place', 'aria-disabled': undefined, } ); expect( moveDown.props() ).to.include( { className: 'editor-block-mover__control', onClick: undefined, icon: 'arrow-down-alt2', + label: 'Move 2 blocks from position 1 down by one place', 'aria-disabled': undefined, } ); } ); it( 'should render the up arrow with a onMoveUp callback', () => { const onMoveUp = ( event ) => event; - const blockMover = shallow( ); + const blockMover = shallow( + + ); const moveUp = blockMover.childAt( 0 ); expect( moveUp.prop( 'onClick' ) ).to.equal( onMoveUp ); } ); it( 'should render the down arrow with a onMoveDown callback', () => { const onMoveDown = ( event ) => event; - const blockMover = shallow( ); + const blockMover = shallow( + + ); const moveDown = blockMover.childAt( 1 ); expect( moveDown.prop( 'onClick' ) ).to.equal( onMoveDown ); } ); it( 'should render with a disabled up arrown when the block isFirst', () => { const onMoveUp = ( event ) => event; - const blockMover = shallow( ); + const blockMover = shallow( + + ); const moveUp = blockMover.childAt( 0 ); expect( moveUp.props() ).to.include( { onClick: null, @@ -59,7 +83,13 @@ describe( 'BlockMover', () => { it( 'should render with a disabled down arrow when the block isLast', () => { const onMoveDown = ( event ) => event; - const blockMover = shallow( ); + const blockMover = shallow( + + ); const moveDown = blockMover.childAt( 1 ); expect( moveDown.props() ).to.include( { onClick: null, From fd3f21ac4754bb81cff865d4046caf7368cc0f54 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Mon, 13 Nov 2017 08:26:27 +0100 Subject: [PATCH 3/3] Tests: Update `BLockMover` tests to use Jest API --- editor/block-mover/test/index.js | 27 +++++++++++++-------------- 1 file changed, 13 insertions(+), 14 deletions(-) diff --git a/editor/block-mover/test/index.js b/editor/block-mover/test/index.js index 6eac30eb4bbbd1..32d0c221624f30 100644 --- a/editor/block-mover/test/index.js +++ b/editor/block-mover/test/index.js @@ -1,7 +1,6 @@ /** * External dependencies */ -import { expect } from 'chai'; import { shallow } from 'enzyme'; /** @@ -19,20 +18,20 @@ describe( 'BlockMover', () => { it( 'should render two IconButton components with the following props', () => { const blockMover = shallow( ); - expect( blockMover.hasClass( 'editor-block-mover' ) ); + expect( blockMover.hasClass( 'editor-block-mover' ) ).toBe( true ); const moveUp = blockMover.childAt( 0 ); const moveDown = blockMover.childAt( 1 ); - expect( moveUp.type().name ).to.equal( 'IconButton' ); - expect( moveDown.type().name ).to.equal( 'IconButton' ); - expect( moveUp.props() ).to.include( { + expect( moveUp.type().name ).toBe( 'IconButton' ); + expect( moveDown.type().name ).toBe( 'IconButton' ); + expect( moveUp.props() ).toMatchObject( { className: 'editor-block-mover__control', onClick: undefined, icon: 'arrow-up-alt2', label: 'Move 2 blocks from position 1 up by one place', 'aria-disabled': undefined, } ); - expect( moveDown.props() ).to.include( { + expect( moveDown.props() ).toMatchObject( { className: 'editor-block-mover__control', onClick: undefined, icon: 'arrow-down-alt2', @@ -48,9 +47,9 @@ describe( 'BlockMover', () => { blockType={ blockType } onMoveUp={ onMoveUp } firstIndex={ 0 } /> - ); + ); const moveUp = blockMover.childAt( 0 ); - expect( moveUp.prop( 'onClick' ) ).to.equal( onMoveUp ); + expect( moveUp.prop( 'onClick' ) ).toBe( onMoveUp ); } ); it( 'should render the down arrow with a onMoveDown callback', () => { @@ -60,9 +59,9 @@ describe( 'BlockMover', () => { blockType={ blockType } onMoveDown={ onMoveDown } firstIndex={ 0 } /> - ); + ); const moveDown = blockMover.childAt( 1 ); - expect( moveDown.prop( 'onClick' ) ).to.equal( onMoveDown ); + expect( moveDown.prop( 'onClick' ) ).toBe( onMoveDown ); } ); it( 'should render with a disabled up arrown when the block isFirst', () => { @@ -73,9 +72,9 @@ describe( 'BlockMover', () => { onMoveUp={ onMoveUp } isFirst firstIndex={ 0 } /> - ); + ); const moveUp = blockMover.childAt( 0 ); - expect( moveUp.props() ).to.include( { + expect( moveUp.props() ).toMatchObject( { onClick: null, 'aria-disabled': true, } ); @@ -89,9 +88,9 @@ describe( 'BlockMover', () => { onMoveDown={ onMoveDown } isLast firstIndex={ 0 } /> - ); + ); const moveDown = blockMover.childAt( 1 ); - expect( moveDown.props() ).to.include( { + expect( moveDown.props() ).toMatchObject( { onClick: null, 'aria-disabled': true, } );