diff --git a/packages/e2e-tests/specs/experiments/navigation-editor.test.js b/packages/e2e-tests/specs/experiments/navigation-editor.test.js index 22edc8474c9ccc..8b700ada66fa53 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,68 @@ 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(); + + // 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 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(); + + const appender = await page.waitForSelector( + 'button[aria-label="Add Link"]' + ); + await appender.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' ); + } + } ); } ); 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( ,