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..32d0c221624f30 --- /dev/null +++ b/editor/block-mover/test/index.js @@ -0,0 +1,99 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * Internal dependencies + */ +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( ); + expect( blockMover.hasClass( 'editor-block-mover' ) ).toBe( true ); + + const moveUp = blockMover.childAt( 0 ); + const moveDown = blockMover.childAt( 1 ); + 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() ).toMatchObject( { + 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 moveUp = blockMover.childAt( 0 ); + expect( moveUp.prop( 'onClick' ) ).toBe( 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' ) ).toBe( 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() ).toMatchObject( { + 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() ).toMatchObject( { + onClick: null, + 'aria-disabled': true, + } ); + } ); + } ); +} );