@wordpress/e2e-tests 3.0.9 → 3.1.0

package/specs/editor/various/toolbar-roving-tabindex.test.js

@@ -98,7 +98,7 @@ describe( 'Toolbar roving tabindex', () => {
 	it( 'ensures table block toolbar uses roving tabindex', async () => {
 		await insertBlock( 'Table' );
 		await testBlockToolbarKeyboardNavigation( 'Block: Table', 'Table' );
-		// Move focus to the first toolbar item
+		// Move focus to the first toolbar item.
 		await page.keyboard.press( 'Home' );
 		await expectLabelToHaveFocus( 'Table' );
 		await page.click( '.blocks-table__placeholder-button' );

package/specs/editor/various/writing-flow.test.js

@@ -17,7 +17,7 @@ const getActiveBlockName = async () =>
 	);
 
 const addParagraphsAndColumnsDemo = async () => {
-	// Add demo content
+	// Add demo content.
 	await clickBlockAppender();
 	await page.keyboard.type( 'First paragraph' );
 	await page.keyboard.press( 'Enter' );
@@ -45,10 +45,10 @@ const addParagraphsAndColumnsDemo = async () => {
 	await page.keyboard.press( 'Enter' ); // Insert paragraph.
 	await page.keyboard.type( '2nd col' ); // If this text is too long, it may wrap to a new line and cause test failure. That's why we're using "2nd" instead of "Second" here.
 
-	await page.keyboard.press( 'Escape' ); // Enter navigation mode
-	await page.keyboard.press( 'ArrowLeft' ); // move to the column block
-	await page.keyboard.press( 'ArrowLeft' ); // move to the columns block
-	await page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected
+	await page.keyboard.press( 'Escape' ); // Enter navigation mode.
+	await page.keyboard.press( 'ArrowLeft' ); // Move to the column block.
+	await page.keyboard.press( 'ArrowLeft' ); // Move to the columns block.
+	await page.keyboard.press( 'Enter' ); // Enter edit mode with the columns block selected.
 	await page.keyboard.press( 'Enter' ); // Creates a paragraph after the columns block.
 	await page.keyboard.type( 'Second paragraph' );
 };
@@ -69,10 +69,10 @@ describe( 'Writing Flow', () => {
 		// See: https://github.com/WordPress/gutenberg/issues/18928
 		let activeElementText, activeBlockName;
 
-		// Add demo content
+		// Add demo content.
 		await addParagraphsAndColumnsDemo();
 
-		// Arrow up into nested context focuses last text input
+		// Arrow up into nested context focuses last text input.
 		await page.keyboard.press( 'ArrowUp' );
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( 'core/paragraph' );
@@ -111,41 +111,41 @@ describe( 'Writing Flow', () => {
 		// In navigation mode the active element is the block name button, so we can't easily check the block content.
 		let activeBlockName;
 
-		// Add demo content
+		// Add demo content.
 		await addParagraphsAndColumnsDemo();
 
-		// Switch to navigation mode
+		// Switch to navigation mode.
 		await page.keyboard.press( 'Escape' );
-		// Arrow up to Columns block
+		// Arrow up to Columns block.
 		await page.keyboard.press( 'ArrowUp' );
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( 'core/columns' );
-		// Arrow right into Column block
+		// Arrow right into Column block.
 		await page.keyboard.press( 'ArrowRight' );
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( 'core/column' );
-		// Arrow down to reach second Column block
+		// Arrow down to reach second Column block.
 		await page.keyboard.press( 'ArrowDown' );
-		// Arrow right again into Paragraph block
+		// Arrow right again into Paragraph block.
 		await page.keyboard.press( 'ArrowRight' );
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( 'core/paragraph' );
-		// Arrow left back to Column block
+		// Arrow left back to Column block.
 		await page.keyboard.press( 'ArrowLeft' );
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( 'core/column' );
-		// Arrow left back to Columns block
+		// Arrow left back to Columns block.
 		await page.keyboard.press( 'ArrowLeft' );
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( 'core/columns' );
-		// Arrow up to first paragraph
+		// Arrow up to first paragraph.
 		await page.keyboard.press( 'ArrowUp' );
 		activeBlockName = await getActiveBlockName();
 		expect( activeBlockName ).toBe( 'core/paragraph' );
 	} );
 
 	it( 'should navigate around inline boundaries', async () => {
-		// Add demo content
+		// Add demo content.
 		await clickBlockAppender();
 		await page.keyboard.type( 'First' );
 		await page.keyboard.press( 'Enter' );
@@ -153,10 +153,10 @@ describe( 'Writing Flow', () => {
 		await page.keyboard.press( 'Enter' );
 		await page.keyboard.type( 'Third' );
 
-		// Navigate to second paragraph
+		// Navigate to second paragraph.
 		await pressKeyTimes( 'ArrowLeft', 6 );
 
-		// Bold second paragraph text
+		// Bold second paragraph text.
 		await page.keyboard.down( 'Shift' );
 		await pressKeyTimes( 'ArrowLeft', 6 );
 		await page.keyboard.up( 'Shift' );
@@ -195,7 +195,7 @@ describe( 'Writing Flow', () => {
 		await page.keyboard.type( 'After' );
 
 		// Finally, ensure that ArrowRight from end of unbolded text moves to
-		// the last paragraph
+		// the last paragraph.
 		await page.keyboard.press( 'ArrowRight' );
 		await page.keyboard.type( 'Before' );
 

package/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' ] );
 
@@ -345,7 +367,7 @@ describe.skip( 'Navigation editor', () => {
 		} );
 		expect( submenuLinkVisible ).toBeDefined();
 
-		// click in the top left corner of the canvas.
+		// Click in the top left corner of the canvas.
 		const canvas = await page.$( '.edit-navigation-layout__content-area' );
 		const boundingBox = await canvas.boundingBox();
 		await page.mouse.click( boundingBox.x + 5, boundingBox.y + 5 );
@@ -523,7 +545,7 @@ describe.skip( 'Navigation editor', () => {
 				name: 'Block: Navigation',
 			} ).toBeFound();
 
-			// Check for the placeholder state
+			// Check for the placeholder state.
 			await expect( {
 				role: 'button',
 				name: 'Start blank',
@@ -674,9 +696,152 @@ describe.skip( 'Navigation editor', () => {
 				return attributes;
 			} );
 
-			// Check the last item is the one we just inserted
+			// Check the last item is the one we just inserted.
 			expect( lastItemAttributes.label ).toEqual( itemToSelect.title );
 			expect( lastItemAttributes.isTopLevelLink ).toBeTruthy();
 		} );
 	} );
 } );
+
+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();
+		}
+	);
+} );

package/specs/performance/post-editor.test.js

@@ -96,7 +96,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Loading', async () => {
-		// Measuring loading time
+		// Measuring loading time.
 		let i = 5;
 		while ( i-- ) {
 			await page.reload();
@@ -120,7 +120,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Typing', async () => {
-		// Measuring typing performance
+		// Measuring typing performance.
 		await insertBlock( 'Paragraph' );
 		let i = 20;
 		await page.tracing.start( {
@@ -158,7 +158,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Selecting blocks', async () => {
-		// Measuring block selection performance
+		// Measuring block selection performance.
 		await createNewPost();
 		await page.evaluate( () => {
 			const { createBlock } = window.wp.blocks;
@@ -188,7 +188,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening persistent list view', async () => {
-		// Measure time to open inserter
+		// Measure time to open inserter.
 		await page.waitForSelector( '.edit-post-layout' );
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
@@ -208,7 +208,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Opening the inserter', async () => {
-		// Measure time to open inserter
+		// Measure time to open inserter.
 		await page.waitForSelector( '.edit-post-layout' );
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
@@ -228,7 +228,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Searching the inserter', async () => {
-		// Measure time to search the inserter and get results
+		// Measure time to search the inserter and get results.
 		await openGlobalBlockInserter();
 		for ( let j = 0; j < 10; j++ ) {
 			// Wait for the browser to be idle before starting the monitoring.
@@ -263,7 +263,7 @@ describe( 'Post Editor Performance', () => {
 	} );
 
 	it( 'Hovering Inserter Items', async () => {
-		// Measure inserter hover performance
+		// Measure inserter hover performance.
 		const paragraphBlockItem =
 			'.block-editor-inserter__menu .editor-block-list-item-paragraph';
 		const headingBlockItem =

package/specs/performance/site-editor.test.js

@@ -86,7 +86,7 @@ describe( 'Site Editor Performance', () => {
 
 		let i = 3;
 
-		// Measuring loading time
+		// Measuring loading time.
 		while ( i-- ) {
 			await page.reload();
 			await page.waitForSelector( '.edit-site-visual-editor', {

package/specs/site-editor/document-settings.test.js

@@ -39,13 +39,13 @@ describe( 'Document Settings', () => {
 
 	describe( 'when a template is selected from the navigation sidebar', () => {
 		it( 'should display the selected templates name in the document header', async () => {
-			// Navigate to a template
+			// Navigate to a template.
 			await visitSiteEditor( {
 				postId: 'emptytheme//index',
 				postType: 'wp_template',
 			} );
 
-			// Evaluate the document settings title
+			// Evaluate the document settings title.
 			const actual = await getDocumentSettingsTitle();
 
 			expect( actual ).toEqual( 'Editing template: Index' );
@@ -65,7 +65,7 @@ describe( 'Document Settings', () => {
 					'button[aria-label="Close List View Sidebar"]'
 				);
 
-				// Evaluate the document settings secondary title
+				// Evaluate the document settings secondary title.
 				const actual = await getDocumentSettingsSecondaryTitle();
 
 				expect( actual ).toEqual( 'Editing template part: header' );
@@ -75,13 +75,13 @@ describe( 'Document Settings', () => {
 
 	describe( 'when a template part is selected from the navigation sidebar', () => {
 		it( "should display the selected template part's name in the document header", async () => {
-			// Navigate to a template part
+			// Navigate to a template part.
 			await visitSiteEditor( {
 				postId: 'emptytheme//header',
 				postType: 'wp_template_part',
 			} );
 
-			// Evaluate the document settings title
+			// Evaluate the document settings title.
 			const actual = await getDocumentSettingsTitle();
 
 			expect( actual ).toEqual( 'Editing template part: header' );

package/specs/site-editor/multi-entity-editing.test.js

@@ -53,7 +53,7 @@ const createTemplatePart = async (
 	// Select all of the text in the title field.
 	await pressKeyWithModifier( 'primary', 'a' );
 
-	// Give the reusable block a title
+	// Give the reusable block a title.
 	await page.keyboard.type( templatePartName );
 };
 

package/specs/site-editor/multi-entity-saving.test.js

@@ -98,7 +98,7 @@ describe( 'Multi-entity save flow', () => {
 			await page.keyboard.type( 'Test Post...' );
 			await page.keyboard.press( 'Enter' );
 
-			// Should not trigger multi-entity save button with only post edited
+			// Should not trigger multi-entity save button with only post edited.
 			await assertMultiSaveDisabled();
 
 			// Should only have publish panel a11y button active with only post edited.

package/specs/site-editor/template-part.test.js

@@ -138,23 +138,23 @@ describe( 'Template Part', () => {
 			await insertBlock( 'Paragraph' );
 			await page.keyboard.type( 'Header Template Part 789' );
 
-			// Select the paragraph block
+			// Select the paragraph block.
 			const text = await canvas().waitForXPath(
 				'//p[contains(text(), "Header Template Part 789")]'
 			);
 
-			// Highlight all the text in the paragraph block
+			// Highlight all the text in the paragraph block.
 			await text.click( { clickCount: 3 } );
 
-			// Click the convert to link toolbar button
+			// Click the convert to link toolbar button.
 			await page.waitForSelector( 'button[aria-label="Link"]' );
 			await page.click( 'button[aria-label="Link"]' );
 
-			// Enter url for link
+			// Enter url for link.
 			await page.keyboard.type( 'https://google.com' );
 			await page.keyboard.press( 'Enter' );
 
-			// Verify that there is no error
+			// Verify that there is no error.
 			await canvas().click( 'p[data-type="core/paragraph"] a' );
 			const expectedContent = await canvas().$x(
 				'//p[contains(text(), "Header Template Part 789")]'
@@ -184,7 +184,7 @@ describe( 'Template Part', () => {
 			await page.keyboard.type( 'My template part' );
 			await page.keyboard.press( 'Enter' );
 
-			// Wait for creation to finish
+			// Wait for creation to finish.
 			await page.waitForXPath(
 				'//*[contains(@class, "components-snackbar")]/*[text()="Template part created."]'
 			);
@@ -233,7 +233,7 @@ describe( 'Template Part', () => {
 			await page.keyboard.type( 'My multi  template part' );
 			await page.keyboard.press( 'Enter' );
 
-			// Wait for creation to finish
+			// Wait for creation to finish.
 			await page.waitForXPath(
 				'//*[contains(@class, "components-snackbar")]/*[text()="Template part created."]'
 			);
@@ -250,11 +250,12 @@ describe( 'Template Part', () => {
 				finalTemplateParts.length - initialTemplateParts.length
 			).toBe( 1 );
 		} );
+
 		describe( 'Template part placeholder', () => {
 			// Test constants for template part.
 			const testContent = 'some words...';
 
-			// Selectors
+			// Selectors.
 			const entitiesSaveSelector =
 				'.editor-entities-saved-states__save-button';
 			const savePostSelector = '.edit-site-save-button__button';

package/specs/widgets/customizing-widgets.test.js

@@ -25,16 +25,17 @@ describe( 'Widgets Customizer', () => {
 		await visitAdminPage( 'customize.php' );
 
 		// Disable welcome guide if it is enabled.
-		const isWelcomeGuideActive = await page.evaluate( () =>
-			wp.data
-				.select( 'core/interface' )
-				.isFeatureActive( 'core/customize-widgets', 'welcomeGuide' )
+		const isWelcomeGuideActive = await page.evaluate(
+			() =>
+				!! wp.data
+					.select( 'core/preferences' )
+					.get( 'core/customize-widgets', 'welcomeGuide' )
 		);
 		if ( isWelcomeGuideActive ) {
 			await page.evaluate( () =>
 				wp.data
-					.dispatch( 'core/interface' )
-					.toggleFeature( 'core/customize-widgets', 'welcomeGuide' )
+					.dispatch( 'core/preferences' )
+					.toggle( 'core/customize-widgets', 'welcomeGuide' )
 			);
 		}
 	} );
@@ -784,7 +785,7 @@ describe( 'Widgets Customizer', () => {
 
 		await waitForPreviewIframe();
 
-		// Click Publish
+		// Click Publish.
 		const publishButton = await find( {
 			role: 'button',
 			name: 'Publish',
@@ -797,7 +798,7 @@ describe( 'Widgets Customizer', () => {
 			disabled: true,
 		} );
 
-		// Select the paragraph block
+		// Select the paragraph block.
 		const paragraphBlock = await find( {
 			role: 'document',
 			name: 'Paragraph block',
@@ -824,7 +825,7 @@ describe( 'Widgets Customizer', () => {
 
 		// Now that we've made a change:
 		// (1) Publish button should be active
-		// (2) We should still be in the "Block Settings" area
+		// (2) We should still be in the "Block Settings" area.
 		await find( {
 			role: 'button',
 			name: 'Publish',

package/specs/widgets/editing-widgets.test.js

@@ -31,16 +31,17 @@ describe( 'Widgets screen', () => {
 		await visitWidgetsScreen();
 
 		// Disable welcome guide if it is enabled.
-		const isWelcomeGuideActive = await page.evaluate( () =>
-			wp.data
-				.select( 'core/interface' )
-				.isFeatureActive( 'core/edit-widgets', 'welcomeGuide' )
+		const isWelcomeGuideActive = await page.evaluate(
+			() =>
+				!! wp.data
+					.select( 'core/preferences' )
+					.get( 'core/edit-widgets', 'welcomeGuide' )
 		);
 		if ( isWelcomeGuideActive ) {
 			await page.evaluate( () =>
 				wp.data
-					.dispatch( 'core/interface' )
-					.toggleFeature( 'core/edit-widgets', 'welcomeGuide' )
+					.dispatch( 'core/preferences' )
+					.toggle( 'core/edit-widgets', 'welcomeGuide' )
 			);
 		}
 
@@ -811,7 +812,7 @@ describe( 'Widgets screen', () => {
 		// To do: clicking on the Snackbar causes focus loss.
 		await page.focus( '.block-editor-writing-flow' );
 
-		// Undo block deletion and save again
+		// Undo block deletion and save again.
 		await pressKeyWithModifier( 'primary', 'z' );
 		await saveWidgets();