Add e2e testing for experimental nav menu deletion (#38955)

* add menu deletion e2e tests

* add small viewport tests for menu deletion

* improve XPath for elements in top navigation bar

* simplify implementation of checking for a deleted menu

* increase specifity of the delete menu button xpath

* refactor menu item detection into its own function

* unnest menu deletion tests from the main, currently skipped, `describe`

packages/e2e-tests/specs/experiments/navigation-editor.test.js

@@ -13,6 +13,7 @@ import {
 	deleteAllMenus,
 	pressKeyTimes,
 	pressKeyWithModifier,
+	setBrowserViewport,
 	setUpResponseMocking,
 	visitAdminPage,
 	__experimentalRest as rest,
@@ -177,6 +178,27 @@ async function deleteAllLinkedResources() {
 	} );
 }
 
+async function openMenuActionsDropdown() {
+	const menuActionsDropdown = await page.waitForXPath(
+		'//*[@role="region"][@aria-label="Navigation top bar"]//*[@class="edit-navigation-menu-actions"]//button[@aria-expanded="false"]'
+	);
+	await menuActionsDropdown.click();
+}
+
+async function getMenuItem( menuItemName ) {
+	return await page
+		.waitForXPath(
+			`//*[@role="group"]//*[@role="menuitemradio"]/span[text()="${ menuItemName }"]`
+		)
+		.catch( ( error ) => {
+			if ( error.name !== 'TimeoutError' ) {
+				throw error;
+			} else {
+				return null;
+			}
+		} );
+}
+
 describe.skip( 'Navigation editor', () => {
 	useExperimentalFeatures( [ '#gutenberg-navigation' ] );
 
@@ -680,3 +702,146 @@ describe.skip( 'Navigation editor', () => {
 		} );
 	} );
 } );
+
+describe( 'Delete menu button', () => {
+	useExperimentalFeatures( [ '#gutenberg-navigation' ] );
+
+	beforeAll( async () => {
+		await deleteAllMenus();
+		await deleteAllLinkedResources();
+	} );
+
+	afterEach( async () => {
+		await deleteAllMenus();
+		await deleteAllLinkedResources();
+	} );
+
+	afterEach( async () => {
+		await setBrowserViewport( 'large' );
+	} );
+	it.each( [ 'large', 'small' ] )(
+		`should retain menu when confirmation is canceled and the viewport is %s`,
+		async ( viewport ) => {
+			const menuName = 'Menu delete test';
+			await createMenu( { name: menuName }, menuItemsFixture );
+			await visitNavigationEditor();
+			await setBrowserViewport( viewport );
+			// Wait for the header to show the menu name.
+			await page.waitForXPath(
+				`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
+			);
+
+			if ( viewport === 'small' ) {
+				const openSettingsSidebar = await page.waitForXPath(
+					'//button[@aria-label="Settings"][@aria-expanded="false"]'
+				);
+				await openSettingsSidebar.click();
+			}
+
+			const deleteMenuButton = await page.waitForXPath(
+				'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
+			);
+			await deleteMenuButton.click();
+
+			const cancelButton = await page.waitForXPath(
+				'//*[@role="dialog"]//button[text()="Cancel"]'
+			);
+			await cancelButton.click();
+
+			const menuActionsDropdown = await page.waitForXPath(
+				`//*[contains(@class,"edit-navigation-menu-actions")]//h2[text()="${ menuName }"]`
+			);
+			const currentSelectedMenu = await page.evaluate(
+				( el ) => el.textContent,
+				menuActionsDropdown
+			);
+
+			expect( currentSelectedMenu ).toBe( menuName );
+		}
+	);
+	it.each( [ 'large', 'small' ] )(
+		`should delete menu when confirmation is confirmed and there are no other menus and the viewport is %s`,
+		async ( viewport ) => {
+			const menuName = 'Menu delete test';
+			await createMenu( { name: menuName }, menuItemsFixture );
+			await visitNavigationEditor();
+			await setBrowserViewport( viewport );
+			// Wait for the header to show the menu name.
+			await page.waitForXPath(
+				`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
+			);
+			if ( viewport === 'small' ) {
+				const openSettingsSidebar = await page.waitForXPath(
+					'//button[@aria-label="Settings"][@aria-expanded="false"]'
+				);
+				await openSettingsSidebar.click();
+			}
+
+			const deleteMenuButton = await page.waitForXPath(
+				'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
+			);
+			await deleteMenuButton.click();
+
+			const confirmButton = await page.waitForXPath(
+				'//*[@role="dialog"]//button[text()="OK"]'
+			);
+			await confirmButton.click();
+
+			await page.waitForXPath(
+				`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
+			);
+
+			// If the "Create your first menu" prompt appears, we know there are no remaining menus,
+			// so our test menu must have been deleted successfully.
+			const createFirstMenuPrompt = await page.waitForXPath(
+				'//h3[.="Create your first menu"]',
+				{
+					visible: true,
+				}
+			);
+			const noMenusRemaining = createFirstMenuPrompt ? true : false;
+			expect( noMenusRemaining ).toBe( true );
+		}
+	);
+
+	it.each( [ 'large', 'small' ] )(
+		`should delete menu when confirmation is confirmed and there are other existing menus and the viewport is %s`,
+		async () => {
+			const menuName = 'Menu delete test';
+			await createMenu( { name: menuName }, menuItemsFixture );
+			await createMenu( { name: `${ menuName } 2` }, menuItemsFixture );
+			await visitNavigationEditor();
+			// Wait for the header to show the menu name
+			await page.waitForXPath(
+				`//*[@role="region"][@aria-label="Navigation top bar"]//h2[contains(text(), "${ menuName }")]`
+			);
+
+			// Confirm both test menus are present
+			openMenuActionsDropdown();
+			const firstTestMenuItem = await getMenuItem( menuName );
+			const secondTestMenuItem = await getMenuItem( `${ menuName } 2` );
+
+			expect( firstTestMenuItem ).not.toBeNull();
+			expect( secondTestMenuItem ).not.toBeNull();
+
+			// Delete the first test menu
+			const deleteMenuButton = await page.waitForXPath(
+				'//*[@role="region"][@aria-label="Navigation settings"]//button[text()="Delete menu"]'
+			);
+			await deleteMenuButton.click();
+
+			const confirmButton = await page.waitForXPath(
+				'//*[@role="dialog"]//button[text()="OK"]'
+			);
+			await confirmButton.click();
+
+			await page.waitForXPath(
+				`//*[@role="button"][@aria-label="Dismiss this notice"]//*[text()='"${ menuName }" menu has been deleted']`
+			);
+
+			openMenuActionsDropdown();
+			const deletedTestMenuItem = await getMenuItem( menuName );
+			expect( deletedTestMenuItem ).toBeNull();
+		}
+	);
+} );