From eb37e67234e3ccaa2dee1d072a71c95277a85dad Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Wed, 26 Jul 2017 10:25:42 +0100 Subject: [PATCH 01/12] Inserter Menu: Bootstraping a unit test for the inserter menu --- editor/inserter/menu.js | 2 +- editor/inserter/test/menu.js | 144 +++++++++++++++++++++++++++++++++++ 2 files changed, 145 insertions(+), 1 deletion(-) create mode 100644 editor/inserter/test/menu.js diff --git a/editor/inserter/menu.js b/editor/inserter/menu.js index 16837787d8e2ab..c8f990484701f6 100644 --- a/editor/inserter/menu.js +++ b/editor/inserter/menu.js @@ -20,7 +20,7 @@ import './style.scss'; import { getBlocks, getRecentlyUsedBlocks } from '../selectors'; import { showInsertionPoint, hideInsertionPoint } from '../actions'; -class InserterMenu extends Component { +export class InserterMenu extends Component { constructor() { super( ...arguments ); this.nodes = {}; diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js new file mode 100644 index 00000000000000..17679a3d94a809 --- /dev/null +++ b/editor/inserter/test/menu.js @@ -0,0 +1,144 @@ +/** + * External dependencies + */ +import { shallow } from 'enzyme'; +import { noop } from 'lodash'; + +/** + * WordPress dependencies + */ +import { registerBlockType, unregisterBlockType, getBlockTypes } from 'blocks'; + +/** + * Internal dependencies + */ +import { InserterMenu } from '../menu'; + +const textBlock = { + name: 'core/text-block', + title: 'Text', + save: noop, + edit: noop, + category: 'common', +}; + +const advancedTextBlock = { + name: 'core/advanced-text-block', + title: 'Advanced Text', + save: noop, + edit: noop, + category: 'common', +}; + +const moreBlock = { + name: 'core/more-block', + title: 'More', + save: noop, + edit: noop, + category: 'layout', + useOnce: 'true', +}; + +const youtubeBlock = { + name: 'core/youtube-block', + title: 'Youtube', + save: noop, + edit: noop, + category: 'embed', +}; + +describe( 'InserterMenu', () => { + const unregisterAllBlocks = () => { + getBlockTypes().forEach( ( block ) => { + unregisterBlockType( block.name ); + } ); + }; + + afterEach( () => { + unregisterAllBlocks(); + } ); + + beforeEach( () => { + unregisterAllBlocks(); + registerBlockType( textBlock.name, textBlock ); + registerBlockType( advancedTextBlock.name, advancedTextBlock ); + registerBlockType( moreBlock.name, moreBlock ); + registerBlockType( youtubeBlock.name, youtubeBlock ); + } ); + + it( 'Should show the recent tab by default', () => { + const wrapper = shallow( + + ); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( activeCategory.text() ).toBe( 'Recent' ); + expect( visibleBlocks.length ).toBe( 0 ); + } ); + + it( 'Should show the recently used blocks in the recent tab', () => { + const wrapper = shallow( + + ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( visibleBlocks.length ).toBe( 1 ); + expect( visibleBlocks.childAt( 0 ).name() ).toBe( 'BlockIcon' ); + expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Advanced Text' ); + } ); + + it( 'The embed tab should show blocks from the embed category', () => { + const wrapper = shallow( + + ); + const embedTab = wrapper.find( '.editor-inserter__tab' ).filterWhere( ( node ) => node.text() === 'Embeds' ); + embedTab.simulate( 'click' ); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( activeCategory.text() ).toBe( 'Embeds' ); + expect( visibleBlocks.length ).toBe( 1 ); + expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Youtube' ); + } ); + + it( 'The blocks tab should show show all the blocks except the embeds', () => { + const wrapper = shallow( + + ); + const embedTab = wrapper.find( '.editor-inserter__tab' ).filterWhere( ( node ) => node.text() === 'Blocks' ); + embedTab.simulate( 'click' ); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( activeCategory.text() ).toBe( 'Blocks' ); + expect( visibleBlocks.length ).toBe( 3 ); + } ); + + it( 'Should disable the block allowed to be used only once', () => { + const wrapper = shallow( + + ); + const embedTab = wrapper.find( '.editor-inserter__tab' ).filterWhere( ( node ) => node.text() === 'Blocks' ); + embedTab.simulate( 'click' ); + const visibleBlocks = wrapper.find( '.editor-inserter__block[disabled]' ); + expect( visibleBlocks.length ).toBe( 1 ); + expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'More' ); + } ); +} ); From 1fb6a1e3c05bfc3c313854a234fada2a30a01b87 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 13:09:41 +0100 Subject: [PATCH 02/12] Clean up long lines --- editor/inserter/test/menu.js | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 17679a3d94a809..18a0552ba3d306 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -102,7 +102,8 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); - const embedTab = wrapper.find( '.editor-inserter__tab' ).filterWhere( ( node ) => node.text() === 'Embeds' ); + const embedTab = wrapper.find( '.editor-inserter__tab' ) + .filterWhere( ( node ) => node.text() === 'Embeds' ); embedTab.simulate( 'click' ); const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); const visibleBlocks = wrapper.find( '.editor-inserter__block' ); @@ -119,7 +120,8 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); - const embedTab = wrapper.find( '.editor-inserter__tab' ).filterWhere( ( node ) => node.text() === 'Blocks' ); + const embedTab = wrapper.find( '.editor-inserter__tab' ) + .filterWhere( ( node ) => node.text() === 'Blocks' ); embedTab.simulate( 'click' ); const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); const visibleBlocks = wrapper.find( '.editor-inserter__block' ); @@ -135,7 +137,8 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); - const embedTab = wrapper.find( '.editor-inserter__tab' ).filterWhere( ( node ) => node.text() === 'Blocks' ); + const embedTab = wrapper.find( '.editor-inserter__tab' ) + .filterWhere( ( node ) => node.text() === 'Blocks' ); embedTab.simulate( 'click' ); const visibleBlocks = wrapper.find( '.editor-inserter__block[disabled]' ); expect( visibleBlocks.length ).toBe( 1 ); From a08a78c25e29fd856e3438c5514e74e5ede0352e Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 13:13:59 +0100 Subject: [PATCH 03/12] Improve assertion messages --- editor/inserter/test/menu.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 18a0552ba3d306..4b66b834dcca57 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -66,7 +66,7 @@ describe( 'InserterMenu', () => { registerBlockType( youtubeBlock.name, youtubeBlock ); } ); - it( 'Should show the recent tab by default', () => { + it( 'should show the recent tab by default', () => { const wrapper = shallow( { expect( visibleBlocks.length ).toBe( 0 ); } ); - it( 'Should show the recently used blocks in the recent tab', () => { + it( 'should show the recently used blocks in the recent tab', () => { const wrapper = shallow( { expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Advanced Text' ); } ); - it( 'The embed tab should show blocks from the embed category', () => { + it( 'should show blocks from the embed category in the embed tab', () => { const wrapper = shallow( { expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Youtube' ); } ); - it( 'The blocks tab should show show all the blocks except the embeds', () => { + it( 'should show all blocks except embeds in the blocks tab', () => { const wrapper = shallow( { expect( visibleBlocks.length ).toBe( 3 ); } ); - it( 'Should disable the block allowed to be used only once', () => { + it( 'should disable already used blocks with `usedOnce`', () => { const wrapper = shallow( Date: Thu, 27 Jul 2017 13:30:26 +0100 Subject: [PATCH 04/12] Add a snapshot test for searching in the inserter menu --- .../inserter/test/__snapshots__/menu.js.snap | 366 ++++++++++++++++++ editor/inserter/test/menu.js | 24 +- 2 files changed, 389 insertions(+), 1 deletion(-) create mode 100644 editor/inserter/test/__snapshots__/menu.js.snap diff --git a/editor/inserter/test/__snapshots__/menu.js.snap b/editor/inserter/test/__snapshots__/menu.js.snap new file mode 100644 index 00000000000000..0088ac027a6a52 --- /dev/null +++ b/editor/inserter/test/__snapshots__/menu.js.snap @@ -0,0 +1,366 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`InserterMenu should allow searching for blocks 1`] = ` +ShallowWrapper { + "complexSelector": ComplexSelector { + "buildPredicate": [Function], + "childrenOfNode": [Function], + "findWhereUnwrapped": [Function], + }, + "length": 1, + "node": + + +
+
+ +
+ + +
+
+
+, + "nodes": Array [ + + + +
+
+ +
+ + +
+
+
+, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 11, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": InserterMenu { + "_reactInternalInstance": [Circular], + "addRecentBlocks": [Function], + "context": Object {}, + "debouncedSpeakAssertive": [Function], + "filter": [Function], + "getBlocksForCurrentTab": [Function], + "nodes": Object {}, + "onKeyDown": [Function], + "props": Object { + "blocks": Array [], + "instanceId": 1, + "recentlyUsedBlocks": Array [], + }, + "refs": Object {}, + "searchBlocks": [Function], + "setSearchFocus": [Function], + "sortBlocks": [Function], + "state": Object { + "currentFocus": "search", + "filterValue": "text", + "tab": "recent", + }, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 6, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": + + +
+
+ +
+ + +
+
+
+, + "_debugID": 12, + "_renderedOutput": + + +
+
+ +
+ + +
+
+
+, + }, + "_renderedNodeType": 1, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} +`; diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 4b66b834dcca57..d1eae6b271bc81 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -30,6 +30,14 @@ const advancedTextBlock = { category: 'common', }; +const someOtherBlock = { + name: 'core/some-other-block', + title: 'Some Other Block', + save: noop, + edit: noop, + category: 'common', +}; + const moreBlock = { name: 'core/more-block', title: 'More', @@ -62,6 +70,7 @@ describe( 'InserterMenu', () => { unregisterAllBlocks(); registerBlockType( textBlock.name, textBlock ); registerBlockType( advancedTextBlock.name, advancedTextBlock ); + registerBlockType( someOtherBlock.name, someOtherBlock ); registerBlockType( moreBlock.name, moreBlock ); registerBlockType( youtubeBlock.name, youtubeBlock ); } ); @@ -126,7 +135,7 @@ describe( 'InserterMenu', () => { const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( activeCategory.text() ).toBe( 'Blocks' ); - expect( visibleBlocks.length ).toBe( 3 ); + expect( visibleBlocks.length ).toBe( 4 ); } ); it( 'should disable already used blocks with `usedOnce`', () => { @@ -144,4 +153,17 @@ describe( 'InserterMenu', () => { expect( visibleBlocks.length ).toBe( 1 ); expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'More' ); } ); + + it( 'should allow searching for blocks', () => { + const wrapper = shallow( + + ); + wrapper.setState( { filterValue: 'text' } ); + + expect( wrapper ).toMatchSnapshot(); + } ); } ); From fd08a0e58ec40cf454bb3a01d1735d0abb1b6a3f Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 13:33:53 +0100 Subject: [PATCH 05/12] Add and use 'enzyme-to-json' for nicer snapshots --- .../inserter/test/__snapshots__/menu.js.snap | 411 +++--------------- editor/inserter/test/menu.js | 3 +- package.json | 1 + 3 files changed, 57 insertions(+), 358 deletions(-) diff --git a/editor/inserter/test/__snapshots__/menu.js.snap b/editor/inserter/test/__snapshots__/menu.js.snap index 0088ac027a6a52..4ff3709e817968 100644 --- a/editor/inserter/test/__snapshots__/menu.js.snap +++ b/editor/inserter/test/__snapshots__/menu.js.snap @@ -1,366 +1,63 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`InserterMenu should allow searching for blocks 1`] = ` -ShallowWrapper { - "complexSelector": ComplexSelector { - "buildPredicate": [Function], - "childrenOfNode": [Function], - "findWhereUnwrapped": [Function], - }, - "length": 1, - "node": - - -
-
- -
- - -
-
-
-, - "nodes": Array [ - - + +
+
+
-
- -
- - -
-
+ +
-, - ], - "options": Object {}, - "renderer": ReactShallowRenderer { - "_instance": ShallowComponentWrapper { - "_calledComponentWillUnmount": false, - "_compositeType": 0, - "_context": Object {}, - "_currentElement": , - "_debugID": 11, - "_hostContainerInfo": null, - "_hostParent": null, - "_instance": InserterMenu { - "_reactInternalInstance": [Circular], - "addRecentBlocks": [Function], - "context": Object {}, - "debouncedSpeakAssertive": [Function], - "filter": [Function], - "getBlocksForCurrentTab": [Function], - "nodes": Object {}, - "onKeyDown": [Function], - "props": Object { - "blocks": Array [], - "instanceId": 1, - "recentlyUsedBlocks": Array [], - }, - "refs": Object {}, - "searchBlocks": [Function], - "setSearchFocus": [Function], - "sortBlocks": [Function], - "state": Object { - "currentFocus": "search", - "filterValue": "text", - "tab": "recent", - }, - "updater": Object { - "enqueueCallback": [Function], - "enqueueCallbackInternal": [Function], - "enqueueElementInternal": [Function], - "enqueueForceUpdate": [Function], - "enqueueReplaceState": [Function], - "enqueueSetState": [Function], - "isMounted": [Function], - "validateCallback": [Function], - }, - }, - "_mountOrder": 6, - "_pendingCallbacks": null, - "_pendingElement": null, - "_pendingForceUpdate": false, - "_pendingReplaceState": false, - "_pendingStateQueue": null, - "_renderedComponent": NoopInternalComponent { - "_currentElement": - - -
-
- -
- - -
-
-
-, - "_debugID": 12, - "_renderedOutput": - - -
-
- -
- - -
-
-
-, - }, - "_renderedNodeType": 1, - "_rootNodeID": 0, - "_topLevelWrapper": null, - "_updateBatchNumber": null, - "_warnedAboutRefsInRender": false, - }, - "getRenderOutput": [Function], - "render": [Function], - }, - "root": [Circular], - "unrendered": , -} +
+
+ `; diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index d1eae6b271bc81..7343e1b869b5db 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -2,6 +2,7 @@ * External dependencies */ import { shallow } from 'enzyme'; +import enzymeToJson from 'enzyme-to-json'; import { noop } from 'lodash'; /** @@ -164,6 +165,6 @@ describe( 'InserterMenu', () => { ); wrapper.setState( { filterValue: 'text' } ); - expect( wrapper ).toMatchSnapshot(); + expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); } ); diff --git a/package.json b/package.json index 634986b6a4ba90..1a5a4798146be5 100644 --- a/package.json +++ b/package.json @@ -55,6 +55,7 @@ "cross-env": "^3.2.4", "deep-freeze": "0.0.1", "enzyme": "^2.8.2", + "enzyme-to-json": "^1.5.1", "eslint": "^3.17.1", "eslint-config-wordpress": "^1.1.0", "eslint-plugin-jest": "~20.0.3", From dfb98aa9bcb43ddcc4feff21c3a26892cdfa605c Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 13:41:57 +0100 Subject: [PATCH 06/12] Convert other tests to snapshots --- .../inserter/test/__snapshots__/menu.js.snap | 439 ++++++++++++++++++ editor/inserter/test/menu.js | 30 +- 2 files changed, 449 insertions(+), 20 deletions(-) diff --git a/editor/inserter/test/__snapshots__/menu.js.snap b/editor/inserter/test/__snapshots__/menu.js.snap index 4ff3709e817968..74e042ba85429a 100644 --- a/editor/inserter/test/__snapshots__/menu.js.snap +++ b/editor/inserter/test/__snapshots__/menu.js.snap @@ -61,3 +61,442 @@ exports[`InserterMenu should allow searching for blocks 1`] = ` `; + +exports[`InserterMenu should disable already used blocks with \`usedOnce\` 1`] = ` + + + +
+
+ +
+ + + +
+
+
+ +
+ +
+
+
+
+ + + +
+ +`; + +exports[`InserterMenu should show all blocks except embeds in the blocks tab 1`] = ` + + + +
+
+ +
+ + + +
+
+
+ +
+ +
+
+
+
+ + + +
+ +`; + +exports[`InserterMenu should show blocks from the embed category in the embed tab 1`] = ` + + + +
+
+ +
+
+
+ + + +
+ +`; + +exports[`InserterMenu should show the recent tab by default 1`] = ` + + + +
+
+
+
+
+
+ + + +
+ +`; + +exports[`InserterMenu should show the recently used blocks in the recent tab 1`] = ` + + + +
+
+
+ +
+
+
+
+ + + +
+ +`; diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 7343e1b869b5db..9795b9e6c2875e 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -84,10 +84,8 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); - const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block' ); - expect( activeCategory.text() ).toBe( 'Recent' ); - expect( visibleBlocks.length ).toBe( 0 ); + + expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); it( 'should show the recently used blocks in the recent tab', () => { @@ -98,10 +96,8 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [ advancedTextBlock ] } /> ); - const visibleBlocks = wrapper.find( '.editor-inserter__block' ); - expect( visibleBlocks.length ).toBe( 1 ); - expect( visibleBlocks.childAt( 0 ).name() ).toBe( 'BlockIcon' ); - expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Advanced Text' ); + + expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); it( 'should show blocks from the embed category in the embed tab', () => { @@ -115,11 +111,8 @@ describe( 'InserterMenu', () => { const embedTab = wrapper.find( '.editor-inserter__tab' ) .filterWhere( ( node ) => node.text() === 'Embeds' ); embedTab.simulate( 'click' ); - const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block' ); - expect( activeCategory.text() ).toBe( 'Embeds' ); - expect( visibleBlocks.length ).toBe( 1 ); - expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Youtube' ); + + expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); it( 'should show all blocks except embeds in the blocks tab', () => { @@ -133,10 +126,8 @@ describe( 'InserterMenu', () => { const embedTab = wrapper.find( '.editor-inserter__tab' ) .filterWhere( ( node ) => node.text() === 'Blocks' ); embedTab.simulate( 'click' ); - const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block' ); - expect( activeCategory.text() ).toBe( 'Blocks' ); - expect( visibleBlocks.length ).toBe( 4 ); + + expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); it( 'should disable already used blocks with `usedOnce`', () => { @@ -150,9 +141,8 @@ describe( 'InserterMenu', () => { const embedTab = wrapper.find( '.editor-inserter__tab' ) .filterWhere( ( node ) => node.text() === 'Blocks' ); embedTab.simulate( 'click' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block[disabled]' ); - expect( visibleBlocks.length ).toBe( 1 ); - expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'More' ); + + expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); it( 'should allow searching for blocks', () => { From 36aaf5e0c2671f9adbe0e0e7907f81a3210ba2ce Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 13:45:32 +0100 Subject: [PATCH 07/12] Fix variable names --- editor/inserter/test/menu.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 9795b9e6c2875e..985ffcbd6bbfa5 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -123,9 +123,9 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); - const embedTab = wrapper.find( '.editor-inserter__tab' ) + const blocksTab = wrapper.find( '.editor-inserter__tab' ) .filterWhere( ( node ) => node.text() === 'Blocks' ); - embedTab.simulate( 'click' ); + blocksTab.simulate( 'click' ); expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); @@ -138,9 +138,9 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); - const embedTab = wrapper.find( '.editor-inserter__tab' ) + const blocksTab = wrapper.find( '.editor-inserter__tab' ) .filterWhere( ( node ) => node.text() === 'Blocks' ); - embedTab.simulate( 'click' ); + blocksTab.simulate( 'click' ); expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); } ); From c3a287acca1422e8d2f596f5a29e5150a61d4781 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 14:06:37 +0100 Subject: [PATCH 08/12] Revert "Convert other tests to snapshots" This reverts commit 23b2be06ea85bfe711911d5b7572eab0fb4ef623. Conflicts: editor/inserter/test/menu.js --- .../inserter/test/__snapshots__/menu.js.snap | 439 ------------------ editor/inserter/test/menu.js | 28 +- 2 files changed, 20 insertions(+), 447 deletions(-) diff --git a/editor/inserter/test/__snapshots__/menu.js.snap b/editor/inserter/test/__snapshots__/menu.js.snap index 74e042ba85429a..4ff3709e817968 100644 --- a/editor/inserter/test/__snapshots__/menu.js.snap +++ b/editor/inserter/test/__snapshots__/menu.js.snap @@ -61,442 +61,3 @@ exports[`InserterMenu should allow searching for blocks 1`] = `
`; - -exports[`InserterMenu should disable already used blocks with \`usedOnce\` 1`] = ` - - - -
-
- -
- - - -
-
-
- -
- -
-
-
-
- - - -
- -`; - -exports[`InserterMenu should show all blocks except embeds in the blocks tab 1`] = ` - - - -
-
- -
- - - -
-
-
- -
- -
-
-
-
- - - -
- -`; - -exports[`InserterMenu should show blocks from the embed category in the embed tab 1`] = ` - - - -
-
- -
-
-
- - - -
- -`; - -exports[`InserterMenu should show the recent tab by default 1`] = ` - - - -
-
-
-
-
-
- - - -
- -`; - -exports[`InserterMenu should show the recently used blocks in the recent tab 1`] = ` - - - -
-
-
- -
-
-
-
- - - -
- -`; diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 985ffcbd6bbfa5..cb140c306f41c5 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -84,8 +84,10 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); - - expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( activeCategory.text() ).toBe( 'Recent' ); + expect( visibleBlocks.length ).toBe( 0 ); } ); it( 'should show the recently used blocks in the recent tab', () => { @@ -96,8 +98,10 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [ advancedTextBlock ] } /> ); - - expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( visibleBlocks.length ).toBe( 1 ); + expect( visibleBlocks.childAt( 0 ).name() ).toBe( 'BlockIcon' ); + expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Advanced Text' ); } ); it( 'should show blocks from the embed category in the embed tab', () => { @@ -111,8 +115,11 @@ describe( 'InserterMenu', () => { const embedTab = wrapper.find( '.editor-inserter__tab' ) .filterWhere( ( node ) => node.text() === 'Embeds' ); embedTab.simulate( 'click' ); - - expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( activeCategory.text() ).toBe( 'Embeds' ); + expect( visibleBlocks.length ).toBe( 1 ); + expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Youtube' ); } ); it( 'should show all blocks except embeds in the blocks tab', () => { @@ -127,7 +134,10 @@ describe( 'InserterMenu', () => { .filterWhere( ( node ) => node.text() === 'Blocks' ); blocksTab.simulate( 'click' ); - expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( activeCategory.text() ).toBe( 'Blocks' ); + expect( visibleBlocks.length ).toBe( 4 ); } ); it( 'should disable already used blocks with `usedOnce`', () => { @@ -142,7 +152,9 @@ describe( 'InserterMenu', () => { .filterWhere( ( node ) => node.text() === 'Blocks' ); blocksTab.simulate( 'click' ); - expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); + const visibleBlocks = wrapper.find( '.editor-inserter__block[disabled]' ); + expect( visibleBlocks.length ).toBe( 1 ); + expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'More' ); } ); it( 'should allow searching for blocks', () => { From b0d54ca47f561d842cc2d94b355419e64e00de0c Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 14:06:44 +0100 Subject: [PATCH 09/12] Revert "Add and use 'enzyme-to-json' for nicer snapshots" This reverts commit 37d546919981419b108dee4e74586df378f5de89. --- .../inserter/test/__snapshots__/menu.js.snap | 411 +++++++++++++++--- editor/inserter/test/menu.js | 3 +- package.json | 1 - 3 files changed, 358 insertions(+), 57 deletions(-) diff --git a/editor/inserter/test/__snapshots__/menu.js.snap b/editor/inserter/test/__snapshots__/menu.js.snap index 4ff3709e817968..0088ac027a6a52 100644 --- a/editor/inserter/test/__snapshots__/menu.js.snap +++ b/editor/inserter/test/__snapshots__/menu.js.snap @@ -1,63 +1,366 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`InserterMenu should allow searching for blocks 1`] = ` - - - -
-
- + Search blocks + +
- - +
+ +
+ + +
+
-
-
- +, + ], + "options": Object {}, + "renderer": ReactShallowRenderer { + "_instance": ShallowComponentWrapper { + "_calledComponentWillUnmount": false, + "_compositeType": 0, + "_context": Object {}, + "_currentElement": , + "_debugID": 11, + "_hostContainerInfo": null, + "_hostParent": null, + "_instance": InserterMenu { + "_reactInternalInstance": [Circular], + "addRecentBlocks": [Function], + "context": Object {}, + "debouncedSpeakAssertive": [Function], + "filter": [Function], + "getBlocksForCurrentTab": [Function], + "nodes": Object {}, + "onKeyDown": [Function], + "props": Object { + "blocks": Array [], + "instanceId": 1, + "recentlyUsedBlocks": Array [], + }, + "refs": Object {}, + "searchBlocks": [Function], + "setSearchFocus": [Function], + "sortBlocks": [Function], + "state": Object { + "currentFocus": "search", + "filterValue": "text", + "tab": "recent", + }, + "updater": Object { + "enqueueCallback": [Function], + "enqueueCallbackInternal": [Function], + "enqueueElementInternal": [Function], + "enqueueForceUpdate": [Function], + "enqueueReplaceState": [Function], + "enqueueSetState": [Function], + "isMounted": [Function], + "validateCallback": [Function], + }, + }, + "_mountOrder": 6, + "_pendingCallbacks": null, + "_pendingElement": null, + "_pendingForceUpdate": false, + "_pendingReplaceState": false, + "_pendingStateQueue": null, + "_renderedComponent": NoopInternalComponent { + "_currentElement": + + +
+
+ +
+ + +
+
+
+, + "_debugID": 12, + "_renderedOutput": + + +
+
+ +
+ + +
+
+
+, + }, + "_renderedNodeType": 1, + "_rootNodeID": 0, + "_topLevelWrapper": null, + "_updateBatchNumber": null, + "_warnedAboutRefsInRender": false, + }, + "getRenderOutput": [Function], + "render": [Function], + }, + "root": [Circular], + "unrendered": , +} `; diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index cb140c306f41c5..7975b0f9df7023 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -2,7 +2,6 @@ * External dependencies */ import { shallow } from 'enzyme'; -import enzymeToJson from 'enzyme-to-json'; import { noop } from 'lodash'; /** @@ -167,6 +166,6 @@ describe( 'InserterMenu', () => { ); wrapper.setState( { filterValue: 'text' } ); - expect( enzymeToJson( wrapper ) ).toMatchSnapshot(); + expect( wrapper ).toMatchSnapshot(); } ); } ); diff --git a/package.json b/package.json index 1a5a4798146be5..634986b6a4ba90 100644 --- a/package.json +++ b/package.json @@ -55,7 +55,6 @@ "cross-env": "^3.2.4", "deep-freeze": "0.0.1", "enzyme": "^2.8.2", - "enzyme-to-json": "^1.5.1", "eslint": "^3.17.1", "eslint-config-wordpress": "^1.1.0", "eslint-plugin-jest": "~20.0.3", From d66be7839dc6508f860ed26e22b3b1cc2e92055e Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 14:14:04 +0100 Subject: [PATCH 10/12] Don't use a snapshot test for inserter search --- .../inserter/test/__snapshots__/menu.js.snap | 366 ------------------ editor/inserter/test/menu.js | 5 +- 2 files changed, 4 insertions(+), 367 deletions(-) delete mode 100644 editor/inserter/test/__snapshots__/menu.js.snap diff --git a/editor/inserter/test/__snapshots__/menu.js.snap b/editor/inserter/test/__snapshots__/menu.js.snap deleted file mode 100644 index 0088ac027a6a52..00000000000000 --- a/editor/inserter/test/__snapshots__/menu.js.snap +++ /dev/null @@ -1,366 +0,0 @@ -// Jest Snapshot v1, https://goo.gl/fbAQLP - -exports[`InserterMenu should allow searching for blocks 1`] = ` -ShallowWrapper { - "complexSelector": ComplexSelector { - "buildPredicate": [Function], - "childrenOfNode": [Function], - "findWhereUnwrapped": [Function], - }, - "length": 1, - "node": - - -
-
- -
- - -
-
-
-, - "nodes": Array [ - - - -
-
- -
- - -
-
-
-, - ], - "options": Object {}, - "renderer": ReactShallowRenderer { - "_instance": ShallowComponentWrapper { - "_calledComponentWillUnmount": false, - "_compositeType": 0, - "_context": Object {}, - "_currentElement": , - "_debugID": 11, - "_hostContainerInfo": null, - "_hostParent": null, - "_instance": InserterMenu { - "_reactInternalInstance": [Circular], - "addRecentBlocks": [Function], - "context": Object {}, - "debouncedSpeakAssertive": [Function], - "filter": [Function], - "getBlocksForCurrentTab": [Function], - "nodes": Object {}, - "onKeyDown": [Function], - "props": Object { - "blocks": Array [], - "instanceId": 1, - "recentlyUsedBlocks": Array [], - }, - "refs": Object {}, - "searchBlocks": [Function], - "setSearchFocus": [Function], - "sortBlocks": [Function], - "state": Object { - "currentFocus": "search", - "filterValue": "text", - "tab": "recent", - }, - "updater": Object { - "enqueueCallback": [Function], - "enqueueCallbackInternal": [Function], - "enqueueElementInternal": [Function], - "enqueueForceUpdate": [Function], - "enqueueReplaceState": [Function], - "enqueueSetState": [Function], - "isMounted": [Function], - "validateCallback": [Function], - }, - }, - "_mountOrder": 6, - "_pendingCallbacks": null, - "_pendingElement": null, - "_pendingForceUpdate": false, - "_pendingReplaceState": false, - "_pendingStateQueue": null, - "_renderedComponent": NoopInternalComponent { - "_currentElement": - - -
-
- -
- - -
-
-
-, - "_debugID": 12, - "_renderedOutput": - - -
-
- -
- - -
-
-
-, - }, - "_renderedNodeType": 1, - "_rootNodeID": 0, - "_topLevelWrapper": null, - "_updateBatchNumber": null, - "_warnedAboutRefsInRender": false, - }, - "getRenderOutput": [Function], - "render": [Function], - }, - "root": [Circular], - "unrendered": , -} -`; diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 7975b0f9df7023..400cb615ada7d8 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -166,6 +166,9 @@ describe( 'InserterMenu', () => { ); wrapper.setState( { filterValue: 'text' } ); - expect( wrapper ).toMatchSnapshot(); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); + expect( visibleBlocks.length ).toBe( 2 ); + expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Text' ); + expect( visibleBlocks.at( 1 ).childAt( 1 ).text() ).toBe( 'Advanced Text' ); } ); } ); From 3fe2630a6bb2dcbaea98d792a1698bf7fb6b05c4 Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 14:18:43 +0100 Subject: [PATCH 11/12] Always test actual block names; further minor cleanups --- editor/inserter/test/menu.js | 28 +++++++++++++++++++--------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 400cb615ada7d8..77d4ce7fa4735a 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -83,9 +83,11 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [] } /> ); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( activeCategory.text() ).toBe( 'Recent' ); + + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( visibleBlocks.length ).toBe( 0 ); } ); @@ -97,10 +99,11 @@ describe( 'InserterMenu', () => { recentlyUsedBlocks={ [ advancedTextBlock ] } /> ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( visibleBlocks.length ).toBe( 1 ); - expect( visibleBlocks.childAt( 0 ).name() ).toBe( 'BlockIcon' ); - expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Advanced Text' ); + expect( visibleBlocks.at( 0 ).childAt( 0 ).name() ).toBe( 'BlockIcon' ); + expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Advanced Text' ); } ); it( 'should show blocks from the embed category in the embed tab', () => { @@ -114,11 +117,13 @@ describe( 'InserterMenu', () => { const embedTab = wrapper.find( '.editor-inserter__tab' ) .filterWhere( ( node ) => node.text() === 'Embeds' ); embedTab.simulate( 'click' ); + const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( activeCategory.text() ).toBe( 'Embeds' ); + + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( visibleBlocks.length ).toBe( 1 ); - expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'Youtube' ); + expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Youtube' ); } ); it( 'should show all blocks except embeds in the blocks tab', () => { @@ -134,9 +139,14 @@ describe( 'InserterMenu', () => { blocksTab.simulate( 'click' ); const activeCategory = wrapper.find( '.editor-inserter__tab .is-active' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( activeCategory.text() ).toBe( 'Blocks' ); + + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); expect( visibleBlocks.length ).toBe( 4 ); + expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Text' ); + expect( visibleBlocks.at( 1 ).childAt( 1 ).text() ).toBe( 'Advanced Text' ); + expect( visibleBlocks.at( 2 ).childAt( 1 ).text() ).toBe( 'Some Other Block' ); + expect( visibleBlocks.at( 3 ).childAt( 1 ).text() ).toBe( 'More' ); } ); it( 'should disable already used blocks with `usedOnce`', () => { @@ -151,9 +161,9 @@ describe( 'InserterMenu', () => { .filterWhere( ( node ) => node.text() === 'Blocks' ); blocksTab.simulate( 'click' ); - const visibleBlocks = wrapper.find( '.editor-inserter__block[disabled]' ); - expect( visibleBlocks.length ).toBe( 1 ); - expect( visibleBlocks.childAt( 1 ).text() ).toBe( 'More' ); + const disabledBlocks = wrapper.find( '.editor-inserter__block[disabled]' ); + expect( disabledBlocks.length ).toBe( 1 ); + expect( disabledBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'More' ); } ); it( 'should allow searching for blocks', () => { From 6db6f7ddc34253d74a907974ed97966f4f805a5a Mon Sep 17 00:00:00 2001 From: James Nylen Date: Thu, 27 Jul 2017 15:44:26 +0100 Subject: [PATCH 12/12] Verify that search hides tabs and shows blocks from all categories --- editor/inserter/test/menu.js | 24 +++++++++++++++++++----- 1 file changed, 19 insertions(+), 5 deletions(-) diff --git a/editor/inserter/test/menu.js b/editor/inserter/test/menu.js index 77d4ce7fa4735a..224f504a908277 100644 --- a/editor/inserter/test/menu.js +++ b/editor/inserter/test/menu.js @@ -48,8 +48,16 @@ const moreBlock = { }; const youtubeBlock = { - name: 'core/youtube-block', - title: 'Youtube', + name: 'core-embed/youtube', + title: 'YouTube', + save: noop, + edit: noop, + category: 'embed', +}; + +const textEmbedBlock = { + name: 'core-embed/a-text-embed', + title: 'A Text Embed', save: noop, edit: noop, category: 'embed', @@ -73,6 +81,7 @@ describe( 'InserterMenu', () => { registerBlockType( someOtherBlock.name, someOtherBlock ); registerBlockType( moreBlock.name, moreBlock ); registerBlockType( youtubeBlock.name, youtubeBlock ); + registerBlockType( textEmbedBlock.name, textEmbedBlock ); } ); it( 'should show the recent tab by default', () => { @@ -122,8 +131,9 @@ describe( 'InserterMenu', () => { expect( activeCategory.text() ).toBe( 'Embeds' ); const visibleBlocks = wrapper.find( '.editor-inserter__block' ); - expect( visibleBlocks.length ).toBe( 1 ); - expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Youtube' ); + expect( visibleBlocks.length ).toBe( 2 ); + expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'YouTube' ); + expect( visibleBlocks.at( 1 ).childAt( 1 ).text() ).toBe( 'A Text Embed' ); } ); it( 'should show all blocks except embeds in the blocks tab', () => { @@ -176,9 +186,13 @@ describe( 'InserterMenu', () => { ); wrapper.setState( { filterValue: 'text' } ); + const tabs = wrapper.find( '.editor-inserter__tab' ); + expect( tabs.length ).toBe( 0 ); + const visibleBlocks = wrapper.find( '.editor-inserter__block' ); - expect( visibleBlocks.length ).toBe( 2 ); + expect( visibleBlocks.length ).toBe( 3 ); expect( visibleBlocks.at( 0 ).childAt( 1 ).text() ).toBe( 'Text' ); expect( visibleBlocks.at( 1 ).childAt( 1 ).text() ).toBe( 'Advanced Text' ); + expect( visibleBlocks.at( 2 ).childAt( 1 ).text() ).toBe( 'A Text Embed' ); } ); } );