From f84bf533f19d2853e0cbed34855b9d2ca320fa5f Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 14 Jul 2023 15:09:57 -0500 Subject: [PATCH] Use posts instead of template parts for navigation color tests Using posts instead of template parts reduces the code and speeds up the tests by almost 2x, (12s - 7s). --- .../editor/blocks/navigation-colors.spec.js | 109 ++++++------------ 1 file changed, 35 insertions(+), 74 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index dd74b3194a16a..2763b1c208cd0 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -6,57 +6,44 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); test.describe( 'Navigation colors', () => { test.beforeAll( async ( { requestUtils } ) => { // We want emptytheme because it doesn't have any styles. - await requestUtils.activateTheme( 'emptytheme' ); - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - await requestUtils.deleteAllMenus(); - await requestUtils.deleteAllPages(); + await Promise.all( [ + requestUtils.activateTheme( 'emptytheme' ), + requestUtils.deleteAllMenus(), + requestUtils.deleteAllPages(), + ] ); } ); test.beforeEach( async ( { admin, editor, requestUtils } ) => { - await admin.visitSiteEditor( { - postId: 'emptytheme//header', - postType: 'wp_template_part', - } ); - await editor.canvas.click( 'body' ); const { id: pageId } = await requestUtils.createPage( { title: 'Test Page', status: 'publish', } ); + const { id: menuId } = await requestUtils.createNavigationMenu( { title: 'Colored menu', content: ``, attributes: { openSubmenusOnClick: true }, } ); + + await admin.createNewPost(); + await editor.insertBlock( { name: 'core/navigation', attributes: { ref: menuId, }, } ); - - await editor.saveSiteEditorEntities(); - await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); - // Focus the navigation block inside the header template part. - await editor.canvas - .getByRole( 'document', { name: 'Block: header' } ) - .focus(); - await editor.canvas - .getByRole( 'document', { name: 'Block: Navigation' } ) - .click(); } ); test.afterEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template_part' ); - await requestUtils.deleteAllMenus(); - await requestUtils.deleteAllPages(); + await Promise.all( [ + requestUtils.deleteAllMenus(), + requestUtils.deleteAllPages(), + ] ); } ); test.afterAll( async ( { requestUtils } ) => { await Promise.all( [ - requestUtils.deleteAllTemplates( 'wp_template_part' ), - requestUtils.deleteAllMenus(), - requestUtils.deleteAllPages(), requestUtils.activateTheme( 'twentytwentyone' ), ] ); } ); @@ -68,6 +55,7 @@ test.describe( 'Navigation colors', () => { } ); test( 'All navigation links should default to the body color and submenus and mobile overlay should default to a white background with black text', async ( { + editor, page, colorControl, } ) => { @@ -80,8 +68,9 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend. - await page.goto( '/' ); + // Check the colors of the links on the frontend. + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); await colorControl.testFrontendColors( expectedNavigationColors ); } ); @@ -114,19 +103,11 @@ test.describe( 'Navigation colors', () => { .getByRole( 'button', { name: 'Color: Black' } ) .click( { force: true } ); - // Save them so we can check on the frontend later too. - await editor.saveSiteEditorEntities(); // Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas. await page .getByRole( 'button', { name: 'Close Settings' } ) .click( { force: true } ); - await editor.canvas.click( 'body' ); - - // Focus the navigation block inside the header template part. - await editor.canvas - .getByRole( 'document', { name: 'Block: header' } ) - .focus(); await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); @@ -140,8 +121,9 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend. - await page.goto( '/' ); + // Check the colors of the links on the frontend. + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); await colorControl.testFrontendColors( expectedNavigationColors ); } ); @@ -177,19 +159,11 @@ test.describe( 'Navigation colors', () => { .getByRole( 'button', { name: 'Color: Vivid purple' } ) .click( { force: true } ); - // Save them so we can check on the frontend later too. - await editor.saveSiteEditorEntities(); // Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas. await page .getByRole( 'button', { name: 'Close Settings' } ) .click( { force: true } ); - await editor.canvas.click( 'body' ); - - // Focus the navigation block inside the header template part. - await editor.canvas - .getByRole( 'document', { name: 'Block: header' } ) - .focus(); await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); @@ -203,8 +177,9 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend. - await page.goto( '/' ); + // Check the colors of the links on the frontend. + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); await colorControl.testFrontendColors( expectedNavigationColors ); } ); @@ -226,18 +201,11 @@ test.describe( 'Navigation colors', () => { .getByRole( 'button', { name: 'Color: Pale pink' } ) .click( { force: true } ); - await editor.saveSiteEditorEntities(); // Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas. await page .getByRole( 'button', { name: 'Close Settings' } ) .click( { force: true } ); - await editor.canvas.click( 'body' ); - - // Focus the navigation block inside the header template part. - await editor.canvas - .getByRole( 'document', { name: 'Block: header' } ) - .focus(); await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); @@ -251,8 +219,9 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend. - await page.goto( '/' ); + // Check the colors of the links on the frontend. + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); await colorControl.testFrontendColors( expectedNavigationColors ); } ); @@ -276,17 +245,11 @@ test.describe( 'Navigation colors', () => { .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) .click( { force: true } ); - await editor.saveSiteEditorEntities(); // Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas. await page .getByRole( 'button', { name: 'Close Settings' } ) .click( { force: true } ); - await editor.canvas.click( 'body' ); - // Focus the navigation block inside the header template part. - await editor.canvas - .getByRole( 'document', { name: 'Block: header' } ) - .focus(); await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); @@ -301,8 +264,9 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend. - await page.goto( '/' ); + // Check the colors of the links on the frontend. + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); await colorControl.testFrontendColors( expectedNavigationColors ); } ); @@ -351,18 +315,11 @@ test.describe( 'Navigation colors', () => { .getByRole( 'button', { name: 'Color: Luminous vivid amber' } ) .click( { force: true } ); - await editor.saveSiteEditorEntities(); // Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas. await page .getByRole( 'button', { name: 'Close Settings' } ) .click( { force: true } ); - await editor.canvas.click( 'body' ); - - // Focus the navigation block inside the header template part. - await editor.canvas - .getByRole( 'document', { name: 'Block: header' } ) - .focus(); await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); @@ -376,8 +333,9 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend. - await page.goto( '/' ); + // Check the colors of the links on the frontend. + const postId = await editor.publishPost(); + await page.goto( `/?p=${ postId }` ); await colorControl.testFrontendColors( expectedNavigationColors ); } ); @@ -469,6 +427,9 @@ class ColorControl { 'background-color', submenuBackgroundColor ); + + // Set the mobile view option back to mobile + await this.page.getByRole( 'radio', { name: 'Mobile' } ).click(); } async testFrontendColors( {