@wordpress/e2e-tests 4.0.4 → 4.3.0

package/config/setup-test-framework.js

@@ -13,6 +13,7 @@ import {
 	clearLocalStorage,
 	enablePageDialogAccept,
 	isOfflineMode,
+	resetPreferences,
 	setBrowserViewport,
 	trashAllPosts,
 } from '@wordpress/e2e-test-utils';
@@ -242,6 +243,7 @@ beforeAll( async () => {
 	enablePageDialogAccept();
 	observeConsoleLogging();
 	await simulateAdverseConditions();
+	await resetPreferences();
 	await activateTheme( 'twentytwentyone' );
 	await trashAllPosts();
 	await trashAllPosts( 'wp_block' );
@@ -253,6 +255,7 @@ beforeAll( async () => {
 } );
 
 afterEach( async () => {
+	await resetPreferences();
 	await setupBrowser();
 } );
 

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "4.0.4",
+	"version": "4.3.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.2",
-		"@wordpress/url": "^3.7.1",
+		"@wordpress/e2e-test-utils": "^7.5.0",
+		"@wordpress/jest-console": "^5.1.0",
+		"@wordpress/jest-puppeteer-axe": "^4.0.2",
+		"@wordpress/scripts": "^23.1.0",
+		"@wordpress/url": "^3.10.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1fdd4758150247d6b690051aed18fa27c15f3a32"
+	"gitHead": "198fa129cf1af8dc615918987ea6795cd40ab7df"
 }

package/specs/editor/blocks/__snapshots__/heading.test.js.snap

@@ -12,12 +12,6 @@ exports[`Heading can be created by prefixing number sign and a space 1`] = `
 <!-- /wp:heading -->"
 `;
 
-exports[`Heading should correctly apply custom colors 1`] = `
-"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#0782f6\\"}}} -->
-<h3 class=\\"has-text-color\\" style=\\"color:#0782f6\\">Heading</h3>
-<!-- /wp:heading -->"
-`;
-
 exports[`Heading should correctly apply named colors 1`] = `
 "<!-- wp:heading {\\"textColor\\":\\"luminous-vivid-orange\\"} -->
 <h2 class=\\"has-luminous-vivid-orange-color has-text-color\\">Heading</h2>

package/specs/{experiments/blocks/comments-query.test.js → editor/blocks/comments.test.js}

@@ -11,7 +11,7 @@ import {
 	trashAllComments,
 } from '@wordpress/e2e-test-utils';
 
-describe( 'Comment Query Loop', () => {
+describe( 'Comments', () => {
 	let previousPageComments,
 		previousCommentsPerPage,
 		previousDefaultCommentsPage;
@@ -27,19 +27,12 @@ describe( 'Comment Query Loop', () => {
 	it( 'We show no results message if there are no comments', async () => {
 		await trashAllComments();
 		await createNewPost();
-		await insertBlock( 'Comments Query Loop' );
-		await page.waitForSelector( '[data-testid="noresults"]' );
-		expect(
-			await page.evaluate(
-				( el ) => el.innerText,
-				await page.$( '[data-testid="noresults"]' )
-			)
-		).toEqual( 'No results found.' );
+		await insertBlock( 'Comments' );
+		await page.waitForXPath( '//p[contains(text(), "No results found.")]' );
 	} );
 	it( 'Pagination links are working as expected', async () => {
 		await createNewPost();
-		await insertBlock( 'Comments Query Loop' );
-		await insertBlock( 'Post Comments Form' );
+		await insertBlock( 'Comments' );
 		await publishPost();
 		// Visit the post that was just published.
 		await page.click(
@@ -99,8 +92,7 @@ describe( 'Comment Query Loop', () => {
 	it( 'Pagination links are not appearing if break comments is not enabled', async () => {
 		await setOption( 'page_comments', '0' );
 		await createNewPost();
-		await insertBlock( 'Comments Query Loop' );
-		await insertBlock( 'Post Comments Form' );
+		await insertBlock( 'Comments' );
 		await publishPost();
 		// Visit the post that was just published.
 		await page.click(

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

@@ -86,10 +86,14 @@ describe( 'Heading', () => {
 		await page.waitForSelector( COLOR_INPUT_FIELD_SELECTOR );
 		await page.click( COLOR_INPUT_FIELD_SELECTOR );
 		await pressKeyWithModifier( 'primary', 'A' );
-		await page.keyboard.type( '0782f6' );
-		await page.click( 'h3[data-type="core/heading"]' );
-		await page.waitForXPath( '//button//span[contains(text(), "0782f6")]' );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
+		await page.keyboard.type( '4b7f4d' );
+		await page.waitForXPath( '//button//span[contains(text(), "4b7f4d")]' );
+		await page.click( '.wp-block-post-title' );
+		expect( await getEditedPostContent() ).toMatchInlineSnapshot( `
+		"<!-- wp:heading {\\"level\\":3,\\"style\\":{\\"color\\":{\\"text\\":\\"#4b7f4d\\"}}} -->
+		<h3 class=\\"has-text-color\\" style=\\"color:#4b7f4d\\">Heading</h3>
+		<!-- /wp:heading -->"
+	` );
 	} );
 
 	it( 'should correctly apply named colors', async () => {

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

@@ -269,7 +269,6 @@ describe( 'Table', () => {
 		// Create the table.
 		await clickButton( createButtonLabel );
 
-		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( '1' );
 		await page.keyboard.press( 'ArrowDown' );
 		await page.keyboard.type( '2' );
@@ -280,4 +279,18 @@ describe( 'Table', () => {
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
 	} );
+
+	it( 'should not have focus loss after creation', async () => {
+		// Insert table block.
+		await insertBlock( 'Table' );
+
+		// Create the table.
+		await clickButton( createButtonLabel );
+
+		// Focus should be in first td.
+		const isInTd = await page.waitForSelector(
+			'td[contentEditable="true"]'
+		);
+		await expect( isInTd ).toHaveFocus();
+	} );
 } );

package/specs/editor/fixtures/menu-items-response-fixture.json

@@ -16,16 +16,10 @@
 		"parent": 0,
 		"menu_order": 1,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -95,16 +89,10 @@
 		"parent": 0,
 		"menu_order": 2,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -181,16 +169,10 @@
 		"parent": 95,
 		"menu_order": 3,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -267,16 +249,10 @@
 		"parent": 0,
 		"menu_order": 4,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -353,16 +329,10 @@
 		"parent": 97,
 		"menu_order": 5,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -439,16 +409,10 @@
 		"parent": 98,
 		"menu_order": 6,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -525,16 +489,10 @@
 		"parent": 99,
 		"menu_order": 7,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -611,16 +569,10 @@
 		"parent": 100,
 		"menu_order": 8,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -697,16 +649,10 @@
 		"parent": 0,
 		"menu_order": 9,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -783,16 +729,10 @@
 		"parent": 0,
 		"menu_order": 10,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -869,16 +809,10 @@
 		"parent": 0,
 		"menu_order": 11,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -955,16 +889,10 @@
 		"parent": 104,
 		"menu_order": 12,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -1041,16 +969,10 @@
 		"parent": 105,
 		"menu_order": 13,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -1127,16 +1049,10 @@
 		"parent": 106,
 		"menu_order": 14,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -1213,16 +1129,10 @@
 		"parent": 0,
 		"menu_order": 15,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{
@@ -1292,16 +1202,10 @@
 		"parent": 108,
 		"menu_order": 16,
 		"target": "",
-		"classes": [
-			""
-		],
-		"xfn": [
-			""
-		],
+		"classes": [ "" ],
+		"xfn": [ "" ],
 		"meta": [],
-		"menus": [
-			23
-		],
+		"menus": [ 23 ],
 		"_links": {
 			"self": [
 				{

package/specs/editor/plugins/nonce.test.js

@@ -9,19 +9,18 @@ import {
 } from '@wordpress/e2e-test-utils';
 
 describe( 'Nonce', () => {
-	beforeAll( async () => {
+	// While using beforeEach/afterEach is suboptimal for multiple tests, they
+	// are used here to ensure that the nonce plugin doesn't interfere with API
+	// calls made in global before/after calls, which may perform API requests.
+	beforeEach( async () => {
 		await activatePlugin( 'gutenberg-test-plugin-nonce' );
 	} );
-
-	afterAll( async () => {
+	afterEach( async () => {
 		await deactivatePlugin( 'gutenberg-test-plugin-nonce' );
 	} );
 
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
 	it( 'should refresh when expired', async () => {
+		await createNewPost();
 		await page.keyboard.press( 'Enter' );
 		// eslint-disable-next-line no-restricted-syntax
 		await page.waitForTimeout( 5000 );

package/specs/editor/various/block-switcher.test.js

@@ -32,6 +32,7 @@ describe( 'Block Switcher', () => {
 				'Heading',
 				'Pullquote',
 				'Columns',
+				'Table of Contents',
 			] )
 		);
 	} );
@@ -57,6 +58,7 @@ describe( 'Block Switcher', () => {
 				'Paragraph',
 				'Pullquote',
 				'Heading',
+				'Table of Contents',
 			] )
 		);
 	} );
@@ -71,6 +73,7 @@ describe( 'Block Switcher', () => {
 				'core/group',
 				'core/heading',
 				'core/columns',
+				'core/table-of-contents',
 			].map( ( block ) => wp.blocks.unregisterBlockType( block ) );
 		} );
 

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();
 
@@ -364,7 +299,7 @@ describe( 'Inserting blocks', () => {
 		await page.waitForSelector( INSERTER_SEARCH_SELECTOR );
 		await page.focus( INSERTER_SEARCH_SELECTOR );
 		await pressKeyWithModifier( 'primary', 'a' );
-		const searchTerm = 'Heading';
+		const searchTerm = 'Verse';
 		await page.keyboard.type( searchTerm );
 		const browseAll = await page.waitForXPath(
 			'//button[text()="Browse all"]'

package/specs/editor/various/keyboard-navigable-blocks.test.js

@@ -26,9 +26,6 @@ const navigateToContentEditorTop = async () => {
 };
 
 const tabThroughParagraphBlock = async ( paragraphText ) => {
-	await page.keyboard.press( 'Tab' );
-	await expect( await getActiveLabel() ).toBe( 'Add block' );
-
 	await tabThroughBlockToolbar();
 
 	await page.keyboard.press( 'Tab' );

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;