From b008a25e241855a88f931c2bd47faae399aa792e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 14 Sep 2021 11:07:27 +0100 Subject: [PATCH 1/4] Initial visibility and functionality tests for toggle --- .../experiments/navigation-editor.test.js | 118 ++++++++++++++++++ 1 file changed, 118 insertions(+) diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 6872ecb490a7a..5e303a3933d2e 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -9,6 +9,11 @@ import { visitAdminPage, } from '@wordpress/e2e-test-utils'; import { addQueryArgs } from '@wordpress/url'; +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import { find } from 'puppeteer-testing-library'; /** * Internal dependencies @@ -590,10 +595,12 @@ describe( 'Navigation editor', () => { } } + // eslint-disable-next-line jest/no-disabled-tests it.skip( 'should not prompt to confirm unsaved changes for the newly selected menu', async () => { await assertIsDirty( false ); } ); + // eslint-disable-next-line jest/no-disabled-tests it.skip( 'should prompt to confirm unsaved changes when menu name is edited', async () => { await page.type( '.edit-navigation-name-editor__text-control input', @@ -603,4 +610,115 @@ describe( 'Navigation editor', () => { await assertIsDirty( true ); } ); } ); + + describe( 'Sidebar inserter', () => { + const initialMenu = { + id: 4, + description: '', + name: 'Main Menu', + slug: 'main-menu', + meta: [], + auto_add: false, + }; + + it( 'disables inserter toggle when Navigation block is in placeholder state', async () => { + await setUpResponseMocking( [ + ...getMenuMocks( { + GET: [ initialMenu ], + POST: initialMenu, + } ), + ...getMenuItemMocks( { GET: [] } ), + ] ); + + await visitNavigationEditor(); + + // Wait for the block to be present. + await expect( { + role: 'document', + name: 'Block: Navigation', + } ).toBeFound(); + + // Check for the placeholder state + await expect( { + role: 'button', + name: 'Start blank', + } ).toBeFound(); + + // Expect the block inserter to be disabled. + await expect( { + name: 'Toggle block inserter', + disabled: true, + role: 'button', + } ).toBeFound(); + } ); + + it( 'enables inserter toggle when Navigation block is in editable state', async () => { + await setUpResponseMocking( [ + ...getMenuMocks( { + GET: [ initialMenu ], + POST: initialMenu, + } ), + ...getMenuItemMocks( { GET: menuItemsFixture } ), + ] ); + + await visitNavigationEditor(); + + // Wait for the block to be present. + await expect( { + role: 'document', + name: 'Block: Navigation', + } ).toBeFound(); + + // Expect the block inserter to be found. + await expect( { + name: 'Toggle block inserter', + role: 'button', + } ).toBeFound(); + + // Work around bug where `find` with `disabled=false` doesn't return anything. + const isEnabled = await page.$eval( + '[aria-label="Toggle block inserter"]', + ( element ) => ! element.disabled + ); + + expect( isEnabled ).toBeTruthy(); + } ); + + it( 'inserter toggle toggles the inserter sidebar open and closed', async () => { + await setUpResponseMocking( [ + ...getMenuMocks( { + GET: [ initialMenu ], + POST: initialMenu, + } ), + ...getMenuItemMocks( { GET: menuItemsFixture } ), + ] ); + + await visitNavigationEditor(); + + // Wait for the block to be present. + await expect( { + role: 'document', + name: 'Block: Navigation', + } ).toBeFound(); + + // Expect inserter sidebar to **not** be in the DOM. + await expect( { + role: 'region', + name: 'Block library', + } ).not.toBeFound(); + + const inserterToggle = await find( { + name: 'Toggle block inserter', + role: 'button', + } ); + + await inserterToggle.click(); + + // Expect the inserter sidebar to be present in the DOM. + await expect( { + role: 'region', + name: 'Block library', + } ).toBeFound(); + } ); + } ); } ); From 0593836de442e8eb9e516734cfb9df5481a12dfe Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 14 Sep 2021 13:12:31 +0100 Subject: [PATCH 2/4] Assert items are inserted at end of Nav block --- .../experiments/navigation-editor.test.js | 95 ++++++++++++++++++- 1 file changed, 94 insertions(+), 1 deletion(-) diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 5e303a3933d2e..a0cb126aa07ce 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -684,7 +684,7 @@ describe( 'Navigation editor', () => { expect( isEnabled ).toBeTruthy(); } ); - it( 'inserter toggle toggles the inserter sidebar open and closed', async () => { + it( 'toggles the inserter sidebar open and closed', async () => { await setUpResponseMocking( [ ...getMenuMocks( { GET: [ initialMenu ], @@ -719,6 +719,99 @@ describe( 'Navigation editor', () => { role: 'region', name: 'Block library', } ).toBeFound(); + + // Expect block search input to be focused. + await expect( { + role: 'searchbox', + name: 'Search for blocks and patterns', + focused: true, + } ).toBeFound(); + } ); + + it( 'inserts items at end of Navigation block by default', async () => { + await setUpResponseMocking( [ + ...getMenuMocks( { + GET: [ initialMenu ], + POST: initialMenu, + } ), + ...getMenuItemMocks( { GET: menuItemsFixture } ), + ...getSearchMocks( { GET: searchFixture } ), + ] ); + + await visitNavigationEditor(); + + // Wait for the block to be present. + await expect( { + role: 'document', + name: 'Block: Navigation', + } ).toBeFound(); + + const inserterToggle = await find( { + name: 'Toggle block inserter', + role: 'button', + } ); + + await inserterToggle.click(); + + // Expect the inserter sidebar to be present in the DOM. + await expect( { + role: 'region', + name: 'Block library', + } ).toBeFound(); + + // Add Custom Link item. + const customLinkOption = await find( { + name: 'Custom Link', + role: 'option', + } ); + + customLinkOption.click(); + + // Expect that inserter is auto-closed. + await expect( { + role: 'region', + name: 'Block library', + } ).not.toBeFound(); + + // Expect to be focused inside the Link UI search input. + await expect( { + role: 'combobox', + name: 'URL', + focused: true, + } ).toBeFound(); + + const itemToSelectTitle = searchFixture[ 0 ].title; + + // Add Custom Link item. + const firstSearchSuggestion = await find( { + role: 'option', + name: `${ itemToSelectTitle } ${ searchFixture[ 0 ].subtype }`, + } ); + + await firstSearchSuggestion.click(); + + // Get the title/label of the last Nav item inside the Nav block. + const lastItemAttributes = await page.evaluate( () => { + const { select } = window.wp.data; + + const { getBlockOrder, getBlocks } = select( + 'core/block-editor' + ); + + const lockedNavigationBlock = getBlockOrder()[ 0 ]; + + const navItemBlocks = getBlocks( lockedNavigationBlock ); + + const { attributes } = navItemBlocks[ + navItemBlocks.length - 1 + ]; + + return attributes; + } ); + + // Check the last item is the one we just inserted + expect( lastItemAttributes.label ).toEqual( itemToSelectTitle ); + expect( lastItemAttributes.isTopLevelLink ).toBeTruthy(); } ); } ); } ); From 350287027e769502a3ee6a6d3c26b1fb0b996c5e Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 14 Sep 2021 13:48:54 +0100 Subject: [PATCH 3/4] Deconstruct in a single go. Co-authored-by: George Mamadashvili --- .../e2e-tests/specs/experiments/navigation-editor.test.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index a0cb126aa07ce..7d13023ac805d 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -792,9 +792,7 @@ describe( 'Navigation editor', () => { // Get the title/label of the last Nav item inside the Nav block. const lastItemAttributes = await page.evaluate( () => { - const { select } = window.wp.data; - - const { getBlockOrder, getBlocks } = select( + const { getBlockOrder, getBlocks } = wp.data.select( 'core/block-editor' ); From 6b619ac8752116f1a979936d6b5cae2eb3dbb2e2 Mon Sep 17 00:00:00 2001 From: Dave Smith Date: Tue, 14 Sep 2021 13:49:47 +0100 Subject: [PATCH 4/4] Make external deps first --- .../specs/experiments/navigation-editor.test.js | 11 ++++++----- 1 file changed, 6 insertions(+), 5 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 7d13023ac805d..c54172b55aeca 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -1,3 +1,9 @@ +/** + * External dependencies + */ +// eslint-disable-next-line no-restricted-imports +import { find } from 'puppeteer-testing-library'; + /** * WordPress dependencies */ @@ -9,11 +15,6 @@ import { visitAdminPage, } from '@wordpress/e2e-test-utils'; import { addQueryArgs } from '@wordpress/url'; -/** - * External dependencies - */ -// eslint-disable-next-line no-restricted-imports -import { find } from 'puppeteer-testing-library'; /** * Internal dependencies