@wordpress/e2e-tests 4.0.2 → 4.1.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "4.0.2",
+	"version": "4.1.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=12"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^7.2.1",
-		"@wordpress/jest-console": "^5.0.3",
-		"@wordpress/jest-puppeteer-axe": "^4.0.3",
-		"@wordpress/scripts": "^22.4.1",
-		"@wordpress/url": "^3.7.1",
+		"@wordpress/e2e-test-utils": "^7.3.0",
+		"@wordpress/jest-console": "^5.0.2",
+		"@wordpress/jest-puppeteer-axe": "^4.0.2",
+		"@wordpress/scripts": "^22.5.0",
+		"@wordpress/url": "^3.8.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "446565ecaa40370173c18926535e975ec5652b71"
+	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
 }

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

@@ -1429,5 +1429,43 @@ describe( 'Navigation', () => {
 				'//*[contains(@class, "components-snackbar")]/*[text()="Navigation Menu successfully created."]'
 			);
 		} );
+
+		it( 'should always focus select menu button after item selection', async () => {
+			// Create some navigation menus to work with.
+			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} /-->',
+			} );
+
+			// Create new post.
+			await createNewPost();
+
+			// Insert new block and wait for the insert to complete.
+			await insertBlock( 'Navigation' );
+			await waitForBlock( 'Navigation' );
+			await page.waitForXPath( START_EMPTY_XPATH );
+
+			// Change menus via the select menu toolbar button.
+			const selectMenuDropdown = await page.waitForSelector(
+				'[aria-label="Select Menu"]'
+			);
+			await selectMenuDropdown.click();
+			const exampleNavigationOption = await page.waitForXPath(
+				'//span[contains(text(), "Second Example Navigation")]'
+			);
+			await exampleNavigationOption.click();
+
+			// Once the options are closed, does select menu button receive focus?
+			const selectMenuDropdown2 = await page.waitForSelector(
+				'[aria-label="Select Menu"]'
+			);
+			await expect( selectMenuDropdown2 ).toHaveFocus();
+		} );
 	} );
 } );

package/specs/editor/various/inserting-blocks.test.js

@@ -10,7 +10,6 @@ import {
 	pressKeyTimes,
 	searchForBlock,
 	setBrowserViewport,
-	showBlockToolbar,
 	pressKeyWithModifier,
 } from '@wordpress/e2e-test-utils';
 
@@ -170,68 +169,6 @@ describe( 'Inserting blocks', () => {
 		).not.toBeNull();
 	} );
 
