diff --git a/test/performance/config/performance-reporter.ts b/test/performance/config/performance-reporter.ts index 7b1f171230c59e..6f9229be866a03 100644 --- a/test/performance/config/performance-reporter.ts +++ b/test/performance/config/performance-reporter.ts @@ -32,6 +32,7 @@ export interface WPRawPerformanceResults { inserterOpen: number[]; inserterSearch: number[]; inserterHover: number[]; + loadPatterns: number[]; listViewOpen: number[]; navigate: number[]; } @@ -65,6 +66,7 @@ export interface WPPerformanceResults { inserterHover?: number; minInserterHover?: number; maxInserterHover?: number; + loadPatterns?: number; listViewOpen?: number; minListViewOpen?: number; maxListViewOpen?: number; @@ -110,6 +112,7 @@ export function curateResults( inserterHover: average( results.inserterHover ), minInserterHover: minimum( results.inserterHover ), maxInserterHover: maximum( results.inserterHover ), + loadPatterns: average( results.loadPatterns ), listViewOpen: average( results.listViewOpen ), minListViewOpen: minimum( results.listViewOpen ), maxListViewOpen: maximum( results.listViewOpen ), diff --git a/test/performance/fixtures/perf-utils.ts b/test/performance/fixtures/perf-utils.ts index d17eec2c935b1b..83213a59520dd5 100644 --- a/test/performance/fixtures/perf-utils.ts +++ b/test/performance/fixtures/perf-utils.ts @@ -30,13 +30,14 @@ export class PerfUtils { * Returns the locator for the editor canvas element. This supports both the * legacy and the iframed canvas. * + * @param canvasLocator * @return Locator for the editor canvas element. */ - async getCanvas() { - const canvasLocator = this.page.locator( + async getCanvas( + canvasLocator = this.page.locator( '.wp-block-post-content, iframe[name=editor-canvas]' - ); - + ) + ) { const isFramed = await canvasLocator.evaluate( ( node ) => node.tagName === 'IFRAME' ); diff --git a/test/performance/specs/post-editor.spec.js b/test/performance/specs/post-editor.spec.js index cf2610baa1f9e7..105a4bd9a80ca0 100644 --- a/test/performance/specs/post-editor.spec.js +++ b/test/performance/specs/post-editor.spec.js @@ -29,6 +29,7 @@ const results = { inserterOpen: [], inserterHover: [], inserterSearch: [], + loadPatterns: [], }; test.describe( 'Post Editor Performance', () => { @@ -484,6 +485,178 @@ test.describe( 'Post Editor Performance', () => { } } ); } ); + + test.describe( 'Loading Patterns', () => { + test( 'Run the test', async ( { page, admin, perfUtils } ) => { + await admin.createNewPost(); + await perfUtils.disableAutosave(); + const globalInserterToggle = page.getByRole( 'button', { + name: 'Toggle block inserter', + } ); + + const testPatterns = [ + { + name: 'core/query-standard-posts', + title: 'Standard', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/query-medium-posts', + title: 'Image at left', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/query-small-posts', + title: 'Small image and title', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/query-grid-posts', + title: 'Grid', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/query-large-title-posts', + title: 'Large title', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/query-offset-posts', + title: 'Offset', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/social-links-shared-background-color', + title: 'Social links with a shared background color', + content: + '\n\t\t\t\t\t\t\n\t\t\t\t\t\t', + viewportWidth: 500, + categories: [ 'test' ], + blockTypes: [ 'core/social-links' ], + source: 'core', + }, + { + name: 'core/query-large-title-posts-2', + title: 'Large title 2', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/query-offset-posts-2', + title: 'Offset 2', + content: + '\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t
\n\t\t\t\t\t', + categories: [ 'test' ], + blockTypes: [ 'core/query' ], + source: 'core', + }, + { + name: 'core/social-links-shared-background-color-2', + title: 'Social links with a shared background color 2', + content: + '\n\t\t\t\t\t\t\n\t\t\t\t\t\t', + viewportWidth: 500, + categories: [ 'test' ], + blockTypes: [ 'core/social-links' ], + source: 'core', + }, + ]; + + await page.evaluate( ( _testPatterns ) => { + const settings = window.wp.data + .select( 'core/editor' ) + .getEditorSettings(); + window.wp.data.dispatch( 'core/editor' ).updateEditorSettings( { + ...settings, + __experimentalAdditionalBlockPatternCategories: [ + ...settings.__experimentalAdditionalBlockPatternCategories, + { name: 'test', label: 'Test' }, + ], + __experimentalAdditionalBlockPatterns: [ + ...settings.__experimentalAdditionalBlockPatterns, + ..._testPatterns, + ], + } ); + }, testPatterns ); + + const samples = 10; + const throwaway = 1; + const iterations = samples + throwaway; + for ( let i = 1; i <= iterations; i++ ) { + // Wait for the browser to be idle before starting the monitoring. + // eslint-disable-next-line no-restricted-syntax + await page.waitForTimeout( BROWSER_IDLE_WAIT ); + + await globalInserterToggle.click(); + await perfUtils.expectExpandedState( + globalInserterToggle, + 'true' + ); + await page.getByRole( 'tab', { name: 'Patterns' } ).click(); + + const startTime = performance.now(); + + await page.getByRole( 'button', { name: 'Test' } ).click(); + + await Promise.all( + testPatterns.map( async ( pattern ) => { + const canvas = await perfUtils.getCanvas( + page + .getByRole( 'option', { + name: pattern.title, + exact: true, + } ) + .getByTitle( 'Editor canvas' ) + ); + + // Wait for the first block. + await canvas.locator( '.wp-block' ).first().waitFor(); + } ) + ); + + const endTime = performance.now(); + + // Save the results. + if ( i > throwaway ) { + results.loadPatterns.push( endTime - startTime ); + } + + // Close Inserter. + await globalInserterToggle.click(); + await perfUtils.expectExpandedState( + globalInserterToggle, + 'false' + ); + } + } ); + } ); } ); /* eslint-enable playwright/no-conditional-in-test, playwright/expect-expect */