From 1be8727ba5d5713793be539787f9f5a86bd15238 Mon Sep 17 00:00:00 2001 From: BE-Webdesign Date: Sun, 3 Dec 2017 10:46:39 -0500 Subject: [PATCH 1/3] Add unit tests for BlockSwitcher component. --- editor/components/block-switcher/index.js | 2 +- .../block-switcher/multi-blocks-switcher.js | 18 +- .../test/__snapshots__/index.js.snap | 16 ++ .../multi-blocks-switcher.js.snap | 12 ++ .../components/block-switcher/test/index.js | 194 ++++++++++++++++++ .../test/multi-blocks-switcher.js | 53 +++++ 6 files changed, 286 insertions(+), 9 deletions(-) create mode 100644 editor/components/block-switcher/test/__snapshots__/index.js.snap create mode 100644 editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap create mode 100644 editor/components/block-switcher/test/index.js create mode 100644 editor/components/block-switcher/test/multi-blocks-switcher.js diff --git a/editor/components/block-switcher/index.js b/editor/components/block-switcher/index.js index add041a644510c..2dabeb6ed44703 100644 --- a/editor/components/block-switcher/index.js +++ b/editor/components/block-switcher/index.js @@ -24,7 +24,7 @@ import { getBlock } from '../../store/selectors'; */ const { DOWN } = keycodes; -function BlockSwitcher( { blocks, onTransform, isLocked } ) { +export function BlockSwitcher( { blocks, onTransform, isLocked } ) { const allowedBlocks = getPossibleBlockTransformations( blocks ); if ( isLocked || ! allowedBlocks.length ) { diff --git a/editor/components/block-switcher/multi-blocks-switcher.js b/editor/components/block-switcher/multi-blocks-switcher.js index 42a7b14f64882d..4add99d087e5fc 100644 --- a/editor/components/block-switcher/multi-blocks-switcher.js +++ b/editor/components/block-switcher/multi-blocks-switcher.js @@ -10,7 +10,7 @@ import './style.scss'; import BlockSwitcher from './'; import { getMultiSelectedBlockUids } from '../../store/selectors'; -function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) { +export function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) { if ( ! isMultiBlockSelection ) { return null; } @@ -19,12 +19,14 @@ function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) { ); } +export const mapStateToProps = ( state ) => { + const selectedBlockUids = getMultiSelectedBlockUids( state ); + return { + isMultiBlockSelection: selectedBlockUids.length > 1, + selectedBlockUids, + }; +}; + export default connect( - ( state ) => { - const selectedBlockUids = getMultiSelectedBlockUids( state ); - return { - isMultiBlockSelection: selectedBlockUids.length > 1, - selectedBlockUids, - }; - } + mapStateToProps )( MultiBlocksSwitcher ); diff --git a/editor/components/block-switcher/test/__snapshots__/index.js.snap b/editor/components/block-switcher/test/__snapshots__/index.js.snap new file mode 100644 index 00000000000000..b1ffcfa4245355 --- /dev/null +++ b/editor/components/block-switcher/test/__snapshots__/index.js.snap @@ -0,0 +1,16 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`BlockSwitcher Test block switcher with blocks 1`] = ` + +`; + +exports[`BlockSwitcher Test block switcher with multi block of different types. 1`] = `""`; + +exports[`BlockSwitcher Test block switcher with multi block of same types. 1`] = `""`; + +exports[`BlockSwitcher Test block switcher without blocks 1`] = `""`; diff --git a/editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap b/editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap new file mode 100644 index 00000000000000..a31485b308251a --- /dev/null +++ b/editor/components/block-switcher/test/__snapshots__/multi-blocks-switcher.js.snap @@ -0,0 +1,12 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`MultiBlocksSwitcher should return a BlockSwitcher element matching the snapshot. 1`] = ` + +`; diff --git a/editor/components/block-switcher/test/index.js b/editor/components/block-switcher/test/index.js new file mode 100644 index 00000000000000..be8f094e493049 --- /dev/null +++ b/editor/components/block-switcher/test/index.js @@ -0,0 +1,194 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + +/** + * WordPress dependencies + */ +import { keycodes } from '@wordpress/utils'; + +/** + * Internal dependencies + */ +import { BlockSwitcher } from '../'; + +const { DOWN } = keycodes; + +describe( 'BlockSwitcher', () => { + test( 'Test block switcher without blocks', () => { + expect( shallow( ) ).toMatchSnapshot(); + } ); + test( 'Test block switcher with blocks', () => { + const block = { + attributes: { + content: [ 'How are you?' ], + nodeName: 'H2', + }, + isValid: true, + name: 'core/heading', + originalContent: '

How are you?

', + uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const blocks = [ + block, + ]; + + expect( shallow( ) ).toMatchSnapshot(); + } ); + + test( 'Test block switcher with multi block of different types.', () => { + const block1 = { + attributes: { + content: [ 'How are you?' ], + nodeName: 'H2', + }, + isValid: true, + name: 'core/heading', + originalContent: '

How are you?

', + uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const block2 = { + attributes: { + content: [ 'I am great!' ], + nodeName: 'P', + }, + isValid: true, + name: 'core/text', + originalContent: '

I am great!

', + uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const blocks = [ + block1, + block2, + ]; + + expect( shallow( ) ).toMatchSnapshot(); + } ); + + test( 'Test block switcher with multi block of same types.', () => { + const block1 = { + attributes: { + content: [ 'How are you?' ], + nodeName: 'H2', + }, + isValid: true, + name: 'core/heading', + originalContent: '

How are you?

', + uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const block2 = { + attributes: { + content: [ 'I am great!' ], + nodeName: 'H3', + }, + isValid: true, + name: 'core/heading', + originalContent: '

I am great!

', + uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const blocks = [ + block1, + block2, + ]; + + expect( shallow( ) ).toMatchSnapshot(); + } ); + + test( 'should have inner components that work as expected.', () => { + const block1 = { + attributes: { + content: [ 'How are you?' ], + nodeName: 'H2', + }, + isValid: true, + name: 'core/heading', + originalContent: '

How are you?

', + uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const blocks = [ + block1, + ]; + + const blockSwitcher = shallow( ); + + expect( blockSwitcher.find( 'Dropdown' ).length ).toBe( 1 ); + + const dropdown = blockSwitcher.find( 'Dropdown' ); + + // Create a stub for the onToggle callback. + let onToggle = jest.fn(); + + const toggleClosed = shallow( dropdown.props().renderToggle( { onToggle, isOpen: false } ) ); + let iconButton = toggleClosed.find( 'IconButton' ); + + let mockKeyDown = { + preventDefault: () => {}, + stopPropagation: () => {}, + keyCode: DOWN, + }; + + iconButton.simulate( 'keydown', mockKeyDown ); + expect( onToggle ).toHaveBeenCalledTimes( 1 ); + + // Create a new onToggle stub. + onToggle = jest.fn(); + + const toggleOpen = shallow( dropdown.props().renderToggle( { onToggle, isOpen: true } ) ); + iconButton = toggleOpen.find( 'IconButton' ); + + mockKeyDown = { + preventDefault: () => {}, + stopPropagation: () => {}, + keyCode: DOWN, + }; + + iconButton.simulate( 'keydown', mockKeyDown ); + expect( onToggle ).toHaveBeenCalledTimes( 0 ); + } ); + + describe( '.renderContent', () => { + test( 'should work as expected', () => { + const block1 = { + attributes: { + content: [ 'How are you?' ], + nodeName: 'H2', + }, + isValid: true, + name: 'core/heading', + originalContent: '

How are you?

', + uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const blocks = [ + block1, + ]; + + const onTransform = jest.fn(); + + const blockSwitcher = shallow( ); + + expect( blockSwitcher.find( 'Dropdown' ).length ).toBe( 1 ); + + const dropdown = blockSwitcher.find( 'Dropdown' ); + + // Create a stub for the onClose callback. + const onClose = jest.fn(); + + const content = shallow( dropdown.props().renderContent( { onClose } ) ); + const iconButtons = content.find( 'IconButton' ); + expect( iconButtons.length ).toBe( 2 ); + + // When clicked the transformation window should close and transform the block. + iconButtons.first().simulate( 'click' ); + expect( onClose ).toHaveBeenCalledTimes( 1 ); + expect( onTransform ).toHaveBeenCalledTimes( 1 ); + } ); + } ); +} ); diff --git a/editor/components/block-switcher/test/multi-blocks-switcher.js b/editor/components/block-switcher/test/multi-blocks-switcher.js new file mode 100644 index 00000000000000..d6a26d491f5296 --- /dev/null +++ b/editor/components/block-switcher/test/multi-blocks-switcher.js @@ -0,0 +1,53 @@ +/** + * Internal dependencies + */ +import { MultiBlocksSwitcher, mapStateToProps } from '../multi-blocks-switcher'; + +describe( 'MultiBlocksSwitcher', () => { + test( 'should return null when the selection is not a multi block selection.', () => { + const isMultiBlockSelection = false; + const selectedBlockUids = [ + 'an-uid', + ]; + + expect( MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) ).toBe( null ); + } ); + + test( 'should return a BlockSwitcher element matching the snapshot.', () => { + const isMultiBlockSelection = true; + const selectedBlockUids = [ + 'an-uid', + 'another-uid', + ]; + + expect( MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) ).toMatchSnapshot(); + } ); + + describe( 'mapStateToProps', () => { + test( 'should return the expected selected block uids and whether there is a multiselection.', () => { + //const isMultiBlockSelection = true; + const start = 'an-uid'; + const end = 'another-uid'; + const selectedBlockUids = [ + start, + end, + ]; + const state = { + editor: { + present: { + blockOrder: selectedBlockUids, + }, + }, + blockSelection: { + start, + end, + }, + }; + const expected = { + isMultiBlockSelection: selectedBlockUids.length > 1, + selectedBlockUids, + }; + expect( mapStateToProps( state ) ).toEqual( expected ); + } ); + } ); +} ); From 55d253a6e717cc626f96a50a741d0ae8914de5cd Mon Sep 17 00:00:00 2001 From: BE-Webdesign Date: Fri, 8 Dec 2017 14:25:26 -0500 Subject: [PATCH 2/3] Refactor BlockSwitcher tests to reduce repetition and increase modularity. --- .../test/__snapshots__/index.js.snap | 6 - .../components/block-switcher/test/index.js | 217 +++++++----------- .../test/multi-blocks-switcher.js | 10 +- 3 files changed, 88 insertions(+), 145 deletions(-) diff --git a/editor/components/block-switcher/test/__snapshots__/index.js.snap b/editor/components/block-switcher/test/__snapshots__/index.js.snap index b1ffcfa4245355..e117ef7d996324 100644 --- a/editor/components/block-switcher/test/__snapshots__/index.js.snap +++ b/editor/components/block-switcher/test/__snapshots__/index.js.snap @@ -8,9 +8,3 @@ exports[`BlockSwitcher Test block switcher with blocks 1`] = ` renderToggle={[Function]} /> `; - -exports[`BlockSwitcher Test block switcher with multi block of different types. 1`] = `""`; - -exports[`BlockSwitcher Test block switcher with multi block of same types. 1`] = `""`; - -exports[`BlockSwitcher Test block switcher without blocks 1`] = `""`; diff --git a/editor/components/block-switcher/test/index.js b/editor/components/block-switcher/test/index.js index be8f094e493049..1a5e81b8c736a5 100644 --- a/editor/components/block-switcher/test/index.js +++ b/editor/components/block-switcher/test/index.js @@ -16,179 +16,130 @@ import { BlockSwitcher } from '../'; const { DOWN } = keycodes; describe( 'BlockSwitcher', () => { + const headingBlock1 = { + attributes: { + content: [ 'How are you?' ], + nodeName: 'H2', + }, + isValid: true, + name: 'core/heading', + originalContent: '

How are you?

', + uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const textBlock = { + attributes: { + content: [ 'I am great!' ], + nodeName: 'P', + }, + isValid: true, + name: 'core/text', + originalContent: '

I am great!

', + uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + + const headingBlock2 = { + attributes: { + content: [ 'I am great!' ], + nodeName: 'H3', + }, + isValid: true, + name: 'core/heading', + originalContent: '

I am great!

', + uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', + }; + test( 'Test block switcher without blocks', () => { - expect( shallow( ) ).toMatchSnapshot(); + expect( shallow( ).html() ).toBeNull(); } ); test( 'Test block switcher with blocks', () => { - const block = { - attributes: { - content: [ 'How are you?' ], - nodeName: 'H2', - }, - isValid: true, - name: 'core/heading', - originalContent: '

How are you?

', - uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', - }; - const blocks = [ - block, + headingBlock1, ]; expect( shallow( ) ).toMatchSnapshot(); } ); test( 'Test block switcher with multi block of different types.', () => { - const block1 = { - attributes: { - content: [ 'How are you?' ], - nodeName: 'H2', - }, - isValid: true, - name: 'core/heading', - originalContent: '

How are you?

', - uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', - }; - - const block2 = { - attributes: { - content: [ 'I am great!' ], - nodeName: 'P', - }, - isValid: true, - name: 'core/text', - originalContent: '

I am great!

', - uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', - }; - const blocks = [ - block1, - block2, + headingBlock1, + textBlock, ]; - expect( shallow( ) ).toMatchSnapshot(); + expect( shallow( ).html() ).toBeNull(); } ); - test( 'Test block switcher with multi block of same types.', () => { - const block1 = { - attributes: { - content: [ 'How are you?' ], - nodeName: 'H2', - }, - isValid: true, - name: 'core/heading', - originalContent: '

How are you?

', - uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', - }; - - const block2 = { - attributes: { - content: [ 'I am great!' ], - nodeName: 'H3', - }, - isValid: true, - name: 'core/heading', - originalContent: '

I am great!

', - uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', - }; - + test( 'should render a component when the multi selected types of blocks match.', () => { const blocks = [ - block1, - block2, + headingBlock1, + headingBlock2, ]; - expect( shallow( ) ).toMatchSnapshot(); + expect( shallow( ).html() ).toBeNull(); } ); - test( 'should have inner components that work as expected.', () => { - const block1 = { - attributes: { - content: [ 'How are you?' ], - nodeName: 'H2', - }, - isValid: true, - name: 'core/heading', - originalContent: '

How are you?

', - uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', - }; - + describe( 'Dropdown', () => { const blocks = [ - block1, + headingBlock1, ]; - const blockSwitcher = shallow( ); - - expect( blockSwitcher.find( 'Dropdown' ).length ).toBe( 1 ); + const onTransform = jest.fn(); + const blockSwitcher = shallow( ); const dropdown = blockSwitcher.find( 'Dropdown' ); - // Create a stub for the onToggle callback. - let onToggle = jest.fn(); - - const toggleClosed = shallow( dropdown.props().renderToggle( { onToggle, isOpen: false } ) ); - let iconButton = toggleClosed.find( 'IconButton' ); - - let mockKeyDown = { - preventDefault: () => {}, - stopPropagation: () => {}, - keyCode: DOWN, - }; - - iconButton.simulate( 'keydown', mockKeyDown ); - expect( onToggle ).toHaveBeenCalledTimes( 1 ); - - // Create a new onToggle stub. - onToggle = jest.fn(); - - const toggleOpen = shallow( dropdown.props().renderToggle( { onToggle, isOpen: true } ) ); - iconButton = toggleOpen.find( 'IconButton' ); - - mockKeyDown = { - preventDefault: () => {}, - stopPropagation: () => {}, - keyCode: DOWN, - }; - - iconButton.simulate( 'keydown', mockKeyDown ); - expect( onToggle ).toHaveBeenCalledTimes( 0 ); - } ); + test( 'should exist', () => { + expect( dropdown.length ).toBe( 1 ); + } ); - describe( '.renderContent', () => { - test( 'should work as expected', () => { - const block1 = { - attributes: { - content: [ 'How are you?' ], - nodeName: 'H2', - }, - isValid: true, - name: 'core/heading', - originalContent: '

How are you?

', - uid: 'a1303fd6-3e60-4fff-a770-0e0ea656c5b9', + describe( '.renderToggle', () => { + // Create a stub for the onToggle callback. + const onToggle = jest.fn(); + const mockKeyDown = { + preventDefault: () => {}, + stopPropagation: () => {}, + keyCode: DOWN, }; - const blocks = [ - block1, - ]; + test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => { + const toggleClosed = shallow( dropdown.props().renderToggle( { onToggle, isOpen: false } ) ); + const iconButtonClosed = toggleClosed.find( 'IconButton' ); - const onTransform = jest.fn(); + iconButtonClosed.simulate( 'keydown', mockKeyDown ); + expect( onToggle ).toHaveBeenCalledTimes( 1 ); - const blockSwitcher = shallow( ); + // Reset onToggle stub. + onToggle.mockClear(); + } ); - expect( blockSwitcher.find( 'Dropdown' ).length ).toBe( 1 ); + test( 'should simulate a click event, which should call onToggle.', () => { + const toggleOpen = shallow( dropdown.props().renderToggle( { onToggle, isOpen: true } ) ); + const iconButtonOpen = toggleOpen.find( 'IconButton' ); - const dropdown = blockSwitcher.find( 'Dropdown' ); + iconButtonOpen.simulate( 'keydown', mockKeyDown ); + expect( onToggle ).toHaveBeenCalledTimes( 0 ); + // Reset onToggle stub. + onToggle.mockClear(); + } ); + } ); + + describe( '.renderContent', () => { // Create a stub for the onClose callback. const onClose = jest.fn(); const content = shallow( dropdown.props().renderContent( { onClose } ) ); const iconButtons = content.find( 'IconButton' ); - expect( iconButtons.length ).toBe( 2 ); - // When clicked the transformation window should close and transform the block. - iconButtons.first().simulate( 'click' ); - expect( onClose ).toHaveBeenCalledTimes( 1 ); - expect( onTransform ).toHaveBeenCalledTimes( 1 ); + test( 'should create the iconButtons for the chosen block. A heading block will have 2', () => { + expect( iconButtons.length ).toBe( 2 ); + } ); + + test( 'should simulate the click event by closing the switcher and causing a block transform on iconButtons.', () => { + iconButtons.first().simulate( 'click' ); + expect( onClose ).toHaveBeenCalledTimes( 1 ); + expect( onTransform ).toHaveBeenCalledTimes( 1 ); + } ); } ); } ); } ); diff --git a/editor/components/block-switcher/test/multi-blocks-switcher.js b/editor/components/block-switcher/test/multi-blocks-switcher.js index d6a26d491f5296..faa8e449dd1340 100644 --- a/editor/components/block-switcher/test/multi-blocks-switcher.js +++ b/editor/components/block-switcher/test/multi-blocks-switcher.js @@ -25,13 +25,9 @@ describe( 'MultiBlocksSwitcher', () => { describe( 'mapStateToProps', () => { test( 'should return the expected selected block uids and whether there is a multiselection.', () => { - //const isMultiBlockSelection = true; const start = 'an-uid'; const end = 'another-uid'; - const selectedBlockUids = [ - start, - end, - ]; + const selectedBlockUids = [ start, end ]; const state = { editor: { present: { @@ -43,10 +39,12 @@ describe( 'MultiBlocksSwitcher', () => { end, }, }; + const expected = { - isMultiBlockSelection: selectedBlockUids.length > 1, + isMultiBlockSelection: true, selectedBlockUids, }; + expect( mapStateToProps( state ) ).toEqual( expected ); } ); } ); From 9d7197db1a86747cc3b64f2e54242ddf89550115 Mon Sep 17 00:00:00 2001 From: Grzegorz Ziolkowski Date: Thu, 8 Mar 2018 10:34:18 +0100 Subject: [PATCH 3/3] Tests: Update block switcher tests to make them up to date --- .../block-switcher/multi-blocks-switcher.js | 16 ++-- .../test/__snapshots__/index.js.snap | 2 +- .../multi-blocks-switcher.js.snap | 3 +- .../components/block-switcher/test/index.js | 89 +++++++++++-------- .../test/multi-blocks-switcher.js | 49 +++++----- 5 files changed, 81 insertions(+), 78 deletions(-) diff --git a/editor/components/block-switcher/multi-blocks-switcher.js b/editor/components/block-switcher/multi-blocks-switcher.js index 4add99d087e5fc..2772aa64baaa35 100644 --- a/editor/components/block-switcher/multi-blocks-switcher.js +++ b/editor/components/block-switcher/multi-blocks-switcher.js @@ -19,14 +19,12 @@ export function MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids ); } -export const mapStateToProps = ( state ) => { - const selectedBlockUids = getMultiSelectedBlockUids( state ); - return { - isMultiBlockSelection: selectedBlockUids.length > 1, - selectedBlockUids, - }; -}; - export default connect( - mapStateToProps + ( state ) => { + const selectedBlockUids = getMultiSelectedBlockUids( state ); + return { + isMultiBlockSelection: selectedBlockUids.length > 1, + selectedBlockUids, + }; + } )( MultiBlocksSwitcher ); diff --git a/editor/components/block-switcher/test/__snapshots__/index.js.snap b/editor/components/block-switcher/test/__snapshots__/index.js.snap index e117ef7d996324..3c19baa2d4fd1f 100644 --- a/editor/components/block-switcher/test/__snapshots__/index.js.snap +++ b/editor/components/block-switcher/test/__snapshots__/index.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`BlockSwitcher Test block switcher with blocks 1`] = ` +exports[`BlockSwitcher should render switcher with blocks 1`] = ` { isValid: true, name: 'core/text', originalContent: '

I am great!

', - uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', + uid: 'b1303fdb-3e60-43faf-a770-2e1ea656c5b8', }; const headingBlock2 = { attributes: { - content: [ 'I am great!' ], + content: [ 'I am the greatest!' ], nodeName: 'H3', }, isValid: true, - name: 'core/heading', - originalContent: '

I am great!

', - uid: 'b1303fd6-3e60-4fff-a770-0e0ea656c5b9', + name: 'core/text', + originalContent: '

I am the greatest!

', + uid: 'c2403fd2-4e63-5ffa-b71c-1e0ea656c5b0', }; - test( 'Test block switcher without blocks', () => { - expect( shallow( ).html() ).toBeNull(); + beforeAll( () => { + registerCoreBlocks(); + } ); + + test( 'should not render block switcher without blocks', () => { + const wrapper = shallow( ); + + expect( wrapper.html() ).toBeNull(); } ); - test( 'Test block switcher with blocks', () => { + + test( 'should render switcher with blocks', () => { const blocks = [ headingBlock1, ]; + const wrapper = shallow( ); - expect( shallow( ) ).toMatchSnapshot(); + expect( wrapper ).toMatchSnapshot(); } ); - test( 'Test block switcher with multi block of different types.', () => { + test( 'should not render block switcher with multi block of different types.', () => { const blocks = [ headingBlock1, textBlock, ]; + const wrapper = shallow( ); - expect( shallow( ).html() ).toBeNull(); + expect( wrapper.html() ).toBeNull(); } ); - test( 'should render a component when the multi selected types of blocks match.', () => { + test( 'should not render a component when the multi selected types of blocks match.', () => { const blocks = [ headingBlock1, headingBlock2, ]; + const wrapper = shallow( ); - expect( shallow( ).html() ).toBeNull(); + expect( wrapper.html() ).toBeNull(); } ); describe( 'Dropdown', () => { @@ -83,62 +94,64 @@ describe( 'BlockSwitcher', () => { headingBlock1, ]; - const onTransform = jest.fn(); - - const blockSwitcher = shallow( ); - const dropdown = blockSwitcher.find( 'Dropdown' ); + const onTransformStub = jest.fn(); + const getDropdown = () => { + const blockSwitcher = shallow( ); + return blockSwitcher.find( 'Dropdown' ); + }; - test( 'should exist', () => { - expect( dropdown.length ).toBe( 1 ); + test( 'should dropdown exist', () => { + expect( getDropdown() ).toHaveLength( 1 ); } ); describe( '.renderToggle', () => { - // Create a stub for the onToggle callback. - const onToggle = jest.fn(); + const onToggleStub = jest.fn(); const mockKeyDown = { preventDefault: () => {}, stopPropagation: () => {}, keyCode: DOWN, }; + afterEach( () => { + onToggleStub.mockReset(); + } ); + test( 'should simulate a keydown event, which should call onToggle and open transform toggle.', () => { - const toggleClosed = shallow( dropdown.props().renderToggle( { onToggle, isOpen: false } ) ); + const toggleClosed = shallow( getDropdown().props().renderToggle( { onToggle: onToggleStub, isOpen: false } ) ); const iconButtonClosed = toggleClosed.find( 'IconButton' ); iconButtonClosed.simulate( 'keydown', mockKeyDown ); - expect( onToggle ).toHaveBeenCalledTimes( 1 ); - // Reset onToggle stub. - onToggle.mockClear(); + expect( onToggleStub ).toHaveBeenCalledTimes( 1 ); } ); test( 'should simulate a click event, which should call onToggle.', () => { - const toggleOpen = shallow( dropdown.props().renderToggle( { onToggle, isOpen: true } ) ); + const toggleOpen = shallow( getDropdown().props().renderToggle( { onToggle: onToggleStub, isOpen: true } ) ); const iconButtonOpen = toggleOpen.find( 'IconButton' ); iconButtonOpen.simulate( 'keydown', mockKeyDown ); - expect( onToggle ).toHaveBeenCalledTimes( 0 ); - // Reset onToggle stub. - onToggle.mockClear(); + expect( onToggleStub ).toHaveBeenCalledTimes( 0 ); } ); } ); describe( '.renderContent', () => { - // Create a stub for the onClose callback. - const onClose = jest.fn(); + const onCloseStub = jest.fn(); - const content = shallow( dropdown.props().renderContent( { onClose } ) ); - const iconButtons = content.find( 'IconButton' ); + const getIconButtons = () => { + const content = shallow( getDropdown().props().renderContent( { onClose: onCloseStub } ) ); + return content.find( 'IconButton' ); + }; - test( 'should create the iconButtons for the chosen block. A heading block will have 2', () => { - expect( iconButtons.length ).toBe( 2 ); + test( 'should create the iconButtons for the chosen block. A heading block will have 3 items', () => { + expect( getIconButtons() ).toHaveLength( 3 ); } ); test( 'should simulate the click event by closing the switcher and causing a block transform on iconButtons.', () => { - iconButtons.first().simulate( 'click' ); - expect( onClose ).toHaveBeenCalledTimes( 1 ); - expect( onTransform ).toHaveBeenCalledTimes( 1 ); + getIconButtons().first().simulate( 'click' ); + + expect( onCloseStub ).toHaveBeenCalledTimes( 1 ); + expect( onTransformStub ).toHaveBeenCalledTimes( 1 ); } ); } ); } ); diff --git a/editor/components/block-switcher/test/multi-blocks-switcher.js b/editor/components/block-switcher/test/multi-blocks-switcher.js index faa8e449dd1340..37935f47788f63 100644 --- a/editor/components/block-switcher/test/multi-blocks-switcher.js +++ b/editor/components/block-switcher/test/multi-blocks-switcher.js @@ -1,7 +1,12 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; + /** * Internal dependencies */ -import { MultiBlocksSwitcher, mapStateToProps } from '../multi-blocks-switcher'; +import { MultiBlocksSwitcher } from '../multi-blocks-switcher'; describe( 'MultiBlocksSwitcher', () => { test( 'should return null when the selection is not a multi block selection.', () => { @@ -9,8 +14,14 @@ describe( 'MultiBlocksSwitcher', () => { const selectedBlockUids = [ 'an-uid', ]; + const wrapper = shallow( + + ); - expect( MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) ).toBe( null ); + expect( wrapper.html() ).toBeNull(); } ); test( 'should return a BlockSwitcher element matching the snapshot.', () => { @@ -19,33 +30,13 @@ describe( 'MultiBlocksSwitcher', () => { 'an-uid', 'another-uid', ]; + const wrapper = shallow( + + ); - expect( MultiBlocksSwitcher( { isMultiBlockSelection, selectedBlockUids } ) ).toMatchSnapshot(); - } ); - - describe( 'mapStateToProps', () => { - test( 'should return the expected selected block uids and whether there is a multiselection.', () => { - const start = 'an-uid'; - const end = 'another-uid'; - const selectedBlockUids = [ start, end ]; - const state = { - editor: { - present: { - blockOrder: selectedBlockUids, - }, - }, - blockSelection: { - start, - end, - }, - }; - - const expected = { - isMultiBlockSelection: true, - selectedBlockUids, - }; - - expect( mapStateToProps( state ) ).toEqual( expected ); - } ); + expect( wrapper ).toMatchSnapshot(); } ); } );