-	// Check for regression of https://github.com/WordPress/gutenberg/issues/9583
-	it( 'should not allow transfer of focus outside of the block-insertion menu once open', async () => {
-		// Enter the default block and click the inserter toggle button to the left of it.
-		await page.keyboard.press( 'Enter' );
-		await showBlockToolbar();
-		await page.click(
-			'.block-editor-block-list__empty-block-inserter .block-editor-inserter__toggle'
-		);
-
-		// Expect the inserter search input to be the active element.
-		let activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'components-search-control__input'
-		);
-
-		// Try using the up arrow key (vertical navigation triggers the issue described in #9583).
-		await page.keyboard.press( 'ArrowUp' );
-
-		// Expect the inserter search input to still be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'components-search-control__input'
-		);
-
-		// Tab to the block list.
-		await page.keyboard.press( 'Tab' );
-
-		// Expect the block list to be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-block-types-list__item'
-		);
-
-		// Try using the up arrow key.
-		await page.keyboard.press( 'ArrowUp' );
-
-		// Expect the block list to still be the active element.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-block-types-list__item'
-		);
-
-		// Press escape to close the block inserter.
-		await page.keyboard.press( 'Escape' );
-
-		// Expect focus to have transferred back to the inserter toggle button.
-		activeElementClassList = await page.evaluate(
-			() => document.activeElement.classList
-		);
-		expect( Object.values( activeElementClassList ) ).toContain(
-			'block-editor-inserter__toggle'
-		);
-	} );
-
 	// Check for regression of https://github.com/WordPress/gutenberg/issues/23263
 	it( 'inserts blocks at root level when using the root appender while selection is in an inner block', async () => {
 		await insertBlock( 'Buttons' );
@@ -310,12 +247,11 @@ describe( 'Inserting blocks', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'First paragraph' );
 		await insertBlock( 'Image' );
-		await showBlockToolbar();
 		const paragraphBlock = await page.$(
 			'p[aria-label="Paragraph block"]'
 		);
 		paragraphBlock.click();
-		await showBlockToolbar();
+		await page.evaluate( () => new Promise( window.requestIdleCallback ) );
 
 		// Open the global inserter and search for the Heading block.
 		await searchForBlock( 'Heading' );
@@ -323,7 +259,6 @@ describe( 'Inserting blocks', () => {
 		const headingButton = (
 			await page.$x( `//button//span[contains(text(), 'Heading')]` )
 		 )[ 0 ];
-
 		// Hover over the block should show the blue line indicator.
 		await headingButton.hover();
 

package/specs/editor/various/nux.test.js

@@ -116,6 +116,24 @@ describe( 'New User Experience (NUX)', () => {
 		expect( welcomeGuide ).toBeNull();
 	} );
 
+	it( 'should focus post title field after welcome guide is dismissed and post is empty', async () => {
+		// Create a new post as a first-time user.
+		await createNewPost( { showWelcomeGuide: true } );
+
+		// Guide should be open.
+		const welcomeGuide = await page.$( '.edit-post-welcome-guide' );
+		expect( welcomeGuide ).not.toBeNull();
+
+		// Close the guide.
+		await page.click( 'button[aria-label="Close dialog"]' );
+
+		// Focus should be in post title field.
+		const postTitle = await page.waitForSelector(
+			'h1[aria-label="Add title"'
+		);
+		await expect( postTitle ).toHaveFocus();
+	} );
+
 	it( 'should show the welcome guide if it is manually opened', async () => {
 		let welcomeGuide;
 

package/specs/editor/various/rich-text.test.js

@@ -485,28 +485,6 @@ describe( 'RichText', () => {
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
 
-	it( 'should show/hide toolbar when entering/exiting format', async () => {
-		const blockToolbarSelector = '.block-editor-block-toolbar';
-		await clickBlockAppender();
-		await page.keyboard.type( '1' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-		await pressKeyWithModifier( 'primary', 'b' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await page.keyboard.type( '2' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await pressKeyWithModifier( 'primary', 'b' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-		await page.keyboard.type( '3' );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).not.toBe( null );
-		await page.keyboard.press( 'ArrowLeft' );
-		expect( await page.$( blockToolbarSelector ) ).toBe( null );
-	} );
-
 	it( 'should run input rules after composition end', async () => {
 		await clickBlockAppender();
 		// Puppeteer doesn't support composition, so emulate it by inserting

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

@@ -4,7 +4,6 @@
 import {
 	createNewPost,
 	pressKeyWithModifier,
-	clickBlockToolbarButton,
 	insertBlock,
 } from '@wordpress/e2e-test-utils';
 
@@ -42,9 +41,7 @@ async function testBlockToolbarKeyboardNavigation(
 
 async function wrapCurrentBlockWithGroup( currentBlockTitle ) {
 	await page.click( `[aria-label="${ currentBlockTitle }"]` );
-	await page.evaluate( () => {
-		document.querySelector( '.editor-block-list-item-group' ).click();
-	} );
+	await page.click( '.editor-block-list-item-group' );
 }
 
 async function testGroupKeyboardNavigation(
@@ -128,10 +125,11 @@ describe( 'Toolbar roving tabindex', () => {
 		await insertBlock( 'Paragraph' );
 		await page.keyboard.type( 'Paragraph' );
 		await focusBlockToolbar();
-		await clickBlockToolbarButton( 'Bold' );
-		await page.keyboard.type( 'a' );
+		await page.keyboard.press( 'ArrowRight' );
+		await expectLabelToHaveFocus( 'Move up' );
+		await page.keyboard.press( 'Tab' );
 		await pressKeyWithModifier( 'shift', 'Tab' );
-		await expectLabelToHaveFocus( 'Bold' );
+		await expectLabelToHaveFocus( 'Move up' );
 	} );
 
 	it( 'can reach toolbar items with arrow keys after pressing alt+F10', async () => {

package/specs/editor/plugins/block-api.test.js

@@ -1,33 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	activatePlugin,
-	createNewPost,
-	deactivatePlugin,
-	insertBlock,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Using Block API', () => {
-	beforeAll( async () => {
-		await activatePlugin( 'gutenberg-test-block-api' );
-	} );
-
-	afterAll( async () => {
-		await deactivatePlugin( 'gutenberg-test-block-api' );
-	} );
-
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	test( 'Inserts the filtered hello world block even when filter added after block registration', async () => {
-		await insertBlock( 'Filtered Hello World' );
-
-		const blockContent = await page.$eval(
-			'div[data-type="e2e-tests/hello-world"]',
-			( element ) => element.textContent
-		);
-		expect( blockContent ).toEqual( 'Hello Editor!' );
-	} );
-} );

package/specs/editor/various/style-variation.test.js

@@ -1,36 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	createNewPost,
-	clickBlockToolbarButton,
-	insertBlock,
-	getEditedPostContent,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'adding blocks', () => {
-	beforeAll( async () => {
-		await createNewPost();
-	} );
-
-	it( 'Should switch to the plain style of the quote block', async () => {
-		// Inserting a quote block.
-		await insertBlock( 'Quote' );
-		await page.keyboard.type( 'Quote content' );
-
-		await clickBlockToolbarButton( 'Quote' );
-
-		const plainStyleButton = await page.waitForXPath(
-			'//*[@role="menuitem"][contains(., "Plain")]'
-		);
-		await plainStyleButton.click();
-
-		// Check the content.
-		const content = await getEditedPostContent();
-		expect( content ).toMatchInlineSnapshot( `
-		"<!-- wp:quote {\\"className\\":\\"is-style-plain\\"} -->
-		<blockquote class=\\"wp-block-quote is-style-plain\\"><p>Quote content</p></blockquote>
-		<!-- /wp:quote -->"
-	` );
-	} );
-} );