Perf testing: Cover Site Editor loading time

bin/plugin/commands/performance.js

@@ -119,13 +119,15 @@ function curateResults( results ) {
  *
  * @param {string} performanceTestDirectory Path to the performance tests' clone.
  * @param {string} environmentDirectory     Path to the plugin environment's clone.
+ * @param {string} testSuite                Name of the tests set.
  * @param {string} branch                   Branch name.
  *
  * @return {Promise<WPFormattedPerformanceResults>} Performance results for the branch.
  */
 async function getPerformanceResultsForBranch(
 	performanceTestDirectory,
 	environmentDirectory,
+	testSuite,
 	branch
 ) {
 	// Restore clean working directory (e.g. if `package-lock.json` has local
@@ -147,13 +149,13 @@ async function getPerformanceResultsForBranch(
 	const results = [];
 	for ( let i = 0; i < 3; i++ ) {
 		await runShellScript(
-			'npm run test-performance',
+			`npm run test-performance -- packages/e2e-tests/specs/performance/${ testSuite }.performance.test.js`,
 			performanceTestDirectory
 		);
 		const rawResults = await readJSONFile(
 			path.join(
 				performanceTestDirectory,
-				'packages/e2e-tests/specs/performance/results.json'
+				`packages/e2e-tests/specs/performance/${ testSuite }.performance.test.results.json`
 			)
 		);
 		results.push( curateResults( rawResults ) );
@@ -220,21 +222,32 @@ async function runPerformanceTests( branches, options ) {
 	log( '>> Starting the WordPress environment' );
 	await runShellScript( 'npm run wp-env start', environmentDirectory );
 
-	/** @type {Record<string, WPFormattedPerformanceResults>} */
+	const testSuites = [ 'post-editor', 'site-editor' ];
+
+	/** @type {Record<string,Record<string, WPFormattedPerformanceResults>>} */
 	const results = {};
-	for ( const branch of branches ) {
-		results[ branch ] = await getPerformanceResultsForBranch(
-			performanceTestDirectory,
-			environmentDirectory,
-			branch
-		);
+	for ( const testSuite of testSuites ) {
+		results[ testSuite ] = {};
+		for ( const branch of branches ) {
+			results[ testSuite ][
+				branch
+			] = await getPerformanceResultsForBranch(
+				performanceTestDirectory,
+				environmentDirectory,
+				testSuite,
+				branch
+			);
+		}
 	}
 
 	log( '>> Stopping the WordPress environment' );
 	await runShellScript( 'npm run wp-env stop', environmentDirectory );
 
 	log( '\n>> 🎉 Results.\n' );
-	console.table( results );
+	for ( const testSuite of testSuites ) {
+		log( `\n>> ${ testSuite }\n` );
+		console.table( results[ testSuite ] );
+	}
 }
 
 module.exports = {

packages/e2e-tests/config/performance-reporter.js

@@ -2,6 +2,7 @@
  * External dependencies
  */
 const { readFileSync, existsSync } = require( 'fs' );
+const path = require( 'path' );
 const chalk = require( 'chalk' );
 
 function average( array ) {
@@ -17,14 +18,16 @@ const title = chalk.bold;
 const success = chalk.bold.green;
 
 class PerformanceReporter {
-	onRunComplete() {
-		const path = __dirname + '/../specs/performance/results.json';
+	onTestResult( test ) {
+		const dirname = path.dirname( test.path );
+		const basename = path.basename( test.path, '.js' );
+		const filepath = path.join( dirname, basename + '.results.json' );
 
-		if ( ! existsSync( path ) ) {
+		if ( ! existsSync( filepath ) ) {
 			return;
 		}
 
-		const results = readFileSync( path, 'utf8' );
+		const results = readFileSync( filepath, 'utf8' );
 		const { load, domcontentloaded, type, focus } = JSON.parse( results );
 
 		if ( load && load.length ) {

packages/e2e-tests/specs/performance/performance.test.js → packages/e2e-tests/specs/performance/post-editor.performance.test.js

@@ -71,7 +71,7 @@ function getSelectionEventDurations( trace ) {
 
 jest.setTimeout( 1000000 );
 
-describe( 'Performance', () => {
+describe( 'Post Editor Performance', () => {
 	it( 'Loading, typing and selecting blocks', async () => {
 		const results = {
 			load: [],
@@ -183,7 +183,7 @@ describe( 'Performance', () => {
 		results.focus = focusEvents;
 
 		writeFileSync(
-			__dirname + '/results.json',
+			__dirname + '/post-editor.performance.test.results.json',
 			JSON.stringify( results, null, 2 )
 		);
 

packages/e2e-tests/specs/performance/site-editor.performance.test.js

@@ -0,0 +1,77 @@
+/**
+ * External dependencies
+ */
+import { writeFileSync } from 'fs';
+
+/**
+ * Internal dependencies
+ */
+import { useExperimentalFeatures } from '../../experimental-features';
+
+/**
+ * WordPress dependencies
+ */
+import { trashAllPosts, visitAdminPage } from '@wordpress/e2e-test-utils';
+import { addQueryArgs } from '@wordpress/url';
+
+jest.setTimeout( 1000000 );
+
+describe( 'Site Editor Performance', () => {
+	useExperimentalFeatures( [
+		'#gutenberg-full-site-editing',
+		'#gutenberg-full-site-editing-demo',
+	] );
+
+	beforeAll( async () => {
+		await trashAllPosts( 'wp_template' );
+		await trashAllPosts( 'wp_template_part' );
+	} );
+	afterAll( async () => {
+		await trashAllPosts( 'wp_template' );
+		await trashAllPosts( 'wp_template_part' );
+	} );
+
+	it( 'Loading', async () => {
+		const results = {
+			load: [],
+			domcontentloaded: [],
+			type: [],
+			focus: [],
+		};
+
+		visitAdminPage(
+			'admin.php',
+			addQueryArgs( '', {
+				page: 'gutenberg-edit-site',
+			} ).slice( 1 )
+		);
+
+		let i = 1;
+
+		// Measuring loading time
+		while ( i-- ) {
+			await page.reload( { waitUntil: [ 'domcontentloaded', 'load' ] } );
+			const timings = JSON.parse(
+				await page.evaluate( () =>
+					JSON.stringify( window.performance.timing )
+				)
+			);
+			const {
+				navigationStart,
+				domContentLoadedEventEnd,
+				loadEventEnd,
+			} = timings;
+			results.load.push( loadEventEnd - navigationStart );
+			results.domcontentloaded.push(
+				domContentLoadedEventEnd - navigationStart
+			);
+		}
+
+		writeFileSync(
+			__dirname + '/site-editor.performance.test.results.json',
+			JSON.stringify( results, null, 2 )
+		);
+
+		expect( true ).toBe( true );
+	} );
+} );