Fix navigation editor link search suggestions (#29707)

* Fix navigation editor link search suggestions * Add e2e test * Try improving test robustness * Update button text in test * Make tests pass in CI
WordPress · Mar 11, 2021 · b931043 · b931043
1 parent 79b576b
commit b931043
Show file tree

Hide file tree

Showing 2 changed files with 115 additions and 3 deletions.
diff --git 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
@@ -26,8 +26,10 @@ export function initialize( id, settings ) {
 		__experimentalRegisterExperimentalCoreBlocks();
 	}
 
-	settings.__experimentalFetchLinkSuggestions = () =>
-		fetchLinkSuggestions( settings );
+	settings.__experimentalFetchLinkSuggestions = (
+		searchText,
+		searchOptions
+	) => fetchLinkSuggestions( searchText, searchOptions, settings );
 
 	render(
 		<Layout blockEditorSettings={ settings } />,