Site editor: add typing performance test (#32553)

WordPress · Jun 10, 2021 · d78eabd · d78eabd
1 parent 12d9340
commit d78eabd
Show file tree

Hide file tree

Showing 4 changed files with 174 additions and 82 deletions.
diff --git a/packages/e2e-tests/experimental-features.js b/packages/e2e-tests/experimental-features.js
@@ -102,9 +102,10 @@ export const navigationPanel = {
 };
 
 export const siteEditor = {
-	async visit() {
-		const query = addQueryArgs( '', {
+	async visit( query ) {
+		query = addQueryArgs( '', {
 			page: 'gutenberg-edit-site',
+			...query,
 		} ).slice( 1 );
 		await visitAdminPage( 'admin.php', query );
 		await page.waitForSelector( '.edit-site-visual-editor iframe' );

diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js
@@ -2,7 +2,7 @@
  * External dependencies
  */
 import { basename, join } from 'path';
-import { existsSync, readFileSync, unlinkSync, writeFileSync } from 'fs';
+import { writeFileSync } from 'fs';
 
 /**
  * WordPress dependencies
@@ -15,84 +15,17 @@ import {
 	closeGlobalBlockInserter,
 } from '@wordpress/e2e-test-utils';
 
-function readFile( filePath ) {
-	return existsSync( filePath )
-		? readFileSync( filePath, 'utf8' ).trim()
-		: '';
-}
-
-function deleteFile( filePath ) {
-	if ( existsSync( filePath ) ) {
-		unlinkSync( filePath );
-	}
-}
-
-function isKeyEvent( item ) {
-	return (
-		item.cat === 'devtools.timeline' &&
-		item.name === 'EventDispatch' &&
-		item.dur &&
-		item.args &&
-		item.args.data
-	);
-}
-
-function isKeyDownEvent( item ) {
-	return isKeyEvent( item ) && item.args.data.type === 'keydown';
-}
-
-function isKeyPressEvent( item ) {
-	return isKeyEvent( item ) && item.args.data.type === 'keypress';
-}
-
-function isKeyUpEvent( item ) {
-	return isKeyEvent( item ) && item.args.data.type === 'keyup';
-}
-
-function isFocusEvent( item ) {
-	return isKeyEvent( item ) && item.args.data.type === 'focus';
-}
-
-function isClickEvent( item ) {
-	return isKeyEvent( item ) && item.args.data.type === 'click';
-}
-
-function isMouseOverEvent( item ) {
-	return isKeyEvent( item ) && item.args.data.type === 'mouseover';
-}
-
-function isMouseOutEvent( item ) {
-	return isKeyEvent( item ) && item.args.data.type === 'mouseout';
-}
-
-function getEventDurationsForType( trace, filterFunction ) {
-	return trace.traceEvents
-		.filter( filterFunction )
-		.map( ( item ) => item.dur / 1000 );
-}
-
-function getTypingEventDurations( trace ) {
-	return [
-		getEventDurationsForType( trace, isKeyDownEvent ),
-		getEventDurationsForType( trace, isKeyPressEvent ),
-		getEventDurationsForType( trace, isKeyUpEvent ),
-	];
-}
-
-function getSelectionEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isFocusEvent ) ];
-}
-
-function getClickEventDurations( trace ) {
-	return [ getEventDurationsForType( trace, isClickEvent ) ];
-}
-
-function getHoverEventDurations( trace ) {
-	return [
-		getEventDurationsForType( trace, isMouseOverEvent ),
-		getEventDurationsForType( trace, isMouseOutEvent ),
-	];
-}
+/**
+ * Internal dependencies
+ */
+import {
+	readFile,
+	deleteFile,
+	getTypingEventDurations,
+	getClickEventDurations,
+	getHoverEventDurations,
+	getSelectionEventDurations,
+} from './utils';
 
 jest.setTimeout( 1000000 );
 

diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js
@@ -11,12 +11,16 @@ import {
 	trashAllPosts,
 	activateTheme,
 	canvas,
+	createNewPost,
+	saveDraft,
+	insertBlock,
 } from '@wordpress/e2e-test-utils';
 
 /**
  * Internal dependencies
  */
 import { siteEditor } from '../../experimental-features';
+import { readFile, deleteFile, getTypingEventDurations } from './utils';
 
 jest.setTimeout( 1000000 );
 
@@ -42,7 +46,32 @@ describe( 'Site Editor Performance', () => {
 			inserterHover: [],
 		};
 
-		await siteEditor.visit();
+		const html = readFile(
+			join( __dirname, '../../assets/large-post.html' )
+		);
+
+		await createNewPost( { postType: 'page' } );
+		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/block-editor' ).resetBlocks( blocks );
+		}, html );
+		await saveDraft();
+
+		const id = await page.evaluate( () =>
+			new URL( document.location ).searchParams.get( 'post' )
+		);
+
+		await siteEditor.visit( { postId: id, postType: 'page' } );
 
 		let i = 3;
 
@@ -58,13 +87,59 @@ describe( 'Site Editor Performance', () => {
 			results.load.push( new Date() - startTime );
 		}
 
+		// Measuring typing performance inside the post content.
+		await canvas().click(
+			'[data-type="core/post-content"] [data-type="core/paragraph"]'
+		);
+		await insertBlock( 'Paragraph' );
+		i = 200;
+		const traceFile = __dirname + '/trace.json';
+		await page.tracing.start( {
+			path: traceFile,
+			screenshots: false,
+			categories: [ 'devtools.timeline' ],
+		} );
+		while ( i-- ) {
+			await page.keyboard.type( 'x' );
+		}
+		await page.tracing.stop();
+		const traceResults = JSON.parse( readFile( traceFile ) );
+		const [
+			keyDownEvents,
+			keyPressEvents,
+			keyUpEvents,
+		] = getTypingEventDurations( traceResults );
+
+		// Both keydown and keypress events are bubbled from the iframe to the
+		// main frame, which must be ignored. These will be the odd values in
+		// the array.
+		const _keyDownEvents = keyDownEvents.filter(
+			( v, ii ) => ii % 2 === 0
+		);
+		const _keyPressEvents = keyPressEvents.filter(
+			( v, ii ) => ii % 2 === 0
+		);
+
+		expect(
+			_keyDownEvents.length === _keyPressEvents.length &&
+				_keyPressEvents.length === keyUpEvents.length
+		).toBe( true );
+
+		for ( let j = 0; j < _keyDownEvents.length; j++ ) {
+			results.type.push(
+				_keyDownEvents[ j ] + _keyPressEvents[ j ] + keyUpEvents[ j ]
+			);
+		}
+
 		const resultsFilename = basename( __filename, '.js' ) + '.results.json';
 
 		writeFileSync(
 			join( __dirname, resultsFilename ),
 			JSON.stringify( results, null, 2 )
 		);
 
+		deleteFile( traceFile );
+
 		expect( true ).toBe( true );
 	} );
 } );
diff --git a/packages/e2e-tests/specs/performance/utils.js b/packages/e2e-tests/specs/performance/utils.js
@@ -0,0 +1,83 @@
+/**
+ * External dependencies
+ */
+import { existsSync, readFileSync, unlinkSync } from 'fs';
+
+export function readFile( filePath ) {
+	return existsSync( filePath )
+		? readFileSync( filePath, 'utf8' ).trim()
+		: '';
+}
+
+export function deleteFile( filePath ) {
+	if ( existsSync( filePath ) ) {
+		unlinkSync( filePath );
+	}
+}
+
+function isEvent( item ) {
+	return (
+		item.cat === 'devtools.timeline' &&
+		item.name === 'EventDispatch' &&
+		item.dur &&
+		item.args &&
+		item.args.data
+	);
+}
+
+function isKeyDownEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'keydown';
+}
+
+function isKeyPressEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'keypress';
+}
+
+function isKeyUpEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'keyup';
+}
+
+function isFocusEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'focus';
+}
+
+function isClickEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'click';
+}
+
+function isMouseOverEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'mouseover';
+}
+
+function isMouseOutEvent( item ) {
+	return isEvent( item ) && item.args.data.type === 'mouseout';
+}
+
+function getEventDurationsForType( trace, filterFunction ) {
+	return trace.traceEvents
+		.filter( filterFunction )
+		.map( ( item ) => item.dur / 1000 );
+}
+
+export function getTypingEventDurations( trace ) {
+	return [
+		getEventDurationsForType( trace, isKeyDownEvent ),
+		getEventDurationsForType( trace, isKeyPressEvent ),
+		getEventDurationsForType( trace, isKeyUpEvent ),
+	];
+}
+
+export function getSelectionEventDurations( trace ) {
+	return [ getEventDurationsForType( trace, isFocusEvent ) ];
+}
+
+export function getClickEventDurations( trace ) {
+	return [ getEventDurationsForType( trace, isClickEvent ) ];
+}
+
+export function getHoverEventDurations( trace ) {
+	return [
+		getEventDurationsForType( trace, isMouseOverEvent ),
+		getEventDurationsForType( trace, isMouseOutEvent ),
+	];
+}