Perf testing: Cover Site Editor loading time

.github/workflows/performance.yml

@@ -36,4 +36,4 @@ jobs:
         npm ci
 
     - name: Run the performance tests
-      run: ./bin/plugin/cli.js perf --ci $GITHUB_SHA master
+      run: ./bin/plugin/cli.js perf --ci $GITHUB_SHA master --tests-branch $GITHUB_SHA

bin/plugin/cli.js

@@ -58,6 +58,10 @@ program
 	.command( 'performance-tests [branches...]' )
 	.alias( 'perf' )
 	.option( '-c, --ci', 'Run in CI (non interactive)' )
+	.option(
+		'--tests-branch <branch>',
+		"Use this branch's performance test files"
+	)
 	.description(
 		'Runs performance tests on two separate branches and outputs the result'
 	)

bin/plugin/commands/performance.js

@@ -19,7 +19,8 @@ const config = require( '../config' );
 /**
  * @typedef WPPerformanceCommandOptions
  *
- * @property {boolean=} ci Run on CI.
+ * @property {boolean=} ci          Run on CI.
+ * @property {string=}  testsBranch The branch whose performance test files will be used for testing.
  */
 
 /**
@@ -119,13 +120,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 +150,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 }.test.js`,
 			performanceTestDirectory
 		);
 		const rawResults = await readJSONFile(
 			path.join(
 				performanceTestDirectory,
-				'packages/e2e-tests/specs/performance/results.json'
+				`packages/e2e-tests/specs/performance/${ testSuite }.test.results.json`
 			)
 		);
 		results.push( curateResults( rawResults ) );
@@ -198,6 +201,19 @@ async function runPerformanceTests( branches, options ) {
 
 	log( '>> Cloning the repository' );
 	const performanceTestDirectory = await git.clone( config.gitRepositoryURL );
+
+	if ( !! options.testsBranch ) {
+		log(
+			'>> Fetching the ' +
+				formats.success( options.testsBranch ) +
+				' branch'
+		);
+		await git.checkoutRemoteBranch(
+			performanceTestDirectory,
+			options.testsBranch
+		);
+	}
+
 	const environmentDirectory = getRandomTemporaryPath();
 	log(
 		'>> Perf Tests Directory : ' +
@@ -220,21 +236,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.test.js

@@ -1,7 +1,7 @@
 /**
  * External dependencies
  */
-import { join } from 'path';
+import { basename, join } from 'path';
 import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs';
 
 /**
@@ -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: [],
@@ -182,8 +182,10 @@ describe( 'Performance', () => {
 		const [ focusEvents ] = getSelectionEventDurations( traceResults );
 		results.focus = focusEvents;
 
+		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+
 		writeFileSync(
-			__dirname + '/results.json',
+			join( __dirname, resultsFilename ),
 			JSON.stringify( results, null, 2 )
 		);
 

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

@@ -0,0 +1,80 @@
+/**
+ * External dependencies
+ */
+import { basename, join } from 'path';
+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
+			);
+		}
+
+		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
+
+		writeFileSync(
+			join( __dirname, resultsFilename ),
+			JSON.stringify( results, null, 2 )
+		);
+
+		expect( true ).toBe( true );
+	} );
+} );