diff --git a/bin/plugin/commands/performance.js b/bin/plugin/commands/performance.js index 6bb98ec4646bb..4f8842901b263 100644 --- a/bin/plugin/commands/performance.js +++ b/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 ); diff --git a/packages/e2e-test-utils/README.md b/packages/e2e-test-utils/README.md index aa7d460dac56d..2e29a1b8475bd 100644 --- a/packages/e2e-test-utils/README.md +++ b/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. diff --git a/packages/e2e-test-utils/src/index.js b/packages/e2e-test-utils/src/index.js index b0613bc3a7d41..6901625577e96 100644 --- a/packages/e2e-test-utils/src/index.js +++ b/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'; diff --git a/packages/e2e-test-utils/src/list-view.js b/packages/e2e-test-utils/src/list-view.js new file mode 100644 index 0000000000000..03121c5f84af7 --- /dev/null +++ b/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(); + } +} diff --git a/packages/e2e-tests/config/performance-reporter.js b/packages/e2e-tests/config/performance-reporter.js index 6c314917f8ac2..549855bf29713 100644 --- a/packages/e2e-tests/config/performance-reporter.js +++ b/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( ` diff --git a/packages/e2e-tests/specs/performance/post-editor.test.js b/packages/e2e-tests/specs/performance/post-editor.test.js index 3bcf303207cc8..fa1893923a29f 100644 --- a/packages/e2e-tests/specs/performance/post-editor.test.js +++ b/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' ); diff --git a/packages/e2e-tests/specs/performance/site-editor.test.js b/packages/e2e-tests/specs/performance/site-editor.test.js index 67671b47c7f8e..b1d04d636d413 100644 --- a/packages/e2e-tests/specs/performance/site-editor.test.js +++ b/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"]' );