@wordpress/e2e-tests 6.5.0 → 7.0.0

package/CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+## 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/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.0",
+	"version": "7.0.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.0",
-		"@wordpress/url": "^3.29.0",
+		"@wordpress/e2e-test-utils": "^10.0.0",
+		"@wordpress/jest-console": "^7.0.0",
+		"@wordpress/jest-puppeteer-axe": "^6.0.0",
+		"@wordpress/scripts": "^26.0.0",
+		"@wordpress/url": "^3.30.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": "d5e03a74b79e3ca84afda24375474a103a063ee4"
+	"gitHead": "9534a7b3bbf07c1d40b94fdb7a3d091f297bfb06"
 }

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/site-editor.test.js

@@ -26,6 +26,7 @@ import {
 	deleteFile,
 	getTypingEventDurations,
 	getLoadingDurations,
+	sequence,
 } from './utils';
 
 jest.setTimeout( 1000000 );
@@ -46,7 +47,7 @@ const results = {
 	listViewOpen: [],
 };
 
-let id;
+let postId;
 
 describe( 'Site Editor Performance', () => {
 	beforeAll( async () => {
@@ -59,6 +60,7 @@ describe( 'Site Editor Performance', () => {
 		);
 
 		await createNewPost( { postType: 'page' } );
+
 		await page.evaluate( ( _html ) => {
 			const { parse } = window.wp.blocks;
 			const { dispatch } = window.wp.data;
@@ -75,48 +77,47 @@ describe( 'Site Editor Performance', () => {
 		}, html );
 		await saveDraft();
 
-		id = await page.evaluate( () =>
+		postId = await page.evaluate( () =>
 			new URL( document.location ).searchParams.get( 'post' )
 		);
 	} );
 
 	afterAll( async () => {
+		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+		writeFileSync(
+			join( __dirname, resultsFilename ),
+			JSON.stringify( results, null, 2 )
+		);
+
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
 		await activateTheme( 'twentytwentyone' );
 	} );
 
-	beforeEach( async () => {
-		await visitSiteEditor( {
-			postId: id,
-			postType: 'page',
-		} );
-	} );
-
-	it( 'Loading', async () => {
-		const editorURL = await page.url();
-
-		// Number of sample measurements to take.
-		const samples = 3;
-		// Number of throwaway measurements to perform before recording samples.
-		// Having at least one helps ensure that caching quirks don't manifest in
-		// the results.
-		const throwaway = 1;
-
-		let i = throwaway + samples;
-
-		// Measuring loading time.
-		while ( i-- ) {
-			await page.close();
-			page = await browser.newPage();
-
-			await page.goto( editorURL );
-			await page.waitForSelector( '.edit-site-visual-editor', {
-				timeout: 120000,
+	// Number of loading measurements to take.
+	const loadingSamples = 3;
+	// Number of throwaway measurements to perform before recording samples.
+	// Having at least one helps ensure that caching quirks don't manifest
+	// in the results.
+	const loadingSamplesThrowaway = 1;
+	const loadingIterations = sequence(
+		1,
+		loadingSamples + loadingSamplesThrowaway
+	);
+	it.each( loadingIterations )(
+		`Loading (%i of ${ loadingIterations.length })`,
+		async ( i ) => {
+			// Open the test page in Site Editor.
+			await visitSiteEditor( {
+				postId,
+				postType: 'page',
 			} );
-			await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 
-			if ( i < samples ) {
+			// Wait for the first block.
+			await canvas().waitForSelector( '.wp-block' );
+
+			// Save results.
+			if ( i > loadingSamplesThrowaway ) {
 				const {
 					serverResponse,
 					firstPaint,
@@ -133,52 +134,53 @@ describe( 'Site Editor Performance', () => {
 				results.firstContentfulPaint.push( firstContentfulPaint );
 				results.firstBlock.push( firstBlock );
 			}
+
+			expect( true ).toBe( true );
 		}
-	} );
+	);
 
 	it( 'Typing', async () => {
-		await page.waitForSelector( '.edit-site-visual-editor', {
-			timeout: 120000,
+		// Open the test page in Site Editor.
+		await visitSiteEditor( {
+			postId,
+			postType: 'page',
 		} );
-		await canvas().waitForSelector( '.wp-block', { timeout: 120000 } );
 
-		// Measuring typing performance inside the post content.
-		await canvas().waitForSelector(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
+		// Wait for the first paragraph to be ready.
+		const firstParagraph = await canvas().waitForXPath(
+			'//p[contains(text(), "Lorem ipsum dolor sit amet")]'
 		);
+
+		// Get inside the post content.
 		await enterEditMode();
-		await canvas().focus(
-			'[data-type="core/post-content"] [data-type="core/paragraph"]'
-		);
+
+		// Insert a new paragraph right under the first one.
+		await firstParagraph.focus();
 		await insertBlock( 'Paragraph' );
-		let i = 200;
+
+		// Start tracing.
 		const traceFile = __dirname + '/trace.json';
 		await page.tracing.start( {
 			path: traceFile,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
-		while ( i-- ) {
-			await page.keyboard.type( 'x' );
-		}
+
+		// Type "x" 200 times.
+		await page.keyboard.type( new Array( 200 ).fill( 'x' ).join( '' ) );
+
+		// Stop tracing and save results.
 		await page.tracing.stop();
 		const traceResults = JSON.parse( readFile( traceFile ) );
 		const [ keyDownEvents, keyPressEvents, keyUpEvents ] =
 			getTypingEventDurations( traceResults );
-
-		for ( let j = 0; j < keyDownEvents.length; j++ ) {
+		for ( let i = 0; i < keyDownEvents.length; i++ ) {
 			results.type.push(
-				keyDownEvents[ j ] + keyPressEvents[ j ] + keyUpEvents[ j ]
+				keyDownEvents[ i ] + keyPressEvents[ i ] + keyUpEvents[ i ]
 			);
 		}
 
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-
+		// Delete the original trace file.
 		deleteFile( traceFile );
 
 		expect( true ).toBe( true );

package/specs/performance/utils.js

@@ -124,3 +124,7 @@ export async function getLoadingDurations() {
 export function sum( arr ) {
 	return arr.reduce( ( a, b ) => a + b, 0 );
 }
+
+export function sequence( start, length ) {
+	return Array.from( { length }, ( _, i ) => i + start );
+}

package/specs/site-editor/settings-sidebar.test.js

@@ -75,11 +75,13 @@ describe( 'Settings sidebar', () => {
 
 			expect( templateCardBeforeNavigation ).toMatchObject( {
 				title: 'Index',
-				description: 'Displays posts.',
+				description:
+					'Used as a fallback template for all pages when a more specific template is not defined.',
 			} );
 			expect( templateCardAfterNavigation ).toMatchObject( {
 				title: 'Singular',
-				description: 'Displays a single post or page.',
+				description:
+					'Displays any single entry, such as a post or a page. This template will serve as a fallback when a more specific template (e.g., Single Post, Page, or Attachment) cannot be found.',
 			} );
 		} );
 	} );

package/specs/widgets/editing-widgets.test.js

@@ -24,7 +24,6 @@ import {
  */
 // eslint-disable-next-line no-restricted-imports
 import { find, findAll } from 'puppeteer-testing-library';
-import { groupBy, mapValues } from 'lodash';
 
 describe( 'Widgets screen', () => {
 	beforeEach( async () => {
@@ -945,13 +944,20 @@ async function saveWidgets() {
 async function getSerializedWidgetAreas() {
 	const widgets = await rest( { path: '/wp/v2/widgets' } );
 
-	const serializedWidgetAreas = mapValues(
-		groupBy( widgets, 'sidebar' ),
-		( sidebarWidgets ) =>
-			sidebarWidgets
-				.map( ( widget ) => widget.rendered )
-				.filter( Boolean )
-				.join( '\n' )
+	const serializedWidgetAreas = widgets.reduce(
+		( acc, { sidebar, rendered } ) => {
+			const currentWidgets = acc[ sidebar ] || '';
+			let newWidgets = Boolean( rendered ) ? rendered : '';
+			if ( currentWidgets.length && newWidgets.length ) {
+				newWidgets = '\n' + newWidgets;
+			}
+
+			return {
+				...acc,
+				[ sidebar ]: currentWidgets + newWidgets,
+			};
+		},
+		{}
 	);
 
 	return serializedWidgetAreas;