Add performance test for toggling open list view

bin/plugin/commands/performance.js

@@ -40,6 +40,7 @@ const config = require( '../config' );
  * @property {number[]} inserterOpen         Average time to open global inserter.
  * @property {number[]} inserterSearch       Average time to search the inserter.
  * @property {number[]} inserterHover        Average time to move mouse between two block item in the inserter.
+ * @property {number[]} listViewOpen         Average time to open listView
  */
 
 /**
@@ -66,6 +67,9 @@ const config = require( '../config' );
  * @property {number=} inserterHover        Average time to move mouse between two block item in the inserter.
  * @property {number=} minInserterHover     Min time to move mouse between two block item in the inserter.
  * @property {number=} maxInserterHover     Max time to move mouse between two block item in the inserter.
+ * @property {number=} listViewOpen         Average time to open list view.
+ * @property {number=} minListViewOpen      Min time to open list view.
+ * @property {number=} maxListViewOpen      Max time to open list view.
  */
 
 /**
@@ -136,6 +140,9 @@ function curateResults( results ) {
 		inserterHover: average( results.inserterHover ),
 		minInserterHover: Math.min( ...results.inserterHover ),
 		maxInserterHover: Math.max( ...results.inserterHover ),
+		listViewOpen: average( results.listViewOpen ),
+		minListViewOpen: Math.min( ...results.listViewOpen ),
+		maxListViewOpen: Math.max( ...results.listViewOpen ),
 	};
 }
 
@@ -378,6 +385,15 @@ async function runPerformanceTests( branches, options ) {
 					maxInserterHover: rawResults.map(
 						( r ) => r[ branch ].maxInserterHover
 					),
+					listViewOpen: rawResults.map(
+						( r ) => r[ branch ].listViewOpen
+					),
+					minListViewOpen: rawResults.map(
+						( r ) => r[ branch ].minListViewOpen
+					),
+					maxListViewOpen: rawResults.map(
+						( r ) => r[ branch ].maxListViewOpen
+					),
 				},
 				median
 			);

packages/e2e-test-utils/README.md

@@ -111,6 +111,10 @@ _Parameters_
 
 Undocumented declaration.
 
+### closeListView
+
+Closes list view
+
 ### createEmbeddingMatcher
 
 Creates a function to determine if a request is embedding a certain URL.
@@ -505,6 +509,10 @@ Clicks on the button in the header which opens Document Settings sidebar when it
 
 Opens the global block inserter.
 
+### openListView
+
+Opens list view
+
 ### openPreviewPage
 
 Opens the preview page of an edited post.

packages/e2e-test-utils/src/index.js

@@ -90,5 +90,6 @@ export {
 	rest as __experimentalRest,
 	batch as __experimentalBatch,
 } from './rest-api';
+export { openListView, closeListView } from './list-view';
 
 export * from './mocks';

packages/e2e-test-utils/src/list-view.js

@@ -0,0 +1,33 @@
+async function toggleListView() {
+	await page.click(
+		'.edit-post-header-toolbar__list-view-toggle, .edit-site-header-toolbar__list-view-toggle'
+	);
+}
+
+async function isListViewOpen() {
+	return await page.evaluate( () => {
+		return !! document.querySelector(
+			'.edit-post-header-toolbar__list-view-toggle.is-pressed, .edit-site-header-toolbar__list-view-toggle.is-pressed'
+		);
+	} );
+}
+
+/**
+ * Opens list view
+ */
+export async function openListView() {
+	const isOpen = await isListViewOpen();
+	if ( ! isOpen ) {
+		await toggleListView();
+	}
+}
+
+/**
+ * Closes list view
+ */
+export async function closeListView() {
+	const isOpen = await isListViewOpen();
+	if ( isOpen ) {
+		await toggleListView();
+	}
+}

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

@@ -37,6 +37,7 @@ class PerformanceReporter {
 			firstBlock,
 			type,
 			focus,
+			listViewOpen,
 			inserterOpen,
 			inserterHover,
 			inserterSearch,
@@ -90,6 +91,21 @@ Fastest time to select a block: ${ success(
 			) }` );
 		}
 
+		if ( listViewOpen && listViewOpen.length ) {
+			// eslint-disable-next-line no-console
+			console.log( `
+${ title( 'Opening List View Performance:' ) }
+Average time to open list view: ${ success(
+				round( average( listViewOpen ) ) + 'ms'
+			) }
+Slowest time to open list view: ${ success(
+				round( Math.max( ...listViewOpen ) ) + 'ms'
+			) }
+Fastest time to open list view: ${ success(
+				round( Math.min( ...listViewOpen ) ) + 'ms'
+			) }` );
+		}
+
 		if ( inserterOpen && inserterOpen.length ) {
 			// eslint-disable-next-line no-console
 			console.log( `

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

@@ -13,6 +13,8 @@ import {
 	saveDraft,
 	openGlobalBlockInserter,
 	closeGlobalBlockInserter,
+	openListView,
+	closeListView,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -40,6 +42,7 @@ describe( 'Post Editor Performance', () => {
 		firstBlock: [],
 		type: [],
 		focus: [],
+		listViewOpen: [],
 		inserterOpen: [],
 		inserterHover: [],
 		inserterSearch: [],
@@ -117,7 +120,7 @@ describe( 'Post Editor Performance', () => {
 
 	it( 'Typing', async () => {
 		// Measuring typing performance
-		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
+		await openListView();
 		await page.click( '.edit-post-visual-editor__post-title-wrapper' );
 		await page.keyboard.press( 'Enter' );
 		let i = 20;
@@ -158,7 +161,7 @@ describe( 'Post Editor Performance', () => {
 	it( 'Selecting blocks', async () => {
 		// Measuring block selection performance
 		await createNewPost();
-		await page.click( '.edit-post-header-toolbar__list-view-toggle' );
+		await openListView();
 		await page.evaluate( () => {
 			const { createBlock } = window.wp.blocks;
 			const { dispatch } = window.wp.data;
@@ -186,6 +189,26 @@ describe( 'Post Editor Performance', () => {
 		results.focus = focusEvents;
 	} );
 
+	it( 'Opening persistent list view', async () => {
+		// Measure time to open inserter
+		await page.waitForSelector( '.edit-post-layout' );
+		for ( let j = 0; j < 10; j++ ) {
+			await page.tracing.start( {
+				path: traceFile,
+				screenshots: false,
+				categories: [ 'devtools.timeline' ],
+			} );
+			await openListView();
+			await page.tracing.stop();
+			traceResults = JSON.parse( readFile( traceFile ) );
+			const [ mouseClickEvents ] = getClickEventDurations( traceResults );
+			for ( let k = 0; k < mouseClickEvents.length; k++ ) {
+				results.listViewOpen.push( mouseClickEvents[ k ] );
+			}
+			await closeListView();
+		}
+	} );
+
 	it( 'Opening the inserter', async () => {
 		// Measure time to open inserter
 		await page.waitForSelector( '.edit-post-layout' );

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

@@ -13,6 +13,7 @@ import {
 	canvas,
 	createNewPost,
 	saveDraft,
+	openListView,
 } from '@wordpress/e2e-test-utils';
 
 /**
@@ -116,7 +117,7 @@ describe( 'Site Editor Performance', () => {
 		await canvas().click(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);
-		await page.click( '.edit-site-header-toolbar__list-view-toggle' );
+		await openListView();
 		await canvas().click(
 			'[data-type="core/post-content"] [data-type="core/paragraph"]'
 		);