@wordpress/e2e-tests 6.5.1 → 7.1.0

package/specs/performance/site-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,8 +23,11 @@ import {
 import {
 	readFile,
 	deleteFile,
+	saveResultsFile,
+	getTraceFilePath,
 	getTypingEventDurations,
 	getLoadingDurations,
+	sequence,
 } from './utils';
 
 jest.setTimeout( 1000000 );
@@ -46,7 +48,7 @@ const results = {
 	listViewOpen: [],
 };
 
-let id;
+let postId;
 
 describe( 'Site Editor Performance', () => {
 	beforeAll( async () => {
@@ -55,10 +57,11 @@ describe( 'Site Editor Performance', () => {
 		await deleteAllTemplates( 'wp_template_part' );
 
 		const html = readFile(
-			join( __dirname, '../../assets/large-post.html' )
+			path.join( __dirname, '../../assets/large-post.html' )
 		);
 
 		await createNewPost( { postType: 'page' } );
+
 		await page.evaluate( ( _html ) => {
 			const { parse } = window.wp.blocks;
 			const { dispatch } = window.wp.data;
@@ -75,48 +78,42 @@ describe( 'Site Editor Performance', () => {
 		}, html );
 		await saveDraft();
 
-		id = await page.evaluate( () =>
+		postId = await page.evaluate( () =>
 			new URL( document.location ).searchParams.get( 'post' )
 		);
 	} );
 
 	afterAll( async () => {
+		saveResultsFile( __filename, results );
 		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,53 +130,54 @@ 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;
-		const traceFile = __dirname + '/trace.json';
+
+		// Start tracing.
+		const traceFilePath = getTraceFilePath();
 		await page.tracing.start( {
-			path: traceFile,
+			path: traceFilePath,
 			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 traceResults = JSON.parse( readFile( traceFilePath ) );
 		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 )
-		);
-
-		deleteFile( traceFile );
+		// Delete the original trace file.
+		deleteFile( traceFilePath );
 
 		expect( true ).toBe( true );
 	} );

package/specs/performance/utils.js

@@ -1,7 +1,8 @@
 /**
  * External dependencies
  */
-import { existsSync, readFileSync, unlinkSync } from 'fs';
+import path from 'path';
+import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs';
 
 export function readFile( filePath ) {
 	return existsSync( filePath )
@@ -15,6 +16,21 @@ export function deleteFile( filePath ) {
 	}
 }
 
+export function getTraceFilePath() {
+	return path.join( process.env.WP_ARTIFACTS_PATH, '/trace.json' );
+}
+
+export function saveResultsFile( testFilename, results ) {
+	const resultsFilename =
+		process.env.RESULTS_FILENAME ||
+		path.basename( testFilename, '.js' ) + '.performance-results.json';
+
+	return writeFileSync(
+		path.join( process.env.WP_ARTIFACTS_PATH, resultsFilename ),
+		JSON.stringify( results, null, 2 )
+	);
+}
+
 function isEvent( item ) {
 	return (
 		item.cat === 'devtools.timeline' &&
@@ -124,3 +140,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;

package/specs/editor/various/__snapshots__/multi-block-selection.test.js.snap

@@ -1,347 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Multi-block selection should allow selecting outer edge if there is no sibling block 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should always expand single line selection 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should clear selection when clicking next to blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should copy and paste 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should copy and paste 2`] = `""`;
-
-exports[`Multi-block selection should copy and paste 3`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should copy multiple blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should cut and paste 1`] = `""`;
-
-exports[`Multi-block selection should cut and paste 2`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should forward delete across blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2 class="wp-block-heading">]2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should forward delete across blocks 2`] = `
-"<!-- wp:heading -->
-<h2 class="wp-block-heading">1&amp;2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should gradually multi-select 1`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"><!-- wp:column -->
-<div class="wp-block-column"><!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:column -->
-
-<!-- wp:column -->
-<div class="wp-block-column"></div>
-<!-- /wp:column --></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Multi-block selection should gradually multi-select 2`] = `
-"<!-- wp:columns -->
-<div class="wp-block-columns"></div>
-<!-- /wp:columns -->"
-`;
-
-exports[`Multi-block selection should handle Enter across blocks 1`] = `
-"<!-- wp:paragraph -->
-<p>1[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2 class="wp-block-heading">]2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should handle Enter across blocks 2`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>&amp;</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:heading -->
-<h2 class="wp-block-heading">2</h2>
-<!-- /wp:heading -->"
-`;
-
-exports[`Multi-block selection should multi-select from within the list block 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:list -->
-<ul><!-- wp:list-item -->
-<li>1</li>
-<!-- /wp:list-item --></ul>
-<!-- /wp:list -->"
-`;
-
-exports[`Multi-block selection should not multi select single block 1`] = `
-"<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should only trigger multi-selection when at the end 1`] = `
-"<!-- wp:paragraph -->
-<p>1.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should partially select with shift + click 1`] = `
-"<!-- wp:paragraph -->
-<p><strong>1</strong>[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>]2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should partially select with shift + click 2`] = `
-"<!-- wp:paragraph -->
-<p><strong>1</strong>&amp;2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should place the caret at the end of last pasted paragraph (paste mid-block) 1`] = `
-"<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragr</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragrap</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>aph</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should place the caret at the end of last pasted paragraph (paste to empty editor) 1`] = `
-"<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragrap</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should place the caret at the end of last pasted paragraph (replace) 1`] = `
-"<!-- wp:paragraph -->
-<p>first paragraph</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>second paragrap</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should preserve dragged selection on move 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should properly select multiple blocks if selected nested blocks belong to different parent 1`] = `
-"<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:paragraph -->
-<p>first</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>group</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->
-
-<!-- wp:group {"layout":{"type":"constrained"}} -->
-<div class="wp-block-group"><!-- wp:paragraph -->
-<p>second</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>group</p>
-<!-- /wp:paragraph --></div>
-<!-- /wp:group -->"
-`;
-
-exports[`Multi-block selection should return original focus after failed multi selection attempt 1`] = `
-"<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should select all from empty selection 1`] = `
-"<!-- wp:paragraph -->
-<p>1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should select all from empty selection 2`] = `""`;
-
-exports[`Multi-block selection should select separator (single element block) 1`] = `
-"<!-- wp:paragraph -->
-<p>a</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p></p>
-<!-- /wp:paragraph -->
-
-<!-- wp:separator -->
-<hr class="wp-block-separator has-alpha-channel-opacity"/>
-<!-- /wp:separator -->"
-`;
-
-exports[`Multi-block selection should select separator (single element block) 2`] = `
-"<!-- wp:paragraph -->
-<p>&amp;</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should set attributes for multiple paragraphs 1`] = `
-"<!-- wp:paragraph {"align":"center"} -->
-<p class="has-text-align-center">1</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph {"align":"center"} -->
-<p class="has-text-align-center">2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should use selection direction to determine vertical edge 1`] = `
-"<!-- wp:paragraph -->
-<p>1<br>2.</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>3</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should write over selection 1`] = `
-"<!-- wp:paragraph -->
-<p>1[</p>
-<!-- /wp:paragraph -->
-
-<!-- wp:paragraph -->
-<p>]2</p>
-<!-- /wp:paragraph -->"
-`;
-
-exports[`Multi-block selection should write over selection 2`] = `
-"<!-- wp:paragraph -->
-<p>1...2</p>
-<!-- /wp:paragraph -->"
-`;