@wordpress/e2e-tests 4.1.0 → 4.4.0

package/config/flaky-tests-reporter.js

@@ -56,6 +56,7 @@ class FlakyTestsReporter {
 					await fs.writeFile(
 						`flaky-tests/${ filenamify( testTitle ) }.json`,
 						JSON.stringify( {
+							version: 1,
 							runner: 'jest-circus',
 							title: testTitle,
 							path: testPath,

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.1.0",
+	"version": "4.4.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.3.0",
-		"@wordpress/jest-console": "^5.0.2",
+		"@wordpress/e2e-test-utils": "^7.6.0",
+		"@wordpress/jest-console": "^5.2.0",
 		"@wordpress/jest-puppeteer-axe": "^4.0.2",
-		"@wordpress/scripts": "^22.5.0",
-		"@wordpress/url": "^3.8.0",
+		"@wordpress/scripts": "^23.2.0",
+		"@wordpress/url": "^3.11.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "1ba52312b56db563df2d8d4fba5b00613fb46d8c"
+	"gitHead": "a3e0b62091e8a8bdf5e2518e42d60d7098af48cc"
 }

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

@@ -3,7 +3,7 @@
 exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
@@ -11,7 +11,7 @@ exports[`Buttons can jump to the link editor using the keyboard shortcut 1`] = `
 exports[`Buttons dismisses link editor when escape is pressed 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">WordPress</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">WordPress</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
@@ -19,7 +19,7 @@ exports[`Buttons dismisses link editor when escape is pressed 1`] = `
 exports[`Buttons has focus on button content (slash inserter) 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;
@@ -27,7 +27,7 @@ exports[`Buttons has focus on button content (slash inserter) 1`] = `
 exports[`Buttons has focus on button content 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">Content</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">Content</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->"
 `;

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/editor/blocks/{comments-query.test.js → 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

@@ -12,8 +12,6 @@ describe( 'Heading', () => {
 	const COLOR_ITEM_SELECTOR =
 		'.block-editor-panel-color-gradient-settings__dropdown';
 	const CUSTOM_COLOR_BUTTON_X_SELECTOR = `.components-color-palette__custom-color`;
-	const CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR =
-		'.components-color-picker button[aria-label="Show detailed inputs"]';
 	const COLOR_INPUT_FIELD_SELECTOR =
 		'.components-color-picker .components-input-control__input';
 
@@ -82,14 +80,16 @@ describe( 'Heading', () => {
 		);
 
 		await customTextColorButton.click();
-		await page.click( CUSTOM_COLOR_DETAILS_BUTTON_SELECTOR );
 		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.keyboard.press( 'Enter' );
+		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/navigation.test.js

@@ -807,6 +807,58 @@ describe( 'Navigation', () => {
 		);
 	} );
 
+	it( 'correctly decodes special characters in the created Page title for display', async () => {
+		await createNewPost();
+		await insertBlock( 'Navigation' );
+		const startEmptyButton = await page.waitForXPath( START_EMPTY_XPATH );
+		await startEmptyButton.click();
+		const appender = await page.waitForSelector(
+			'.wp-block-navigation .block-list-appender'
+		);
+		await appender.click();
+
+		// Wait for URL input to be focused
+		// Insert name for the new page.
+		const pageTitle = 'This & That & Some < other > chars';
+		const input = await page.waitForSelector(
+			'input.block-editor-url-input__input:focus'
+		);
+		await input.type( pageTitle );
+
+		// When creating a page, the URLControl makes a request to the
+		// url-details endpoint to fetch information about the page.
+		// Because the draft is inaccessible publicly, this request
+		// returns a 404 response. Wait for the response and expect
+		// the error to have occurred.
+		const createPageButton = await page.waitForSelector(
+			'.block-editor-link-control__search-create'
+		);
+		const responsePromise = page.waitForResponse(
+			( response ) =>
+				response.url().includes( 'url-details' ) &&
+				response.status() === 404
+		);
+		const createPagePromise = createPageButton.click();
+		await Promise.all( [ responsePromise, createPagePromise ] );
+
+		await waitForBlock( 'Navigation' );
+
+		const innerLinkBlock = await waitForBlock( 'Custom Link' );
+
+		const linkText = await innerLinkBlock.$eval(
+			'[aria-label="Navigation link text"]',
+			( element ) => {
+				return element.innerText;
+			}
+		);
+
+		expect( linkText ).toContain( pageTitle );
+
+		expect( console ).toHaveErroredWith(
+			'Failed to load resource: the server responded with a status of 404 (Not Found)'
+		);
+	} );
+
 	it( 'renders buttons for the submenu opener elements when the block is set to open on click instead of hover', async () => {
 		await createClassicMenu( { name: 'Test Menu 2' }, menuItemsFixture );
 		await createNewPost();
@@ -1294,11 +1346,9 @@ describe( 'Navigation', () => {
 				`//*[contains(@class, 'components-snackbar__content')][ text()="You do not have permission to edit this Menu. Any changes made will not be saved." ]`
 			);
 
-			// Expect a console 403 for request to Navigation Areas for lower permission users.
-			// This is because reading requires the `edit_theme_options` capability
-			// which the Contributor level user does not have.
-			// See: https://github.com/WordPress/gutenberg/blob/4cedaf0c4abb0aeac4bfd4289d63e9889efe9733/lib/class-wp-rest-block-navigation-areas-controller.php#L81-L91.
-			// Todo: removed once Nav Areas are removed from the Gutenberg Plugin.
+			// Expect a console 403 for requests to:
+			// * /wp/v2/settings?_locale=user
+			// * /wp/v2/templates?context=edit&post_type=post&per_page=100&_locale=user
 			expect( console ).toHaveErrored();
 		} );
 
@@ -1317,11 +1367,9 @@ describe( 'Navigation', () => {
 				`//*[contains(@class, 'components-snackbar__content')][ text()="${ noticeText }" ]`
 			);
 
-			// Expect a console 403 for request to Navigation Areas for lower permission users.
-			// This is because reading requires the `edit_theme_options` capability
-			// which the Contributor level user does not have.
-			// See: https://github.com/WordPress/gutenberg/blob/4cedaf0c4abb0aeac4bfd4289d63e9889efe9733/lib/class-wp-rest-block-navigation-areas-controller.php#L81-L91.
-			// Todo: removed once Nav Areas are removed from the Gutenberg Plugin.
+			// Expect a console 403 for requests to:
+			// * /wp/v2/settings?_locale=user
+			// * /wp/v2/templates?context=edit&post_type=post&per_page=100&_locale=user
 			expect( console ).toHaveErrored();
 		} );
 	} );

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/iframed-inline-styles.test.js

@@ -32,6 +32,7 @@ describe( 'iframed inline styles', () => {
 		await deactivatePlugin( 'gutenberg-test-iframed-inline-styles' );
 	} );
 
+	// Skip flaky test. See https://github.com/WordPress/gutenberg/issues/35172
 	it.skip( 'should load inline styles in iframe', async () => {
 		await insertBlock( 'Iframed Inline Styles' );
 

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/__snapshots__/inserting-blocks.test.js.snap

@@ -108,7 +108,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 exports[`Inserting blocks inserts blocks at root level when using the root appender while selection is in an inner block 1`] = `
 "<!-- wp:buttons -->
 <div class=\\"wp-block-buttons\\"><!-- wp:button -->
-<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link\\">1.1</a></div>
+<div class=\\"wp-block-button\\"><a class=\\"wp-block-button__link wp-element-button\\">1.1</a></div>
 <!-- /wp:button --></div>
 <!-- /wp:buttons -->