Performance: add e2e tests for load and typing time

package.json

@@ -187,6 +187,7 @@
 		"pretest-e2e": "cross-env SCRIPT_DEBUG=false ./bin/reset-local-e2e-tests.sh",
 		"test-e2e": "wp-scripts test-e2e --config packages/e2e-tests/jest.config.js",
 		"test-e2e:watch": "npm run test-e2e -- --watch",
+		"test-performance": "wp-scripts test-e2e --config packages/e2e-tests/jest.performance.config.js",
 		"test-php": "npm run lint-php && npm run test-unit-php",
 		"test-unit": "wp-scripts test-unit-js --config test/unit/jest.config.js",
 		"test-unit:update": "npm run test-unit -- --updateSnapshot",

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

@@ -0,0 +1,29 @@
+const { readFileSync, existsSync } = require( 'fs' );
+
+function average( array ) {
+	return array.reduce( ( a, b ) => a + b ) / array.length;
+}
+
+class PerformanceReporter {
+	onRunComplete() {
+		const path = __dirname + '/../specs/results.json';
+
+		if ( ! existsSync( path ) ) {
+			return;
+		}
+
+		const results = readFileSync( path, 'utf8' );
+		const { load, domcontentloaded, type } = JSON.parse( results );
+
+		// eslint-disable-next-line no-console
+		console.log( `
+Average time to load: ${ average( load ) }ms
+Average time to DOM content load: ${ average( domcontentloaded ) }ms
+Average time to type character: ${ average( type ) }ms
+Slowest time to type character: ${ Math.max( ...type ) }ms
+Fastest time to type character: ${ Math.min( ...type ) }ms
+		` );
+	}
+}
+
+module.exports = PerformanceReporter;

packages/e2e-tests/jest.config.js

@@ -9,4 +9,7 @@ module.exports = {
 		'@wordpress/jest-puppeteer-axe',
 		'expect-puppeteer',
 	],
+	testPathIgnorePatterns: [
+		'e2e-tests/specs/performance.test.js',
+	],
 };

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

@@ -0,0 +1,23 @@
+module.exports = {
+	...require( '@wordpress/scripts/config/jest-e2e.config' ),
+	testMatch: [
+		'**/performance.test.js',
+	],
+	setupFiles: [
+		'<rootDir>/config/gutenberg-phase.js',
+	],
+	setupFilesAfterEnv: [
+		'<rootDir>/config/setup-test-framework.js',
+		'@wordpress/jest-console',
+		'@wordpress/jest-puppeteer-axe',
+		'expect-puppeteer',
+	],
+	transformIgnorePatterns: [
+		'node_modules',
+		'scripts/config/puppeteer.config.js',
+	],
+	reporters: [
+		'default',
+		'<rootDir>/config/performance-reporter.js',
+	],
+};

packages/e2e-tests/specs/.gitignore

@@ -0,0 +1 @@
+*.json

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

@@ -0,0 +1,72 @@
+/**
+ * External dependencies
+ */
+import { join } from 'path';
+import { existsSync, readFileSync, writeFileSync } from 'fs';
+
+/**
+ * WordPress dependencies
+ */
+import {
+	createNewPost,
+	saveDraft,
+	insertBlock,
+} from '@wordpress/e2e-test-utils';
+
+function readFile( filePath ) {
+	return existsSync( filePath ) ? readFileSync( filePath, 'utf8' ).trim() : '';
+}
+
+describe( 'Performance', () => {
+	it( '1000 paragraphs', async () => {
+		const html = readFile( join( __dirname, '../assets/large-post.html' ) );
+
+		await createNewPost();
+		await page.evaluate( ( _html ) => {
+			const { parse } = window.wp.blocks;
+			const { dispatch } = window.wp.data;
+			const blocks = parse( _html );
+
+			blocks.forEach( ( block ) => {
+				if ( block.name === 'core/image' ) {
+					delete block.attributes.id;
+					delete block.attributes.url;
+				}
+			} );
+
+			dispatch( 'core/editor' ).resetBlocks( blocks );
+		}, html );
+		await saveDraft();
+
+		const results = {
+			load: [],
+			domcontentloaded: [],
+			type: [],
+		};
+
+		let i = 1;
+		let startTime;
+
+		await page.on( 'load', () => results.load.push( new Date() - startTime ) );
+		await page.on( 'domcontentloaded', () => results.domcontentloaded.push( new Date() - startTime ) );
+
+		while ( i-- ) {
+			startTime = new Date();
+			await page.reload( { waitUntil: [ 'domcontentloaded', 'load' ] } );
+		}
+
+		await insertBlock( 'Paragraph' );
+
+		i = 200;
+
+		while ( i-- ) {
+			startTime = new Date();
+			await page.keyboard.type( 'x' );
+			results.type.push( new Date() - startTime );
+		}
+
+		writeFileSync( __dirname + '/results.json', JSON.stringify( results, null, 2 ) );
+
+		expect( true ).toBe( true );
+	} );
+} );