@wordpress/e2e-tests 4.5.0 → 4.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "4.5.0",
+	"version": "4.6.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.7.0",
+		"@wordpress/e2e-test-utils": "^7.8.0",
 		"@wordpress/jest-console": "^5.3.0",
 		"@wordpress/jest-puppeteer-axe": "^4.0.2",
-		"@wordpress/scripts": "^23.3.0",
-		"@wordpress/url": "^3.12.0",
+		"@wordpress/scripts": "^23.4.0",
+		"@wordpress/url": "^3.13.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -46,5 +46,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "48d5f37dfb52d2e77c8eeb662f9874cf141b8c6b"
+	"gitHead": "a80eeb62ec7cb1418b9915c277e084a29d6665e3"
 }

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

@@ -1,8 +1,3 @@
-/**
- * External dependencies
- */
-import { uniqueId } from 'lodash';
-
 /**
  * WordPress dependencies
  */
@@ -48,6 +43,7 @@ const REST_PAGES_ROUTES = [
 	'/wp/v2/pages',
 	`rest_route=${ encodeURIComponent( '/wp/v2/pages' ) }`,
 ];
+let uniqueId = 0;
 
 /**
  * Determines if a given URL matches any of a given collection of
@@ -312,7 +308,7 @@ async function waitForBlock( blockName ) {
 // Disable reason - these tests are to be re-written.
 // eslint-disable-next-line jest/no-disabled-tests
 describe( 'Navigation', () => {
-	const contributorUsername = uniqueId( 'contributoruser_' );
+	const contributorUsername = `contributoruser_${ ++uniqueId }`;
 	let contributorPassword;
 
 	beforeAll( async () => {
@@ -388,7 +384,10 @@ describe( 'Navigation', () => {
 			expect( loadingSpinner ).toBeNull();
 		} );
 
-		it( 'shows a loading indicator whilst ref resolves to Navigation post items', async () => {
+		// Skip reason: This test is quite flaky recently.
+		// See https://github.com/WordPress/gutenberg/issues/39231.
+		// eslint-disable-next-line jest/no-disabled-tests
+		it.skip( 'shows a loading indicator whilst ref resolves to Navigation post items', async () => {
 			const testNavId = 1;
 
 			let resolveNavigationRequest;
@@ -400,11 +399,8 @@ describe( 'Navigation', () => {
 			await setUpResponseMocking( [
 				{
 					match: ( request ) => {
-						return (
-							[ 'GET', 'OPTIONS' ].includes( request.method() ) &&
-							decodeURIComponent( request.url() ).includes(
-								`navigation/${ testNavId }`
-							)
+						return decodeURIComponent( request.url() ).includes(
+							`navigation/`
 						);
 					},
 					onRequestMatch: ( request ) => {

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

@@ -36,8 +36,9 @@ describe( 'changing image size', () => {
 
 		await openDocumentSettingsSidebar();
 		await clickButton( 'Page' );
-		await clickButton( 'Template' );
-		await clickButton( 'New' );
+		await page.click( 'button[aria-label^="Select template"]' );
+		await page.waitForSelector( 'button[aria-label="Add template"]' );
+		await page.click( 'button[aria-label="Add template"]' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( 'Iframed Test' );

package/specs/editor/plugins/iframed-masonry-block.test.js

@@ -44,8 +44,9 @@ describe( 'iframed masonry block', () => {
 
 		await openDocumentSettingsSidebar();
 		await clickButton( 'Page' );
-		await clickButton( 'Template' );
-		await clickButton( 'New' );
+		await page.click( 'button[aria-label^="Select template"]' );
+		await page.waitForSelector( 'button[aria-label="Add template"]' );
+		await page.click( 'button[aria-label="Add template"]' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Tab' );
 		await page.keyboard.type( 'Iframed Test' );

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

@@ -45,17 +45,13 @@ function trimLeadingZero( str ) {
 	return str[ 0 ] === '0' ? str.slice( 1 ) : str;
 }
 
-function formatDatePickerValues( {
-	year,
-	monthLabel,
-	day,
-	hours,
-	minutes,
-	amOrPm,
-} ) {
+function formatDatePickerValues(
+	{ year, monthLabel, day, hours, minutes, amOrPm },
+	timezone
+) {
 	const dayTrimmed = trimLeadingZero( day );
 	const hoursTrimmed = trimLeadingZero( hours );
-	return `${ monthLabel } ${ dayTrimmed }, ${ year } ${ hoursTrimmed }:${ minutes } ${ amOrPm }`;
+	return `${ monthLabel } ${ dayTrimmed }, ${ year } ${ hoursTrimmed }:${ minutes }\xa0${ amOrPm } ${ timezone }`;
 }
 
 async function getPublishingDate() {
@@ -70,11 +66,13 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 	( timezone ) => {
 		let oldTimezone;
 		beforeEach( async () => {
+			await page.emulateTimezone( 'America/New_York' ); // Set browser to a timezone that's different to `timezone`.
 			oldTimezone = await changeSiteTimezone( timezone );
 			await createNewPost();
 		} );
 		afterEach( async () => {
 			await changeSiteTimezone( oldTimezone );
+			await page.emulateTimezone( null );
 		} );
 
 		it( 'should show the publishing date as "Immediately" if the date is not altered', async () => {
@@ -98,7 +96,7 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 			const publishingDate = await getPublishingDate();
 
 			expect( publishingDate ).toBe(
-				formatDatePickerValues( datePickerValues )
+				formatDatePickerValues( datePickerValues, timezone )
 			);
 		} );
 
@@ -119,7 +117,7 @@ describe.each( [ [ 'UTC-10' ], [ 'UTC' ], [ 'UTC+10' ] ] )(
 			expect( publishingDate ).not.toEqual( 'Immediately' );
 			// The expected date format will be "Sep 26, 2018 11:52 pm".
 			expect( publishingDate ).toBe(
-				formatDatePickerValues( datePickerValues )
+				formatDatePickerValues( datePickerValues, timezone )
 			);
 		} );
 

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

@@ -131,9 +131,7 @@ describe( 'Sidebar', () => {
 		).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Excerpt' ) ).toBeDefined();
 		expect( await findSidebarPanelWithTitle( 'Discussion' ) ).toBeDefined();
-		expect(
-			await findSidebarPanelWithTitle( 'Status & visibility' )
-		).toBeDefined();
+		expect( await findSidebarPanelWithTitle( 'Summary' ) ).toBeDefined();
 
 		await page.evaluate( () => {
 			const { removeEditorPanel } = wp.data.dispatch( 'core/edit-post' );
@@ -165,8 +163,8 @@ describe( 'Sidebar', () => {
 		expect(
 			await page.$x( getPanelToggleSelector( 'Discussion' ) )
 		).toEqual( [] );
-		expect(
-			await page.$x( getPanelToggleSelector( 'Status & visibility' ) )
-		).toEqual( [] );
+		expect( await page.$x( getPanelToggleSelector( 'Summary' ) ) ).toEqual(
+			[]
+		);
 	} );
 } );

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

@@ -1,33 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-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 wp-element-button\\" href=\\"https://www.wordpress.org/\\">WordPress</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->"
-`;
-
-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 wp-element-button\\">WordPress</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->"
-`;
-
-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 wp-element-button\\">Content</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->"
-`;
-
-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 wp-element-button\\">Content</a></div>
-<!-- /wp:button --></div>
-<!-- /wp:buttons -->"
-`;

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

@@ -1,13 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Spacer can be created by typing "/spacer" 1`] = `
-"<!-- wp:spacer -->
-<div style=\\"height:100px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
-<!-- /wp:spacer -->"
-`;
-
-exports[`Spacer can be resized using the drag handle and remains selected after being dragged 1`] = `
-"<!-- wp:spacer {\\"height\\":\\"150px\\"} -->
-<div style=\\"height:150px\\" aria-hidden=\\"true\\" class=\\"wp-block-spacer\\"></div>
-<!-- /wp:spacer -->"
-`;

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

@@ -1,61 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Table allows a caption to be added 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody></table><figcaption>Caption!</figcaption></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table allows adding and deleting columns across the table header, body and footer 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><thead><tr><th></th><th></th><th></th></tr></thead><tbody><tr><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td><td></td></tr></tfoot></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table allows adding and deleting columns across the table header, body and footer 2`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><thead><tr><th></th><th></th></tr></thead><tbody><tr><td></td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td></td><td></td></tr></tfoot></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table allows cells to be selected when the cell area outside of the RichText is clicked 1`] = `
-"<!-- wp:table {\\"hasFixedLayout\\":true} -->
-<figure class=\\"wp-block-table\\"><table class=\\"has-fixed-layout\\"><tbody><tr><td><br><br><br><br></td><td>Second cell.</td></tr><tr><td></td><td></td></tr></tbody></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table allows columns to be aligned 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><tbody><tr><td>None</td><td class=\\"has-text-align-left\\" data-align=\\"left\\">To the left</td><td class=\\"has-text-align-center\\" data-align=\\"center\\">Centered</td><td class=\\"has-text-align-right\\" data-align=\\"right\\">Right aligned</td></tr><tr><td></td><td class=\\"has-text-align-left\\" data-align=\\"left\\"></td><td class=\\"has-text-align-center\\" data-align=\\"center\\"></td><td class=\\"has-text-align-right\\" data-align=\\"right\\"></td></tr></tbody></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table allows header and footer rows to be switched on and off 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><thead><tr><th>header</th><th></th></tr></thead><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody><tfoot><tr><td>footer</td><td></td></tr></tfoot></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table allows header and footer rows to be switched on and off 2`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><tbody><tr><td>body</td><td></td></tr><tr><td></td><td></td></tr></tbody></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table allows text to by typed into cells 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><tbody><tr><td>This</td><td>is</td></tr><tr><td>table</td><td>block</td></tr></tbody></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table displays a form for choosing the row and column count of the table 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><tbody><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr><tr><td></td><td></td><td></td><td></td><td></td></tr></tbody></table></figure>
-<!-- /wp:table -->"
-`;
-
-exports[`Table up and down arrow navigation 1`] = `
-"<!-- wp:table -->
-<figure class=\\"wp-block-table\\"><table><tbody><tr><td>1</td><td>4</td></tr><tr><td>2</td><td>3</td></tr></tbody></table></figure>
-<!-- /wp:table -->"
-`;

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

@@ -1,95 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	insertBlock,
-	getEditedPostContent,
-	createNewPost,
-	pressKeyWithModifier,
-	clickBlockAppender,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Buttons', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'has focus on button content', async () => {
-		await insertBlock( 'Buttons' );
-		await page.keyboard.type( 'Content' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'has focus on button content (slash inserter)', async () => {
-		await clickBlockAppender();
-		await page.keyboard.type( '/buttons' );
-		await page.keyboard.press( 'Enter' );
-		await page.keyboard.type( 'Content' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'dismisses link editor when escape is pressed', async () => {
-		// Regression: https://github.com/WordPress/gutenberg/pull/19885
-		await insertBlock( 'Buttons' );
-		await pressKeyWithModifier( 'primary', 'k' );
-		await page.waitForFunction(
-			() => !! document.activeElement.closest( '.block-editor-url-input' )
-		);
-		await page.keyboard.press( 'Escape' );
-		await page.waitForFunction(
-			() =>
-				document.activeElement ===
-				document.querySelector( '.block-editor-rich-text__editable' )
-		);
-		await page.keyboard.type( 'WordPress' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'moves focus from the link editor back to the button when escape is pressed after the URL has been submitted', async () => {
-		// Regression: https://github.com/WordPress/gutenberg/issues/34307
-		await insertBlock( 'Buttons' );
-		await pressKeyWithModifier( 'primary', 'k' );
-		await page.waitForFunction(
-			() => !! document.activeElement.closest( '.block-editor-url-input' )
-		);
-		await page.keyboard.type( 'https://example.com' );
-		await page.keyboard.press( 'Enter' );
-		await page.waitForFunction(
-			() =>
-				document.activeElement ===
-				document.querySelector(
-					'.block-editor-link-control a[href="https://example.com"]'
-				)
-		);
-		await page.keyboard.press( 'Escape' );
-
-		// Focus should move from the link control to the button block's text.
-		await page.waitForFunction(
-			() =>
-				document.activeElement ===
-				document.querySelector( '[aria-label="Button text"]' )
-		);
-
-		// The link control should still be visible when a URL is set.
-		const linkControl = await page.$( '.block-editor-link-control' );
-		expect( linkControl ).toBeTruthy();
-	} );
-
-	it( 'can jump to the link editor using the keyboard shortcut', async () => {
-		await insertBlock( 'Buttons' );
-		await page.keyboard.type( 'WordPress' );
-		await pressKeyWithModifier( 'primary', 'k' );
-		await page.keyboard.type( 'https://www.wordpress.org/' );
-		await page.keyboard.press( 'Enter' );
-		// Make sure that the dialog is still opened, and that focus is retained
-		// within (focusing on the link preview).
-		await page.waitForSelector(
-			':focus.block-editor-link-control__search-item-title'
-		);
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-} );

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

@@ -1,48 +0,0 @@
-/**
- * WordPress dependencies
- */
-import {
-	clickBlockAppender,
-	getEditedPostContent,
-	createNewPost,
-	dragAndResize,
-} from '@wordpress/e2e-test-utils';
-
-describe( 'Spacer', () => {
-	beforeEach( async () => {
-		await createNewPost();
-	} );
-
-	it( 'can be created by typing "/spacer"', async () => {
-		// Create a spacer with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( '/spacer' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-	} );
-
-	it( 'can be resized using the drag handle and remains selected after being dragged', async () => {
-		// Create a spacer with the slash block shortcut.
-		await clickBlockAppender();
-		await page.keyboard.type( '/spacer' );
-		await page.waitForXPath(
-			`//*[contains(@class, "components-autocomplete__result") and contains(@class, "is-selected") and contains(text(), 'Spacer')]`
-		);
-		await page.keyboard.press( 'Enter' );
-
-		const resizableHandle = await page.$(
-			'.block-library-spacer__resize-container .components-resizable-box__handle'
-		);
-		await dragAndResize( resizableHandle, { x: 0, y: 50 } );
-		expect( await getEditedPostContent() ).toMatchSnapshot();
-
-		const selectedSpacer = await page.$(
-			'[data-type="core/spacer"].is-selected'
-		);
-		expect( selectedSpacer ).not.toBe( null );
-	} );
-} );