@wordpress/e2e-tests 3.1.0 → 4.0.1

package/specs/editor/blocks/navigation.test.js

@@ -21,12 +21,15 @@ import {
 	openPreviewPage,
 	ensureSidebarOpened,
 	__experimentalRest as rest,
+	__experimentalBatch as batch,
 	publishPost,
 	createUser,
 	loginUser,
 	deleteUser,
 	switchUserToAdmin,
 	clickBlockToolbarButton,
+	openListView,
+	getListViewBlocks,
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -39,6 +42,47 @@ const POSTS_ENDPOINT = '/wp/v2/posts';
 const PAGES_ENDPOINT = '/wp/v2/pages';
 const DRAFT_PAGES_ENDPOINT = [ PAGES_ENDPOINT, { status: 'draft' } ];
 const NAVIGATION_MENUS_ENDPOINT = '/wp/v2/navigation';
+// todo: consolidate with logic found in navigation-editor tests
+// https://github.com/WordPress/gutenberg/blob/trunk/packages/e2e-tests/specs/experiments/navigation-editor.test.js#L71
+const REST_PAGES_ROUTES = [
+	'/wp/v2/pages',
+	`rest_route=${ encodeURIComponent( '/wp/v2/pages' ) }`,
+];
+
+/**
+ * Determines if a given URL matches any of a given collection of
+ * 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.
+ */
+function matchUrlToRoute( reqUrl, routes ) {
+	return routes.some( ( route ) => reqUrl.includes( route ) );
+}
+
+function getEndpointMocks( matchingRoutes, responsesByMethod ) {
+	return [ 'GET', 'POST', 'DELETE', 'PUT' ].reduce( ( mocks, restMethod ) => {
+		if ( responsesByMethod[ restMethod ] ) {
+			return [
+				...mocks,
+				{
+					match: ( request ) =>
+						matchUrlToRoute( request.url(), matchingRoutes ) &&
+						request.method() === restMethod,
+					onRequestMatch: createJSONResponse(
+						responsesByMethod[ restMethod ]
+					),
+				},
+			];
+		}
+
+		return mocks;
+	}, [] );
+}
+
+function getPagesMocks( responsesByMethod ) {
+	return getEndpointMocks( REST_PAGES_ROUTES, responsesByMethod );
+}
 
 async function mockSearchResponse( items ) {
 	const mappedItems = items.map( ( { title, slug }, index ) => ( {
@@ -48,7 +92,6 @@ async function mockSearchResponse( items ) {
 		type: 'post',
 		url: `https://this/is/a/test/search/${ slug }`,
 	} ) );
-
 	await setUpResponseMocking( [
 		{
 			match: ( request ) =>
@@ -56,9 +99,44 @@ async function mockSearchResponse( items ) {
 				request.url().includes( `search` ),
 			onRequestMatch: createJSONResponse( mappedItems ),
 		},
+		...getPagesMocks( {
+			GET: [
+				{
+					type: 'page',
+					id: 1,
+					link: 'https://example.com/1',
+					title: {
+						rendered: 'My page',
+					},
+				},
+			],
+		} ),
 	] );
 }
 
+async function forceSelectNavigationBlock() {
+	const navBlock = await waitForBlock( 'Navigation' );
+
+	if ( ! navBlock ) {
+		return;
+	}
+
+	await page.evaluate( () => {
+		const blocks = wp.data.select( 'core/block-editor' ).getBlocks();
+		const navigationBlock = blocks.find(
+			( block ) => block.name === 'core/navigation'
+		);
+
+		if ( ! navigationBlock ) {
+			return;
+		}
+
+		return wp.data
+			.dispatch( 'core/block-editor' )
+			.selectBlock( navigationBlock?.clientId, 0 );
+	} );
+}
+
 /**
  * Interacts with the LinkControl to perform a search and select a returned suggestion
  *
@@ -144,7 +222,6 @@ async function populateNavWithOneItem() {
 const PLACEHOLDER_ACTIONS_CLASS = 'wp-block-navigation-placeholder__actions';
 const PLACEHOLDER_ACTIONS_XPATH = `//*[contains(@class, '${ PLACEHOLDER_ACTIONS_CLASS }')]`;
 const START_EMPTY_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Start empty']`;
-const SELECT_MENU_XPATH = `${ PLACEHOLDER_ACTIONS_XPATH }//button[text()='Select Menu']`;
 
 /**
  * Delete all items for the given REST resources using the REST API.
@@ -173,6 +250,17 @@ async function deleteAll( endpoints ) {
 	}
 }
 
+async function resetNavBlockToInitialState() {
+	const selectMenuDropdown = await page.waitForSelector(
+		'[aria-label="Select Menu"]'
+	);
+	await selectMenuDropdown.click();
+	const newMenuButton = await page.waitForXPath(
+		'//span[text()="Create new menu"]'
+	);
+	newMenuButton.click();
+}
+
 /**
  * Replace unique ids in nav block content, since these won't be consistent
  * between test runs.
@@ -265,9 +353,17 @@ describe( 'Navigation', () => {
 	} );
 
 	describe( 'loading states', () => {
-		it( 'does not show a loading indicator if there is no ref to a Navigation post', async () => {
+		it( 'does not show a loading indicator if there is no ref to a Navigation post and Nav Menus have loaded', async () => {
 			await createNewPost();
+
+			// Insert an empty block to trigger resolution of Nav Menu items.
+			await insertBlock( 'Navigation' );
+			await waitForBlock( 'Navigation' );
+			await page.waitForXPath( START_EMPTY_XPATH );
+
+			// Now we have Nav Menu items resolved. Continue to assert.
 			await clickOnMoreMenuItem( 'Code editor' );
+
 			const codeEditorInput = await page.waitForSelector(
 				'.editor-post-text-editor'
 			);
@@ -304,17 +400,20 @@ describe( 'Navigation', () => {
 			await setUpResponseMocking( [
 				{
 					match: ( request ) =>
+						request.method() === 'GET' &&
 						request.url().includes( `rest_route` ) &&
 						request.url().includes( `navigation` ) &&
 						request.url().includes( testNavId ),
-					onRequestMatch: () => {
+					onRequestMatch: ( request ) => {
 						// The Promise simulates a REST API request whose resolultion
 						// the test has full control over.
 						return new Promise( ( resolve ) => {
 							// Assign the resolution function to the var in the
 							// upper scope to afford control over resolution.
 							resolveNavigationRequest = resolve;
-						} );
+
+							// Call request.continue() is required to fully resolve the mock.
+						} ).then( () => request.continue() );
 					},
 				},
 			] );
@@ -338,7 +437,9 @@ describe( 'Navigation', () => {
 			await navBlock.waitForSelector( '.components-spinner' );
 
 			// Resolve the controlled mocked API request.
-			resolveNavigationRequest();
+			if ( typeof resolveNavigationRequest === 'function' ) {
+				resolveNavigationRequest();
+			}
 		} );
 
 		it( 'shows a loading indicator whilst empty Navigation menu is being created', async () => {
@@ -355,15 +456,17 @@ describe( 'Navigation', () => {
 					match: ( request ) =>
 						request.url().includes( `rest_route` ) &&
 						request.url().includes( `navigation` ) &&
-						request.url().includes( testNavId ),
-					onRequestMatch: () => {
+						request.url().includes( `${ testNavId }?` ),
+					onRequestMatch: ( request ) => {
 						// The Promise simulates a REST API request whose resolultion
 						// the test has full control over.
 						return new Promise( ( resolve ) => {
 							// Assign the resolution function to the var in the
 							// upper scope to afford control over resolution.
 							resolveNavigationRequest = resolve;
-						} );
+
+							// Call request.continue() is required to fully resolve the mock.
+						} ).then( () => request.continue() );
 					},
 				},
 			] );
@@ -385,7 +488,9 @@ describe( 'Navigation', () => {
 			await navBlock.waitForSelector( '.components-spinner' );
 
 			// Resolve the controlled mocked API request.
-			resolveNavigationRequest();
+			if ( typeof resolveNavigationRequest === 'function' ) {
+				resolveNavigationRequest();
+			}
 		} );
 	} );
 
@@ -433,6 +538,11 @@ describe( 'Navigation', () => {
 				);
 				await startEmptyButton.click();
 
+				// Wait for Navigation creation to complete.
+				await page.waitForXPath(
+					'//*[contains(@class, "components-snackbar")]/*[text()="Navigation Menu successfully created."]'
+				);
+
 				// Wait for block to resolve
 				let navBlock = await waitForBlock( 'Navigation' );
 
@@ -775,50 +885,90 @@ describe( 'Navigation', () => {
 		expect( quickInserter ).toBeTruthy();
 	} );
 
-	it( 'supports navigation blocks that have inner blocks within their markup and converts them to wp_navigation posts', async () => {
-		// Insert 'old-school' inner blocks via the code editor.
-		await createNewPost();
-		await clickOnMoreMenuItem( 'Code editor' );
-		const codeEditorInput = await page.waitForSelector(
-			'.editor-post-text-editor'
-		);
-		await codeEditorInput.click();
-		const markup =
-			'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
-		await page.keyboard.type( markup );
-
-		await clickButton( 'Exit code editor' );
+	describe( 'Creating and restarting', () => {
+		const NAV_ENTITY_SELECTOR =
+			'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
 
-		const navBlock = await waitForBlock( 'Navigation' );
+		it( 'respects the nesting level', async () => {
+			await createNewPost();
 
-		// Select the block to convert to a wp_navigation.
-		await navBlock.click();
+			await insertBlock( 'Navigation' );
 
-		// The Page List block is rendered within Navigation InnerBlocks when saving is complete.
-		await waitForBlock( 'Page List' );
+			const navBlock = await waitForBlock( 'Navigation' );
 
-		await publishPost();
+			// Create empty Navigation block with no items
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+			await startEmptyButton.click();
 
-		// Check that the wp_navigation post has the page list block.
-		expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
-	} );
+			await populateNavWithOneItem();
 
-	describe( 'Creating and restarting', () => {
-		const NAV_ENTITY_SELECTOR =
-			'//div[@class="entities-saved-states__panel"]//label//strong[contains(text(), "Navigation")]';
+			await clickOnMoreMenuItem( 'Code editor' );
+			const codeEditorInput = await page.waitForSelector(
+				'.editor-post-text-editor'
+			);
 
-		async function resetNavBlockToInitialState() {
-			const selectMenuDropdown = await page.waitForSelector(
-				'[aria-label="Select Menu"]'
+			let code = await codeEditorInput.evaluate( ( el ) => el.value );
+			code = code.replace( '} /-->', ',"maxNestingLevel":0} /-->' );
+			await codeEditorInput.evaluate(
+				( el, newCode ) => ( el.value = newCode ),
+				code
 			);
-			await selectMenuDropdown.click();
-			const newMenuButton = await page.waitForXPath(
-				'//span[text()="Create new menu"]'
+			await clickButton( 'Exit code editor' );
+
+			const blockAppender = navBlock.$( '.block-list-appender' );
+
+			expect( blockAppender ).not.toBeNull();
+
+			// Check the Submenu block is no longer present.
+			const navSubmenuSelector =
+				'[aria-label="Editor content"][role="region"] [aria-label="Block: Submenu"]';
+			const submenuBlock = await page.$( navSubmenuSelector );
+
+			expect( submenuBlock ).toBeFalsy();
+		} );
+
+		it( 'retains initial uncontrolled inner blocks whilst there are no modifications to those blocks', async () => {
+			await createNewPost();
+			await clickOnMoreMenuItem( 'Code editor' );
+			const codeEditorInput = await page.waitForSelector(
+				'.editor-post-text-editor'
 			);
-			newMenuButton.click();
-		}
+			await codeEditorInput.click();
+
+			const markup =
+				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
+			await page.keyboard.type( markup );
+			await clickButton( 'Exit code editor' );
+
+			const navBlock = await waitForBlock( 'Navigation' );
 
-		it( 'does not retain uncontrolled inner blocks when creating a new entity', async () => {
+			// Select the block
+			await navBlock.click();
+
+			const hasUncontrolledInnerBlocks = await page.evaluate( () => {
+				const blocks = wp.data
+					.select( 'core/block-editor' )
+					.getBlocks();
+				return !! blocks[ 0 ]?.innerBlocks?.length;
+			} );
+
+			expect( hasUncontrolledInnerBlocks ).toBe( true );
+		} );
+
+		it( 'converts uncontrolled inner blocks to an entity when modifications are made to the blocks', async () => {
+			await rest( {
+				method: 'POST',
+				path: `/wp/v2/pages/`,
+				data: {
+					status: 'publish',
+					title: 'A Test Page',
+					content: 'Hello world',
+				},
+			} );
+
+			// Insert 'old-school' inner blocks via the code editor.
 			await createNewPost();
 			await clickOnMoreMenuItem( 'Code editor' );
 			const codeEditorInput = await page.waitForSelector(
@@ -828,33 +978,52 @@ describe( 'Navigation', () => {
 			const markup =
 				'<!-- wp:navigation --><!-- wp:page-list /--><!-- /wp:navigation -->';
 			await page.keyboard.type( markup );
+
 			await clickButton( 'Exit code editor' );
 
 			const navBlock = await waitForBlock( 'Navigation' );
 
-			// Select the block to convert to a wp_navigation.
 			await navBlock.click();
 
-			// The Page List block is rendered within Navigation InnerBlocks when saving is complete.
-			await waitForBlock( 'Page List' );
+			// Wait for the Page List to have resolved and render as a `<ul>`.
+			await page.waitForSelector(
+				`[aria-label="Editor content"][role="region"] ul[aria-label="Block: Page List"]`
+			);
 
-			// Reset the nav block to create a new entity.
-			await resetNavBlockToInitialState();
+			// Select the Page List block.
+			await openListView();
 
-			const startEmptyButton = await page.waitForXPath(
-				START_EMPTY_XPATH
+			const navExpander = await page.waitForXPath(
+				`//a[span[text()='Navigation']]/span[contains(@class, 'block-editor-list-view__expander')]`
 			);
-			await startEmptyButton.click();
-			await populateNavWithOneItem();
 
-			// Confirm that only the last menu entity was updated.
-			const publishPanelButton2 = await page.waitForSelector(
-				'.editor-post-publish-button__button:not([aria-disabled="true"])'
+			await navExpander.click();
+
+			const pageListBlock = (
+				await getListViewBlocks( 'Page List' )
+			 )[ 0 ];
+
+			await pageListBlock.click();
+
+			// Modify the uncontrolled inner blocks by converting Page List.
+			await clickBlockToolbarButton( 'Edit' );
+
+			// Must wait for button to be enabled.
+			const convertButton = await page.waitForXPath(
+				`//button[not(@disabled) and text()="Convert"]`
 			);
-			await publishPanelButton2.click();
 
-			await page.waitForXPath( NAV_ENTITY_SELECTOR );
-			expect( await page.$x( NAV_ENTITY_SELECTOR ) ).toHaveLength( 1 );
+			await convertButton.click();
+
+			// Wait for new Nav Menu entity to be created as a result of the modification to inner blocks.
+			await page.waitForXPath(
+				`//*[contains(@class, 'components-snackbar__content')][ text()="New Navigation Menu created." ]`
+			);
+
+			await publishPost();
+
+			// Check that the wp_navigation post exists and has the page list block.
+			expect( await getNavigationMenuRawContent() ).toMatchSnapshot();
 		} );
 
 		it( 'only updates a single entity currently linked with the block', async () => {
@@ -887,12 +1056,16 @@ describe( 'Navigation', () => {
 			await publishButton.click();
 
 			// A success notice should show up.
-			await page.waitForSelector( '.components-snackbar' );
+			await page.waitForXPath(
+				`//*[contains(@class, 'components-snackbar__content')][ text()="Post published." ]`
+			);
 
 			// Now try inserting another Link block via the quick inserter.
-			await page.click( 'nav[aria-label="Block: Navigation"]' );
+			// await page.click( 'nav[aria-label="Block: Navigation"]' );
+			await forceSelectNavigationBlock();
 
 			await resetNavBlockToInitialState();
+
 			const startEmptyButton2 = await page.waitForXPath(
 				START_EMPTY_XPATH
 			);
@@ -910,6 +1083,35 @@ describe( 'Navigation', () => {
 		} );
 	} );
 
+	it( 'applies accessible label to block element', async () => {
+		await createNewPost();
+		await insertBlock( 'Navigation' );
+		const startEmptyButton = await page.waitForXPath( START_EMPTY_XPATH );
+		await startEmptyButton.click();
+
+		const appender = await page.waitForSelector(
+			'.wp-block-navigation .block-list-appender'
+		);
+		await appender.click();
+
+		// Add a link to the Link block.
+		await updateActiveNavigationLink( {
+			url: 'https://wordpress.org',
+			label: 'WP',
+			type: 'url',
+		} );
+
+		const previewPage = await openPreviewPage();
+		await previewPage.bringToFront();
+		await previewPage.waitForNetworkIdle();
+
+		const isAccessibleLabelPresent = await previewPage.$(
+			'nav[aria-label="Navigation"]'
+		);
+
+		expect( isAccessibleLabelPresent ).toBeTruthy();
+	} );
+
 	it( 'does not load the frontend script if no navigation blocks are present', async () => {
 		await createNewPost();
 		await insertBlock( 'Paragraph' );
@@ -1083,19 +1285,10 @@ describe( 'Navigation', () => {
 
 			await createNewPost();
 
+			// At this point the block will automatically pick the first Navigation Menu
+			// which will be the one created by the Admin User.
 			await insertBlock( 'Navigation' );
 
-			// Select the Navigation post created by the Admin earlier
-			// in the test.
-			const navigationPostCreatedByAdminName = 'Navigation';
-
-			const dropdown = await page.waitForXPath( SELECT_MENU_XPATH );
-			await dropdown.click();
-			const theOption = await page.waitForXPath(
-				`//*[contains(@class, 'components-menu-item__item')][ text()="${ navigationPostCreatedByAdminName }" ]`
-			);
-			await theOption.click();
-
 			// Make sure the snackbar error shows up.
 			await page.waitForXPath(
 				`//*[contains(@class, 'components-snackbar__content')][ text()="You do not have permission to edit this Menu. Any changes made will not be saved." ]`
@@ -1132,4 +1325,109 @@ describe( 'Navigation', () => {
 			expect( console ).toHaveErrored();
 		} );
 	} );
+
+	describe( 'Initial block insertion state', () => {
+		async function createNavigationMenu( menu = {} ) {
+			return rest( {
+				method: 'POST',
+				path: '/wp/v2/navigation',
+				data: {
+					status: 'publish',
+					...menu,
+				},
+			} );
+		}
+
+		afterEach( async () => {
+			const navMenusEndpoint = '/wp/v2/navigation';
+			const allNavMenus = await rest( { path: navMenusEndpoint } );
+
+			if ( ! allNavMenus?.length ) {
+				return;
+			}
+
+			return batch(
+				allNavMenus.map( ( menu ) => ( {
+					method: 'DELETE',
+					path: `${ navMenusEndpoint }/${ menu.id }?force=true`,
+				} ) )
+			);
+		} );
+
+		it( 'automatically uses the first Navigation Menu if only one is available', async () => {
+			await createNavigationMenu( {
+				title: 'Example Navigation',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
+			} );
+
+			await createNewPost();
+
+			await insertBlock( 'Navigation' );
+
+			await waitForBlock( 'Navigation' );
+
+			const innerLinkBlock = await waitForBlock( 'Custom Link' );
+
+			const linkText = await innerLinkBlock.$eval(
+				'[aria-label="Navigation link text"]',
+				( element ) => {
+					return element.innerText;
+				}
+			);
+
+			expect( linkText ).toBe( 'WordPress' );
+		} );
+
+		it( 'does not automatically use first Navigation Menu if more than one exists', async () => {
+			await createNavigationMenu( {
+				title: 'Example Navigation',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
+			} );
+
+			await createNavigationMenu( {
+				title: 'Second Example Navigation',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
+			} );
+
+			await createNewPost();
+
+			await insertBlock( 'Navigation' );
+
+			await waitForBlock( 'Navigation' );
+
+			await page.waitForXPath( START_EMPTY_XPATH );
+		} );
+
+		it( 'allows users to manually create new empty menu when block has automatically selected the first available Navigation Menu', async () => {
+			await createNavigationMenu( {
+				title: 'Example Navigation',
+				content:
+					'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom","isTopLevelLink":true} /-->',
+			} );
+
+			await createNewPost();
+
+			await insertBlock( 'Navigation' );
+
+			await waitForBlock( 'Navigation' );
+
+			await waitForBlock( 'Custom Link' );
+
+			// Reset the nav block to create a new entity.
+			await resetNavBlockToInitialState();
+
+			const startEmptyButton = await page.waitForXPath(
+				START_EMPTY_XPATH
+			);
+			await startEmptyButton.click();
+
+			// Wait for Navigation creation of empty Navigation to complete.
+			await page.waitForXPath(
+				'//*[contains(@class, "components-snackbar")]/*[text()="Navigation Menu successfully created."]'
+			);
+		} );
+	} );
 } );

package/specs/editor/blocks/query.test.js

@@ -33,9 +33,14 @@ describe( 'Query block', () => {
 	describe( 'Query block insertion', () => {
 		it( 'Carousel', async () => {
 			await insertBlock( 'Query' );
+			// Wait for the choose pattern button
+			const choosePatternButton = await page.waitForSelector(
+				'div[data-type="core/query"] button.is-primary'
+			);
+			await choosePatternButton.click();
 			// Wait for pattern blocks to be loaded.
 			await page.waitForSelector(
-				'.block-editor-block-pattern-setup__container .wp-block-post-title'
+				'.block-editor-block-pattern-setup__container iframe[title="Editor canvas"]'
 			);
 			/**
 			 * Ensure that carousel is working by checking slider css classes
@@ -70,6 +75,11 @@ describe( 'Query block', () => {
 		} );
 		it( 'Grid view', async () => {
 			await insertBlock( 'Query' );
+			// Wait for the choose pattern button
+			const choosePatternButton = await page.waitForSelector(
+				'div[data-type="core/query"] button.is-primary'
+			);
+			await choosePatternButton.click();
 			// Wait for patterns setup to be loaded.
 			await page.waitForSelector(
 				'.block-editor-block-pattern-setup__display-controls'
@@ -80,8 +90,8 @@ describe( 'Query block', () => {
 			);
 			await gridViewButton.click();
 			// Wait for patterns to be loaded and click the wanted pattern.
-			const gridPattern = await page.waitForXPath(
-				'//div[@class="block-editor-block-pattern-setup-list__item-title" and contains(text(), "Query Test 2")]'
+			const gridPattern = await page.waitForSelector(
+				'.block-editor-block-pattern-setup-list__list-item[aria-label="Query Test 2"]'
 			);
 			await gridPattern.click();
 			// Wait for pattern setup to go away.