From 573c48e502debb1d17ea1bd6d0a737cb15a9fd81 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 10 Mar 2021 17:34:07 +0800 Subject: [PATCH 1/5] Fix navigation editor link search suggestions --- packages/edit-navigation/src/index.js | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/edit-navigation/src/index.js b/packages/edit-navigation/src/index.js index 4744f8b29d6f5e..8421751159f90f 100644 --- a/packages/edit-navigation/src/index.js +++ b/packages/edit-navigation/src/index.js @@ -26,8 +26,10 @@ export function initialize( id, settings ) { __experimentalRegisterExperimentalCoreBlocks(); } - settings.__experimentalFetchLinkSuggestions = () => - fetchLinkSuggestions( settings ); + settings.__experimentalFetchLinkSuggestions = ( + searchText, + searchOptions + ) => fetchLinkSuggestions( searchText, searchOptions, settings ); render( , From 0075b9e1d557ff79c3fa2aa7942a8dbd19f7a10c Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 10 Mar 2021 18:51:33 +0800 Subject: [PATCH 2/5] Add e2e test --- .../experiments/navigation-editor.test.js | 104 +++++++++++++++++- 1 file changed, 103 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 22edc8474c9ccc..a2195a3cbf8028 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -3,6 +3,7 @@ */ import { createJSONResponse, + pressKeyWithModifier, setUpResponseMocking, visitAdminPage, } from '@wordpress/e2e-test-utils'; @@ -14,6 +15,13 @@ import { addQueryArgs } from '@wordpress/url'; import { useExperimentalFeatures } from '../../experimental-features'; import menuItemsFixture from './fixtures/menu-items-response-fixture.json'; +const TYPE_NAMES = { + post: 'post', + page: 'page', + post_tag: 'tag', + category: 'category', +}; + const menusFixture = [ { name: 'Test Menu 1', @@ -29,6 +37,35 @@ const menusFixture = [ }, ]; +const searchFixture = [ + { + id: 300, + title: 'Home', + url: 'https://example.com/home', + type: 'post', + subtype: 'page', + }, + { + id: 301, + title: 'About', + url: 'https://example.com/about', + type: 'post', + subtype: 'page', + }, + { + id: 302, + title: 'Boats', + url: 'https://example.com/?cat=123', + type: 'category', + }, + { + id: 303, + title: 'Faves', + url: 'https://example.com/?tag=456', + type: 'post_tag', + }, +]; + // Matching against variations of the same URL encoded and non-encoded // produces the most reliable mocking. const REST_MENUS_ROUTES = [ @@ -40,9 +77,14 @@ const REST_MENU_ITEMS_ROUTES = [ `rest_route=${ encodeURIComponent( '/__experimental/menu-items' ) }`, ]; +const REST_SEARCH_ROUTES = [ + '/wp/v2/search', + `rest_route=${ encodeURIComponent( '/wp/v2/search' ) }`, +]; + /** * Determines if a given URL matches any of a given collection of - * routes (extressed as substrings). + * routes (expressed as substrings). * * @param {string} reqUrl the full URL to be tested for matches. * @param {Array} routes array of strings to match against the URL. @@ -88,6 +130,10 @@ function getMenuItemMocks( responsesByMethod ) { return getEndpointMocks( REST_MENU_ITEMS_ROUTES, responsesByMethod ); } +function getSearchMocks( responsesByMethod ) { + return getEndpointMocks( REST_SEARCH_ROUTES, responsesByMethod ); +} + async function visitNavigationEditor() { const query = addQueryArgs( '', { page: 'gutenberg-navigation', @@ -282,4 +328,60 @@ describe( 'Navigation editor', () => { } ); expect( submenuLinkHidden ).toBeDefined(); } ); + + it( 'displays suggestions when adding a link', async () => { + await setUpResponseMocking( [ + ...getMenuMocks( { GET: assignMockMenuIds( menusFixture ) } ), + ...getSearchMocks( { GET: searchFixture } ), + ] ); + + await visitNavigationEditor(); + + // Wait for the block to be present and start an empty block. + const navBlock = await page.waitForSelector( + 'div[aria-label="Block: Navigation"]' + ); + await navBlock.click(); + const startEmptyButton = await page.waitForXPath( + '//button[.="Start empty"]' + ); + await startEmptyButton.click(); + + // Add an inner link block. + const appender = await page.waitForSelector( + 'button[aria-label="Add block"]' + ); + await appender.click(); + + // Must be an exact match to the word 'Link' as other + // variations also contain the word 'Link'. + const linkInserterItem = await page.waitForXPath( + '//button[@role="option"]//span[.="Link"]' + ); + await linkInserterItem.click(); + + await page.waitForSelector( 'input[aria-label="URL"]' ); + + // The link suggestions should be searchable. + for ( let i = 0; i < searchFixture.length; i++ ) { + const { title, type, subtype, url } = searchFixture[ i ]; + const expectedURL = url.replace( 'https://', '' ); + const expectedType = TYPE_NAMES[ subtype || type ]; + + await page.keyboard.type( title ); + const suggestionTitle = await page.waitForXPath( + `//button[@role="option"]//span[.="${ title }"]` + ); + const suggestionType = await page.waitForXPath( + `//button[@role="option"]//span[.="${ expectedType }"]` + ); + const suggestionURL = await page.waitForXPath( + `//button[@role="option"]//span[.="${ expectedURL }"]` + ); + expect( suggestionTitle ).toBeTruthy(); + expect( suggestionType ).toBeTruthy(); + expect( suggestionURL ).toBeTruthy(); + await pressKeyWithModifier( 'primary', 'A' ); + } + } ); } ); From 9b3ed2478cefec425fac887df54d71127912fe87 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Wed, 10 Mar 2021 19:23:21 +0800 Subject: [PATCH 3/5] Try improving test robustness --- packages/e2e-tests/specs/experiments/navigation-editor.test.js | 3 ++- 1 file changed, 2 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 a2195a3cbf8028..ab78a8725e5e1d 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -349,7 +349,8 @@ describe( 'Navigation editor', () => { // Add an inner link block. const appender = await page.waitForSelector( - 'button[aria-label="Add block"]' + 'button[aria-label="Add block"]', + { visible: true } ); await appender.click(); From 071b7efe006846aa8f59d635484a20f066636d44 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 11 Mar 2021 06:39:47 +0800 Subject: [PATCH 4/5] Update button text in test --- packages/e2e-tests/specs/experiments/navigation-editor.test.js | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index ab78a8725e5e1d..3fb8cc7be21a87 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -349,8 +349,7 @@ describe( 'Navigation editor', () => { // Add an inner link block. const appender = await page.waitForSelector( - 'button[aria-label="Add block"]', - { visible: true } + 'button[aria-label="Add Link"]' ); await appender.click(); From b17a39eff71340a7a53f9c636725371f96e0dcd1 Mon Sep 17 00:00:00 2001 From: Daniel Richards Date: Thu, 11 Mar 2021 08:59:57 +0800 Subject: [PATCH 5/5] Make tests pass in CI --- .../experiments/navigation-editor.test.js | 22 +++++++++++++------ 1 file changed, 15 insertions(+), 7 deletions(-) diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 3fb8cc7be21a87..8b700ada66fa53 100644 --- a/packages/e2e-tests/specs/experiments/navigation-editor.test.js +++ b/packages/e2e-tests/specs/experiments/navigation-editor.test.js @@ -347,18 +347,26 @@ describe( 'Navigation editor', () => { ); await startEmptyButton.click(); + // NOTE - the following code is commented out. + // In CI the editor doesn't seem to support variations. + // The following code can be re-introduced once that's resolved. // Add an inner link block. - const appender = await page.waitForSelector( - 'button[aria-label="Add Link"]' - ); - await appender.click(); + // const appender = await page.waitForSelector( + // 'button[aria-label="Add block"]' + // ); + // await appender.click(); // Must be an exact match to the word 'Link' as other // variations also contain the word 'Link'. - const linkInserterItem = await page.waitForXPath( - '//button[@role="option"]//span[.="Link"]' + // const linkInserterItem = await page.waitForXPath( + // '//button[@role="option"]//span[.="Link"]' + // ); + // await linkInserterItem.click(); + + const appender = await page.waitForSelector( + 'button[aria-label="Add Link"]' ); - await linkInserterItem.click(); + await appender.click(); await page.waitForSelector( 'input[aria-label="URL"]' );