@wordpress/e2e-tests 6.5.1 → 7.1.0

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 ## Unreleased
 
+## 7.1.0 (2023-03-29)
+
+## 7.0.0 (2023-03-15)
+
+### Breaking Changes
+
+-  Started requiring Jest v29 instead of v27 as a peer dependency. See [breaking changes in Jest 28](https://jestjs.io/blog/2022/04/25/jest-28) and [in jest 29](https://jestjs.io/blog/2022/08/25/jest-29) ([#47388](https://github.com/WordPress/gutenberg/pull/47388))
+
 ## 6.5.0 (2023-03-01)
 
 ## 6.4.0 (2023-02-15)

package/babel.config.js

@@ -0,0 +1,7 @@
+module.exports = ( api ) => {
+	api.cache( true );
+
+	return {
+		presets: [ '@wordpress/babel-preset-default' ],
+	};
+};

package/config/performance-reporter.js

@@ -19,9 +19,11 @@ const success = chalk.bold.green;
 
 class PerformanceReporter {
 	onTestResult( test ) {
-		const dirname = path.dirname( test.path );
 		const basename = path.basename( test.path, '.js' );
-		const filepath = path.join( dirname, basename + '.results.json' );
+		const filepath = path.join(
+			process.env.WP_ARTIFACTS_PATH,
+			basename + '.performance-results.json'
+		);
 
 		if ( ! existsSync( filepath ) ) {
 			return;

package/config/setup-performance-test.js

@@ -26,24 +26,24 @@ async function setupPage() {
 	] );
 }
 
-// Before every test suite run, delete all content created by the test. This ensures
-// other posts/comments/etc. aren't dirtying tests and tests don't depend on
-// each other's side-effects.
+// Before every test suite run, delete all content created by the test. This
+// ensures other posts/comments/etc. aren't dirtying tests and tests don't
+// depend on each other's side-effects.
 beforeAll( async () => {
 	enablePageDialogAccept();
 
 	await trashAllPosts();
 	await trashAllPosts( 'wp_block' );
+	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
 	await clearLocalStorage();
 	await setupPage();
-	await activatePlugin( 'gutenberg-test-plugin-disables-the-css-animations' );
 } );
 
 afterEach( async () => {
 	// Clear localStorage between tests so that the next test starts clean.
 	await clearLocalStorage();
-	// Close the previous page entirely and create a new page, so that the next test
-	// isn't affected by page unload work.
+	// Close the previous page entirely and create a new page, so that the next
+	// test isn't affected by page unload work.
 	await page.close();
 	page = await browser.newPage();
 	// Set up testing config on new page.

package/config/setup-test-framework.js

@@ -1,7 +1,6 @@
 /**
  * External dependencies
  */
-import { get } from 'lodash';
 import { toMatchInlineSnapshot, toMatchSnapshot } from 'jest-snapshot';
 
 /**
@@ -172,11 +171,7 @@ function observeConsoleLogging() {
 		// correctly. Instead, the logic here synchronously inspects the
 		// internal object shape of the JSHandle to find the error text. If it
 		// cannot be found, the default text value is used instead.
-		text = get(
-			message.args(),
-			[ 0, '_remoteObject', 'description' ],
-			text
-		);
+		text = message.args()[ 0 ]?._remoteObject?.description ?? text;
 
 		// Disable reason: We intentionally bubble up the console message
 		// which, unless the test explicitly anticipates the logging via

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "6.5.1",
+	"version": "7.1.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,22 +23,21 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@wordpress/e2e-test-utils": "^9.5.0",
-		"@wordpress/jest-console": "^6.11.0",
-		"@wordpress/jest-puppeteer-axe": "^5.11.0",
-		"@wordpress/scripts": "^25.5.1",
-		"@wordpress/url": "^3.29.0",
+		"@wordpress/e2e-test-utils": "^10.1.0",
+		"@wordpress/jest-console": "^7.1.0",
+		"@wordpress/jest-puppeteer-axe": "^6.1.0",
+		"@wordpress/scripts": "^26.1.0",
+		"@wordpress/url": "^3.31.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
-		"jest-message-util": "^27.4.2",
-		"jest-snapshot": "^27.4.5",
-		"lodash": "^4.17.21",
+		"jest-message-util": "^29.5.0",
+		"jest-snapshot": "^29.5.0",
 		"puppeteer-testing-library": "^0.5.0",
 		"uuid": "^8.3.0"
 	},
 	"peerDependencies": {
-		"jest": ">=27",
+		"jest": ">=29",
 		"puppeteer-core": ">=11",
 		"react": "^18.0.0",
 		"react-dom": "^18.0.0"
@@ -46,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9d7acdfd702a19732217460a5c7ed5eb78b10bc4"
+	"gitHead": "d5c28a67b11e91e3e4b8e90346bfcb90909364d6"
 }

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

@@ -42,30 +42,6 @@ describe( 'Cover', () => {
 		await createNewPost();
 	} );
 
-	it( 'can set overlay color using color picker on block placeholder', async () => {
-		await insertBlock( 'Cover' );
-		// Get the first color option from the block placeholder's color picker.
-		const colorPickerButton = await page.waitForSelector(
-			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
-		);
-		// Get the RGB value of the picked color.
-		const pickedColor = await colorPickerButton.evaluate(
-			( node ) => node.style.backgroundColor
-		);
-		// Create the block by clicking selected color button.
-		await colorPickerButton.click();
-		// Get the block's background dim element.
-		const backgroundDim = await page.waitForSelector(
-			'.wp-block-cover .has-background-dim'
-		);
-		// Get the RGB value of the background dim.
-		const dimColor = await backgroundDim.evaluate(
-			( node ) => node.style.backgroundColor
-		);
-
-		expect( pickedColor ).toEqual( dimColor );
-	} );
-
 	it( 'can set background image using image upload on block placeholder', async () => {
 		await insertBlock( 'Cover' );
 		// Create the block using uploaded image.
@@ -95,27 +71,6 @@ describe( 'Cover', () => {
 		expect( backgroundDimOpacity ).toBe( '0.5' );
 	} );
 
-	it( 'can have the title edited', async () => {
-		await insertBlock( 'Cover' );
-		// Click first color option from the block placeholder's color picker.
-		const colorPickerButton = await page.waitForSelector(
-			'.wp-block-cover__placeholder-background-options .components-circular-option-picker__option-wrapper:first-child button'
-		);
-		await colorPickerButton.click();
-		// Click the title placeholder to put the cursor inside.
-		const coverTitle = await page.waitForSelector(
-			'.wp-block-cover .wp-block-paragraph'
-		);
-		await coverTitle.click();
-		// Type the title.
-		await page.keyboard.type( 'foo' );
-		const coverTitleText = await coverTitle.evaluate(
-			( el ) => el.innerText
-		);
-
-		expect( coverTitleText ).toEqual( 'foo' );
-	} );
-
 	it( 'can be resized using drag & drop', async () => {
 		await insertBlock( 'Cover' );
 		// Close the inserter.

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

@@ -88,7 +88,7 @@ exports[`Inserting blocks inserts a block in proper place after having clicked \
 <p>First paragraph</p>
 <!-- /wp:paragraph -->
 
-<!-- wp:cover {"isDark":false} -->
+<!-- wp:cover {"isDark":false,"layout":{"type":"constrained"}} -->
 <div class="wp-block-cover is-light"><span aria-hidden="true" class="wp-block-cover__background has-background-dim-100 has-background-dim"></span><div class="wp-block-cover__inner-container"></div></div>
 <!-- /wp:cover -->
 

package/specs/editor/various/block-hierarchy-navigation.test.js

@@ -58,9 +58,11 @@ describe( 'Navigating the block hierarchy', () => {
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
+		// Wait for inserter results to appear and then insert a paragraph.
+		await page.waitForSelector(
+			'.block-editor-inserter__quick-inserter-results .editor-block-list-item-paragraph'
+		);
+		await page.click( '.editor-block-list-item-paragraph' );
 		await page.keyboard.type( 'First column' );
 
 		// Navigate to the columns blocks.
@@ -99,9 +101,11 @@ describe( 'Navigating the block hierarchy', () => {
 		// Insert text in the last column block.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
+		// Wait for inserter results to appear and then insert a paragraph.
+		await page.waitForSelector(
+			'.block-editor-inserter__quick-inserter-results .editor-block-list-item-paragraph'
+		);
+		await page.click( '.editor-block-list-item-paragraph' );
 		await page.keyboard.type( 'Third column' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();
@@ -115,9 +119,11 @@ describe( 'Navigating the block hierarchy', () => {
 		// Add a paragraph in the first column.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
+		// Wait for inserter results to appear and then insert a paragraph.
+		await page.waitForSelector(
+			'.block-editor-inserter__quick-inserter-results .editor-block-list-item-paragraph'
+		);
+		await page.click( '.editor-block-list-item-paragraph' );
 		await page.keyboard.type( 'First column' );
 
 		// Navigate to the columns blocks using the keyboard.
@@ -146,9 +152,11 @@ describe( 'Navigating the block hierarchy', () => {
 		// Insert text in the last column block.
 		await page.keyboard.press( 'ArrowDown' ); // Navigate to inserter.
 		await page.keyboard.press( 'Enter' ); // Activate inserter.
-		await page.keyboard.type( 'Paragraph' );
-		await pressKeyTimes( 'Tab', 2 ); // Tab to paragraph result.
-		await page.keyboard.press( 'Enter' ); // Insert paragraph.
+		// Wait for inserter results to appear and then insert a paragraph.
+		await page.waitForSelector(
+			'.block-editor-inserter__quick-inserter-results .editor-block-list-item-paragraph'
+		);
+		await page.click( '.editor-block-list-item-paragraph' );
 		await page.keyboard.type( 'Third column' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();

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

@@ -412,13 +412,13 @@ describe( 'RichText', () => {
 		await page.waitForXPath(
 			'//button[@role="tab"][@aria-selected="true"][text()="Text"]'
 		);
-		// Tab to the "Text" tab.
+		// Initial focus is on the "Text" tab.
+		// Tab to the "Custom color picker".
 		await page.keyboard.press( 'Tab' );
 		// Tab to black.
 		await page.keyboard.press( 'Tab' );
 		// Select color other than black.
 		await page.keyboard.press( 'Tab' );
-		await page.keyboard.press( 'Tab' );
 		await page.keyboard.press( 'Enter' );
 
 		expect( await getEditedPostContent() ).toMatchSnapshot();

package/specs/performance/front-end-block-theme.test.js

@@ -1,13 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
+import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
+import { saveResultsFile } from './utils';
 
 describe( 'Front End Performance', () => {
 	const results = {
@@ -22,12 +21,8 @@ describe( 'Front End Performance', () => {
 	} );
 
 	afterAll( async () => {
+		saveResultsFile( __filename, results );
 		await activateTheme( 'twentytwentyone' );
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
 	} );
 
 	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {

package/specs/performance/front-end-classic-theme.test.js

@@ -1,13 +1,12 @@
 /**
- * External dependencies
+ * WordPress dependencies
  */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
+import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
 
 /**
- * WordPress dependencies
+ * Internal dependencies
  */
-import { activateTheme, createURL, logout } from '@wordpress/e2e-test-utils';
+import { saveResultsFile } from './utils';
 
 describe( 'Front End Performance', () => {
 	const results = {
@@ -22,11 +21,7 @@ describe( 'Front End Performance', () => {
 	} );
 
 	afterAll( async () => {
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
+		saveResultsFile( __filename, results );
 	} );
 
 	it( 'Report TTFB, LCP, and LCP-TTFB', async () => {

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

@@ -1,8 +1,7 @@
 /**
  * External dependencies
  */
-import { basename, join } from 'path';
-import { writeFileSync } from 'fs';
+import path from 'path';
 
 /**
  * WordPress dependencies
@@ -24,6 +23,8 @@ import {
 import {
 	readFile,
 	deleteFile,
+	saveResultsFile,
+	getTraceFilePath,
 	getTypingEventDurations,
 	getClickEventDurations,
 	getHoverEventDurations,
@@ -78,16 +79,13 @@ describe( 'Post Editor Performance', () => {
 		inserterHover: [],
 		inserterSearch: [],
 	};
-	const traceFile = __dirname + '/trace.json';
+	const traceFilePath = getTraceFilePath();
+
 	let traceResults;
 
 	afterAll( async () => {
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-		deleteFile( traceFile );
+		saveResultsFile( __filename, results );
+		deleteFile( traceFilePath );
 	} );
 
 	beforeEach( async () => {
@@ -103,7 +101,7 @@ describe( 'Post Editor Performance', () => {
 
 	it( 'Loading', async () => {
 		await loadHtmlIntoTheBlockEditor(
-			readFile( join( __dirname, '../../assets/large-post.html' ) )
+			readFile( path.join( __dirname, '../../assets/large-post.html' ) )
 		);
 		await saveDraft();
 		const draftURL = await page.url();
@@ -148,12 +146,12 @@ describe( 'Post Editor Performance', () => {
 
 	it( 'Typing', async () => {
 		await loadHtmlIntoTheBlockEditor(
-			readFile( join( __dirname, '../../assets/large-post.html' ) )
+			readFile( path.join( __dirname, '../../assets/large-post.html' ) )
 		);
 		await insertBlock( 'Paragraph' );
 		let i = 20;
 		await page.tracing.start( {
-			path: traceFile,
+			path: traceFilePath,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
@@ -166,7 +164,7 @@ describe( 'Post Editor Performance', () => {
 			await page.keyboard.type( 'x' );
 		}
 		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
+		traceResults = JSON.parse( readFile( traceFilePath ) );
 		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 			getTypingEventDurations( traceResults );
 		if (
@@ -186,7 +184,7 @@ describe( 'Post Editor Performance', () => {
 	it( 'Typing within containers', async () => {
 		await loadHtmlIntoTheBlockEditor(
 			readFile(
-				join(
+				path.join(
 					__dirname,
 					'../../assets/small-post-with-containers.html'
 				)
@@ -202,7 +200,7 @@ describe( 'Post Editor Performance', () => {
 
 		let i = 10;
 		await page.tracing.start( {
-			path: traceFile,
+			path: traceFilePath,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
@@ -216,7 +214,7 @@ describe( 'Post Editor Performance', () => {
 		// eslint-disable-next-line no-restricted-syntax
 		await page.waitForTimeout( 500 );
 		await page.tracing.stop();
-		traceResults = JSON.parse( readFile( traceFile ) );
+		traceResults = JSON.parse( readFile( traceFilePath ) );
 		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 			getTypingEventDurations( traceResults );
 		if (
@@ -242,13 +240,13 @@ describe( 'Post Editor Performance', () => {
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 1000 );
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await paragraphs[ j ].click();
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const allDurations = getSelectionEventDurations( traceResults );
 			results.focus.push(
 				allDurations.reduce( ( acc, eventDurations ) => {
@@ -262,13 +260,13 @@ describe( 'Post Editor Performance', () => {
 		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await openListView();
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ mouseClickEvents ] = getClickEventDurations( traceResults );
 			for ( let k = 0; k < mouseClickEvents.length; k++ ) {
 				results.listViewOpen.push( mouseClickEvents[ k ] );
@@ -281,13 +279,13 @@ describe( 'Post Editor Performance', () => {
 		await load1000Paragraphs();
 		for ( let j = 0; j < 10; j++ ) {
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await openGlobalBlockInserter();
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ mouseClickEvents ] = getClickEventDurations( traceResults );
 			for ( let k = 0; k < mouseClickEvents.length; k++ ) {
 				results.inserterOpen.push( mouseClickEvents[ k ] );
@@ -304,13 +302,13 @@ describe( 'Post Editor Performance', () => {
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 500 );
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
 			await page.keyboard.type( 'p' );
 			await page.tracing.stop();
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 				getTypingEventDurations( traceResults );
 			if (
@@ -343,7 +341,7 @@ describe( 'Post Editor Performance', () => {
 			// eslint-disable-next-line no-restricted-syntax
 			await page.waitForTimeout( 200 );
 			await page.tracing.start( {
-				path: traceFile,
+				path: traceFilePath,
 				screenshots: false,
 				categories: [ 'devtools.timeline' ],
 			} );
@@ -351,7 +349,7 @@ describe( 'Post Editor Performance', () => {
 			await page.hover( headingBlockItem );
 			await page.tracing.stop();
 
-			traceResults = JSON.parse( readFile( traceFile ) );
+			traceResults = JSON.parse( readFile( traceFilePath ) );
 			const [ mouseOverEvents, mouseOutEvents ] =
 				getHoverEventDurations( traceResults );
 			for ( let k = 0; k < mouseOverEvents.length; k++ ) {