@wordpress/e2e-tests 7.0.0 → 7.2.0

package/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+## 7.2.0 (2023-04-12)
+
+## 7.1.0 (2023-03-29)
+
 ## 7.0.0 (2023-03-15)
 
 ### Breaking Changes

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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@wordpress/e2e-tests",
-	"version": "7.0.0",
+	"version": "7.2.0",
 	"description": "End-To-End (E2E) tests for WordPress.",
 	"author": "The WordPress Contributors",
 	"license": "GPL-2.0-or-later",
@@ -23,11 +23,11 @@
 		"node": ">=14"
 	},
 	"dependencies": {
-		"@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",
+		"@wordpress/e2e-test-utils": "^10.2.0",
+		"@wordpress/jest-console": "^7.2.0",
+		"@wordpress/jest-puppeteer-axe": "^6.2.0",
+		"@wordpress/scripts": "^26.2.0",
+		"@wordpress/url": "^3.32.0",
 		"chalk": "^4.0.0",
 		"expect-puppeteer": "^4.4.0",
 		"filenamify": "^4.2.0",
@@ -45,5 +45,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "9534a7b3bbf07c1d40b94fdb7a3d091f297bfb06"
+	"gitHead": "d61700b9f1c72ba0b030fc815ef1685b4f4031ec"
 }

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/plugins/cpt-locking.test.js

@@ -41,9 +41,7 @@ describe( 'cpt locking', () => {
 		);
 		await clickBlockToolbarButton( 'Options' );
 		expect(
-			await page.$x(
-				'//button/span[contains(text(), "Remove Paragraph")]'
-			)
+			await page.$x( '//button/span[contains(text(), "Delete")]' )
 		).toHaveLength( 0 );
 	};
 
@@ -180,7 +178,7 @@ describe( 'cpt locking', () => {
 				'p1'
 			);
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Remove Paragraph' );
+			await clickMenuItem( 'Delete' );
 			expect( await getEditedPostContent() ).toMatchSnapshot();
 		} );
 
@@ -200,7 +198,7 @@ describe( 'cpt locking', () => {
 				'p1'
 			);
 			await clickBlockToolbarButton( 'Options' );
-			await clickMenuItem( 'Remove Paragraph' );
+			await clickMenuItem( 'Delete' );
 
 			expect( await getEditedPostContent() ).toMatchSnapshot();
 		} );

package/specs/editor/various/reusable-blocks.test.js

@@ -244,7 +244,7 @@ describe( 'Reusable blocks', () => {
 		// Delete the block, leaving the reusable block empty.
 		await clickBlockToolbarButton( 'Options' );
 		const deleteButton = await page.waitForXPath(
-			'//button/span[text()="Remove Paragraph"]'
+			'//button/span[text()="Delete"]'
 		);
 		deleteButton.click();
 

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++ ) {

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,6 +23,8 @@ import {
 import {
 	readFile,
 	deleteFile,
+	saveResultsFile,
+	getTraceFilePath,
 	getTypingEventDurations,
 	getLoadingDurations,
 	sequence,
@@ -56,7 +57,7 @@ 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' } );
@@ -83,12 +84,7 @@ describe( 'Site Editor Performance', () => {
 	} );
 
 	afterAll( async () => {
-		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
-		writeFileSync(
-			join( __dirname, resultsFilename ),
-			JSON.stringify( results, null, 2 )
-		);
-
+		saveResultsFile( __filename, results );
 		await deleteAllTemplates( 'wp_template' );
 		await deleteAllTemplates( 'wp_template_part' );
 		await activateTheme( 'twentytwentyone' );
@@ -159,9 +155,9 @@ describe( 'Site Editor Performance', () => {
 		await insertBlock( 'Paragraph' );
 
 		// Start tracing.
-		const traceFile = __dirname + '/trace.json';
+		const traceFilePath = getTraceFilePath();
 		await page.tracing.start( {
-			path: traceFile,
+			path: traceFilePath,
 			screenshots: false,
 			categories: [ 'devtools.timeline' ],
 		} );
@@ -171,7 +167,7 @@ describe( 'Site Editor Performance', () => {
 
 		// 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 i = 0; i < keyDownEvents.length; i++ ) {
@@ -181,7 +177,7 @@ describe( 'Site Editor Performance', () => {
 		}
 
 		// Delete the original trace file.
-		deleteFile( traceFile );
+		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' &&