@wordpress/e2e-tests 2.5.0 → 2.5.1

package/specs/experiments/navigation-editor.test.js

@@ -1,12 +1,21 @@
+/**
+ * External dependencies
+ */
+// eslint-disable-next-line no-restricted-imports
+import { find, findAll } from 'puppeteer-testing-library';
+
 /**
  * WordPress dependencies
  */
 import {
 	createJSONResponse,
+	createMenu,
+	deleteAllMenus,
 	pressKeyTimes,
 	pressKeyWithModifier,
 	setUpResponseMocking,
 	visitAdminPage,
+	__experimentalRest as rest,
 } from '@wordpress/e2e-test-utils';
 import { addQueryArgs } from '@wordpress/url';
 
@@ -14,7 +23,7 @@ import { addQueryArgs } from '@wordpress/url';
  * Internal dependencies
  */
 import { useExperimentalFeatures } from '../../experimental-features';
-import menuItemsFixture from './fixtures/menu-items-response-fixture.json';
+import menuItemsFixture from './fixtures/menu-items-request-fixture.json';
 
 const TYPE_NAMES = {
 	post: 'post',
@@ -23,21 +32,6 @@ const TYPE_NAMES = {
 	category: 'category',
 };
 
-const menusFixture = [
-	{
-		name: 'Test Menu 1',
-		slug: 'test-menu-1',
-	},
-	{
-		name: 'Test Menu 2',
-		slug: 'test-menu-2',
-	},
-	{
-		name: 'Test Menu 3',
-		slug: 'test-menu-3',
-	},
-];
-
 const searchFixture = [
 	{
 		id: 300,
@@ -69,15 +63,6 @@ const searchFixture = [
 
 // Matching against variations of the same URL encoded and non-encoded
 // produces the most reliable mocking.
-const REST_MENUS_ROUTES = [
-	'/__experimental/menus',
-	`rest_route=${ encodeURIComponent( '/__experimental/menus' ) }`,
-];
-const REST_MENU_ITEMS_ROUTES = [
-	'/__experimental/menu-items',
-	`rest_route=${ encodeURIComponent( '/__experimental/menu-items' ) }`,
-];
-
 const REST_SEARCH_ROUTES = [
 	'/wp/v2/search',
 	`rest_route=${ encodeURIComponent( '/wp/v2/search' ) }`,
@@ -119,23 +104,6 @@ function getEndpointMocks( matchingRoutes, responsesByMethod ) {
 	}, [] );
 }
 
-function assignMockMenuIds( menus ) {
-	return menus.length
-		? menus.map( ( menu, index ) => ( {
-				...menu,
-				id: index + 1,
-		  } ) )
-		: [];
-}
-
-function getMenuMocks( responsesByMethod ) {
-	return getEndpointMocks( REST_MENUS_ROUTES, responsesByMethod );
-}
-
-function getMenuItemMocks( responsesByMethod ) {
-	return getEndpointMocks( REST_MENU_ITEMS_ROUTES, responsesByMethod );
-}
-
 function getSearchMocks( responsesByMethod ) {
 	return getEndpointMocks( REST_SEARCH_ROUTES, responsesByMethod );
 }
@@ -151,48 +119,81 @@ async function visitNavigationEditor() {
 	await visitAdminPage( '/admin.php', query );
 }
 
+/**
+ * Get a list of the editor's current blocks for use in a snapshot.
+ *
+ * @return {string} Block HTML.
+ */
 async function getSerializedBlocks() {
-	return page.evaluate( () =>
-		wp.blocks.serialize( wp.data.select( 'core/block-editor' ).getBlocks() )
+	const blocks = await page.evaluate( () =>
+		wp.data.select( 'core/block-editor' ).getBlocks()
 	);
+	const safeBlocks = replaceUnstableBlockAttributes( blocks );
+	return page.evaluate(
+		( blocksToSerialize ) => wp.blocks.serialize( blocksToSerialize ),
+		safeBlocks
+	);
+}
+
+/**
+ * Some block attributes contain values that are not stable from test run to
+ * test run and can't be compared with a snapshot. These are typically the
+ * ids of posts or pages that are created prior to each test run. Replace those
+ * values with their types before serializing to a snapshot.
+ *
+ * @param {Array} blocks The array of block data.
+ *
+ * @return {Array} Updated array of block data.
+ */
+function replaceUnstableBlockAttributes( blocks ) {
+	return blocks?.map( ( block ) => {
+		const id = block.attributes.id ? typeof block.attributes.id : undefined;
+		const url = block.attributes.url
+			? typeof block.attributes.url
+			: undefined;
+
+		return {
+			...block,
+			attributes: {
+				...block.attributes,
+				id,
+				url,
+			},
+			innerBlocks: replaceUnstableBlockAttributes( block.innerBlocks ),
+		};
+	} );
+}
+
+async function deleteAllLinkedResources() {
+	[ '/wp/v2/posts', '/wp/v2/pages' ].forEach( async ( path ) => {
+		const items = await rest( { path } );
+
+		for ( const item of items ) {
+			await rest( {
+				method: 'DELETE',
+				path: `${ path }/${ item.id }?force=true`,
+			} );
+		}
+	} );
 }
 
 describe( 'Navigation editor', () => {
 	useExperimentalFeatures( [ '#gutenberg-navigation' ] );
 
+	beforeAll( async () => {
+		await deleteAllMenus();
+		await deleteAllLinkedResources();
+	} );
+
 	afterEach( async () => {
+		await deleteAllMenus();
+		await deleteAllLinkedResources();
 		await setUpResponseMocking( [] );
 	} );
 
 	it( 'allows creation of a menu when there are no current menu items', async () => {
-		const menuPostResponse = {
-			id: 4,
-			description: '',
-			name: 'Main Menu',
-			slug: 'main-menu',
-			meta: [],
-			auto_add: false,
-		};
-
-		// Initially return nothing from the menu and menuItem endpoints
-		await setUpResponseMocking( [
-			...getMenuMocks( { GET: [] } ),
-			...getMenuItemMocks( { GET: [] } ),
-		] );
 		await visitNavigationEditor();
-
-		// Wait for the header to show that no menus are available.
-		await page.waitForXPath( '//h3[.="Create your first menu"]', {
-			visible: true,
-		} );
-
-		// Prepare the menu endpoint for creating a menu.
 		await setUpResponseMocking( [
-			...getMenuMocks( {
-				GET: [ menuPostResponse ],
-				POST: menuPostResponse,
-			} ),
-			...getMenuItemMocks( { GET: [] } ),
 			...getPagesMocks( {
 				GET: [
 					{
@@ -207,6 +208,11 @@ describe( 'Navigation editor', () => {
 			} ),
 		] );
 
+		// Wait for the header to show that no menus are available.
+		await page.waitForXPath( '//h3[.="Create your first menu"]', {
+			visible: true,
+		} );
+
 		await page.keyboard.type( 'Main Menu' );
 		const createMenuButton = await page.waitForXPath(
 			'//button[contains(., "Create menu")]'
@@ -235,37 +241,17 @@ describe( 'Navigation editor', () => {
 	} );
 
 	it( 'allows creation of a menu when there are existing menu items', async () => {
-		const menuPostResponse = {
-			id: 4,
-			description: '',
-			name: 'New Menu',
-			slug: 'new-menu',
-			meta: [],
-			auto_add: false,
-		};
-
-		await setUpResponseMocking( [
-			...getMenuMocks( {
-				GET: assignMockMenuIds( menusFixture ),
-				POST: menuPostResponse,
-			} ),
-			...getMenuItemMocks( { GET: menuItemsFixture } ),
-		] );
+		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
+		await createMenu( { name: 'Test Menu 2' }, menuItemsFixture );
 		await visitNavigationEditor();
 
 		// Wait for the header to show the menu name.
-		await page.waitForXPath( '//h2[contains(., "Editing: Test Menu 1")]', {
+		await page.waitForXPath( '//h2[contains(., "Test Menu 1")]', {
 			visible: true,
 		} );
 
-		// Open up the menu creation dialog and create a new menu.
-		const switchMenuButton = await page.waitForXPath(
-			'//button[.="Switch menu"]'
-		);
-		await switchMenuButton.click();
-
 		const createMenuButton = await page.waitForXPath(
-			'//button[.="Create a new menu"]'
+			'//button[.="New menu"]'
 		);
 		await createMenuButton.click();
 
@@ -274,17 +260,6 @@ describe( 'Navigation editor', () => {
 		);
 		await menuNameInputLabel.click();
 
-		await setUpResponseMocking( [
-			...getMenuMocks( {
-				GET: assignMockMenuIds( [
-					...menusFixture,
-					{ name: 'New menu', slug: 'new-menu' },
-				] ),
-				POST: menuPostResponse,
-			} ),
-			...getMenuItemMocks( { GET: [] } ),
-		] );
-
 		await page.keyboard.type( 'New menu' );
 		await page.keyboard.press( 'Enter' );
 
@@ -297,15 +272,14 @@ describe( 'Navigation editor', () => {
 		expect( await getSerializedBlocks() ).toMatchSnapshot();
 	} );
 
-	it( 'displays the first menu from the REST response when at least one menu exists', async () => {
-		await setUpResponseMocking( [
-			...getMenuMocks( { GET: assignMockMenuIds( menusFixture ) } ),
-			...getMenuItemMocks( { GET: menuItemsFixture } ),
-		] );
+	it( 'displays the first created menu when at least one menu exists', async () => {
+		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
+		await createMenu( { name: 'Test Menu 2' }, menuItemsFixture );
+
 		await visitNavigationEditor();
 
 		// Wait for the header to show the menu name.
-		await page.waitForXPath( '//h2[contains(., "Editing: Test Menu 1")]', {
+		await page.waitForXPath( '//h2[contains(., "Test Menu 1")]', {
 			visible: true,
 		} );
 
@@ -315,16 +289,48 @@ describe( 'Navigation editor', () => {
 		expect( await getSerializedBlocks() ).toMatchSnapshot();
 	} );
 
+	it( 'shows the trailing block appender within the navigation block when no blocks are selected', async () => {
+		// The test requires the presence of existing menus.
+		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
+		await visitNavigationEditor();
+
+		// Wait for at least one block to be present on the page.
+		await page.waitForSelector( '.wp-block' );
+
+		// And for this test to be valid, no blocks should be selected, which
+		// should be the case when the editor loads.
+		const selectedBlocks = await page.$$( '.wp-block.is-selected' );
+		expect( selectedBlocks.length ).toBe( 0 );
+
+		// And when no blocks are selected, the trailing appender is present.
+		const blockListAppender = await page.waitForSelector(
+			'.block-list-appender button[aria-label="Add block"]'
+		);
+		expect( blockListAppender ).toBeTruthy();
+	} );
+
+	it( 'has a disabled undo button when an existing menu is loaded', async () => {
+		// The test requires the presence of existing menus.
+		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
+		await visitNavigationEditor();
+
+		// Wait for at least one block to be present on the page.
+		await page.waitForSelector( '.wp-block' );
+
+		// Check whether there's a disabled undo button.
+		const disabledUndoButton = await page.waitForSelector(
+			'button[aria-label="Undo"][aria-disabled="true"]'
+		);
+		expect( disabledUndoButton ).toBeTruthy();
+	} );
+
 	it( 'shows a submenu when a link is selected and hides it when clicking the editor to deselect it', async () => {
-		await setUpResponseMocking( [
-			...getMenuMocks( { GET: assignMockMenuIds( menusFixture ) } ),
-			...getMenuItemMocks( { GET: menuItemsFixture } ),
-		] );
+		await createMenu( { name: 'Test Menu 1' }, menuItemsFixture );
 		await visitNavigationEditor();
 
-		// Select a link block with nested links in a submenu.
+		// Select a submenu block with nested links in a submenu.
 		const parentLinkXPath =
-			'//div[@aria-label="Block: Custom Link" and contains(.,"WordPress.org")]';
+			'//div[@aria-label="Block: Submenu" and contains(.,"WordPress.org")]';
 		const linkBlock = await page.waitForXPath( parentLinkXPath );
 		await linkBlock.click();
 
@@ -352,8 +358,8 @@ describe( 'Navigation editor', () => {
 	} );
 
 	it( 'displays suggestions when adding a link', async () => {
+		await createMenu( { name: 'Test Menu 1' } );
 		await setUpResponseMocking( [
-			...getMenuMocks( { GET: assignMockMenuIds( menusFixture ) } ),
 			...getSearchMocks( { GET: searchFixture } ),
 		] );
 
@@ -374,11 +380,6 @@ describe( 'Navigation editor', () => {
 		);
 		await appender.click();
 
-		const linkInserterItem = await page.waitForXPath(
-			'//button[@role="option"]//span[.="Custom Link"]'
-		);
-		await linkInserterItem.click();
-
 		await page.waitForSelector( 'input[aria-label="URL"]' );
 
 		// The link suggestions should be searchable.
@@ -409,144 +410,72 @@ describe( 'Navigation editor', () => {
 		const nameEditorSelector = '.edit-navigation-name-editor__text-control';
 		const inputSelector = `${ nameEditorSelector } input`;
 
-		beforeEach( async () => {
-			const menuPostResponse = {
-				id: 4,
-				description: '',
-				name: initialMenuName,
-				slug: 'main-menu',
-				meta: [],
-				auto_add: false,
-			};
-
-			await setUpResponseMocking( [
-				...getMenuMocks( {
-					GET: [ menuPostResponse ],
-					POST: menuPostResponse,
-				} ),
-				...getMenuItemMocks( { GET: [] } ),
-			] );
-
+		it( 'saves menu name changes', async () => {
+			await createMenu( { name: initialMenuName } );
 			await visitNavigationEditor();
 
-			// Wait for the navigation setting sidebar.
-			await page.waitForSelector( '.edit-navigation-sidebar' );
-		} );
-
-		afterEach( async () => {
-			await setUpResponseMocking( [] );
-		} );
-
-		it( 'is displayed in inspector additions', async () => {
-			const nameControl = await page.$( nameEditorSelector );
-			expect( nameControl ).toBeDefined();
-		} );
-
-		it( 'saves menu name upon clicking save button', async () => {
-			const newName = 'newName';
-			const menuPostResponse = {
-				id: 4,
-				description: '',
-				name: newName,
-				slug: 'main-menu',
-				meta: [],
-				auto_add: false,
-			};
-
-			await setUpResponseMocking( [
-				...getMenuMocks( {
-					GET: [ menuPostResponse ],
-					POST: menuPostResponse,
-				} ),
-				...getMenuItemMocks( { GET: [] } ),
-			] );
-
-			// Ensure there is focus.
-			await page.focus( inputSelector );
+			// Rename the menu and save it.
+			const newName = 'New menu';
+			await page.waitForSelector( inputSelector );
+			await page.click( inputSelector );
 			await pressKeyTimes( 'Backspace', initialMenuName.length );
 			await page.keyboard.type( newName );
-
-			const saveButton = await page.$(
-				'.edit-navigation-toolbar__save-button'
-			);
-			await saveButton.click();
+			await page.click( '.edit-navigation-toolbar__save-button' );
 			await page.waitForSelector( '.components-snackbar' );
+			await page.reload();
+
+			// Expect the header to have the new name.
 			const headerSubtitle = await page.waitForSelector(
-				'.edit-navigation-header__subtitle'
+				'.edit-navigation-menu-actions__subtitle'
 			);
-			expect( headerSubtitle ).toBeTruthy();
 			const headerSubtitleText = await headerSubtitle.evaluate(
 				( element ) => element.innerText
 			);
-			expect( headerSubtitleText ).toBe( `Editing: ${ newName }` );
+			expect( headerSubtitleText ).toBe( newName );
 		} );
 
-		it( 'does not save a menu name upon clicking save button when name is empty', async () => {
-			const menuPostResponse = {
-				id: 4,
-				description: '',
-				name: initialMenuName,
-				slug: 'main-menu',
-				meta: [],
-				auto_add: false,
-			};
-
-			await setUpResponseMocking( [
-				...getMenuMocks( {
-					GET: [ menuPostResponse ],
-					POST: menuPostResponse,
-				} ),
-				...getMenuItemMocks( { GET: [] } ),
-			] );
+		// Flaky test, see https://github.com/WordPress/gutenberg/pull/34869#issuecomment-922711557.
+		it.skip( 'does not save a menu name upon clicking save button when name is empty', async () => {
+			await createMenu( { name: initialMenuName } );
+			await visitNavigationEditor();
 
-			// Ensure there is focus.
-			await page.focus( inputSelector );
+			// Try saving a menu with an empty name.
+			await page.waitForSelector( inputSelector );
+			await page.click( inputSelector );
 			await pressKeyTimes( 'Backspace', initialMenuName.length );
-
-			const saveButton = await page.$(
-				'.edit-navigation-toolbar__save-button'
+			await page.click( '.edit-navigation-toolbar__save-button' );
+			const snackbar = await page.waitForSelector(
+				'.components-snackbar',
+				{ visible: true }
 			);
-			await saveButton.click();
-			await page.waitForSelector( '.components-snackbar' );
+			const snackbarText = await snackbar.evaluate(
+				( element ) => element.innerText
+			);
+			expect( snackbarText ).toBe(
+				"Unable to save: 'A name is required for this term.'"
+			);
+			expect( console ).toHaveErrored(
+				'Failed to load resource: the server responded with a status of 500 (Internal Server Error)'
+			);
+			await page.reload();
+
+			// Expect the header to have the old name.
 			const headerSubtitle = await page.waitForSelector(
-				'.edit-navigation-header__subtitle'
+				'.edit-navigation-menu-actions__subtitle'
 			);
-			expect( headerSubtitle ).toBeTruthy();
 			const headerSubtitleText = await headerSubtitle.evaluate(
 				( element ) => element.innerText
 			);
-			expect( headerSubtitleText ).toBe(
-				`Editing: ${ initialMenuName }`
-			);
+			expect( headerSubtitleText ).toBe( initialMenuName );
 		} );
 	} );
 
 	describe( 'Change detections', () => {
 		beforeEach( async () => {
-			const menuPostResponse = {
-				id: 4,
-				description: '',
-				name: 'Main',
-				slug: 'main-menu',
-				meta: [],
-				auto_add: false,
-			};
-
-			await setUpResponseMocking( [
-				...getMenuMocks( {
-					GET: [ menuPostResponse ],
-					POST: menuPostResponse,
-				} ),
-				...getMenuItemMocks( { GET: [] } ),
-			] );
-
+			await createMenu( { name: 'Main' } );
 			await visitNavigationEditor();
 		} );
 
-		afterEach( async () => {
-			await setUpResponseMocking( [] );
-		} );
-
 		async function assertIsDirty( isDirty ) {
 			let hadDialog = false;
 
@@ -567,10 +496,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',
@@ -580,4 +511,172 @@ describe( 'Navigation editor', () => {
 			await assertIsDirty( true );
 		} );
 	} );
+
+	describe( 'Sidebar inserter', () => {
+		it( 'disables inserter toggle when Navigation block is in placeholder state', async () => {
+			await createMenu( { name: 'Main Menu' } );
+			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 createMenu( { name: 'Main Menu' }, 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( 'toggles the inserter sidebar open and closed', async () => {
+			await createMenu( { name: 'Main Menu' }, 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();
+
+			// 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( [
+				...getSearchMocks( { GET: searchFixture } ),
+			] );
+			await createMenu( { name: 'Main Menu' }, menuItemsFixture );
+
+			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 [ itemToSelect ] = searchFixture;
+
+			// Add Custom Link item.
+			const [ firstSearchSuggestion ] = await findAll( {
+				role: 'option',
+				name: `${ itemToSelect.title } ${ itemToSelect.subtype }`,
+			} );
+
+			await firstSearchSuggestion.click();
+
+			// Get the title/label of the last Nav item inside the Nav block.
+			const lastItemAttributes = await page.evaluate( () => {
+				const { getBlockOrder, getBlocks } = wp.data.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( itemToSelect.title );
+			expect( lastItemAttributes.isTopLevelLink ).toBeTruthy();
+		} );
+	} );
 } );