From d7587f4aa5e41142303244a561fab155b3df4caf Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 20 Jun 2023 17:55:31 +0200 Subject: [PATCH 01/66] tests and fix for link color inheritance --- .../block-library/src/navigation/style.scss | 2 +- .../specs/editor/blocks/navigation.spec.js | 76 +++++++++++++++++++ 2 files changed, 77 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index b0c8748075bdd7..76e13eb9676c3d 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -52,7 +52,7 @@ $navigation-icon-size: 24px; // This also fixes an issue where a navigation with an explicitly set color is overridden // by link colors defined in Global Styles. .wp-block-navigation-item__content.wp-block-navigation-item__content { - color: inherit; + //color: inherit; } // The following rules provide class based application of user selected text diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index b5883694e192e5..1f1900fde741e3 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -930,6 +930,82 @@ test.describe( 'Navigation block', () => { await expect( linkControl.getSearchInput() ).not.toBeVisible(); } ); } ); + + test.describe( 'Navigation colors', () => { + test.beforeEach( async ( { requestUtils } ) => { + await Promise.all( [ requestUtils.deleteAllMenus() ] ); + } ); + + test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { + admin, + editor, + requestUtils, + } ) => { + await admin.createNewPost(); + + await requestUtils.createNavigationMenu( { + title: 'Test Menu', + content: + '', + } ); + + await editor.insertBlock( { name: 'core/navigation' } ); + + const firstlink = editor.canvas.locator( + `role=textbox[name="Navigation link text"i] >> text="First link"` + ); + + await expect( firstlink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + //TODO check frontend on desktop and mobile + //TODO then the same for second link + //Then the same for background colors + } ); + + test( 'As a user I expect my navigation links to inherit the colors from the parent container', async ( { + admin, + page, + editor, + requestUtils, + } ) => { + await admin.createNewPost(); + + await requestUtils.createNavigationMenu( { + title: 'Test Menu', + content: + '', + } ); + + await editor.insertBlock( { name: 'core/navigation' } ); + + //We group the nav block and add colors to the links + await page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Options' } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page.getByRole( 'button', { name: 'Color options' } ).click(); + await page + .getByRole( 'menuitemcheckbox', { name: 'Show Link' } ) + .click(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page + .getByRole( 'button', { name: 'Color Link styles' } ) + .click(); + await page + .getByRole( 'button', { name: 'Color: Vivid purple' } ) + .click(); + + const firstlink = editor.canvas.locator( + `role=textbox[name="Navigation link text"i] >> text="First link"` + ); + + await expect( firstlink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); + //TODO check frontend on desktop and mobile + //TODO then the same for second link + //Then the same for background colors + } ); + } ); } ); test.describe( 'Navigation block - Frontend interactivity', () => { From 7d1c89db21e9aec3f0bb01654279248923e118de Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 21 Jun 2023 11:34:27 +0200 Subject: [PATCH 02/66] test agains emptytheme too, refactor setup, added better comments --- .../specs/editor/blocks/navigation.spec.js | 48 +++++++++++++------ 1 file changed, 33 insertions(+), 15 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 1f1900fde741e3..7c03504605abea 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -934,20 +934,40 @@ test.describe( 'Navigation block', () => { test.describe( 'Navigation colors', () => { test.beforeEach( async ( { requestUtils } ) => { await Promise.all( [ requestUtils.deleteAllMenus() ] ); + await requestUtils.createNavigationMenu( { + title: 'Test Menu', + content: + '', + } ); } ); - test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { + test( 'As a user I expect my navigation links to have good default colors', async ( { admin, editor, requestUtils, } ) => { + //we want emptytheme because it doesn't have any styles + await requestUtils.activateTheme( 'emptytheme' ); + await admin.createNewPost(); + await editor.insertBlock( { name: 'core/navigation' } ); - await requestUtils.createNavigationMenu( { - title: 'Test Menu', - content: - '', - } ); + const firstlink = editor.canvas.locator( + `role=textbox[name="Navigation link text"i] >> text="First link"` + ); + //Expect the first link to default to black when the theme doesn't define a link color + await expect( firstlink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + //TODO check frontend on desktop and mobile + //TODO then the same for second link (make sure it has a background color!) + //Then the same for background colors + } ); + + test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { + admin, + editor, + } ) => { + //setup: define a link color in the theme + await admin.createNewPost(); await editor.insertBlock( { name: 'core/navigation' } ); @@ -955,7 +975,11 @@ test.describe( 'Navigation block', () => { `role=textbox[name="Navigation link text"i] >> text="First link"` ); - await expect( firstlink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await admin.page.pause(); + //Expect the first link to inherit the link color from the theme. + //In this case TT3 defines the link colors inside the post-content block to be --wp--preset--color--secondary = #345C00 + await expect( firstlink ).toHaveCSS( 'color', 'rgb(52, 92, 0)' ); + //Expect the first link to inherit the nav link color from the theme //TODO check frontend on desktop and mobile //TODO then the same for second link //Then the same for background colors @@ -965,19 +989,12 @@ test.describe( 'Navigation block', () => { admin, page, editor, - requestUtils, } ) => { await admin.createNewPost(); - await requestUtils.createNavigationMenu( { - title: 'Test Menu', - content: - '', - } ); - await editor.insertBlock( { name: 'core/navigation' } ); - //We group the nav block and add colors to the links + //We group the nav block and add colors to the links inside the group block await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) @@ -1000,6 +1017,7 @@ test.describe( 'Navigation block', () => { `role=textbox[name="Navigation link text"i] >> text="First link"` ); + //Expect the first link to inherit the link color from the parent group block await expect( firstlink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); //TODO check frontend on desktop and mobile //TODO then the same for second link From 4fcc62c5f7cf4488215751e9534d35a9a8296d80 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 28 Jun 2023 18:05:59 +0200 Subject: [PATCH 03/66] change setup for tests --- .../specs/editor/blocks/navigation.spec.js | 71 +++++++++++++------ 1 file changed, 48 insertions(+), 23 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 7c03504605abea..b383d68236e4cf 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -932,26 +932,41 @@ test.describe( 'Navigation block', () => { } ); test.describe( 'Navigation colors', () => { - test.beforeEach( async ( { requestUtils } ) => { - await Promise.all( [ requestUtils.deleteAllMenus() ] ); + test.beforeAll( async ( { requestUtils } ) => { + //we want emptytheme because it doesn't have any styles + await requestUtils.activateTheme( 'emptytheme' ); + await requestUtils.deleteAllTemplates( 'wp_template' ); + await requestUtils.deleteAllPages(); + await requestUtils.deleteAllMenus(); + } ); + + test.beforeEach( async ( { admin, editor, requestUtils } ) => { + await admin.visitSiteEditor(); + await editor.canvas.click( 'body' ); + await requestUtils.createNavigationMenu( { title: 'Test Menu', content: '', } ); + + await editor.insertBlock( { + name: 'core/navigation', + attributes: { overlayMenu: 'always' }, + } ); + await editor.saveSiteEditorEntities(); } ); - test( 'As a user I expect my navigation links to have good default colors', async ( { - admin, + test.afterEach( async ( { requestUtils } ) => { + await requestUtils.deleteAllTemplates( 'wp_template' ); + await requestUtils.deleteAllPages(); + await requestUtils.deleteAllMenus(); + } ); + + test( 'As a user I expect my navigation links to have appropriate default colors', async ( { editor, - requestUtils, } ) => { - //we want emptytheme because it doesn't have any styles - await requestUtils.activateTheme( 'emptytheme' ); - - await admin.createNewPost(); await editor.insertBlock( { name: 'core/navigation' } ); - const firstlink = editor.canvas.locator( `role=textbox[name="Navigation link text"i] >> text="First link"` ); @@ -963,35 +978,45 @@ test.describe( 'Navigation block', () => { } ); test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { - admin, + page, editor, } ) => { - //setup: define a link color in the theme - await admin.createNewPost(); - await editor.insertBlock( { name: 'core/navigation' } ); - const firstlink = editor.canvas.locator( `role=textbox[name="Navigation link text"i] >> text="First link"` ); - - await admin.page.pause(); - //Expect the first link to inherit the link color from the theme. - //In this case TT3 defines the link colors inside the post-content block to be --wp--preset--color--secondary = #345C00 - await expect( firstlink ).toHaveCSS( 'color', 'rgb(52, 92, 0)' ); + //Set a link color for the theme + await page + .getByRole( 'button', { name: 'Styles', exact: true } ) + .click(); + await page.getByRole( 'button', { name: 'Colors styles' } ).click(); + await page + .getByRole( 'button', { name: 'Color Link styles' } ) + .click(); + //rgba(207,46,46) is the color of the "vivid red" color preset + await page + .getByRole( 'button', { name: 'Color: Vivid red' } ) + .click(); + await page + .getByRole( 'button', { name: 'Save', exact: true } ) + .click(); + await page + .getByRole( 'region', { name: 'Save panel' } ) + .getByRole( 'button', { name: 'Save' } ) + .click(); + await editor.page.pause(); //Expect the first link to inherit the nav link color from the theme + await expect( firstlink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + //TODO check frontend on desktop and mobile //TODO then the same for second link //Then the same for background colors } ); test( 'As a user I expect my navigation links to inherit the colors from the parent container', async ( { - admin, page, editor, } ) => { - await admin.createNewPost(); - await editor.insertBlock( { name: 'core/navigation' } ); //We group the nav block and add colors to the links inside the group block From 830a356ed2c0497692e63ea695ad5487855fea99 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 28 Jun 2023 18:31:45 +0200 Subject: [PATCH 04/66] removed inherit color for the moment on the block --- .../block-library/src/navigation/block.json | 9 --------- .../specs/editor/blocks/navigation.spec.js | 20 ++++++++----------- 2 files changed, 8 insertions(+), 21 deletions(-) diff --git a/packages/block-library/src/navigation/block.json b/packages/block-library/src/navigation/block.json index 7896ea147699f7..c82791117b4b79 100644 --- a/packages/block-library/src/navigation/block.json +++ b/packages/block-library/src/navigation/block.json @@ -123,15 +123,6 @@ "type": "flex" } }, - "__experimentalStyle": { - "elements": { - "link": { - "color": { - "text": "inherit" - } - } - } - }, "interactivity": true }, "viewScript": "file:./view.min.js", diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index b383d68236e4cf..2ab863c154d711 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -935,30 +935,30 @@ test.describe( 'Navigation block', () => { test.beforeAll( async ( { requestUtils } ) => { //we want emptytheme because it doesn't have any styles await requestUtils.activateTheme( 'emptytheme' ); - await requestUtils.deleteAllTemplates( 'wp_template' ); + await requestUtils.deleteAllTemplates( 'wp_template_part' ); await requestUtils.deleteAllPages(); await requestUtils.deleteAllMenus(); } ); test.beforeEach( async ( { admin, editor, requestUtils } ) => { - await admin.visitSiteEditor(); + await admin.visitSiteEditor( { + postId: 'emptytheme//header', + postType: 'wp_template_part', + } ); await editor.canvas.click( 'body' ); - await requestUtils.createNavigationMenu( { - title: 'Test Menu', + title: 'Hidden menu', content: '', } ); - await editor.insertBlock( { name: 'core/navigation', - attributes: { overlayMenu: 'always' }, } ); await editor.saveSiteEditorEntities(); } ); test.afterEach( async ( { requestUtils } ) => { - await requestUtils.deleteAllTemplates( 'wp_template' ); + await requestUtils.deleteAllTemplates( 'wp_template_part' ); await requestUtils.deleteAllPages(); await requestUtils.deleteAllMenus(); } ); @@ -966,7 +966,6 @@ test.describe( 'Navigation block', () => { test( 'As a user I expect my navigation links to have appropriate default colors', async ( { editor, } ) => { - await editor.insertBlock( { name: 'core/navigation' } ); const firstlink = editor.canvas.locator( `role=textbox[name="Navigation link text"i] >> text="First link"` ); @@ -974,14 +973,13 @@ test.describe( 'Navigation block', () => { await expect( firstlink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); //TODO check frontend on desktop and mobile //TODO then the same for second link (make sure it has a background color!) - //Then the same for background colors + //Then the same for background colors. This one is important when the theme doesn't define an overlay background color } ); test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { page, editor, } ) => { - await editor.insertBlock( { name: 'core/navigation' } ); const firstlink = editor.canvas.locator( `role=textbox[name="Navigation link text"i] >> text="First link"` ); @@ -1017,8 +1015,6 @@ test.describe( 'Navigation block', () => { page, editor, } ) => { - await editor.insertBlock( { name: 'core/navigation' } ); - //We group the nav block and add colors to the links inside the group block await page .getByRole( 'toolbar', { name: 'Block tools' } ) From 489f2a451657e171ebfb15ac7d365503d039f936 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 30 Jun 2023 12:08:49 +0200 Subject: [PATCH 05/66] finished the first test with all cases --- .../block-library/src/navigation/style.scss | 2 +- .../specs/editor/blocks/navigation.spec.js | 91 ++++++++++++++++--- 2 files changed, 77 insertions(+), 16 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 76e13eb9676c3d..36c3ed961dc1e1 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -458,7 +458,7 @@ button.wp-block-navigation-item__content { right: 0; bottom: 0; - .wp-block-navigation-link a { + .wp-block-navigation-item a { color: inherit; } diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 2ab863c154d711..09f491194c7493 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -936,6 +936,7 @@ test.describe( 'Navigation block', () => { //we want emptytheme because it doesn't have any styles await requestUtils.activateTheme( 'emptytheme' ); await requestUtils.deleteAllTemplates( 'wp_template_part' ); + await requestUtils.deleteAllTemplates( 'wp_template' ); await requestUtils.deleteAllPages(); await requestUtils.deleteAllMenus(); } ); @@ -950,30 +951,97 @@ test.describe( 'Navigation block', () => { title: 'Hidden menu', content: '', + attributes: { openSubmenusOnClick: true }, } ); await editor.insertBlock( { name: 'core/navigation', } ); + await editor.saveSiteEditorEntities(); + await admin.visitSiteEditor(); + await editor.canvas.click( 'body' ); } ); test.afterEach( async ( { requestUtils } ) => { await requestUtils.deleteAllTemplates( 'wp_template_part' ); + await requestUtils.deleteAllTemplates( 'wp_template' ); await requestUtils.deleteAllPages(); await requestUtils.deleteAllMenus(); } ); test( 'As a user I expect my navigation links to have appropriate default colors', async ( { editor, + page, } ) => { - const firstlink = editor.canvas.locator( - `role=textbox[name="Navigation link text"i] >> text="First link"` - ); + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); //Expect the first link to default to black when the theme doesn't define a link color - await expect( firstlink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - //TODO check frontend on desktop and mobile - //TODO then the same for second link (make sure it has a background color!) - //Then the same for background colors. This one is important when the theme doesn't define an overlay background color + await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await editor.canvas + .getByRole( 'document', { name: 'Block: header' } ) + .click(); + await editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); + await firstLink.click(); + //We check that the submenu links also have black text + const secondLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + const submenuWrapper = editor.canvas + .getByRole( 'document', { name: 'Block: Custom Link' } ) + .filter( { has: secondLink } ); + await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + //We check for the submenu's background color. This one is important when the theme doesn't define an overlay background color + await expect( submenuWrapper ).toHaveCSS( + 'background-color', + 'rgb(255, 255, 255)' + ); + + //We test the overlay on mobile too. + await page + .getByRole( 'button', { name: 'View', exact: true } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + const overlay = editor.canvas + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Second Link' } ); + await expect( overlay ).toHaveCSS( + 'background-color', + 'rgb(255, 255, 255)' + ); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + + //And finally we check the frontend + await page.goto( '/' ); + const firstLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + const secondLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + const submenuWrapperFront = page + .locator( '.wp-block-navigation__submenu-container' ) + .filter( { has: secondLinkFront } ); + await expect( firstLinkFront ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await firstLinkFront.hover(); + await expect( secondLinkFront ).toHaveCSS( + 'color', + 'rgb(0, 0, 0)' + ); + await expect( secondLinkFront ).toHaveCSS( + 'color', + 'rgb(0, 0, 0)' + ); + await expect( submenuWrapperFront ).toHaveCSS( + 'background-color', + 'rgb(255, 255, 255)' + ); } ); test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { @@ -995,14 +1063,7 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click(); - await page - .getByRole( 'button', { name: 'Save', exact: true } ) - .click(); - await page - .getByRole( 'region', { name: 'Save panel' } ) - .getByRole( 'button', { name: 'Save' } ) - .click(); - await editor.page.pause(); + //TODO Hover too! //Expect the first link to inherit the nav link color from the theme await expect( firstlink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); From e419f4f0b17a609335f3811a3f1dffcb305256ee Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 30 Jun 2023 13:49:17 +0200 Subject: [PATCH 06/66] finished second test --- .../block-library/src/navigation/style.scss | 7 +- .../specs/editor/blocks/navigation.spec.js | 119 +++++++++++++++--- 2 files changed, 104 insertions(+), 22 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 36c3ed961dc1e1..8a6d51e51e07ea 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -458,7 +458,8 @@ button.wp-block-navigation-item__content { right: 0; bottom: 0; - .wp-block-navigation-item a { + //Low specificity so that themes can override. + &:where(.wp-block-navigation-item a) { color: inherit; } @@ -473,8 +474,8 @@ button.wp-block-navigation-item__content { // If the responsive wrapper is present but overlay is not open, // overlay styles shouldn't apply. &:not(.is-menu-open.is-menu-open) { - color: inherit !important; - background-color: inherit !important; + //color: inherit !important; + //background-color: inherit !important; } // Overlay menu. diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 09f491194c7493..8585be7bc04555 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -976,7 +976,9 @@ test.describe( 'Navigation block', () => { const firstLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'First Link' } ); + //Expect the first link to default to black when the theme doesn't define a link color + //This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) @@ -985,7 +987,8 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); await firstLink.click(); - //We check that the submenu links also have black text + + //We check that the submenu links also have black text color const secondLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Second Link' } ); @@ -1028,15 +1031,16 @@ test.describe( 'Navigation block', () => { const submenuWrapperFront = page .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: secondLinkFront } ); - await expect( firstLinkFront ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - await firstLinkFront.hover(); - await expect( secondLinkFront ).toHaveCSS( + + //Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white + await expect( firstLinkFront ).toHaveCSS( 'color', - 'rgb(0, 0, 0)' + 'rgb(0, 0, 238)' ); + await firstLinkFront.hover(); await expect( secondLinkFront ).toHaveCSS( 'color', - 'rgb(0, 0, 0)' + 'rgb(0, 0, 238)' ); await expect( submenuWrapperFront ).toHaveCSS( 'background-color', @@ -1045,12 +1049,10 @@ test.describe( 'Navigation block', () => { } ); test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { + admin, page, editor, } ) => { - const firstlink = editor.canvas.locator( - `role=textbox[name="Navigation link text"i] >> text="First link"` - ); //Set a link color for the theme await page .getByRole( 'button', { name: 'Styles', exact: true } ) @@ -1062,14 +1064,91 @@ test.describe( 'Navigation block', () => { //rgba(207,46,46) is the color of the "vivid red" color preset await page .getByRole( 'button', { name: 'Color: Vivid red' } ) - .click(); - //TODO Hover too! + .click( { force: true } ); + await page.getByRole( 'tab', { name: 'Hover' } ).click(); + //rgba(155,81,224) is the color of the "vivid purple" color preset + await page + .getByRole( 'button', { name: 'Color: Vivid purple' } ) + .click( { force: true } ); + await editor.canvas.click( 'body' ); + //Expect the first link to inherit the nav link color from the theme - await expect( firstlink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + await editor.canvas + .getByRole( 'document', { name: 'Block: header' } ) + .click(); + await editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await firstLink.click(); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); - //TODO check frontend on desktop and mobile - //TODO then the same for second link - //Then the same for background colors + //Expect the second link to behave the same as the first + const secondLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + await firstLink.click(); + await expect( secondLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await secondLink.click(); + await expect( secondLink ).toHaveCSS( + 'color', + 'rgb(155, 81, 224)' + ); + + //We test the overlay on mobile too. + await page + .getByRole( 'button', { name: 'View', exact: true } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await expect( secondLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + + await editor.saveSiteEditorEntities(); + + //And finally we check the frontend + await page.goto( '/' ); + const firstLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + const secondLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + + //Expect the links to have the same colors as in the editor + await expect( firstLinkFront ).toHaveCSS( + 'color', + 'rgb(207, 46, 46)' + ); + await firstLinkFront.hover(); + await expect( firstLinkFront ).toHaveCSS( + 'color', + 'rgb(155, 81, 224)' + ); + await expect( secondLinkFront ).toHaveCSS( + 'color', + 'rgb(207, 46, 46)' + ); + await secondLinkFront.hover(); + await expect( secondLinkFront ).toHaveCSS( + 'color', + 'rgb(155, 81, 224)' + ); + + //We reset global styles so we don't affect other tests + await admin.visitSiteEditor(); + await page + .getByRole( 'button', { name: 'Styles', exact: true } ) + .click(); + await page.getByRole( 'button', { name: 'Revisions' } ).click(); + await page + .getByRole( 'menuitem', { name: 'Reset to defaults' } ) + .click(); } ); test( 'As a user I expect my navigation links to inherit the colors from the parent container', async ( { @@ -1095,16 +1174,18 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Color: Vivid purple' } ) .click(); - const firstlink = editor.canvas.locator( - `role=textbox[name="Navigation link text"i] >> text="First link"` - ); + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); //Expect the first link to inherit the link color from the parent group block - await expect( firstlink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); //TODO check frontend on desktop and mobile //TODO then the same for second link //Then the same for background colors } ); + + test( 'As a user I expect my navigation to use the colors I selected for it', async ( {} ) => {} ); } ); } ); From 798a886efc0dc40e667d7207810ff2eebf698b10 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 30 Jun 2023 18:07:25 +0200 Subject: [PATCH 07/66] finished third test --- .../specs/editor/blocks/navigation.spec.js | 125 ++++++++++++++++-- 1 file changed, 117 insertions(+), 8 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 8585be7bc04555..614e5eb357b911 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -982,7 +982,7 @@ test.describe( 'Navigation block', () => { await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) - .click(); + .focus(); await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); @@ -1073,15 +1073,15 @@ test.describe( 'Navigation block', () => { await editor.canvas.click( 'body' ); //Expect the first link to inherit the nav link color from the theme - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) - .click(); + .focus(); await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); await expect( firstLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); await firstLink.click(); await expect( firstLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); @@ -1142,6 +1142,7 @@ test.describe( 'Navigation block', () => { //We reset global styles so we don't affect other tests await admin.visitSiteEditor(); + await editor.canvas.click( 'body' ); await page .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); @@ -1149,18 +1150,49 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'menuitem', { name: 'Reset to defaults' } ) .click(); + + await editor.saveSiteEditorEntities(); } ); test( 'As a user I expect my navigation links to inherit the colors from the parent container', async ( { + admin, page, editor, } ) => { + //Make changes to the theme link colors and make sure the group block colors are the ones we see + await page + .getByRole( 'button', { name: 'Styles', exact: true } ) + .click(); + await page.getByRole( 'button', { name: 'Colors styles' } ).click(); + await page + .getByRole( 'button', { name: 'Color Link styles' } ) + .click(); + //rgba(207,46,46) is the color of the "vivid red" color preset + await page + .getByRole( 'button', { name: 'Color: Vivid red' } ) + .click( { force: true } ); + await page.getByRole( 'tab', { name: 'Hover' } ).click(); + //rgba(155,81,224) is the color of the "vivid purple" color preset + await page + .getByRole( 'button', { name: 'Color: Vivid purple' } ) + .click( { force: true } ); + await editor.canvas.click( 'body' ); + //We group the nav block and add colors to the links inside the group block + await editor.canvas + .getByRole( 'document', { name: 'Block: header' } ) + .focus(); + await editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) .click(); await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + await page + .getByRole( 'button', { name: 'Settings', exact: true } ) + .click(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color options' } ).click(); await page @@ -1170,19 +1202,96 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); + //rgba(0,208,132) is the color of the "Vivid green cyan" color preset await page - .getByRole( 'button', { name: 'Color: Vivid purple' } ) - .click(); + .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) + .click( { force: true } ); + await page.getByRole( 'tab', { name: 'Hover' } ).click(); + //rgba(255,105,0) is the color of the "Luminous vivid orange" color preset + await page + .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) + .click( { force: true } ); + await editor.canvas.click( 'body' ); const firstLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'First Link' } ); + await editor.canvas + .getByRole( 'document', { name: 'Block: header' } ) + .focus(); + await editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); //Expect the first link to inherit the link color from the parent group block - await expect( firstLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await firstLink.click(); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); + + //Expect the second link to behave the same as the first + const secondLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await secondLink.click(); + await expect( secondLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); + //TODO check frontend on desktop and mobile //TODO then the same for second link //Then the same for background colors + + //We test the overlay on mobile too. + await page + .getByRole( 'button', { name: 'View', exact: true } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + const overlay = editor.canvas + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Second Link' } ); + await expect( overlay ).toHaveCSS( + 'background-color', + 'rgb(255, 255, 255)' + ); + await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + + await editor.saveSiteEditorEntities(); + + //And finally we check the frontend + await page.goto( '/' ); + const firstLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + const secondLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + + //Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white + await expect( firstLinkFront ).toHaveCSS( + 'color', + 'rgb(0, 208, 132)' + ); + await firstLinkFront.hover(); + await expect( secondLinkFront ).toHaveCSS( + 'color', + 'rgb(0, 208, 132)' + ); + + //We reset global styles so we don't affect other tests + await admin.visitSiteEditor(); + await editor.canvas.click( 'body' ); + await page + .getByRole( 'button', { name: 'Styles', exact: true } ) + .click(); + await page.getByRole( 'button', { name: 'Revisions' } ).click(); + await page + .getByRole( 'menuitem', { name: 'Reset to defaults' } ) + .click(); + + await editor.saveSiteEditorEntities(); } ); test( 'As a user I expect my navigation to use the colors I selected for it', async ( {} ) => {} ); From 1f5e5f2051aad76c47b2799bd11ec3806d2f59b9 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 30 Jun 2023 18:58:27 +0200 Subject: [PATCH 08/66] started the last test --- .../block-library/src/navigation/style.scss | 6 +- .../specs/editor/blocks/navigation.spec.js | 105 +++++++++++++++++- 2 files changed, 104 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 8a6d51e51e07ea..99040be9a2201f 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -51,8 +51,10 @@ $navigation-icon-size: 24px; // Otherwise, a link color set by a parent group can override the value. // This also fixes an issue where a navigation with an explicitly set color is overridden // by link colors defined in Global Styles. - .wp-block-navigation-item__content.wp-block-navigation-item__content { - //color: inherit; + .has-text-color .wp-block-navigation-item__content { + .has-link-color & { + color: inherit; + } } // The following rules provide class based application of user selected text diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 614e5eb357b911..6ade4e5171ebc0 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1236,10 +1236,6 @@ test.describe( 'Navigation block', () => { await secondLink.click(); await expect( secondLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); - //TODO check frontend on desktop and mobile - //TODO then the same for second link - //Then the same for background colors - //We test the overlay on mobile too. await page .getByRole( 'button', { name: 'View', exact: true } ) @@ -1294,7 +1290,106 @@ test.describe( 'Navigation block', () => { await editor.saveSiteEditorEntities(); } ); - test( 'As a user I expect my navigation to use the colors I selected for it', async ( {} ) => {} ); + test( 'As a user I expect my navigation to use the colors I selected for it', async ( { + editor, + page, + } ) => { + //We add a group cointainer and change its colors so we can test if the nav block settings will prevail + await editor.canvas + .getByRole( 'document', { name: 'Block: header' } ) + .focus(); + await editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); + await page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Options' } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + await page + .getByRole( 'button', { name: 'Settings', exact: true } ) + .click(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page.getByRole( 'button', { name: 'Color options' } ).click(); + await page + .getByRole( 'menuitemcheckbox', { name: 'Show Link' } ) + .click(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page + .getByRole( 'button', { name: 'Color Link styles' } ) + .click(); + //rgba(0,208,132) is the color of the "Vivid green cyan" color preset + await page + .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) + .click( { force: true } ); + await page.getByRole( 'tab', { name: 'Hover' } ).click(); + //rgba(255,105,0) is the color of the "Luminous vivid orange" color preset + await page + .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) + .click( { force: true } ); + await editor.canvas.click( 'body' ); + + //We change the nav block colors + await editor.canvas + .getByRole( 'document', { name: 'Block: header' } ) + .focus(); + await editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page + .getByRole( 'button', { name: 'Text', exact: true } ) + .click(); + //247, 141, 167 is the color of the "Pale pink" color preset + await page + .getByRole( 'button', { name: 'Color: Pale pink' } ) + .click( { force: true } ); + await page + .getByRole( 'button', { name: 'Background', exact: true } ) + .click(); + //142, 209, 252 is the color of the "Pale cyan blue" color preset + await page + .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) + .click( { force: true } ); + await page + .getByRole( 'button', { name: 'Submenu & overlay text' } ) + .click(); + //171, 184, 195 is the color of the "Cyan bluish gray" color preset + await page + .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) + .click( { force: true } ); + await page + .getByRole( 'button', { name: 'Submenu & overlay background' } ) + .click(); + //rgba(252,185,0) is the color of the "Luminous vivid amber" color preset + await page + .getByRole( 'button', { name: 'Color: Luminous vivid amber' } ) + .click( { force: true } ); + + await editor.canvas.click( 'body' ); + + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + await editor.canvas + .getByRole( 'document', { name: 'Block: header' } ) + .focus(); + await editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); + + //Expect the first link to be "Pale pink" we selected for the nav block + await expect( firstLink ).toHaveCSS( + 'color', + 'rgb(247, 141, 167)' + ); + + //TODO Check the background colors + + //TODO Check the overlay on mobile + + //TODO check the frontend + } ); } ); } ); From 1b6524199d9a2f17e8a5b119d4ea175c1033679d Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 4 Jul 2023 15:53:28 +0200 Subject: [PATCH 09/66] spacing on comments --- .../specs/editor/blocks/navigation.spec.js | 72 +++++++++---------- 1 file changed, 36 insertions(+), 36 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 6ade4e5171ebc0..8ca327328fb098 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -977,8 +977,8 @@ test.describe( 'Navigation block', () => { .locator( 'a' ) .filter( { hasText: 'First Link' } ); - //Expect the first link to default to black when the theme doesn't define a link color - //This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color + // Expect the first link to default to black when the theme doesn't define a link color + // This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) @@ -988,7 +988,7 @@ test.describe( 'Navigation block', () => { .click(); await firstLink.click(); - //We check that the submenu links also have black text color + // We check that the submenu links also have black text color const secondLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Second Link' } ); @@ -996,13 +996,13 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Custom Link' } ) .filter( { has: secondLink } ); await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - //We check for the submenu's background color. This one is important when the theme doesn't define an overlay background color + // We check for the submenu's background color. This one is important when the theme doesn't define an overlay background color await expect( submenuWrapper ).toHaveCSS( 'background-color', 'rgb(255, 255, 255)' ); - //We test the overlay on mobile too. + // We test the overlay on mobile too. await page .getByRole( 'button', { name: 'View', exact: true } ) .click(); @@ -1020,7 +1020,7 @@ test.describe( 'Navigation block', () => { await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - //And finally we check the frontend + // And finally we check the frontend await page.goto( '/' ); const firstLinkFront = page .locator( 'a' ) @@ -1032,7 +1032,7 @@ test.describe( 'Navigation block', () => { .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: secondLinkFront } ); - //Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white + // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white await expect( firstLinkFront ).toHaveCSS( 'color', 'rgb(0, 0, 238)' @@ -1053,7 +1053,7 @@ test.describe( 'Navigation block', () => { page, editor, } ) => { - //Set a link color for the theme + // Set a link color for the theme await page .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); @@ -1061,18 +1061,18 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - //rgba(207,46,46) is the color of the "vivid red" color preset + // rgba(207,46,46) is the color of the "vivid red" color preset await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - //rgba(155,81,224) is the color of the "vivid purple" color preset + // rgba(155,81,224) is the color of the "vivid purple" color preset await page .getByRole( 'button', { name: 'Color: Vivid purple' } ) .click( { force: true } ); await editor.canvas.click( 'body' ); - //Expect the first link to inherit the nav link color from the theme + // Expect the first link to inherit the nav link color from the theme await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -1086,7 +1086,7 @@ test.describe( 'Navigation block', () => { await firstLink.click(); await expect( firstLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); - //Expect the second link to behave the same as the first + // Expect the second link to behave the same as the first const secondLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Second Link' } ); @@ -1098,7 +1098,7 @@ test.describe( 'Navigation block', () => { 'rgb(155, 81, 224)' ); - //We test the overlay on mobile too. + // We test the overlay on mobile too. await page .getByRole( 'button', { name: 'View', exact: true } ) .click(); @@ -1111,7 +1111,7 @@ test.describe( 'Navigation block', () => { await editor.saveSiteEditorEntities(); - //And finally we check the frontend + // And finally we check the frontend await page.goto( '/' ); const firstLinkFront = page .locator( 'a' ) @@ -1120,7 +1120,7 @@ test.describe( 'Navigation block', () => { .locator( 'a' ) .filter( { hasText: 'Second Link' } ); - //Expect the links to have the same colors as in the editor + // Expect the links to have the same colors as in the editor await expect( firstLinkFront ).toHaveCSS( 'color', 'rgb(207, 46, 46)' @@ -1140,7 +1140,7 @@ test.describe( 'Navigation block', () => { 'rgb(155, 81, 224)' ); - //We reset global styles so we don't affect other tests + // We reset global styles so we don't affect other tests await admin.visitSiteEditor(); await editor.canvas.click( 'body' ); await page @@ -1159,7 +1159,7 @@ test.describe( 'Navigation block', () => { page, editor, } ) => { - //Make changes to the theme link colors and make sure the group block colors are the ones we see + // Make changes to the theme link colors and make sure the group block colors are the ones we see await page .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); @@ -1167,18 +1167,18 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - //rgba(207,46,46) is the color of the "vivid red" color preset + // rgba(207,46,46) is the color of the "vivid red" color preset await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - //rgba(155,81,224) is the color of the "vivid purple" color preset + // rgba(155,81,224) is the color of the "vivid purple" color preset await page .getByRole( 'button', { name: 'Color: Vivid purple' } ) .click( { force: true } ); await editor.canvas.click( 'body' ); - //We group the nav block and add colors to the links inside the group block + // We group the nav block and add colors to the links inside the group block await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -1202,12 +1202,12 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - //rgba(0,208,132) is the color of the "Vivid green cyan" color preset + // rgba(0,208,132) is the color of the "Vivid green cyan" color preset await page .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - //rgba(255,105,0) is the color of the "Luminous vivid orange" color preset + // rgba(255,105,0) is the color of the "Luminous vivid orange" color preset await page .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) .click( { force: true } ); @@ -1223,12 +1223,12 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - //Expect the first link to inherit the link color from the parent group block + // Expect the first link to inherit the link color from the parent group block await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); await firstLink.click(); await expect( firstLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); - //Expect the second link to behave the same as the first + // Expect the second link to behave the same as the first const secondLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Second Link' } ); @@ -1236,7 +1236,7 @@ test.describe( 'Navigation block', () => { await secondLink.click(); await expect( secondLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); - //We test the overlay on mobile too. + // We test the overlay on mobile too. await page .getByRole( 'button', { name: 'View', exact: true } ) .click(); @@ -1256,7 +1256,7 @@ test.describe( 'Navigation block', () => { await editor.saveSiteEditorEntities(); - //And finally we check the frontend + // And finally we check the frontend await page.goto( '/' ); const firstLinkFront = page .locator( 'a' ) @@ -1265,7 +1265,7 @@ test.describe( 'Navigation block', () => { .locator( 'a' ) .filter( { hasText: 'Second Link' } ); - //Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white + // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white await expect( firstLinkFront ).toHaveCSS( 'color', 'rgb(0, 208, 132)' @@ -1276,7 +1276,7 @@ test.describe( 'Navigation block', () => { 'rgb(0, 208, 132)' ); - //We reset global styles so we don't affect other tests + // We reset global styles so we don't affect other tests await admin.visitSiteEditor(); await editor.canvas.click( 'body' ); await page @@ -1318,18 +1318,18 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - //rgba(0,208,132) is the color of the "Vivid green cyan" color preset + // rgba(0,208,132) is the color of the "Vivid green cyan" color preset await page .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - //rgba(255,105,0) is the color of the "Luminous vivid orange" color preset + // rgba(255,105,0) is the color of the "Luminous vivid orange" color preset await page .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) .click( { force: true } ); await editor.canvas.click( 'body' ); - //We change the nav block colors + // We change the nav block colors await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -1340,28 +1340,28 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Text', exact: true } ) .click(); - //247, 141, 167 is the color of the "Pale pink" color preset + // 247, 141, 167 is the color of the "Pale pink" color preset await page .getByRole( 'button', { name: 'Color: Pale pink' } ) .click( { force: true } ); await page .getByRole( 'button', { name: 'Background', exact: true } ) .click(); - //142, 209, 252 is the color of the "Pale cyan blue" color preset + // 142, 209, 252 is the color of the "Pale cyan blue" color preset await page .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) .click( { force: true } ); await page .getByRole( 'button', { name: 'Submenu & overlay text' } ) .click(); - //171, 184, 195 is the color of the "Cyan bluish gray" color preset + // 171, 184, 195 is the color of the "Cyan bluish gray" color preset await page .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) .click( { force: true } ); await page .getByRole( 'button', { name: 'Submenu & overlay background' } ) .click(); - //rgba(252,185,0) is the color of the "Luminous vivid amber" color preset + // rgba(252,185,0) is the color of the "Luminous vivid amber" color preset await page .getByRole( 'button', { name: 'Color: Luminous vivid amber' } ) .click( { force: true } ); @@ -1378,7 +1378,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - //Expect the first link to be "Pale pink" we selected for the nav block + // Expect the first link to be "Pale pink" we selected for the nav block await expect( firstLink ).toHaveCSS( 'color', 'rgb(247, 141, 167)' From c5c6778651dd9aa6475e685d136c10880b460af0 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 4 Jul 2023 16:14:28 +0200 Subject: [PATCH 10/66] removed unnecessary actions from before/after testing functions --- test/e2e/specs/editor/blocks/navigation.spec.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 8ca327328fb098..ba82854d3328cb 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -933,11 +933,9 @@ test.describe( 'Navigation block', () => { test.describe( 'Navigation colors', () => { test.beforeAll( async ( { requestUtils } ) => { - //we want emptytheme because it doesn't have any styles + // We want emptytheme because it doesn't have any styles await requestUtils.activateTheme( 'emptytheme' ); await requestUtils.deleteAllTemplates( 'wp_template_part' ); - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllPages(); await requestUtils.deleteAllMenus(); } ); @@ -964,8 +962,6 @@ test.describe( 'Navigation block', () => { test.afterEach( async ( { requestUtils } ) => { await requestUtils.deleteAllTemplates( 'wp_template_part' ); - await requestUtils.deleteAllTemplates( 'wp_template' ); - await requestUtils.deleteAllPages(); await requestUtils.deleteAllMenus(); } ); @@ -1190,9 +1186,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Options' } ) .click(); await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - await page - .getByRole( 'button', { name: 'Settings', exact: true } ) - .click(); + await editor.openDocumentSettingsSidebar(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color options' } ).click(); await page @@ -1294,7 +1288,7 @@ test.describe( 'Navigation block', () => { editor, page, } ) => { - //We add a group cointainer and change its colors so we can test if the nav block settings will prevail + // We add a group container and change its colors so we can test if the nav block settings will prevail await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -1306,9 +1300,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Options' } ) .click(); await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - await page - .getByRole( 'button', { name: 'Settings', exact: true } ) - .click(); + await editor.openDocumentSettingsSidebar(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color options' } ).click(); await page From 1c772ab82ead616cc3f3c403d08311c83737aac7 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 4 Jul 2023 16:34:54 +0200 Subject: [PATCH 11/66] insert specific id of nav directly to speed up things --- .../specs/editor/blocks/navigation.spec.js | 57 +++++++++++++------ 1 file changed, 39 insertions(+), 18 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index ba82854d3328cb..1fb0757d0b5328 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -945,7 +945,7 @@ test.describe( 'Navigation block', () => { postType: 'wp_template_part', } ); await editor.canvas.click( 'body' ); - await requestUtils.createNavigationMenu( { + const { id: menuId } = await requestUtils.createNavigationMenu( { title: 'Hidden menu', content: '', @@ -953,6 +953,9 @@ test.describe( 'Navigation block', () => { } ); await editor.insertBlock( { name: 'core/navigation', + attributes: { + ref: menuId, + }, } ); await editor.saveSiteEditorEntities(); @@ -976,6 +979,7 @@ test.describe( 'Navigation block', () => { // Expect the first link to default to black when the theme doesn't define a link color // This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + // Focus the navigation block inside the header template part await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -998,7 +1002,7 @@ test.describe( 'Navigation block', () => { 'rgb(255, 255, 255)' ); - // We test the overlay on mobile too. + // We test the colors of the links on the mobile overlay too. await page .getByRole( 'button', { name: 'View', exact: true } ) .click(); @@ -1016,7 +1020,7 @@ test.describe( 'Navigation block', () => { await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - // And finally we check the frontend + // And finally we check the colors of the links on the frontend await page.goto( '/' ); const firstLinkFront = page .locator( 'a' ) @@ -1049,7 +1053,7 @@ test.describe( 'Navigation block', () => { page, editor, } ) => { - // Set a link color for the theme + // In the inspector sidebar, we set colors for link text and link hover text for this theme await page .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); @@ -1068,13 +1072,15 @@ test.describe( 'Navigation block', () => { .click( { force: true } ); await editor.canvas.click( 'body' ); - // Expect the first link to inherit the nav link color from the theme + // 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(); + + // Expect the first link to inherit the nav link color from the theme const firstLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'First Link' } ); @@ -1094,7 +1100,7 @@ test.describe( 'Navigation block', () => { 'rgb(155, 81, 224)' ); - // We test the overlay on mobile too. + // We test the colors of the links on the mobile overlay too. await page .getByRole( 'button', { name: 'View', exact: true } ) .click(); @@ -1107,7 +1113,7 @@ test.describe( 'Navigation block', () => { await editor.saveSiteEditorEntities(); - // And finally we check the frontend + // And finally we check the colors of the links on the frontend await page.goto( '/' ); const firstLinkFront = page .locator( 'a' ) @@ -1174,18 +1180,22 @@ test.describe( 'Navigation block', () => { .click( { force: true } ); await editor.canvas.click( 'body' ); - // We group the nav block and add colors to the links inside the group block + // 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(); + + // We wrap the nav block inside a group block await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) .click(); await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + + // In the sidebar inspector we add a link color and link hover color to the group block await editor.openDocumentSettingsSidebar(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color options' } ).click(); @@ -1207,9 +1217,7 @@ test.describe( 'Navigation block', () => { .click( { force: true } ); await editor.canvas.click( 'body' ); - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); + // Focus the navigation block inside the header template part await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -1218,6 +1226,9 @@ test.describe( 'Navigation block', () => { .click(); // Expect the first link to inherit the link color from the parent group block + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); await firstLink.click(); await expect( firstLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); @@ -1230,7 +1241,7 @@ test.describe( 'Navigation block', () => { await secondLink.click(); await expect( secondLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); - // We test the overlay on mobile too. + // We test the colors of the links on the mobile overlay too. await page .getByRole( 'button', { name: 'View', exact: true } ) .click(); @@ -1250,7 +1261,7 @@ test.describe( 'Navigation block', () => { await editor.saveSiteEditorEntities(); - // And finally we check the frontend + // And finally we check the colors of the links on the frontend await page.goto( '/' ); const firstLinkFront = page .locator( 'a' ) @@ -1288,18 +1299,21 @@ test.describe( 'Navigation block', () => { editor, page, } ) => { - // We add a group container and change its colors so we can test if the nav block settings will prevail + // 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(); + + // We wrap the nav block inside a group block await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) .click(); await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + // We change the group link colors so we can test if the nav block settings will prevail await editor.openDocumentSettingsSidebar(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color options' } ).click(); @@ -1321,14 +1335,17 @@ test.describe( 'Navigation block', () => { .click( { force: true } ); await editor.canvas.click( 'body' ); - // We change the nav block colors + // 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(); + + // In the inspector sidebar, we change the nav block colors await page.getByRole( 'tab', { name: 'Styles' } ).click(); + // Pale pink for the text color await page .getByRole( 'button', { name: 'Text', exact: true } ) .click(); @@ -1336,6 +1353,7 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color: Pale pink' } ) .click( { force: true } ); + // Pale cyan blue for the background color await page .getByRole( 'button', { name: 'Background', exact: true } ) .click(); @@ -1343,6 +1361,7 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) .click( { force: true } ); + // Cyan bluish gray for the submenu and overlay text color await page .getByRole( 'button', { name: 'Submenu & overlay text' } ) .click(); @@ -1350,6 +1369,7 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) .click( { force: true } ); + // Luminous vivid amber for the submenu and overlay background color await page .getByRole( 'button', { name: 'Submenu & overlay background' } ) .click(); @@ -1360,9 +1380,7 @@ test.describe( 'Navigation block', () => { await editor.canvas.click( 'body' ); - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); + // Focus the navigation block inside the header template part await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -1371,6 +1389,9 @@ test.describe( 'Navigation block', () => { .click(); // Expect the first link to be "Pale pink" we selected for the nav block + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); await expect( firstLink ).toHaveCSS( 'color', 'rgb(247, 141, 167)' From 307123f06c29f098ab38d4e5c1b8f2ec34ecadfe Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 4 Jul 2023 16:53:44 +0200 Subject: [PATCH 12/66] finish checking colors in the editor on desktop --- .../specs/editor/blocks/navigation.spec.js | 43 ++++++++++++++++++- 1 file changed, 41 insertions(+), 2 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 1fb0757d0b5328..98035c4bd86154 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1391,15 +1391,54 @@ test.describe( 'Navigation block', () => { // Expect the first link to be "Pale pink" we selected for the nav block const firstLink = editor.canvas .locator( 'a' ) - .filter( { hasText: 'First Link' } ); + .filter( { hasText: 'First Link' } ) + .filter( { + has: editor.canvas.getByRole( 'textbox', { + label: 'Navigation link text', + } ), + } ); await expect( firstLink ).toHaveCSS( 'color', 'rgb(247, 141, 167)' ); - //TODO Check the background colors + // Expect the nav block background to be "Pale cyan blue" we selected for the nav block + const menuWrapper = editor.canvas.getByRole( 'document', { + name: 'Block: Navigation', + } ); + await expect( menuWrapper ).toHaveCSS( + 'background-color', + 'rgb(142, 209, 252)' + ); + + // Expect the second link to be "Cyan bluish gray" we selected for the submenu and overlay text colors + const secondLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + await firstLink.click(); + await expect( secondLink ).toHaveCSS( + 'color', + 'rgb(171, 184, 195)' + ); + + // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors + const submenuWrapper = editor.canvas + .getByRole( 'document', { name: 'Block: Custom Link' } ) + .filter( { has: secondLink } ); + await expect( submenuWrapper ).toHaveCSS( + 'background-color', + 'rgb(252, 185, 0)' + ); //TODO Check the overlay on mobile + // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors + /*const overlay = editor.canvas + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Second Link' } ); + await expect( overlay ).toHaveCSS( + 'background-color', + 'rgb(252, 185, 0)' + );*/ //TODO check the frontend } ); From 186338afe496d8c52c2e0bafa5bab9f7868bc46c Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Tue, 4 Jul 2023 16:59:26 +0200 Subject: [PATCH 13/66] test the overlay and reset settings --- .../specs/editor/blocks/navigation.spec.js | 41 +++++++++++++++++-- 1 file changed, 37 insertions(+), 4 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 98035c4bd86154..7e6cfb9deae449 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1296,6 +1296,7 @@ test.describe( 'Navigation block', () => { } ); test( 'As a user I expect my navigation to use the colors I selected for it', async ( { + admin, editor, page, } ) => { @@ -1430,17 +1431,49 @@ test.describe( 'Navigation block', () => { 'rgb(252, 185, 0)' ); - //TODO Check the overlay on mobile - // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors - /*const overlay = editor.canvas + // We test the colors of the links on the mobile overlay too. + await page + .getByRole( 'button', { name: 'View', exact: true } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + const overlay = editor.canvas .locator( '.wp-block-navigation__responsive-container' ) .filter( { hasText: 'Second Link' } ); + // Expect the overlay background to be "Luminous vivid amber" we selected for the submenu and overlay background colors await expect( overlay ).toHaveCSS( 'background-color', 'rgb(252, 185, 0)' - );*/ + ); + // Expect the links to both have the colors selected for the submenu and overlay text + await expect( firstLink ).toHaveCSS( + 'color', + 'rgb(171, 184, 195)' + ); + await expect( secondLink ).toHaveCSS( + 'color', + 'rgb(171, 184, 195)' + ); + await editor.saveSiteEditorEntities(); //TODO check the frontend + + //await pageUtils.setBrowserViewport( viewport ); + + // We reset global styles so we don't affect other tests + await admin.visitSiteEditor(); + await editor.canvas.click( 'body' ); + await page + .getByRole( 'button', { name: 'Styles', exact: true } ) + .click(); + await page.getByRole( 'button', { name: 'Revisions' } ).click(); + await page + .getByRole( 'menuitem', { name: 'Reset to defaults' } ) + .click(); + + await editor.saveSiteEditorEntities(); } ); } ); } ); From 1f1fd9e1f57397d74481c058d78103a8d7e46771 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 5 Jul 2023 10:46:00 +0200 Subject: [PATCH 14/66] use variables for colors, cover rest of the cases to test --- .../specs/editor/blocks/navigation.spec.js | 89 ++++++++++++++----- 1 file changed, 67 insertions(+), 22 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 7e6cfb9deae449..6f7dbbe996cd75 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -946,7 +946,7 @@ test.describe( 'Navigation block', () => { } ); await editor.canvas.click( 'body' ); const { id: menuId } = await requestUtils.createNavigationMenu( { - title: 'Hidden menu', + title: 'Colored menu', content: '', attributes: { openSubmenusOnClick: true }, @@ -1299,6 +1299,7 @@ test.describe( 'Navigation block', () => { admin, editor, page, + pageUtils, } ) => { // Focus the navigation block inside the header template part await editor.canvas @@ -1351,6 +1352,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Text', exact: true } ) .click(); // 247, 141, 167 is the color of the "Pale pink" color preset + const textColor = 'rgb(247, 141, 167)'; await page .getByRole( 'button', { name: 'Color: Pale pink' } ) .click( { force: true } ); @@ -1359,6 +1361,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Background', exact: true } ) .click(); // 142, 209, 252 is the color of the "Pale cyan blue" color preset + const bgColor = 'rgb(142, 209, 252)'; await page .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) .click( { force: true } ); @@ -1367,6 +1370,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Submenu & overlay text' } ) .click(); // 171, 184, 195 is the color of the "Cyan bluish gray" color preset + const overlayTextColor = 'rgb(171, 184, 195)'; await page .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) .click( { force: true } ); @@ -1374,7 +1378,8 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Submenu & overlay background' } ) .click(); - // rgba(252,185,0) is the color of the "Luminous vivid amber" color preset + // 252, 185, 0 is the color of the "Luminous vivid amber" color preset + const overlayBgColor = 'rgb(252, 185, 0)'; await page .getByRole( 'button', { name: 'Color: Luminous vivid amber' } ) .click( { force: true } ); @@ -1398,18 +1403,15 @@ test.describe( 'Navigation block', () => { label: 'Navigation link text', } ), } ); - await expect( firstLink ).toHaveCSS( - 'color', - 'rgb(247, 141, 167)' - ); + await expect( firstLink ).toHaveCSS( 'color', textColor ); - // Expect the nav block background to be "Pale cyan blue" we selected for the nav block + // Expect the nav block background to be "Pale cyan blue" we selected for the nav background block const menuWrapper = editor.canvas.getByRole( 'document', { name: 'Block: Navigation', } ); await expect( menuWrapper ).toHaveCSS( 'background-color', - 'rgb(142, 209, 252)' + bgColor ); // Expect the second link to be "Cyan bluish gray" we selected for the submenu and overlay text colors @@ -1417,10 +1419,7 @@ test.describe( 'Navigation block', () => { .locator( 'a' ) .filter( { hasText: 'Second Link' } ); await firstLink.click(); - await expect( secondLink ).toHaveCSS( - 'color', - 'rgb(171, 184, 195)' - ); + await expect( secondLink ).toHaveCSS( 'color', overlayTextColor ); // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors const submenuWrapper = editor.canvas @@ -1428,7 +1427,7 @@ test.describe( 'Navigation block', () => { .filter( { has: secondLink } ); await expect( submenuWrapper ).toHaveCSS( 'background-color', - 'rgb(252, 185, 0)' + overlayBgColor ); // We test the colors of the links on the mobile overlay too. @@ -1445,30 +1444,76 @@ test.describe( 'Navigation block', () => { // Expect the overlay background to be "Luminous vivid amber" we selected for the submenu and overlay background colors await expect( overlay ).toHaveCSS( 'background-color', - 'rgb(252, 185, 0)' + overlayBgColor ); // Expect the links to both have the colors selected for the submenu and overlay text - await expect( firstLink ).toHaveCSS( - 'color', - 'rgb(171, 184, 195)' + await expect( firstLink ).toHaveCSS( 'color', overlayTextColor ); + await expect( secondLink ).toHaveCSS( 'color', overlayTextColor ); + await editor.saveSiteEditorEntities(); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + const firstLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + const secondLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + const submenuWrapperFront = page + .locator( '.wp-block-navigation__submenu-container' ) + .filter( { has: secondLinkFront } ); + + // Expect the first link to be "Pale pink" we selected for the nav block + await expect( firstLinkFront ).toHaveCSS( 'color', textColor ); + // Expect the nav block background to be "Pale cyan blue" we selected for the nav block + const menuWrapperFront = page + .getByRole( 'navigation', { name: 'Colored menu' } ) + .getByRole( 'list' ); + await expect( menuWrapperFront ).toHaveCSS( + 'background-color', + bgColor ); - await expect( secondLink ).toHaveCSS( + + await firstLinkFront.hover(); + // Expect the second link to be "Cyan bluish gray" we selected for the submenu and overlay text colors + await expect( secondLinkFront ).toHaveCSS( 'color', - 'rgb(171, 184, 195)' + overlayTextColor + ); + // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors + await expect( submenuWrapperFront ).toHaveCSS( + 'background-color', + overlayBgColor ); - await editor.saveSiteEditorEntities(); - //TODO check the frontend + // We test the colors on the mobile overlay on the frontend. + await pageUtils.setBrowserViewport( { width: 599, height: 700 } ); + await page.getByRole( 'button', { name: 'Open menu' } ).click(); - //await pageUtils.setBrowserViewport( viewport ); + //TODO: this doesn't work because the overlay is not working right now! + await expect( firstLinkFront ).toHaveCSS( + 'color', + overlayTextColor + ); + await expect( secondLinkFront ).toHaveCSS( + 'color', + overlayTextColor + ); + await expect( overlay ).toHaveCSS( + 'background-color', + overlayBgColor + ); // We reset global styles so we don't affect other tests + await pageUtils.setBrowserViewport( 'large' ); await admin.visitSiteEditor(); await editor.canvas.click( 'body' ); await page .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); await page.getByRole( 'button', { name: 'Revisions' } ).click(); + + //await page.pause(); await page .getByRole( 'menuitem', { name: 'Reset to defaults' } ) .click(); From ce5a7262626f5ca2eb9dff8e6fb3c9b97707c24c Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 5 Jul 2023 16:54:09 +0200 Subject: [PATCH 15/66] introduced a third link to cover non submenu links --- .../block-library/src/navigation/index.php | 1 + .../specs/editor/blocks/navigation.spec.js | 77 +++++++++++++++++-- 2 files changed, 70 insertions(+), 8 deletions(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index dbf6b8c0f5ed26..a1025ada3cda09 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -667,6 +667,7 @@ function render_block_core_navigation( $attributes, $content, $block ) { if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file, 'wp-block-navigation-view-2' ) ); } + wp_enqueue_script( 'wp-block-file-view' ); } // Add directives to the submenu if needed. diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 6f7dbbe996cd75..0f7330f2974945 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -948,7 +948,7 @@ test.describe( 'Navigation block', () => { const { id: menuId } = await requestUtils.createNavigationMenu( { title: 'Colored menu', content: - '', + '', attributes: { openSubmenusOnClick: true }, } ); await editor.insertBlock( { @@ -975,10 +975,14 @@ test.describe( 'Navigation block', () => { const firstLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'First Link' } ); + const thirdLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); - // Expect the first link to default to black when the theme doesn't define a link color + // Expect the first and third link to default to black when the theme doesn't define a link color // This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); // Focus the navigation block inside the header template part await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) @@ -1018,6 +1022,7 @@ test.describe( 'Navigation block', () => { 'rgb(255, 255, 255)' ); await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); // And finally we check the colors of the links on the frontend @@ -1028,6 +1033,9 @@ test.describe( 'Navigation block', () => { const secondLinkFront = page .locator( 'a' ) .filter( { hasText: 'Second Link' } ); + const thirdLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); const submenuWrapperFront = page .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: secondLinkFront } ); @@ -1037,6 +1045,10 @@ test.describe( 'Navigation block', () => { 'color', 'rgb(0, 0, 238)' ); + await expect( thirdLinkFront ).toHaveCSS( + 'color', + 'rgb(0, 0, 238)' + ); await firstLinkFront.hover(); await expect( secondLinkFront ).toHaveCSS( 'color', @@ -1055,6 +1067,7 @@ test.describe( 'Navigation block', () => { } ) => { // In the inspector sidebar, we set colors for link text and link hover text for this theme await page + .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); await page.getByRole( 'button', { name: 'Colors styles' } ).click(); @@ -1080,13 +1093,19 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // Expect the first link to inherit the nav link color from the theme + // Expect the first and third link to inherit the nav link color from the theme const firstLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'First Link' } ); + const thirdLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); await expect( firstLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); await firstLink.click(); await expect( firstLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); + await thirdLink.click(); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); // Expect the second link to behave the same as the first const secondLink = editor.canvas @@ -1110,6 +1129,7 @@ test.describe( 'Navigation block', () => { .click(); await expect( firstLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); await expect( secondLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); await editor.saveSiteEditorEntities(); @@ -1121,12 +1141,19 @@ test.describe( 'Navigation block', () => { const secondLinkFront = page .locator( 'a' ) .filter( { hasText: 'Second Link' } ); + const thirdLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); // Expect the links to have the same colors as in the editor await expect( firstLinkFront ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await expect( thirdLinkFront ).toHaveCSS( + 'color', + 'rgb(207, 46, 46)' + ); await firstLinkFront.hover(); await expect( firstLinkFront ).toHaveCSS( 'color', @@ -1141,11 +1168,17 @@ test.describe( 'Navigation block', () => { 'color', 'rgb(155, 81, 224)' ); + await thirdLinkFront.hover(); + await expect( thirdLinkFront ).toHaveCSS( + 'color', + 'rgb(155, 81, 224)' + ); // We reset global styles so we don't affect other tests await admin.visitSiteEditor(); await editor.canvas.click( 'body' ); await page + .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); await page.getByRole( 'button', { name: 'Revisions' } ).click(); @@ -1163,6 +1196,7 @@ test.describe( 'Navigation block', () => { } ) => { // Make changes to the theme link colors and make sure the group block colors are the ones we see await page + .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); await page.getByRole( 'button', { name: 'Colors styles' } ).click(); @@ -1241,6 +1275,14 @@ test.describe( 'Navigation block', () => { await secondLink.click(); await expect( secondLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); + // Expect the third link to behave the same as the first + const thirdLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await secondLink.click(); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); + // We test the colors of the links on the mobile overlay too. await page .getByRole( 'button', { name: 'View', exact: true } ) @@ -1258,6 +1300,7 @@ test.describe( 'Navigation block', () => { ); await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); await editor.saveSiteEditorEntities(); @@ -1269,6 +1312,9 @@ test.describe( 'Navigation block', () => { const secondLinkFront = page .locator( 'a' ) .filter( { hasText: 'Second Link' } ); + const thirdLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white await expect( firstLinkFront ).toHaveCSS( @@ -1280,11 +1326,16 @@ test.describe( 'Navigation block', () => { 'color', 'rgb(0, 208, 132)' ); + await expect( thirdLinkFront ).toHaveCSS( + 'color', + 'rgb(0, 208, 132)' + ); // We reset global styles so we don't affect other tests await admin.visitSiteEditor(); await editor.canvas.click( 'body' ); await page + .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); await page.getByRole( 'button', { name: 'Revisions' } ).click(); @@ -1394,7 +1445,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // Expect the first link to be "Pale pink" we selected for the nav block + // Expect the first and third link to be "Pale pink" we selected for the nav block const firstLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'First Link' } ) @@ -1404,6 +1455,10 @@ test.describe( 'Navigation block', () => { } ), } ); await expect( firstLink ).toHaveCSS( 'color', textColor ); + const thirdLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); + await expect( thirdLink ).toHaveCSS( 'color', textColor ); // Expect the nav block background to be "Pale cyan blue" we selected for the nav background block const menuWrapper = editor.canvas.getByRole( 'document', { @@ -1449,6 +1504,7 @@ test.describe( 'Navigation block', () => { // Expect the links to both have the colors selected for the submenu and overlay text await expect( firstLink ).toHaveCSS( 'color', overlayTextColor ); await expect( secondLink ).toHaveCSS( 'color', overlayTextColor ); + await expect( thirdLink ).toHaveCSS( 'color', overlayTextColor ); await editor.saveSiteEditorEntities(); // And finally we check the colors of the links on the frontend @@ -1459,12 +1515,16 @@ test.describe( 'Navigation block', () => { const secondLinkFront = page .locator( 'a' ) .filter( { hasText: 'Second Link' } ); + const thirdLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Third Link' } ); const submenuWrapperFront = page .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: secondLinkFront } ); - // Expect the first link to be "Pale pink" we selected for the nav block + // Expect the first and third link to be "Pale pink" we selected for the nav block await expect( firstLinkFront ).toHaveCSS( 'color', textColor ); + await expect( thirdLinkFront ).toHaveCSS( 'color', textColor ); // Expect the nav block background to be "Pale cyan blue" we selected for the nav block const menuWrapperFront = page .getByRole( 'navigation', { name: 'Colored menu' } ) @@ -1490,8 +1550,8 @@ test.describe( 'Navigation block', () => { await pageUtils.setBrowserViewport( { width: 599, height: 700 } ); await page.getByRole( 'button', { name: 'Open menu' } ).click(); - //TODO: this doesn't work because the overlay is not working right now! - await expect( firstLinkFront ).toHaveCSS( + //TODO: fix this + /*await expect( firstLinkFront ).toHaveCSS( 'color', overlayTextColor ); @@ -1502,13 +1562,14 @@ test.describe( 'Navigation block', () => { await expect( overlay ).toHaveCSS( 'background-color', overlayBgColor - ); + );*/ // We reset global styles so we don't affect other tests await pageUtils.setBrowserViewport( 'large' ); await admin.visitSiteEditor(); await editor.canvas.click( 'body' ); await page + .getByRole( 'region', { name: 'Editor top bar' } ) .getByRole( 'button', { name: 'Styles', exact: true } ) .click(); await page.getByRole( 'button', { name: 'Revisions' } ).click(); From 53c8461fc7cdfc9df00f18a0edc9731a2f399343 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 5 Jul 2023 17:19:41 +0200 Subject: [PATCH 16/66] undo unwanted change --- packages/block-library/src/navigation/index.php | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/block-library/src/navigation/index.php b/packages/block-library/src/navigation/index.php index a1025ada3cda09..dbf6b8c0f5ed26 100644 --- a/packages/block-library/src/navigation/index.php +++ b/packages/block-library/src/navigation/index.php @@ -667,7 +667,6 @@ function render_block_core_navigation( $attributes, $content, $block ) { if ( $should_load_view_script && ! in_array( $view_js_file, $script_handles, true ) ) { $block->block_type->view_script_handles = array_merge( $script_handles, array( $view_js_file, 'wp-block-navigation-view-2' ) ); } - wp_enqueue_script( 'wp-block-file-view' ); } // Add directives to the submenu if needed. From d737271f69bb40f9e1b93ec240eddd55156d7114 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Wed, 5 Jul 2023 18:03:04 +0200 Subject: [PATCH 17/66] finish the overlay background tests and fix issues with inheritance --- .../block-library/src/navigation/style.scss | 5 +-- .../specs/editor/blocks/navigation.spec.js | 35 +++++++------------ 2 files changed, 15 insertions(+), 25 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 99040be9a2201f..f784633810e4f9 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -476,8 +476,8 @@ button.wp-block-navigation-item__content { // If the responsive wrapper is present but overlay is not open, // overlay styles shouldn't apply. &:not(.is-menu-open.is-menu-open) { - //color: inherit !important; - //background-color: inherit !important; + color: inherit !important; + background-color: inherit !important; } // Overlay menu. @@ -582,6 +582,7 @@ button.wp-block-navigation-item__content { // Remove background colors for items inside the overlay menu. // Has to be !important to override global styles. .wp-block-navigation-item .wp-block-navigation__submenu-container, + .wp-block-navigation__container, .wp-block-navigation-item, .wp-block-page-list { color: inherit !important; diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 0f7330f2974945..83669c5434ec05 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1280,7 +1280,7 @@ test.describe( 'Navigation block', () => { .locator( 'a' ) .filter( { hasText: 'Third Link' } ); await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); - await secondLink.click(); + await thirdLink.click(); await expect( thirdLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); // We test the colors of the links on the mobile overlay too. @@ -1347,7 +1347,6 @@ test.describe( 'Navigation block', () => { } ); test( 'As a user I expect my navigation to use the colors I selected for it', async ( { - admin, editor, page, pageUtils, @@ -1550,8 +1549,11 @@ test.describe( 'Navigation block', () => { await pageUtils.setBrowserViewport( { width: 599, height: 700 } ); await page.getByRole( 'button', { name: 'Open menu' } ).click(); - //TODO: fix this - /*await expect( firstLinkFront ).toHaveCSS( + const overlayFront = page + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Second Link' } ); + + await expect( firstLinkFront ).toHaveCSS( 'color', overlayTextColor ); @@ -1559,27 +1561,14 @@ test.describe( 'Navigation block', () => { 'color', overlayTextColor ); - await expect( overlay ).toHaveCSS( + await expect( thirdLinkFront ).toHaveCSS( + 'color', + overlayTextColor + ); + await expect( overlayFront ).toHaveCSS( 'background-color', overlayBgColor - );*/ - - // We reset global styles so we don't affect other tests - await pageUtils.setBrowserViewport( 'large' ); - await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); - await page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Styles', exact: true } ) - .click(); - await page.getByRole( 'button', { name: 'Revisions' } ).click(); - - //await page.pause(); - await page - .getByRole( 'menuitem', { name: 'Reset to defaults' } ) - .click(); - - await editor.saveSiteEditorEntities(); + ); } ); } ); } ); From eb194a1e9ae173fbb44dff75e0ac469c8bd43345 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 6 Jul 2023 12:26:28 +0200 Subject: [PATCH 18/66] turn colors into variables for readibility --- .../block-library/src/navigation/style.scss | 2 +- .../specs/editor/blocks/navigation.spec.js | 96 ++++++++++--------- 2 files changed, 50 insertions(+), 48 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index f784633810e4f9..65053083906cc7 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -460,7 +460,7 @@ button.wp-block-navigation-item__content { right: 0; bottom: 0; - //Low specificity so that themes can override. + // Low specificity so that themes can override. &:where(.wp-block-navigation-item a) { color: inherit; } diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 83669c5434ec05..5792b48b70ac80 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -980,9 +980,11 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'Third Link' } ); // Expect the first and third link to default to black when the theme doesn't define a link color + const defaultLinkColor = 'rgb(0, 0, 0)'; + const defaultBackgroundColor = 'rgb(255, 255, 255)'; // This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color - await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await expect( firstLink ).toHaveCSS( 'color', defaultLinkColor ); + await expect( thirdLink ).toHaveCSS( 'color', defaultLinkColor ); // Focus the navigation block inside the header template part await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) @@ -999,7 +1001,7 @@ test.describe( 'Navigation block', () => { const submenuWrapper = editor.canvas .getByRole( 'document', { name: 'Block: Custom Link' } ) .filter( { has: secondLink } ); - await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await expect( secondLink ).toHaveCSS( 'color', defaultLinkColor ); // We check for the submenu's background color. This one is important when the theme doesn't define an overlay background color await expect( submenuWrapper ).toHaveCSS( 'background-color', @@ -1021,9 +1023,9 @@ test.describe( 'Navigation block', () => { 'background-color', 'rgb(255, 255, 255)' ); - await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); - await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 0, 0)' ); + await expect( firstLink ).toHaveCSS( 'color', defaultLinkColor ); + await expect( thirdLink ).toHaveCSS( 'color', defaultLinkColor ); + await expect( secondLink ).toHaveCSS( 'color', defaultLinkColor ); // And finally we check the colors of the links on the frontend await page.goto( '/' ); @@ -1056,7 +1058,7 @@ test.describe( 'Navigation block', () => { ); await expect( submenuWrapperFront ).toHaveCSS( 'background-color', - 'rgb(255, 255, 255)' + defaultBackgroundColor ); } ); @@ -1075,11 +1077,13 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Color Link styles' } ) .click(); // rgba(207,46,46) is the color of the "vivid red" color preset + const linkThemeColor = 'rgb(207, 46, 46)'; await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); // rgba(155,81,224) is the color of the "vivid purple" color preset + const linkThemeHoverColor = 'rgb(155, 81, 224)'; await page .getByRole( 'button', { name: 'Color: Vivid purple' } ) .click( { force: true } ); @@ -1100,23 +1104,23 @@ test.describe( 'Navigation block', () => { const thirdLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Third Link' } ); - await expect( firstLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await expect( firstLink ).toHaveCSS( 'color', linkThemeColor ); + await expect( thirdLink ).toHaveCSS( 'color', linkThemeColor ); await firstLink.click(); - await expect( firstLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); + await expect( firstLink ).toHaveCSS( 'color', linkThemeHoverColor ); await thirdLink.click(); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(155, 81, 224)' ); + await expect( thirdLink ).toHaveCSS( 'color', linkThemeHoverColor ); // Expect the second link to behave the same as the first const secondLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Second Link' } ); await firstLink.click(); - await expect( secondLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await expect( secondLink ).toHaveCSS( 'color', linkThemeColor ); await secondLink.click(); await expect( secondLink ).toHaveCSS( 'color', - 'rgb(155, 81, 224)' + linkThemeHoverColor ); // We test the colors of the links on the mobile overlay too. @@ -1127,9 +1131,9 @@ test.describe( 'Navigation block', () => { await editor.canvas .getByRole( 'button', { name: 'Open menu' } ) .click(); - await expect( firstLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); - await expect( secondLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(207, 46, 46)' ); + await expect( firstLink ).toHaveCSS( 'color', linkThemeColor ); + await expect( secondLink ).toHaveCSS( 'color', linkThemeColor ); + await expect( thirdLink ).toHaveCSS( 'color', linkThemeColor ); await editor.saveSiteEditorEntities(); @@ -1146,32 +1150,26 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'Third Link' } ); // Expect the links to have the same colors as in the editor - await expect( firstLinkFront ).toHaveCSS( - 'color', - 'rgb(207, 46, 46)' - ); - await expect( thirdLinkFront ).toHaveCSS( - 'color', - 'rgb(207, 46, 46)' - ); + await expect( firstLinkFront ).toHaveCSS( 'color', linkThemeColor ); + await expect( thirdLinkFront ).toHaveCSS( 'color', linkThemeColor ); await firstLinkFront.hover(); await expect( firstLinkFront ).toHaveCSS( 'color', - 'rgb(155, 81, 224)' + linkThemeHoverColor ); await expect( secondLinkFront ).toHaveCSS( 'color', - 'rgb(207, 46, 46)' + linkThemeColor ); await secondLinkFront.hover(); await expect( secondLinkFront ).toHaveCSS( 'color', - 'rgb(155, 81, 224)' + linkThemeHoverColor ); await thirdLinkFront.hover(); await expect( thirdLinkFront ).toHaveCSS( 'color', - 'rgb(155, 81, 224)' + linkThemeHoverColor ); // We reset global styles so we don't affect other tests @@ -1241,11 +1239,13 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Color Link styles' } ) .click(); // rgba(0,208,132) is the color of the "Vivid green cyan" color preset + const linkParentColor = 'rgba(0, 208, 132)'; await page .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); // rgba(255,105,0) is the color of the "Luminous vivid orange" color preset + const linkParentHoverColor = 'rgba(255, 105, 0)'; await page .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) .click( { force: true } ); @@ -1263,25 +1263,34 @@ test.describe( 'Navigation block', () => { const firstLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'First Link' } ); - await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await expect( firstLink ).toHaveCSS( 'color', linkParentColor ); await firstLink.click(); - await expect( firstLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); + await expect( firstLink ).toHaveCSS( + 'color', + linkParentHoverColor + ); // Expect the second link to behave the same as the first const secondLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Second Link' } ); - await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await expect( secondLink ).toHaveCSS( 'color', linkParentColor ); await secondLink.click(); - await expect( secondLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); + await expect( secondLink ).toHaveCSS( + 'color', + linkParentHoverColor + ); // Expect the third link to behave the same as the first const thirdLink = editor.canvas .locator( 'a' ) .filter( { hasText: 'Third Link' } ); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await expect( thirdLink ).toHaveCSS( 'color', linkParentColor ); await thirdLink.click(); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(255, 105, 0)' ); + await expect( thirdLink ).toHaveCSS( + 'color', + linkParentHoverColor + ); // We test the colors of the links on the mobile overlay too. await page @@ -1291,16 +1300,9 @@ test.describe( 'Navigation block', () => { await editor.canvas .getByRole( 'button', { name: 'Open menu' } ) .click(); - const overlay = editor.canvas - .locator( '.wp-block-navigation__responsive-container' ) - .filter( { hasText: 'Second Link' } ); - await expect( overlay ).toHaveCSS( - 'background-color', - 'rgb(255, 255, 255)' - ); - await expect( firstLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); - await expect( secondLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); - await expect( thirdLink ).toHaveCSS( 'color', 'rgb(0, 208, 132)' ); + await expect( firstLink ).toHaveCSS( 'color', linkParentColor ); + await expect( secondLink ).toHaveCSS( 'color', linkParentColor ); + await expect( thirdLink ).toHaveCSS( 'color', linkParentColor ); await editor.saveSiteEditorEntities(); @@ -1319,16 +1321,16 @@ test.describe( 'Navigation block', () => { // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white await expect( firstLinkFront ).toHaveCSS( 'color', - 'rgb(0, 208, 132)' + linkParentColor ); await firstLinkFront.hover(); await expect( secondLinkFront ).toHaveCSS( 'color', - 'rgb(0, 208, 132)' + linkParentColor ); await expect( thirdLinkFront ).toHaveCSS( 'color', - 'rgb(0, 208, 132)' + linkParentColor ); // We reset global styles so we don't affect other tests From 5f50ed5eae9aaf47054a976972943eb5b3a3fbec Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Thu, 6 Jul 2023 13:02:27 +0200 Subject: [PATCH 19/66] fix wrong color syntax --- .../specs/editor/blocks/navigation.spec.js | 20 +++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 5792b48b70ac80..a8ab3000db2080 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1076,13 +1076,13 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - // rgba(207,46,46) is the color of the "vivid red" color preset + // rgb(207, 46, 46) is the color of the "vivid red" color preset const linkThemeColor = 'rgb(207, 46, 46)'; await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgba(155,81,224) is the color of the "vivid purple" color preset + // rgb(155, 81, 224) is the color of the "vivid purple" color preset const linkThemeHoverColor = 'rgb(155, 81, 224)'; await page .getByRole( 'button', { name: 'Color: Vivid purple' } ) @@ -1201,12 +1201,12 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - // rgba(207,46,46) is the color of the "vivid red" color preset + // rga(207, 46 ,46) is the color of the "vivid red" color preset await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgba(155,81,224) is the color of the "vivid purple" color preset + // rgb(155, 81, 224) is the color of the "vivid purple" color preset await page .getByRole( 'button', { name: 'Color: Vivid purple' } ) .click( { force: true } ); @@ -1238,14 +1238,14 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - // rgba(0,208,132) is the color of the "Vivid green cyan" color preset - const linkParentColor = 'rgba(0, 208, 132)'; + // rgb(0, 208, 132) is the color of the "Vivid green cyan" color preset + const linkParentColor = 'rgb(0, 208, 132)'; await page .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgba(255,105,0) is the color of the "Luminous vivid orange" color preset - const linkParentHoverColor = 'rgba(255, 105, 0)'; + // rgb(255, 105, 0) is the color of the "Luminous vivid orange" color preset + const linkParentHoverColor = 'rgb(255, 105, 0)'; await page .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) .click( { force: true } ); @@ -1378,12 +1378,12 @@ test.describe( 'Navigation block', () => { await page .getByRole( 'button', { name: 'Color Link styles' } ) .click(); - // rgba(0,208,132) is the color of the "Vivid green cyan" color preset + // rgb(0, 208, 132) is the color of the "Vivid green cyan" color preset await page .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgba(255,105,0) is the color of the "Luminous vivid orange" color preset + // rgb(255, 105, 0) is the color of the "Luminous vivid orange" color preset await page .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) .click( { force: true } ); From eec98d19b492be8d3fe49ec0aa2d98b2a7f594f8 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 6 Jul 2023 10:46:50 -0500 Subject: [PATCH 20/66] Create test page before creating navigation menu --- .../specs/editor/blocks/navigation.spec.js | 27 +++++++++++-------- 1 file changed, 16 insertions(+), 11 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index a8ab3000db2080..436f88fac628c6 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -937,6 +937,7 @@ test.describe( 'Navigation block', () => { await requestUtils.activateTheme( 'emptytheme' ); await requestUtils.deleteAllTemplates( 'wp_template_part' ); await requestUtils.deleteAllMenus(); + await requestUtils.deleteAllPages(); } ); test.beforeEach( async ( { admin, editor, requestUtils } ) => { @@ -945,10 +946,13 @@ test.describe( 'Navigation block', () => { 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: - '', + content: ``, attributes: { openSubmenusOnClick: true }, } ); await editor.insertBlock( { @@ -966,6 +970,7 @@ test.describe( 'Navigation block', () => { test.afterEach( async ( { requestUtils } ) => { await requestUtils.deleteAllTemplates( 'wp_template_part' ); await requestUtils.deleteAllMenus(); + await requestUtils.deleteAllPages(); } ); test( 'As a user I expect my navigation links to have appropriate default colors', async ( { @@ -977,9 +982,9 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'First Link' } ); const thirdLink = editor.canvas .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); - // Expect the first and third link to default to black when the theme doesn't define a link color + // Expect the first and test page link to default to black when the theme doesn't define a link color const defaultLinkColor = 'rgb(0, 0, 0)'; const defaultBackgroundColor = 'rgb(255, 255, 255)'; // This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color @@ -1037,7 +1042,7 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'Second Link' } ); const thirdLinkFront = page .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); const submenuWrapperFront = page .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: secondLinkFront } ); @@ -1103,7 +1108,7 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'First Link' } ); const thirdLink = editor.canvas .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); await expect( firstLink ).toHaveCSS( 'color', linkThemeColor ); await expect( thirdLink ).toHaveCSS( 'color', linkThemeColor ); await firstLink.click(); @@ -1147,7 +1152,7 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'Second Link' } ); const thirdLinkFront = page .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); // Expect the links to have the same colors as in the editor await expect( firstLinkFront ).toHaveCSS( 'color', linkThemeColor ); @@ -1284,7 +1289,7 @@ test.describe( 'Navigation block', () => { // Expect the third link to behave the same as the first const thirdLink = editor.canvas .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); await expect( thirdLink ).toHaveCSS( 'color', linkParentColor ); await thirdLink.click(); await expect( thirdLink ).toHaveCSS( @@ -1316,7 +1321,7 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'Second Link' } ); const thirdLinkFront = page .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white await expect( firstLinkFront ).toHaveCSS( @@ -1458,7 +1463,7 @@ test.describe( 'Navigation block', () => { await expect( firstLink ).toHaveCSS( 'color', textColor ); const thirdLink = editor.canvas .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); await expect( thirdLink ).toHaveCSS( 'color', textColor ); // Expect the nav block background to be "Pale cyan blue" we selected for the nav background block @@ -1518,7 +1523,7 @@ test.describe( 'Navigation block', () => { .filter( { hasText: 'Second Link' } ); const thirdLinkFront = page .locator( 'a' ) - .filter( { hasText: 'Third Link' } ); + .filter( { hasText: 'Test Page' } ); const submenuWrapperFront = page .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: secondLinkFront } ); From 77d3df03d70025dc7b72dcbfc727d44a2f52e198 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Thu, 6 Jul 2023 11:29:29 -0500 Subject: [PATCH 21/66] Add test coverage for selecting group text color that should be inherited by all links This test is currently failing. TDD. --- .../specs/editor/blocks/navigation.spec.js | 104 +++++++++++++++++- 1 file changed, 103 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 436f88fac628c6..3e0c3e5ecd3848 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1192,7 +1192,7 @@ test.describe( 'Navigation block', () => { await editor.saveSiteEditorEntities(); } ); - test( 'As a user I expect my navigation links to inherit the colors from the parent container', async ( { + test( 'As a user I expect my navigation links to inherit the link colors from the parent container', async ( { admin, page, editor, @@ -1353,6 +1353,108 @@ test.describe( 'Navigation block', () => { await editor.saveSiteEditorEntities(); } ); + test( 'As a user I expect my navigation links to inherit the text colors from the parent container', async ( { + page, + editor, + } ) => { + // 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(); + + // We wrap the nav block inside a group block + await page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Options' } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + + // In the sidebar inspector we add a link color and link hover color to the group block + await editor.openDocumentSettingsSidebar(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page + .getByRole( 'button', { name: 'Color Text styles' } ) + .click(); + + // rgb(0, 208, 132) is the color of the "Vivid green cyan" color preset + const textParentColor = 'rgb(0, 208, 132)'; + await page + .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) + .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(); + + // Expect the first link to inherit the link color from the parent group block + const firstLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + await expect( firstLink ).toHaveCSS( 'color', textParentColor ); + await firstLink.click(); + + // Expect the second link to behave the same as the first + const secondLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + await expect( secondLink ).toHaveCSS( 'color', textParentColor ); + + // Expect the third link to behave the same as the first + const thirdLink = editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Test Page' } ); + await expect( thirdLink ).toHaveCSS( 'color', textParentColor ); + + // We test the colors of the links on the mobile overlay too. + await page + .getByRole( 'button', { name: 'View', exact: true } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); + await editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + await expect( firstLink ).toHaveCSS( 'color', textParentColor ); + await expect( secondLink ).toHaveCSS( 'color', textParentColor ); + await expect( thirdLink ).toHaveCSS( 'color', textParentColor ); + + await editor.saveSiteEditorEntities(); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + const firstLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'First Link' } ); + const secondLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Second Link' } ); + const thirdLinkFront = page + .locator( 'a' ) + .filter( { hasText: 'Test Page' } ); + + // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white + await expect( firstLinkFront ).toHaveCSS( + 'color', + textParentColor + ); + await firstLinkFront.hover(); + await expect( secondLinkFront ).toHaveCSS( + 'color', + textParentColor + ); + await expect( thirdLinkFront ).toHaveCSS( + 'color', + textParentColor + ); + } ); + test( 'As a user I expect my navigation to use the colors I selected for it', async ( { editor, page, From 7d908148f420cf90e8ce311a1d22f7345574a5ee Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 7 Jul 2023 10:25:46 -0500 Subject: [PATCH 22/66] Fix incorrect selector structure. The &:where(.wp-block-navigation-item a) rule would never apply, as .wp-block-navigation__responsive-container would never also have a .wp-block-navigation-item class on it. Adding the space allows it to apply the inherit rule to the a tag. --- packages/block-library/src/navigation/style.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 65053083906cc7..9a1b99acc6ab97 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -461,7 +461,7 @@ button.wp-block-navigation-item__content { bottom: 0; // Low specificity so that themes can override. - &:where(.wp-block-navigation-item a) { + & :where(.wp-block-navigation-item a) { color: inherit; } From a436cd367b8a66b783cb2ab1693a342ea277c8c0 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 7 Jul 2023 11:26:41 -0500 Subject: [PATCH 23/66] Update tests to check for black text defaults on navigation links --- test/e2e/specs/editor/blocks/navigation.spec.js | 11 +++++------ 1 file changed, 5 insertions(+), 6 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 3e0c3e5ecd3848..7d84a7d9d14a01 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -973,7 +973,7 @@ test.describe( 'Navigation block', () => { await requestUtils.deleteAllPages(); } ); - test( 'As a user I expect my navigation links to have appropriate default colors', async ( { + test( 'All navigation links have defaults set (black text, white background for submenus and mobile)', async ( { editor, page, } ) => { @@ -987,7 +987,6 @@ test.describe( 'Navigation block', () => { // Expect the first and test page link to default to black when the theme doesn't define a link color const defaultLinkColor = 'rgb(0, 0, 0)'; const defaultBackgroundColor = 'rgb(255, 255, 255)'; - // This is different to the frontend because in the editor the links don't have an href, so the browser doesn't apply the default blue color await expect( firstLink ).toHaveCSS( 'color', defaultLinkColor ); await expect( thirdLink ).toHaveCSS( 'color', defaultLinkColor ); // Focus the navigation block inside the header template part @@ -1047,19 +1046,19 @@ test.describe( 'Navigation block', () => { .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: secondLinkFront } ); - // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white + // Expect the links to default to black when the theme doesn't define a link color await expect( firstLinkFront ).toHaveCSS( 'color', - 'rgb(0, 0, 238)' + defaultLinkColor ); await expect( thirdLinkFront ).toHaveCSS( 'color', - 'rgb(0, 0, 238)' + defaultLinkColor ); await firstLinkFront.hover(); await expect( secondLinkFront ).toHaveCSS( 'color', - 'rgb(0, 0, 238)' + defaultLinkColor ); await expect( submenuWrapperFront ).toHaveCSS( 'background-color', From ce822925cef37b50d39c9b7fb2e978c7368c7272 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 7 Jul 2023 15:08:16 -0500 Subject: [PATCH 24/66] Big refactor of navigation color tests * Changed link names from non-descriptive firstLink, secondLink, and thirdLink to clearer names: customLink, submenuLink, and pageLink. * Combined some repeated operations such as openEditorOverlay, openFrontendOverlay, and resetGlobalStyles * Added ColorControl for keeping track of all the link selectors --- .../specs/editor/blocks/navigation.spec.js | 582 +++++++++--------- 1 file changed, 304 insertions(+), 278 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 7d84a7d9d14a01..5ef81a898a1258 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -952,7 +952,7 @@ test.describe( 'Navigation block', () => { } ); const { id: menuId } = await requestUtils.createNavigationMenu( { title: 'Colored menu', - content: ``, + content: ``, attributes: { openSubmenusOnClick: true }, } ); await editor.insertBlock( { @@ -973,22 +973,28 @@ test.describe( 'Navigation block', () => { await requestUtils.deleteAllPages(); } ); - test( 'All navigation links have defaults set (black text, white background for submenus and mobile)', async ( { + test.use( { + colorControl: async ( { admin, editor, page, pageUtils }, use ) => { + await use( + new ColorControl( { admin, editor, page, pageUtils } ) + ); + }, + } ); + + 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, } ) => { - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - const thirdLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); - // Expect the first and test page link to default to black when the theme doesn't define a link color - const defaultLinkColor = 'rgb(0, 0, 0)'; - const defaultBackgroundColor = 'rgb(255, 255, 255)'; - await expect( firstLink ).toHaveCSS( 'color', defaultLinkColor ); - await expect( thirdLink ).toHaveCSS( 'color', defaultLinkColor ); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + colorControl.black + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + colorControl.black + ); // Focus the navigation block inside the header template part await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) @@ -996,80 +1002,67 @@ test.describe( 'Navigation block', () => { await editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - await firstLink.click(); + await colorControl.customLink.click(); // We check that the submenu links also have black text color - const secondLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - const submenuWrapper = editor.canvas - .getByRole( 'document', { name: 'Block: Custom Link' } ) - .filter( { has: secondLink } ); - await expect( secondLink ).toHaveCSS( 'color', defaultLinkColor ); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + colorControl.black + ); // We check for the submenu's background color. This one is important when the theme doesn't define an overlay background color - await expect( submenuWrapper ).toHaveCSS( + await expect( colorControl.submenuWrapper ).toHaveCSS( 'background-color', - 'rgb(255, 255, 255)' + colorControl.white ); // We test the colors of the links on the mobile overlay too. - await page - .getByRole( 'button', { name: 'View', exact: true } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); - await editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - const overlay = editor.canvas - .locator( '.wp-block-navigation__responsive-container' ) - .filter( { hasText: 'Second Link' } ); - await expect( overlay ).toHaveCSS( + colorControl.openEditorOverlay(); + + await expect( colorControl.overlay ).toHaveCSS( 'background-color', - 'rgb(255, 255, 255)' + colorControl.white + ); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + colorControl.black + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + colorControl.black + ); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + colorControl.black ); - await expect( firstLink ).toHaveCSS( 'color', defaultLinkColor ); - await expect( thirdLink ).toHaveCSS( 'color', defaultLinkColor ); - await expect( secondLink ).toHaveCSS( 'color', defaultLinkColor ); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - const firstLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - const secondLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - const thirdLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); - const submenuWrapperFront = page - .locator( '.wp-block-navigation__submenu-container' ) - .filter( { has: secondLinkFront } ); // Expect the links to default to black when the theme doesn't define a link color - await expect( firstLinkFront ).toHaveCSS( + await expect( colorControl.customLinkFront ).toHaveCSS( 'color', - defaultLinkColor + colorControl.black ); - await expect( thirdLinkFront ).toHaveCSS( + await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', - defaultLinkColor + colorControl.black ); - await firstLinkFront.hover(); - await expect( secondLinkFront ).toHaveCSS( + await colorControl.customLinkFront.hover(); + await expect( colorControl.submenuLinkFront ).toHaveCSS( 'color', - defaultLinkColor + colorControl.black ); - await expect( submenuWrapperFront ).toHaveCSS( + await expect( colorControl.submenuWrapperFront ).toHaveCSS( 'background-color', - defaultBackgroundColor + colorControl.white ); + // TODO: Check frontend overlay colors } ); - test( 'As a user I expect my navigation links to inherit the colors from the theme', async ( { - admin, + test( 'As a user I expect my navigation links to inherit the link colors from the theme', async ( { page, editor, + colorControl, } ) => { // In the inspector sidebar, we set colors for link text and link hover text for this theme await page @@ -1102,99 +1095,99 @@ test.describe( 'Navigation block', () => { .click(); // Expect the first and third link to inherit the nav link color from the theme - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - const thirdLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); - await expect( firstLink ).toHaveCSS( 'color', linkThemeColor ); - await expect( thirdLink ).toHaveCSS( 'color', linkThemeColor ); - await firstLink.click(); - await expect( firstLink ).toHaveCSS( 'color', linkThemeHoverColor ); - await thirdLink.click(); - await expect( thirdLink ).toHaveCSS( 'color', linkThemeHoverColor ); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + linkThemeColor + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + linkThemeColor + ); + await colorControl.customLink.click(); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + linkThemeHoverColor + ); + await colorControl.pageLink.click(); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + linkThemeHoverColor + ); // Expect the second link to behave the same as the first - const secondLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - await firstLink.click(); - await expect( secondLink ).toHaveCSS( 'color', linkThemeColor ); - await secondLink.click(); - await expect( secondLink ).toHaveCSS( + await colorControl.customLink.click(); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + linkThemeColor + ); + await colorControl.submenuLink.click(); + await expect( colorControl.submenuLink ).toHaveCSS( 'color', linkThemeHoverColor ); // We test the colors of the links on the mobile overlay too. - await page - .getByRole( 'button', { name: 'View', exact: true } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); - await editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - await expect( firstLink ).toHaveCSS( 'color', linkThemeColor ); - await expect( secondLink ).toHaveCSS( 'color', linkThemeColor ); - await expect( thirdLink ).toHaveCSS( 'color', linkThemeColor ); + // These should remain the base defaults, as only the overlay background + // and text color should apply here. Otherwise, it's too easy to accidentally + // get to a situation of setting a link color that is unreadable on the overlay. + // Submenu/Overlay colors should always be explicitly set by the user in the + // navigation color settings. + colorControl.openEditorOverlay(); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + colorControl.black + ); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + colorControl.black + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + colorControl.black + ); await editor.saveSiteEditorEntities(); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - const firstLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - const secondLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - const thirdLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); // Expect the links to have the same colors as in the editor - await expect( firstLinkFront ).toHaveCSS( 'color', linkThemeColor ); - await expect( thirdLinkFront ).toHaveCSS( 'color', linkThemeColor ); - await firstLinkFront.hover(); - await expect( firstLinkFront ).toHaveCSS( + await expect( colorControl.customLinkFront ).toHaveCSS( 'color', - linkThemeHoverColor + linkThemeColor ); - await expect( secondLinkFront ).toHaveCSS( + await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', linkThemeColor ); - await secondLinkFront.hover(); - await expect( secondLinkFront ).toHaveCSS( + await colorControl.customLinkFront.hover(); + await expect( colorControl.customLinkFront ).toHaveCSS( 'color', linkThemeHoverColor ); - await thirdLinkFront.hover(); - await expect( thirdLinkFront ).toHaveCSS( + await expect( colorControl.submenuLinkFront ).toHaveCSS( + 'color', + linkThemeColor + ); + await colorControl.submenuLinkFront.hover(); + await expect( colorControl.submenuLinkFront ).toHaveCSS( + 'color', + colorControl.black + ); + await colorControl.pageLinkFront.hover(); + await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', linkThemeHoverColor ); // We reset global styles so we don't affect other tests - await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); - await page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Styles', exact: true } ) - .click(); - await page.getByRole( 'button', { name: 'Revisions' } ).click(); - await page - .getByRole( 'menuitem', { name: 'Reset to defaults' } ) - .click(); - - await editor.saveSiteEditorEntities(); + colorControl.resetGlobalStyles(); } ); test( 'As a user I expect my navigation links to inherit the link colors from the parent container', async ( { - admin, page, editor, + colorControl, } ) => { // Make changes to the theme link colors and make sure the group block colors are the ones we see await page @@ -1264,97 +1257,81 @@ test.describe( 'Navigation block', () => { .click(); // Expect the first link to inherit the link color from the parent group block - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - await expect( firstLink ).toHaveCSS( 'color', linkParentColor ); - await firstLink.click(); - await expect( firstLink ).toHaveCSS( + await expect( colorControl.customLink ).toHaveCSS( + 'color', + linkParentColor + ); + await colorControl.customLink.click(); + await expect( colorControl.customLink ).toHaveCSS( 'color', linkParentHoverColor ); // Expect the second link to behave the same as the first - const secondLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - await expect( secondLink ).toHaveCSS( 'color', linkParentColor ); - await secondLink.click(); - await expect( secondLink ).toHaveCSS( + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + linkParentColor + ); + await colorControl.submenuLink.click(); + await expect( colorControl.submenuLink ).toHaveCSS( 'color', linkParentHoverColor ); // Expect the third link to behave the same as the first - const thirdLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); - await expect( thirdLink ).toHaveCSS( 'color', linkParentColor ); - await thirdLink.click(); - await expect( thirdLink ).toHaveCSS( + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + linkParentColor + ); + await colorControl.pageLink.click(); + await expect( colorControl.pageLink ).toHaveCSS( 'color', linkParentHoverColor ); // We test the colors of the links on the mobile overlay too. - await page - .getByRole( 'button', { name: 'View', exact: true } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); - await editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - await expect( firstLink ).toHaveCSS( 'color', linkParentColor ); - await expect( secondLink ).toHaveCSS( 'color', linkParentColor ); - await expect( thirdLink ).toHaveCSS( 'color', linkParentColor ); + colorControl.openEditorOverlay(); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + linkParentColor + ); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + linkParentColor + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + linkParentColor + ); await editor.saveSiteEditorEntities(); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - const firstLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - const secondLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - const thirdLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white - await expect( firstLinkFront ).toHaveCSS( + await expect( colorControl.customLinkFront ).toHaveCSS( 'color', linkParentColor ); - await firstLinkFront.hover(); - await expect( secondLinkFront ).toHaveCSS( + await colorControl.customLinkFront.hover(); + await expect( colorControl.submenuLinkFront ).toHaveCSS( 'color', linkParentColor ); - await expect( thirdLinkFront ).toHaveCSS( + await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', linkParentColor ); // We reset global styles so we don't affect other tests - await admin.visitSiteEditor(); - await editor.canvas.click( 'body' ); - await page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Styles', exact: true } ) - .click(); - await page.getByRole( 'button', { name: 'Revisions' } ).click(); - await page - .getByRole( 'menuitem', { name: 'Reset to defaults' } ) - .click(); - - await editor.saveSiteEditorEntities(); + colorControl.resetGlobalStyles(); } ); test( 'As a user I expect my navigation links to inherit the text colors from the parent container', async ( { page, editor, + colorControl, } ) => { // Focus the navigation block inside the header template part await editor.canvas @@ -1393,62 +1370,56 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // Expect the first link to inherit the link color from the parent group block - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - await expect( firstLink ).toHaveCSS( 'color', textParentColor ); - await firstLink.click(); + // Expect the top level link to inherit the link color from the parent group block + await expect( colorControl.customLink ).toHaveCSS( + 'color', + textParentColor + ); + await colorControl.customLink.click(); - // Expect the second link to behave the same as the first - const secondLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - await expect( secondLink ).toHaveCSS( 'color', textParentColor ); + // Expect the submenu link to behave the same as the first + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + textParentColor + ); - // Expect the third link to behave the same as the first - const thirdLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); - await expect( thirdLink ).toHaveCSS( 'color', textParentColor ); + // Expect the page link to behave the same as the first + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + textParentColor + ); // We test the colors of the links on the mobile overlay too. - await page - .getByRole( 'button', { name: 'View', exact: true } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); - await editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - await expect( firstLink ).toHaveCSS( 'color', textParentColor ); - await expect( secondLink ).toHaveCSS( 'color', textParentColor ); - await expect( thirdLink ).toHaveCSS( 'color', textParentColor ); + colorControl.openEditorOverlay(); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + textParentColor + ); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + textParentColor + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + textParentColor + ); await editor.saveSiteEditorEntities(); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - const firstLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - const secondLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - const thirdLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white - await expect( firstLinkFront ).toHaveCSS( + await expect( colorControl.customLinkFront ).toHaveCSS( 'color', textParentColor ); - await firstLinkFront.hover(); - await expect( secondLinkFront ).toHaveCSS( + await colorControl.customLinkFront.hover(); + await expect( colorControl.submenuLinkFront ).toHaveCSS( 'color', textParentColor ); - await expect( thirdLinkFront ).toHaveCSS( + await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', textParentColor ); @@ -1457,7 +1428,7 @@ test.describe( 'Navigation block', () => { test( 'As a user I expect my navigation to use the colors I selected for it', async ( { editor, page, - pageUtils, + colorControl, } ) => { // Focus the navigation block inside the header template part await editor.canvas @@ -1553,19 +1524,14 @@ test.describe( 'Navigation block', () => { .click(); // Expect the first and third link to be "Pale pink" we selected for the nav block - const firstLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'First Link' } ) - .filter( { - has: editor.canvas.getByRole( 'textbox', { - label: 'Navigation link text', - } ), - } ); - await expect( firstLink ).toHaveCSS( 'color', textColor ); - const thirdLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); - await expect( thirdLink ).toHaveCSS( 'color', textColor ); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + textColor + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + textColor + ); // Expect the nav block background to be "Pale cyan blue" we selected for the nav background block const menuWrapper = editor.canvas.getByRole( 'document', { @@ -1577,61 +1543,52 @@ test.describe( 'Navigation block', () => { ); // Expect the second link to be "Cyan bluish gray" we selected for the submenu and overlay text colors - const secondLink = editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - await firstLink.click(); - await expect( secondLink ).toHaveCSS( 'color', overlayTextColor ); + await colorControl.customLink.click(); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + overlayTextColor + ); // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors - const submenuWrapper = editor.canvas - .getByRole( 'document', { name: 'Block: Custom Link' } ) - .filter( { has: secondLink } ); - await expect( submenuWrapper ).toHaveCSS( + await expect( colorControl.submenuWrapper ).toHaveCSS( 'background-color', overlayBgColor ); // We test the colors of the links on the mobile overlay too. - await page - .getByRole( 'button', { name: 'View', exact: true } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); - await editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - const overlay = editor.canvas - .locator( '.wp-block-navigation__responsive-container' ) - .filter( { hasText: 'Second Link' } ); + colorControl.openEditorOverlay(); // Expect the overlay background to be "Luminous vivid amber" we selected for the submenu and overlay background colors - await expect( overlay ).toHaveCSS( + await expect( colorControl.overlay ).toHaveCSS( 'background-color', overlayBgColor ); // Expect the links to both have the colors selected for the submenu and overlay text - await expect( firstLink ).toHaveCSS( 'color', overlayTextColor ); - await expect( secondLink ).toHaveCSS( 'color', overlayTextColor ); - await expect( thirdLink ).toHaveCSS( 'color', overlayTextColor ); + await expect( colorControl.customLink ).toHaveCSS( + 'color', + overlayTextColor + ); + await expect( colorControl.submenuLink ).toHaveCSS( + 'color', + overlayTextColor + ); + await expect( colorControl.pageLink ).toHaveCSS( + 'color', + overlayTextColor + ); await editor.saveSiteEditorEntities(); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - const firstLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'First Link' } ); - const secondLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Second Link' } ); - const thirdLinkFront = page - .locator( 'a' ) - .filter( { hasText: 'Test Page' } ); - const submenuWrapperFront = page - .locator( '.wp-block-navigation__submenu-container' ) - .filter( { has: secondLinkFront } ); // Expect the first and third link to be "Pale pink" we selected for the nav block - await expect( firstLinkFront ).toHaveCSS( 'color', textColor ); - await expect( thirdLinkFront ).toHaveCSS( 'color', textColor ); + await expect( colorControl.customLinkFront ).toHaveCSS( + 'color', + textColor + ); + await expect( colorControl.pageLinkFront ).toHaveCSS( + 'color', + textColor + ); // Expect the nav block background to be "Pale cyan blue" we selected for the nav block const menuWrapperFront = page .getByRole( 'navigation', { name: 'Colored menu' } ) @@ -1641,39 +1598,34 @@ test.describe( 'Navigation block', () => { bgColor ); - await firstLinkFront.hover(); + await colorControl.customLinkFront.hover(); // Expect the second link to be "Cyan bluish gray" we selected for the submenu and overlay text colors - await expect( secondLinkFront ).toHaveCSS( + await expect( colorControl.submenuLinkFront ).toHaveCSS( 'color', overlayTextColor ); // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors - await expect( submenuWrapperFront ).toHaveCSS( + await expect( colorControl.submenuWrapperFront ).toHaveCSS( 'background-color', overlayBgColor ); // We test the colors on the mobile overlay on the frontend. - await pageUtils.setBrowserViewport( { width: 599, height: 700 } ); - await page.getByRole( 'button', { name: 'Open menu' } ).click(); - - const overlayFront = page - .locator( '.wp-block-navigation__responsive-container' ) - .filter( { hasText: 'Second Link' } ); + colorControl.openFrontendOverlay(); - await expect( firstLinkFront ).toHaveCSS( + await expect( colorControl.customLinkFront ).toHaveCSS( 'color', overlayTextColor ); - await expect( secondLinkFront ).toHaveCSS( + await expect( colorControl.submenuLinkFront ).toHaveCSS( 'color', overlayTextColor ); - await expect( thirdLinkFront ).toHaveCSS( + await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', overlayTextColor ); - await expect( overlayFront ).toHaveCSS( + await expect( colorControl.overlayFront ).toHaveCSS( 'background-color', overlayBgColor ); @@ -2001,6 +1953,80 @@ test.describe( 'Navigation block - Frontend interactivity', () => { } ); } ); +class ColorControl { + constructor( { admin, editor, page, pageUtils } ) { + this.admin = admin; + this.editor = editor; + this.page = page; + this.pageUtils = pageUtils; + // Editor elements + this.black = 'rgb(0, 0, 0)'; + this.white = 'rgb(255, 255, 255)'; + this.customLink = this.editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Custom Link' } ); + this.submenuLink = this.editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Submenu Link' } ); + this.pageLink = this.editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Page Link' } ); + this.submenuWrapper = this.editor.canvas + .getByRole( 'document', { name: 'Block: Custom Link' } ) + .filter( { has: this.submenuLink } ); + this.overlay = this.editor.canvas + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Submenu Link' } ); + + // Frontend Elements + this.customLinkFront = this.page + .locator( 'a' ) + .filter( { hasText: 'Custom Link' } ); + this.submenuLinkFront = this.page + .locator( 'a' ) + .filter( { hasText: 'Submenu Link' } ); + this.pageLinkFront = this.page + .locator( 'a' ) + .filter( { hasText: 'Page Link' } ); + this.submenuWrapperFront = this.page + .locator( '.wp-block-navigation__submenu-container' ) + .filter( { has: this.submenuLinkFront } ); + this.overlayFront = this.page + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Submenu Link' } ); + } + + async openEditorOverlay() { + await this.page + .getByRole( 'button', { name: 'View', exact: true } ) + .click(); + await this.page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); + await this.editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + } + + async openFrontendOverlay() { + await this.pageUtils.setBrowserViewport( { width: 599, height: 700 } ); + await this.page.getByRole( 'button', { name: 'Open menu' } ).click(); + } + + async resetGlobalStyles() { + await this.admin.visitSiteEditor(); + await this.editor.canvas.click( 'body' ); + await this.page + .getByRole( 'region', { name: 'Editor top bar' } ) + .getByRole( 'button', { name: 'Styles', exact: true } ) + .click(); + await this.page.getByRole( 'button', { name: 'Revisions' } ).click(); + await this.page + .getByRole( 'menuitem', { name: 'Reset to defaults' } ) + .click(); + + await this.editor.saveSiteEditorEntities(); + } +} + class LinkControl { constructor( { page } ) { this.page = page; From 4541b4105cf66eb6735923ef64c4ed523a215b52 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Fri, 7 Jul 2023 16:02:16 -0500 Subject: [PATCH 25/66] Revert link color settings changing the navigation link colors The trunk behavior is to have text color global styles change the navigation color styles, while the global link color styles do not change the navigation colors. Also updated the tests to not have any of those color changes impact the submenus. --- .../block-library/src/navigation/style.scss | 6 +- .../specs/editor/blocks/navigation.spec.js | 107 ++++++++---------- 2 files changed, 51 insertions(+), 62 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 9a1b99acc6ab97..1fd277ebf0de56 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -51,10 +51,8 @@ $navigation-icon-size: 24px; // Otherwise, a link color set by a parent group can override the value. // This also fixes an issue where a navigation with an explicitly set color is overridden // by link colors defined in Global Styles. - .has-text-color .wp-block-navigation-item__content { - .has-link-color & { - color: inherit; - } + .wp-block-navigation-item__content.wp-block-navigation-item__content { + color: inherit; } // The following rules provide class based application of user selected text diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 5ef81a898a1258..7da31a25ca8297 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1016,7 +1016,7 @@ test.describe( 'Navigation block', () => { ); // We test the colors of the links on the mobile overlay too. - colorControl.openEditorOverlay(); + await colorControl.openEditorOverlay(); await expect( colorControl.overlay ).toHaveCSS( 'background-color', @@ -1057,9 +1057,10 @@ test.describe( 'Navigation block', () => { colorControl.white ); // TODO: Check frontend overlay colors + // Overlay background should be white, all text should be black } ); - test( 'As a user I expect my navigation links to inherit the link colors from the theme', async ( { + test( 'Top level navigation links inherit the text color from the theme', async ( { page, editor, colorControl, @@ -1071,19 +1072,13 @@ test.describe( 'Navigation block', () => { .click(); await page.getByRole( 'button', { name: 'Colors styles' } ).click(); await page - .getByRole( 'button', { name: 'Color Link styles' } ) + .getByRole( 'button', { name: 'Color Text styles' } ) .click(); // rgb(207, 46, 46) is the color of the "vivid red" color preset - const linkThemeColor = 'rgb(207, 46, 46)'; + const textThemeColor = 'rgb(207, 46, 46)'; await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); - await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgb(155, 81, 224) is the color of the "vivid purple" color preset - const linkThemeHoverColor = 'rgb(155, 81, 224)'; - await page - .getByRole( 'button', { name: 'Color: Vivid purple' } ) - .click( { force: true } ); await editor.canvas.click( 'body' ); // Focus the navigation block inside the header template part @@ -1094,36 +1089,25 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // Expect the first and third link to inherit the nav link color from the theme + // Expect the top level links to inherit the text color from the theme await expect( colorControl.customLink ).toHaveCSS( 'color', - linkThemeColor + textThemeColor ); await expect( colorControl.pageLink ).toHaveCSS( 'color', - linkThemeColor - ); - await colorControl.customLink.click(); - await expect( colorControl.customLink ).toHaveCSS( - 'color', - linkThemeHoverColor - ); - await colorControl.pageLink.click(); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - linkThemeHoverColor + textThemeColor ); - // Expect the second link to behave the same as the first + // Expect the submenu link to still have the default text and background color settings await colorControl.customLink.click(); await expect( colorControl.submenuLink ).toHaveCSS( 'color', - linkThemeColor + colorControl.black ); - await colorControl.submenuLink.click(); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - linkThemeHoverColor + await expect( colorControl.submenuWrapper ).toHaveCSS( + 'background-color', + colorControl.white ); // We test the colors of the links on the mobile overlay too. @@ -1132,7 +1116,7 @@ test.describe( 'Navigation block', () => { // get to a situation of setting a link color that is unreadable on the overlay. // Submenu/Overlay colors should always be explicitly set by the user in the // navigation color settings. - colorControl.openEditorOverlay(); + await colorControl.openEditorOverlay(); await expect( colorControl.customLink ).toHaveCSS( 'color', colorControl.black @@ -1145,6 +1129,10 @@ test.describe( 'Navigation block', () => { 'color', colorControl.black ); + await expect( colorControl.overlay ).toHaveCSS( + 'background-color', + colorControl.white + ); await editor.saveSiteEditorEntities(); @@ -1154,34 +1142,27 @@ test.describe( 'Navigation block', () => { // Expect the links to have the same colors as in the editor await expect( colorControl.customLinkFront ).toHaveCSS( 'color', - linkThemeColor + textThemeColor ); await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', - linkThemeColor + textThemeColor ); await colorControl.customLinkFront.hover(); - await expect( colorControl.customLinkFront ).toHaveCSS( - 'color', - linkThemeHoverColor - ); - await expect( colorControl.submenuLinkFront ).toHaveCSS( - 'color', - linkThemeColor - ); - await colorControl.submenuLinkFront.hover(); await expect( colorControl.submenuLinkFront ).toHaveCSS( 'color', colorControl.black ); - await colorControl.pageLinkFront.hover(); - await expect( colorControl.pageLinkFront ).toHaveCSS( - 'color', - linkThemeHoverColor + await expect( colorControl.submenuWrapperFront ).toHaveCSS( + 'background-color', + colorControl.white ); + // TODO: Check frontend overlay colors + // Overlay background should be white, all text should be black + // We reset global styles so we don't affect other tests - colorControl.resetGlobalStyles(); + await colorControl.resetGlobalStyles(); } ); test( 'As a user I expect my navigation links to inherit the link colors from the parent container', async ( { @@ -1290,7 +1271,7 @@ test.describe( 'Navigation block', () => { ); // We test the colors of the links on the mobile overlay too. - colorControl.openEditorOverlay(); + await colorControl.openEditorOverlay(); await expect( colorControl.customLink ).toHaveCSS( 'color', linkParentColor @@ -1325,7 +1306,7 @@ test.describe( 'Navigation block', () => { ); // We reset global styles so we don't affect other tests - colorControl.resetGlobalStyles(); + await colorControl.resetGlobalStyles(); } ); test( 'As a user I expect my navigation links to inherit the text colors from the parent container', async ( { @@ -1377,10 +1358,14 @@ test.describe( 'Navigation block', () => { ); await colorControl.customLink.click(); - // Expect the submenu link to behave the same as the first + // Expect the submenu link to have the default submenu link colors await expect( colorControl.submenuLink ).toHaveCSS( 'color', - textParentColor + colorControl.black + ); + await expect( colorControl.submenuWrapper ).toHaveCSS( + 'background-color', + colorControl.white ); // Expect the page link to behave the same as the first @@ -1389,19 +1374,19 @@ test.describe( 'Navigation block', () => { textParentColor ); - // We test the colors of the links on the mobile overlay too. - colorControl.openEditorOverlay(); + // The mobile overlay links should remain the defaults. Only the overlay color settings should change these. + await colorControl.openEditorOverlay(); await expect( colorControl.customLink ).toHaveCSS( 'color', - textParentColor + colorControl.black ); await expect( colorControl.submenuLink ).toHaveCSS( 'color', - textParentColor + colorControl.black ); await expect( colorControl.pageLink ).toHaveCSS( 'color', - textParentColor + colorControl.black ); await editor.saveSiteEditorEntities(); @@ -1417,12 +1402,18 @@ test.describe( 'Navigation block', () => { await colorControl.customLinkFront.hover(); await expect( colorControl.submenuLinkFront ).toHaveCSS( 'color', - textParentColor + colorControl.black + ); + await expect( colorControl.submenuWrapperFront ).toHaveCSS( + 'background-color', + colorControl.white ); await expect( colorControl.pageLinkFront ).toHaveCSS( 'color', textParentColor ); + + // TODO: Check the mobile overlay for white background with black text } ); test( 'As a user I expect my navigation to use the colors I selected for it', async ( { @@ -1556,7 +1547,7 @@ test.describe( 'Navigation block', () => { ); // We test the colors of the links on the mobile overlay too. - colorControl.openEditorOverlay(); + await colorControl.openEditorOverlay(); // Expect the overlay background to be "Luminous vivid amber" we selected for the submenu and overlay background colors await expect( colorControl.overlay ).toHaveCSS( 'background-color', @@ -1611,7 +1602,7 @@ test.describe( 'Navigation block', () => { ); // We test the colors on the mobile overlay on the frontend. - colorControl.openFrontendOverlay(); + await colorControl.openFrontendOverlay(); await expect( colorControl.customLinkFront ).toHaveCSS( 'color', From 65ea6cac05111f68719b1f8357ff95f93113751c Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 11 Jul 2023 17:12:17 -0500 Subject: [PATCH 26/66] Large refactor of navigation color tests It was getting difficult to work within several very long tests with a lot of shared code, so I refactored into shared pieces that would make writing the tests easier while keeping debugging easy as well. Also, one large change was to remove the reliance on global styles since resetting the global styles after a failed test was proving very difficult, and we don't need to use global styles since we can rely on creating a group instead. By wrapping a group on the navigation block we can test the same thing while not needing to deal with global styles. --- .../specs/editor/blocks/navigation.spec.js | 746 +++++------------- 1 file changed, 195 insertions(+), 551 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 7da31a25ca8297..bf3c58732b6ed6 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -965,6 +965,13 @@ test.describe( 'Navigation block', () => { 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 } ) => { @@ -982,222 +989,30 @@ test.describe( 'Navigation block', () => { } ); 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, } ) => { - // Expect the first and test page link to default to black when the theme doesn't define a link color - await expect( colorControl.customLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - colorControl.black - ); - // 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(); - await colorControl.customLink.click(); - - // We check that the submenu links also have black text color - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - colorControl.black - ); - // We check for the submenu's background color. This one is important when the theme doesn't define an overlay background color - await expect( colorControl.submenuWrapper ).toHaveCSS( - 'background-color', - colorControl.white - ); + const expectedNavigationColors = { + textColor: colorControl.black, + backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black + submenuTextColor: colorControl.black, + submenuBackgroundColor: colorControl.white, + }; - // We test the colors of the links on the mobile overlay too. - await colorControl.openEditorOverlay(); - - await expect( colorControl.overlay ).toHaveCSS( - 'background-color', - colorControl.white - ); - await expect( colorControl.customLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - colorControl.black - ); + await colorControl.testEditorColors( expectedNavigationColors ); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - // Expect the links to default to black when the theme doesn't define a link color - await expect( colorControl.customLinkFront ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.pageLinkFront ).toHaveCSS( - 'color', - colorControl.black - ); - await colorControl.customLinkFront.hover(); - await expect( colorControl.submenuLinkFront ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuWrapperFront ).toHaveCSS( - 'background-color', - colorControl.white - ); - // TODO: Check frontend overlay colors - // Overlay background should be white, all text should be black - } ); - - test( 'Top level navigation links inherit the text color from the theme', async ( { - page, - editor, - colorControl, - } ) => { - // In the inspector sidebar, we set colors for link text and link hover text for this theme - await page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Styles', exact: true } ) - .click(); - await page.getByRole( 'button', { name: 'Colors styles' } ).click(); - await page - .getByRole( 'button', { name: 'Color Text styles' } ) - .click(); - // rgb(207, 46, 46) is the color of the "vivid red" color preset - const textThemeColor = 'rgb(207, 46, 46)'; - await page - .getByRole( 'button', { name: 'Color: Vivid red' } ) - .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(); - - // Expect the top level links to inherit the text color from the theme - await expect( colorControl.customLink ).toHaveCSS( - 'color', - textThemeColor - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - textThemeColor - ); - - // Expect the submenu link to still have the default text and background color settings - await colorControl.customLink.click(); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuWrapper ).toHaveCSS( - 'background-color', - colorControl.white - ); - - // We test the colors of the links on the mobile overlay too. - // These should remain the base defaults, as only the overlay background - // and text color should apply here. Otherwise, it's too easy to accidentally - // get to a situation of setting a link color that is unreadable on the overlay. - // Submenu/Overlay colors should always be explicitly set by the user in the - // navigation color settings. - await colorControl.openEditorOverlay(); - await expect( colorControl.customLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.overlay ).toHaveCSS( - 'background-color', - colorControl.white - ); - - await editor.saveSiteEditorEntities(); - - // And finally we check the colors of the links on the frontend - await page.goto( '/' ); - - // Expect the links to have the same colors as in the editor - await expect( colorControl.customLinkFront ).toHaveCSS( - 'color', - textThemeColor - ); - await expect( colorControl.pageLinkFront ).toHaveCSS( - 'color', - textThemeColor - ); - await colorControl.customLinkFront.hover(); - await expect( colorControl.submenuLinkFront ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuWrapperFront ).toHaveCSS( - 'background-color', - colorControl.white - ); - - // TODO: Check frontend overlay colors - // Overlay background should be white, all text should be black - - // We reset global styles so we don't affect other tests - await colorControl.resetGlobalStyles(); + await colorControl.testFrontendColors( expectedNavigationColors ); } ); - test( 'As a user I expect my navigation links to inherit the link colors from the parent container', async ( { + test( 'Top level navigation links inherit the text color from the theme but not apply to the submenu or overlay', async ( { page, editor, colorControl, } ) => { - // Make changes to the theme link colors and make sure the group block colors are the ones we see - await page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Styles', exact: true } ) - .click(); - await page.getByRole( 'button', { name: 'Colors styles' } ).click(); - await page - .getByRole( 'button', { name: 'Color Link styles' } ) - .click(); - // rga(207, 46 ,46) is the color of the "vivid red" color preset - await page - .getByRole( 'button', { name: 'Color: Vivid red' } ) - .click( { force: true } ); - await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgb(155, 81, 224) is the color of the "vivid purple" color preset - await page - .getByRole( 'button', { name: 'Color: Vivid purple' } ) - .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(); - + // Set the text and background styles for the group. The text color should apply to the top level links but not the submenu or overlay. // We wrap the nav block inside a group block await page .getByRole( 'toolbar', { name: 'Block tools' } ) @@ -1208,25 +1023,23 @@ test.describe( 'Navigation block', () => { // In the sidebar inspector we add a link color and link hover color to the group block await editor.openDocumentSettingsSidebar(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); - await page.getByRole( 'button', { name: 'Color options' } ).click(); await page - .getByRole( 'menuitemcheckbox', { name: 'Show Link' } ) - .click(); - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - await page - .getByRole( 'button', { name: 'Color Link styles' } ) + .getByRole( 'button', { name: 'Color Text styles' } ) .click(); - // rgb(0, 208, 132) is the color of the "Vivid green cyan" color preset - const linkParentColor = 'rgb(0, 208, 132)'; await page - .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) + .getByRole( 'button', { name: 'Color: White' } ) .click( { force: true } ); - await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgb(255, 105, 0) is the color of the "Luminous vivid orange" color preset - const linkParentHoverColor = 'rgb(255, 105, 0)'; + + await page + .getByRole( 'button', { name: 'Color Background styles' } ) + .click(); await page - .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) + .getByRole( 'button', { name: 'Color: Black' } ) .click( { force: true } ); + + // Save them so we can check on the frontend later too. + await editor.saveSiteEditorEntities(); + await editor.canvas.click( 'body' ); // Focus the navigation block inside the header template part @@ -1237,110 +1050,42 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // Expect the first link to inherit the link color from the parent group block - await expect( colorControl.customLink ).toHaveCSS( - 'color', - linkParentColor - ); - await colorControl.customLink.click(); - await expect( colorControl.customLink ).toHaveCSS( - 'color', - linkParentHoverColor - ); + const expectedNavigationColors = { + textColor: colorControl.white, + backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black + submenuTextColor: colorControl.black, + submenuBackgroundColor: colorControl.white, + }; - // Expect the second link to behave the same as the first - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - linkParentColor - ); - await colorControl.submenuLink.click(); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - linkParentHoverColor - ); - - // Expect the third link to behave the same as the first - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - linkParentColor - ); - await colorControl.pageLink.click(); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - linkParentHoverColor - ); - - // We test the colors of the links on the mobile overlay too. - await colorControl.openEditorOverlay(); - await expect( colorControl.customLink ).toHaveCSS( - 'color', - linkParentColor - ); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - linkParentColor - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - linkParentColor - ); - - await editor.saveSiteEditorEntities(); + await colorControl.testEditorColors( expectedNavigationColors ); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white - await expect( colorControl.customLinkFront ).toHaveCSS( - 'color', - linkParentColor - ); - await colorControl.customLinkFront.hover(); - await expect( colorControl.submenuLinkFront ).toHaveCSS( - 'color', - linkParentColor - ); - await expect( colorControl.pageLinkFront ).toHaveCSS( - 'color', - linkParentColor - ); - - // We reset global styles so we don't affect other tests - await colorControl.resetGlobalStyles(); + await colorControl.testFrontendColors( expectedNavigationColors ); } ); - test( 'As a user I expect my navigation links to inherit the text colors from the parent container', async ( { + test( 'The navigation text color should apply to all navigation links including submenu and overlay text', async ( { page, editor, colorControl, } ) => { - // 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(); - - // We wrap the nav block inside a group block - await page - .getByRole( 'toolbar', { name: 'Block tools' } ) - .getByRole( 'button', { name: 'Options' } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - - // In the sidebar inspector we add a link color and link hover color to the group block await editor.openDocumentSettingsSidebar(); + + // In the inspector sidebar, we change the nav block colors await page.getByRole( 'tab', { name: 'Styles' } ).click(); + // Pale pink for the text color await page - .getByRole( 'button', { name: 'Color Text styles' } ) + .getByRole( 'button', { name: 'Text', exact: true } ) .click(); - - // rgb(0, 208, 132) is the color of the "Vivid green cyan" color preset - const textParentColor = 'rgb(0, 208, 132)'; + // 247, 141, 167 is the color of the "Pale pink" color preset + const palePink = 'rgb(247, 141, 167)'; await page - .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) + .getByRole( 'button', { name: 'Color: Pale pink' } ) .click( { force: true } ); + + await editor.saveSiteEditorEntities(); + await editor.canvas.click( 'body' ); // Focus the navigation block inside the header template part @@ -1351,69 +1096,19 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // Expect the top level link to inherit the link color from the parent group block - await expect( colorControl.customLink ).toHaveCSS( - 'color', - textParentColor - ); - await colorControl.customLink.click(); - - // Expect the submenu link to have the default submenu link colors - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuWrapper ).toHaveCSS( - 'background-color', - colorControl.white - ); - - // Expect the page link to behave the same as the first - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - textParentColor - ); + const expectedNavigationColors = { + textColor: palePink, + backgroundColor: colorControl.transparent, // There should be no background color set + submenuTextColor: palePink, + submenuBackgroundColor: colorControl.white, + }; - // The mobile overlay links should remain the defaults. Only the overlay color settings should change these. - await colorControl.openEditorOverlay(); - await expect( colorControl.customLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - colorControl.black - ); - - await editor.saveSiteEditorEntities(); + await colorControl.testEditorColors( expectedNavigationColors ); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - // Expect the links to default to the browser default blue when the theme doesn't define a link color and the background to be white - await expect( colorControl.customLinkFront ).toHaveCSS( - 'color', - textParentColor - ); - await colorControl.customLinkFront.hover(); - await expect( colorControl.submenuLinkFront ).toHaveCSS( - 'color', - colorControl.black - ); - await expect( colorControl.submenuWrapperFront ).toHaveCSS( - 'background-color', - colorControl.white - ); - await expect( colorControl.pageLinkFront ).toHaveCSS( - 'color', - textParentColor - ); - - // TODO: Check the mobile overlay for white background with black text + await colorControl.testFrontendColors( expectedNavigationColors ); } ); test( 'As a user I expect my navigation to use the colors I selected for it', async ( { @@ -1421,49 +1116,7 @@ test.describe( 'Navigation block', () => { page, colorControl, } ) => { - // 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(); - - // We wrap the nav block inside a group block - await page - .getByRole( 'toolbar', { name: 'Block tools' } ) - .getByRole( 'button', { name: 'Options' } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - // We change the group link colors so we can test if the nav block settings will prevail await editor.openDocumentSettingsSidebar(); - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - await page.getByRole( 'button', { name: 'Color options' } ).click(); - await page - .getByRole( 'menuitemcheckbox', { name: 'Show Link' } ) - .click(); - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - await page - .getByRole( 'button', { name: 'Color Link styles' } ) - .click(); - // rgb(0, 208, 132) is the color of the "Vivid green cyan" color preset - await page - .getByRole( 'button', { name: 'Color: Vivid green cyan' } ) - .click( { force: true } ); - await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgb(255, 105, 0) is the color of the "Luminous vivid orange" color preset - await page - .getByRole( 'button', { name: 'Color: Luminous vivid orange' } ) - .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(); // In the inspector sidebar, we change the nav block colors await page.getByRole( 'tab', { name: 'Styles' } ).click(); @@ -1472,7 +1125,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Text', exact: true } ) .click(); // 247, 141, 167 is the color of the "Pale pink" color preset - const textColor = 'rgb(247, 141, 167)'; + const palePink = 'rgb(247, 141, 167)'; await page .getByRole( 'button', { name: 'Color: Pale pink' } ) .click( { force: true } ); @@ -1481,7 +1134,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Background', exact: true } ) .click(); // 142, 209, 252 is the color of the "Pale cyan blue" color preset - const bgColor = 'rgb(142, 209, 252)'; + const paleCyan = 'rgb(142, 209, 252)'; await page .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) .click( { force: true } ); @@ -1490,7 +1143,7 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Submenu & overlay text' } ) .click(); // 171, 184, 195 is the color of the "Cyan bluish gray" color preset - const overlayTextColor = 'rgb(171, 184, 195)'; + const cyanBluishGray = 'rgb(171, 184, 195)'; await page .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) .click( { force: true } ); @@ -1499,11 +1152,13 @@ test.describe( 'Navigation block', () => { .getByRole( 'button', { name: 'Submenu & overlay background' } ) .click(); // 252, 185, 0 is the color of the "Luminous vivid amber" color preset - const overlayBgColor = 'rgb(252, 185, 0)'; + const vividAmber = 'rgb(252, 185, 0)'; await page .getByRole( 'button', { name: 'Color: Luminous vivid amber' } ) .click( { force: true } ); + await editor.saveSiteEditorEntities(); + await editor.canvas.click( 'body' ); // Focus the navigation block inside the header template part @@ -1514,112 +1169,19 @@ test.describe( 'Navigation block', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // Expect the first and third link to be "Pale pink" we selected for the nav block - await expect( colorControl.customLink ).toHaveCSS( - 'color', - textColor - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - textColor - ); + const expectedNavigationColors = { + textColor: palePink, + backgroundColor: paleCyan, // There should be no background color set + submenuTextColor: cyanBluishGray, + submenuBackgroundColor: vividAmber, + }; - // Expect the nav block background to be "Pale cyan blue" we selected for the nav background block - const menuWrapper = editor.canvas.getByRole( 'document', { - name: 'Block: Navigation', - } ); - await expect( menuWrapper ).toHaveCSS( - 'background-color', - bgColor - ); - - // Expect the second link to be "Cyan bluish gray" we selected for the submenu and overlay text colors - await colorControl.customLink.click(); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - overlayTextColor - ); - - // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors - await expect( colorControl.submenuWrapper ).toHaveCSS( - 'background-color', - overlayBgColor - ); - - // We test the colors of the links on the mobile overlay too. - await colorControl.openEditorOverlay(); - // Expect the overlay background to be "Luminous vivid amber" we selected for the submenu and overlay background colors - await expect( colorControl.overlay ).toHaveCSS( - 'background-color', - overlayBgColor - ); - // Expect the links to both have the colors selected for the submenu and overlay text - await expect( colorControl.customLink ).toHaveCSS( - 'color', - overlayTextColor - ); - await expect( colorControl.submenuLink ).toHaveCSS( - 'color', - overlayTextColor - ); - await expect( colorControl.pageLink ).toHaveCSS( - 'color', - overlayTextColor - ); - await editor.saveSiteEditorEntities(); + await colorControl.testEditorColors( expectedNavigationColors ); // And finally we check the colors of the links on the frontend await page.goto( '/' ); - // Expect the first and third link to be "Pale pink" we selected for the nav block - await expect( colorControl.customLinkFront ).toHaveCSS( - 'color', - textColor - ); - await expect( colorControl.pageLinkFront ).toHaveCSS( - 'color', - textColor - ); - // Expect the nav block background to be "Pale cyan blue" we selected for the nav block - const menuWrapperFront = page - .getByRole( 'navigation', { name: 'Colored menu' } ) - .getByRole( 'list' ); - await expect( menuWrapperFront ).toHaveCSS( - 'background-color', - bgColor - ); - - await colorControl.customLinkFront.hover(); - // Expect the second link to be "Cyan bluish gray" we selected for the submenu and overlay text colors - await expect( colorControl.submenuLinkFront ).toHaveCSS( - 'color', - overlayTextColor - ); - // Expect the submenu background to be "Luminous vivid amber" we selected for the submenu and overlay background colors - await expect( colorControl.submenuWrapperFront ).toHaveCSS( - 'background-color', - overlayBgColor - ); - - // We test the colors on the mobile overlay on the frontend. - await colorControl.openFrontendOverlay(); - - await expect( colorControl.customLinkFront ).toHaveCSS( - 'color', - overlayTextColor - ); - await expect( colorControl.submenuLinkFront ).toHaveCSS( - 'color', - overlayTextColor - ); - await expect( colorControl.pageLinkFront ).toHaveCSS( - 'color', - overlayTextColor - ); - await expect( colorControl.overlayFront ).toHaveCSS( - 'background-color', - overlayBgColor - ); + await colorControl.testFrontendColors( expectedNavigationColors ); } ); } ); } ); @@ -1950,71 +1512,153 @@ class ColorControl { this.editor = editor; this.page = page; this.pageUtils = pageUtils; - // Editor elements + + // Colors for readability this.black = 'rgb(0, 0, 0)'; this.white = 'rgb(255, 255, 255)'; - this.customLink = this.editor.canvas + // If there is no background color set, it will not have any background, which computes to 'rgab(0, 0, 0, 0)'. + this.transparent = 'rgba(0, 0, 0, 0)'; + } + + async openEditorOverlay() { + await this.page + .getByRole( 'button', { name: 'View', exact: true } ) + .click(); + await this.page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); + await this.editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + } + + async testEditorColors( { + textColor, + backgroundColor, + submenuTextColor, + submenuBackgroundColor, + } ) { + // Editor elements + const customLink = this.editor.canvas .locator( 'a' ) .filter( { hasText: 'Custom Link' } ); - this.submenuLink = this.editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Submenu Link' } ); - this.pageLink = this.editor.canvas + const pageLink = this.editor.canvas .locator( 'a' ) .filter( { hasText: 'Page Link' } ); - this.submenuWrapper = this.editor.canvas + + await expect( customLink ).toHaveCSS( 'color', textColor ); + await expect( pageLink ).toHaveCSS( 'color', textColor ); + // Navigation background + const navigationWrapper = this.editor.canvas.getByRole( 'document', { + name: 'Block: Navigation', + } ); + await expect( navigationWrapper ).toHaveCSS( + 'background-color', + backgroundColor + ); + + await customLink.click(); + + // Submenu elements + const submenuLink = this.editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Submenu Link' } ); + const submenuWrapper = this.editor.canvas .getByRole( 'document', { name: 'Block: Custom Link' } ) - .filter( { has: this.submenuLink } ); - this.overlay = this.editor.canvas + .filter( { has: submenuLink } ); + + // Submenu link color + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); + + // Submenu background color + await expect( submenuWrapper ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); + + await this.openEditorOverlay(); + + const overlay = this.editor.canvas .locator( '.wp-block-navigation__responsive-container' ) .filter( { hasText: 'Submenu Link' } ); - // Frontend Elements - this.customLinkFront = this.page + // All of the mobile menu navigation links should be the same color as the submenuTextColor + await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); + + // The mobile menu background should be the same color as the submenu background + await expect( overlay ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); + } + + async testFrontendColors( { + textColor, + backgroundColor, + submenuTextColor, + submenuBackgroundColor, + } ) { + // Top level link elements + const customLink = this.page .locator( 'a' ) .filter( { hasText: 'Custom Link' } ); - this.submenuLinkFront = this.page - .locator( 'a' ) - .filter( { hasText: 'Submenu Link' } ); - this.pageLinkFront = this.page + const pageLink = this.page .locator( 'a' ) .filter( { hasText: 'Page Link' } ); - this.submenuWrapperFront = this.page - .locator( '.wp-block-navigation__submenu-container' ) - .filter( { has: this.submenuLinkFront } ); - this.overlayFront = this.page - .locator( '.wp-block-navigation__responsive-container' ) + + // Top level link colors + await expect( customLink ).toHaveCSS( 'color', textColor ); + await expect( pageLink ).toHaveCSS( 'color', textColor ); + + // Navigation background + const menuWrapperFront = this.page + .getByRole( 'navigation', { name: 'Colored menu' } ) + .getByRole( 'list' ); + await expect( menuWrapperFront ).toHaveCSS( + 'background-color', + backgroundColor + ); + + await customLink.hover(); + + // Submenu elements + const submenuLink = this.page + .locator( 'a' ) .filter( { hasText: 'Submenu Link' } ); - } + const submenuWrapper = this.page + .locator( '.wp-block-navigation__submenu-container' ) + .filter( { has: submenuLink } ); - async openEditorOverlay() { - await this.page - .getByRole( 'button', { name: 'View', exact: true } ) - .click(); - await this.page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); - await this.editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - } + // Submenu link color + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); - async openFrontendOverlay() { + // Submenu background color + await expect( submenuWrapper ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); + + // Open the frontend overlay so we can test the colors await this.pageUtils.setBrowserViewport( { width: 599, height: 700 } ); await this.page.getByRole( 'button', { name: 'Open menu' } ).click(); - } - async resetGlobalStyles() { - await this.admin.visitSiteEditor(); - await this.editor.canvas.click( 'body' ); - await this.page - .getByRole( 'region', { name: 'Editor top bar' } ) - .getByRole( 'button', { name: 'Styles', exact: true } ) - .click(); - await this.page.getByRole( 'button', { name: 'Revisions' } ).click(); - await this.page - .getByRole( 'menuitem', { name: 'Reset to defaults' } ) - .click(); + // All of the mobile menu navigation links should be the same color as the submenuTextColor + await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); + + const overlayFront = this.page + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Submenu Link' } ); + + // The mobile menu background should be the same color as the submenu background + await expect( overlayFront ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); - await this.editor.saveSiteEditorEntities(); + // We need to reset the overlay to the default viewport if something runs after these tests + await this.pageUtils.setBrowserViewport( 'large' ); } } From 0f6473c8188a1ec71b60835f9ca1627e944f3141 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 11 Jul 2023 17:27:21 -0500 Subject: [PATCH 27/66] Add test for navigation background colors Also added closing the sidebar in the tests so we don't accidentally grab the links from the sidebar when the navigation block has the sidebar menu open with the same link text. --- .../specs/editor/blocks/navigation.spec.js | 62 +++++++++++++++++++ 1 file changed, 62 insertions(+) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index bf3c58732b6ed6..3061b235e2b94a 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1039,6 +1039,10 @@ test.describe( 'Navigation block', () => { // 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' ); @@ -1085,6 +1089,10 @@ test.describe( 'Navigation block', () => { .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' ); @@ -1111,6 +1119,56 @@ test.describe( 'Navigation block', () => { await colorControl.testFrontendColors( expectedNavigationColors ); } ); + test( 'The navigation background color should apply to all navigation links including submenu and overlay backgrounds', async ( { + page, + editor, + colorControl, + } ) => { + await editor.openDocumentSettingsSidebar(); + + // In the inspector sidebar, we change the nav block colors + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + // Pale pink for the text color + await page + .getByRole( 'button', { name: 'Background', exact: true } ) + .click(); + // 142, 209, 252 is the color of the "Pale cyan blue" color preset + const paleCyan = 'rgb(142, 209, 252)'; + await page + .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(); + + // The navigation background, submenu background and overlay background should all be paleCyan + const expectedNavigationColors = { + textColor: colorControl.black, + backgroundColor: paleCyan, + submenuTextColor: colorControl.black, + submenuBackgroundColor: paleCyan, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); + test( 'As a user I expect my navigation to use the colors I selected for it', async ( { editor, page, @@ -1158,6 +1216,10 @@ test.describe( 'Navigation block', () => { .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' ); From 42086c52b7e02a1dbb55d1acc0662cb43dccc3ea Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 11 Jul 2023 17:39:03 -0500 Subject: [PATCH 28/66] Add test to ensure navigation text does not inherit link color from the theme/group --- .../specs/editor/blocks/navigation.spec.js | 67 ++++++++++++++++++- 1 file changed, 66 insertions(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 3061b235e2b94a..90d91246452455 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1007,7 +1007,7 @@ test.describe( 'Navigation block', () => { await colorControl.testFrontendColors( expectedNavigationColors ); } ); - test( 'Top level navigation links inherit the text color from the theme but not apply to the submenu or overlay', async ( { + test( 'Top level navigation links inherit the text color from the theme/group but do not apply to the submenu or overlay text', async ( { page, editor, colorControl, @@ -1069,6 +1069,71 @@ test.describe( 'Navigation block', () => { await colorControl.testFrontendColors( expectedNavigationColors ); } ); + test( 'Navigation text does not inherit the link color from the theme/group', async ( { + page, + editor, + colorControl, + } ) => { + // Wrap the nav block inside a group block + await page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Options' } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + + // In the sidebar inspector we add a link color and link hover color to the group block + await editor.openDocumentSettingsSidebar(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page.getByRole( 'button', { name: 'Color options' } ).click(); + await page + .getByRole( 'menuitemcheckbox', { name: 'Show Link' } ) + .click(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page + .getByRole( 'button', { name: 'Color Link styles' } ) + .click(); + // rga(207, 46 ,46) is the color of the "vivid red" color preset + await page + .getByRole( 'button', { name: 'Color: Vivid red' } ) + .click( { force: true } ); + await page.getByRole( 'tab', { name: 'Hover' } ).click(); + // rgb(155, 81, 224) is the color of the "vivid purple" color preset + await page + .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(); + + const expectedNavigationColors = { + textColor: colorControl.black, + backgroundColor: colorControl.transparent, + submenuTextColor: colorControl.black, + submenuBackgroundColor: colorControl.white, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); + test( 'The navigation text color should apply to all navigation links including submenu and overlay text', async ( { page, editor, From 1a3c0b39a394dac547da6b51f849b4ae81cfa8e4 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Tue, 11 Jul 2023 18:01:27 -0500 Subject: [PATCH 29/66] Only set default navigation submenu and overlay text colors if no navigation text color is selected --- packages/block-library/src/navigation/style.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 1fd277ebf0de56..6b5cbaaec602d0 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -405,11 +405,17 @@ button.wp-block-navigation-item__content { // submenus have a default background color, this feature has regressed // several times, so care needs to be taken. background-color: #fff; - color: #000; border: 1px solid rgba(0, 0, 0, 0.15); } } +.wp-block-navigation:not(.has-text-color) { + .wp-block-navigation__submenu-container { + // Set a default color for submenu text if none is selected + color: #000; + } +} + // Navigation block inner container. .wp-block-navigation__container { display: flex; @@ -622,9 +628,14 @@ button.wp-block-navigation-item__content { .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { background-color: #fff; +} + +.wp-block-navigation:not(.has-text-color) +.wp-block-navigation__responsive-container.is-menu-open { color: #000; } + // Overlay menu toggle button label .wp-block-navigation__toggle_button_label { font-size: 1rem; From e7c72ed9e101b61a653468c6d3d76ea5cc893d9d Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 12 Jul 2023 10:33:09 -0500 Subject: [PATCH 30/66] Have li navigation items inherit background color so it can be inherited by the submenu background --- .../block-library/src/navigation/style.scss | 20 ++++++++++++------- 1 file changed, 13 insertions(+), 7 deletions(-) diff --git a/packages/block-library/src/navigation/style.scss b/packages/block-library/src/navigation/style.scss index 6b5cbaaec602d0..180b40b43daca1 100644 --- a/packages/block-library/src/navigation/style.scss +++ b/packages/block-library/src/navigation/style.scss @@ -31,6 +31,7 @@ $navigation-icon-size: 24px; // Menu item container. .wp-block-navigation-item { + background-color: inherit; display: flex; align-items: center; position: relative; @@ -398,14 +399,19 @@ button.wp-block-navigation-item__content { } // Default background and font color. -.wp-block-navigation:not(.has-background) { +.wp-block-navigation:not(.has-background) .wp-block-navigation__submenu-container { + // Set a background color for submenus so that they're not transparent. + // NOTE TO DEVS - if refactoring this code, please double-check that + // submenus have a default background color, this feature has regressed + // several times, so care needs to be taken. + background-color: #fff; + border: 1px solid rgba(0, 0, 0, 0.15); +} + +// If we do have a background color selected, inherit it from the navigation block +.wp-block-navigation.has-background { .wp-block-navigation__submenu-container { - // Set a background color for submenus so that they're not transparent. - // NOTE TO DEVS - if refactoring this code, please double-check that - // submenus have a default background color, this feature has regressed - // several times, so care needs to be taken. - background-color: #fff; - border: 1px solid rgba(0, 0, 0, 0.15); + background-color: inherit; } } From 8f27fd367ac6be77ae28d06af16521af46e7505d Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 12 Jul 2023 10:58:50 -0500 Subject: [PATCH 31/66] Change how to test editor mobile overlay colors The tests were a little flaky when tryingn to click the button to open the mobile view since the animation from desktop to mobile in the editor took some time, and the test was trying to click the open menu button before it was able to be clicked. This updates the test to use the navigation settings itself, which doesn't have an animation, so it should be more reliable. --- .../specs/editor/blocks/navigation.spec.js | 24 ++++++++++--------- 1 file changed, 13 insertions(+), 11 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 90d91246452455..941fafae6de314 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -1647,16 +1647,6 @@ class ColorControl { this.transparent = 'rgba(0, 0, 0, 0)'; } - async openEditorOverlay() { - await this.page - .getByRole( 'button', { name: 'View', exact: true } ) - .click(); - await this.page.getByRole( 'menuitem', { name: 'Mobile' } ).click(); - await this.editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - } - async testEditorColors( { textColor, backgroundColor, @@ -1701,7 +1691,19 @@ class ColorControl { submenuBackgroundColor ); - await this.openEditorOverlay(); + // Switch to mobile view for the rest of the editor color tests + // Focus the navigation block + await this.editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); + await this.editor.openDocumentSettingsSidebar(); + // Switch to settings tab + await this.page.getByRole( 'tab', { name: 'Settings' } ).click(); + // Set it to always be the mobile view, but don't save this setting so we can still check all the frontend colors + await this.page.getByRole( 'radio', { name: 'Always' } ).click(); + await this.editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); const overlay = this.editor.canvas .locator( '.wp-block-navigation__responsive-container' ) From c693611b72c054398f67e0f8a93459645c905086 Mon Sep 17 00:00:00 2001 From: Jerry Jones Date: Wed, 12 Jul 2023 11:34:52 -0500 Subject: [PATCH 32/66] Move navigation color tests to own file --- .../editor/blocks/navigation-colors.spec.js | 542 ++++++++++++++++++ .../specs/editor/blocks/navigation.spec.js | 539 ----------------- 2 files changed, 542 insertions(+), 539 deletions(-) create mode 100644 test/e2e/specs/editor/blocks/navigation-colors.spec.js diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js new file mode 100644 index 00000000000000..c2eb8354e5fae8 --- /dev/null +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -0,0 +1,542 @@ +/** + * WordPress dependencies + */ +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(); + } ); + + 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 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(); + } ); + + test.afterAll( async ( { requestUtils } ) => { + await Promise.all( [ + requestUtils.deleteAllTemplates( 'wp_template_part' ), + requestUtils.deleteAllMenus(), + requestUtils.deleteAllPages(), + requestUtils.activateTheme( 'twentytwentyone' ), + ] ); + } ); + + test.use( { + colorControl: async ( { admin, editor, page, pageUtils }, use ) => { + await use( new ColorControl( { admin, editor, page, pageUtils } ) ); + }, + } ); + + 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 ( { + page, + colorControl, + } ) => { + const expectedNavigationColors = { + textColor: colorControl.black, + backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black + submenuTextColor: colorControl.black, + submenuBackgroundColor: colorControl.white, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); + + test( 'Top level navigation links inherit the text color from the theme/group but do not apply to the submenu or overlay text', async ( { + page, + editor, + colorControl, + } ) => { + // Set the text and background styles for the group. The text color should apply to the top level links but not the submenu or overlay. + // We wrap the nav block inside a group block + await page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Options' } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + + // In the sidebar inspector we add a link color and link hover color to the group block + await editor.openDocumentSettingsSidebar(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page.getByRole( 'button', { name: 'Color Text styles' } ).click(); + await page + .getByRole( 'button', { name: 'Color: White' } ) + .click( { force: true } ); + + await page + .getByRole( 'button', { name: 'Color Background styles' } ) + .click(); + await page + .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(); + + const expectedNavigationColors = { + textColor: colorControl.white, + backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black + submenuTextColor: colorControl.black, + submenuBackgroundColor: colorControl.white, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); + + test( 'Navigation text does not inherit the link color from the theme/group', async ( { + page, + editor, + colorControl, + } ) => { + // Wrap the nav block inside a group block + await page + .getByRole( 'toolbar', { name: 'Block tools' } ) + .getByRole( 'button', { name: 'Options' } ) + .click(); + await page.getByRole( 'menuitem', { name: 'Group' } ).click(); + + // In the sidebar inspector we add a link color and link hover color to the group block + await editor.openDocumentSettingsSidebar(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page.getByRole( 'button', { name: 'Color options' } ).click(); + await page + .getByRole( 'menuitemcheckbox', { name: 'Show Link' } ) + .click(); + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + await page.getByRole( 'button', { name: 'Color Link styles' } ).click(); + // rga(207, 46 ,46) is the color of the "vivid red" color preset + await page + .getByRole( 'button', { name: 'Color: Vivid red' } ) + .click( { force: true } ); + await page.getByRole( 'tab', { name: 'Hover' } ).click(); + // rgb(155, 81, 224) is the color of the "vivid purple" color preset + await page + .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(); + + const expectedNavigationColors = { + textColor: colorControl.black, + backgroundColor: colorControl.transparent, + submenuTextColor: colorControl.black, + submenuBackgroundColor: colorControl.white, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); + + test( 'The navigation text color should apply to all navigation links including submenu and overlay text', async ( { + page, + editor, + colorControl, + } ) => { + await editor.openDocumentSettingsSidebar(); + + // In the inspector sidebar, we change the nav block colors + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + // Pale pink for the text color + await page.getByRole( 'button', { name: 'Text', exact: true } ).click(); + // 247, 141, 167 is the color of the "Pale pink" color preset + const palePink = 'rgb(247, 141, 167)'; + await page + .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(); + + const expectedNavigationColors = { + textColor: palePink, + backgroundColor: colorControl.transparent, // There should be no background color set + submenuTextColor: palePink, + submenuBackgroundColor: colorControl.white, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); + + test( 'The navigation background color should apply to all navigation links including submenu and overlay backgrounds', async ( { + page, + editor, + colorControl, + } ) => { + await editor.openDocumentSettingsSidebar(); + + // In the inspector sidebar, we change the nav block colors + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + // Pale pink for the text color + await page + .getByRole( 'button', { name: 'Background', exact: true } ) + .click(); + // 142, 209, 252 is the color of the "Pale cyan blue" color preset + const paleCyan = 'rgb(142, 209, 252)'; + await page + .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(); + + // The navigation background, submenu background and overlay background should all be paleCyan + const expectedNavigationColors = { + textColor: colorControl.black, + backgroundColor: paleCyan, + submenuTextColor: colorControl.black, + submenuBackgroundColor: paleCyan, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); + + test( 'As a user I expect my navigation to use the colors I selected for it', async ( { + editor, + page, + colorControl, + } ) => { + await editor.openDocumentSettingsSidebar(); + + // In the inspector sidebar, we change the nav block colors + await page.getByRole( 'tab', { name: 'Styles' } ).click(); + // Pale pink for the text color + await page.getByRole( 'button', { name: 'Text', exact: true } ).click(); + // 247, 141, 167 is the color of the "Pale pink" color preset + const palePink = 'rgb(247, 141, 167)'; + await page + .getByRole( 'button', { name: 'Color: Pale pink' } ) + .click( { force: true } ); + // Pale cyan blue for the background color + await page + .getByRole( 'button', { name: 'Background', exact: true } ) + .click(); + // 142, 209, 252 is the color of the "Pale cyan blue" color preset + const paleCyan = 'rgb(142, 209, 252)'; + await page + .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) + .click( { force: true } ); + // Cyan bluish gray for the submenu and overlay text color + await page + .getByRole( 'button', { name: 'Submenu & overlay text' } ) + .click(); + // 171, 184, 195 is the color of the "Cyan bluish gray" color preset + const cyanBluishGray = 'rgb(171, 184, 195)'; + await page + .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) + .click( { force: true } ); + // Luminous vivid amber for the submenu and overlay background color + await page + .getByRole( 'button', { name: 'Submenu & overlay background' } ) + .click(); + // 252, 185, 0 is the color of the "Luminous vivid amber" color preset + const vividAmber = 'rgb(252, 185, 0)'; + await page + .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(); + + const expectedNavigationColors = { + textColor: palePink, + backgroundColor: paleCyan, // There should be no background color set + submenuTextColor: cyanBluishGray, + submenuBackgroundColor: vividAmber, + }; + + await colorControl.testEditorColors( expectedNavigationColors ); + + // And finally we check the colors of the links on the frontend + await page.goto( '/' ); + + await colorControl.testFrontendColors( expectedNavigationColors ); + } ); +} ); + +class ColorControl { + constructor( { admin, editor, page, pageUtils } ) { + this.admin = admin; + this.editor = editor; + this.page = page; + this.pageUtils = pageUtils; + + // Colors for readability + this.black = 'rgb(0, 0, 0)'; + this.white = 'rgb(255, 255, 255)'; + // If there is no background color set, it will not have any background, which computes to 'rgab(0, 0, 0, 0)'. + this.transparent = 'rgba(0, 0, 0, 0)'; + } + + async testEditorColors( { + textColor, + backgroundColor, + submenuTextColor, + submenuBackgroundColor, + } ) { + // Editor elements + const customLink = this.editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Custom Link' } ); + const pageLink = this.editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Page Link' } ); + + await expect( customLink ).toHaveCSS( 'color', textColor ); + await expect( pageLink ).toHaveCSS( 'color', textColor ); + // Navigation background + const navigationWrapper = this.editor.canvas.getByRole( 'document', { + name: 'Block: Navigation', + } ); + await expect( navigationWrapper ).toHaveCSS( + 'background-color', + backgroundColor + ); + + await customLink.click(); + + // Submenu elements + const submenuLink = this.editor.canvas + .locator( 'a' ) + .filter( { hasText: 'Submenu Link' } ); + const submenuWrapper = this.editor.canvas + .getByRole( 'document', { name: 'Block: Custom Link' } ) + .filter( { has: submenuLink } ); + + // Submenu link color + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); + + // Submenu background color + await expect( submenuWrapper ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); + + // Switch to mobile view for the rest of the editor color tests + // Focus the navigation block + await this.editor.canvas + .getByRole( 'document', { name: 'Block: Navigation' } ) + .click(); + await this.editor.openDocumentSettingsSidebar(); + // Switch to settings tab + await this.page.getByRole( 'tab', { name: 'Settings' } ).click(); + // Set it to always be the mobile view, but don't save this setting so we can still check all the frontend colors + await this.page.getByRole( 'radio', { name: 'Always' } ).click(); + await this.editor.canvas + .getByRole( 'button', { name: 'Open menu' } ) + .click(); + + const overlay = this.editor.canvas + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Submenu Link' } ); + + // All of the mobile menu navigation links should be the same color as the submenuTextColor + await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); + + // The mobile menu background should be the same color as the submenu background + await expect( overlay ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); + } + + async testFrontendColors( { + textColor, + backgroundColor, + submenuTextColor, + submenuBackgroundColor, + } ) { + // Top level link elements + const customLink = this.page + .locator( 'a' ) + .filter( { hasText: 'Custom Link' } ); + const pageLink = this.page + .locator( 'a' ) + .filter( { hasText: 'Page Link' } ); + + // Top level link colors + await expect( customLink ).toHaveCSS( 'color', textColor ); + await expect( pageLink ).toHaveCSS( 'color', textColor ); + + // Navigation background + const menuWrapperFront = this.page + .getByRole( 'navigation', { name: 'Colored menu' } ) + .getByRole( 'list' ); + await expect( menuWrapperFront ).toHaveCSS( + 'background-color', + backgroundColor + ); + + await customLink.hover(); + + // Submenu elements + const submenuLink = this.page + .locator( 'a' ) + .filter( { hasText: 'Submenu Link' } ); + const submenuWrapper = this.page + .locator( '.wp-block-navigation__submenu-container' ) + .filter( { has: submenuLink } ); + + // Submenu link color + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); + + // Submenu background color + await expect( submenuWrapper ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); + + // Open the frontend overlay so we can test the colors + await this.pageUtils.setBrowserViewport( { width: 599, height: 700 } ); + await this.page.getByRole( 'button', { name: 'Open menu' } ).click(); + + // All of the mobile menu navigation links should be the same color as the submenuTextColor + await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); + await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); + + const overlayFront = this.page + .locator( '.wp-block-navigation__responsive-container' ) + .filter( { hasText: 'Submenu Link' } ); + + // The mobile menu background should be the same color as the submenu background + await expect( overlayFront ).toHaveCSS( + 'background-color', + submenuBackgroundColor + ); + + // We need to reset the overlay to the default viewport if something runs after these tests + await this.pageUtils.setBrowserViewport( 'large' ); + } +} diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 941fafae6de314..b5883694e192e5 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -930,387 +930,6 @@ test.describe( 'Navigation block', () => { await expect( linkControl.getSearchInput() ).not.toBeVisible(); } ); } ); - - 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(); - } ); - - 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 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(); - } ); - - test.use( { - colorControl: async ( { admin, editor, page, pageUtils }, use ) => { - await use( - new ColorControl( { admin, editor, page, pageUtils } ) - ); - }, - } ); - - 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 ( { - page, - colorControl, - } ) => { - const expectedNavigationColors = { - textColor: colorControl.black, - backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black - submenuTextColor: colorControl.black, - submenuBackgroundColor: colorControl.white, - }; - - await colorControl.testEditorColors( expectedNavigationColors ); - - // And finally we check the colors of the links on the frontend - await page.goto( '/' ); - - await colorControl.testFrontendColors( expectedNavigationColors ); - } ); - - test( 'Top level navigation links inherit the text color from the theme/group but do not apply to the submenu or overlay text', async ( { - page, - editor, - colorControl, - } ) => { - // Set the text and background styles for the group. The text color should apply to the top level links but not the submenu or overlay. - // We wrap the nav block inside a group block - await page - .getByRole( 'toolbar', { name: 'Block tools' } ) - .getByRole( 'button', { name: 'Options' } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - - // In the sidebar inspector we add a link color and link hover color to the group block - await editor.openDocumentSettingsSidebar(); - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - await page - .getByRole( 'button', { name: 'Color Text styles' } ) - .click(); - await page - .getByRole( 'button', { name: 'Color: White' } ) - .click( { force: true } ); - - await page - .getByRole( 'button', { name: 'Color Background styles' } ) - .click(); - await page - .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(); - - const expectedNavigationColors = { - textColor: colorControl.white, - backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black - submenuTextColor: colorControl.black, - submenuBackgroundColor: colorControl.white, - }; - - await colorControl.testEditorColors( expectedNavigationColors ); - - // And finally we check the colors of the links on the frontend - await page.goto( '/' ); - - await colorControl.testFrontendColors( expectedNavigationColors ); - } ); - - test( 'Navigation text does not inherit the link color from the theme/group', async ( { - page, - editor, - colorControl, - } ) => { - // Wrap the nav block inside a group block - await page - .getByRole( 'toolbar', { name: 'Block tools' } ) - .getByRole( 'button', { name: 'Options' } ) - .click(); - await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - - // In the sidebar inspector we add a link color and link hover color to the group block - await editor.openDocumentSettingsSidebar(); - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - await page.getByRole( 'button', { name: 'Color options' } ).click(); - await page - .getByRole( 'menuitemcheckbox', { name: 'Show Link' } ) - .click(); - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - await page - .getByRole( 'button', { name: 'Color Link styles' } ) - .click(); - // rga(207, 46 ,46) is the color of the "vivid red" color preset - await page - .getByRole( 'button', { name: 'Color: Vivid red' } ) - .click( { force: true } ); - await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgb(155, 81, 224) is the color of the "vivid purple" color preset - await page - .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(); - - const expectedNavigationColors = { - textColor: colorControl.black, - backgroundColor: colorControl.transparent, - submenuTextColor: colorControl.black, - submenuBackgroundColor: colorControl.white, - }; - - await colorControl.testEditorColors( expectedNavigationColors ); - - // And finally we check the colors of the links on the frontend - await page.goto( '/' ); - - await colorControl.testFrontendColors( expectedNavigationColors ); - } ); - - test( 'The navigation text color should apply to all navigation links including submenu and overlay text', async ( { - page, - editor, - colorControl, - } ) => { - await editor.openDocumentSettingsSidebar(); - - // In the inspector sidebar, we change the nav block colors - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - // Pale pink for the text color - await page - .getByRole( 'button', { name: 'Text', exact: true } ) - .click(); - // 247, 141, 167 is the color of the "Pale pink" color preset - const palePink = 'rgb(247, 141, 167)'; - await page - .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(); - - const expectedNavigationColors = { - textColor: palePink, - backgroundColor: colorControl.transparent, // There should be no background color set - submenuTextColor: palePink, - submenuBackgroundColor: colorControl.white, - }; - - await colorControl.testEditorColors( expectedNavigationColors ); - - // And finally we check the colors of the links on the frontend - await page.goto( '/' ); - - await colorControl.testFrontendColors( expectedNavigationColors ); - } ); - - test( 'The navigation background color should apply to all navigation links including submenu and overlay backgrounds', async ( { - page, - editor, - colorControl, - } ) => { - await editor.openDocumentSettingsSidebar(); - - // In the inspector sidebar, we change the nav block colors - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - // Pale pink for the text color - await page - .getByRole( 'button', { name: 'Background', exact: true } ) - .click(); - // 142, 209, 252 is the color of the "Pale cyan blue" color preset - const paleCyan = 'rgb(142, 209, 252)'; - await page - .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(); - - // The navigation background, submenu background and overlay background should all be paleCyan - const expectedNavigationColors = { - textColor: colorControl.black, - backgroundColor: paleCyan, - submenuTextColor: colorControl.black, - submenuBackgroundColor: paleCyan, - }; - - await colorControl.testEditorColors( expectedNavigationColors ); - - // And finally we check the colors of the links on the frontend - await page.goto( '/' ); - - await colorControl.testFrontendColors( expectedNavigationColors ); - } ); - - test( 'As a user I expect my navigation to use the colors I selected for it', async ( { - editor, - page, - colorControl, - } ) => { - await editor.openDocumentSettingsSidebar(); - - // In the inspector sidebar, we change the nav block colors - await page.getByRole( 'tab', { name: 'Styles' } ).click(); - // Pale pink for the text color - await page - .getByRole( 'button', { name: 'Text', exact: true } ) - .click(); - // 247, 141, 167 is the color of the "Pale pink" color preset - const palePink = 'rgb(247, 141, 167)'; - await page - .getByRole( 'button', { name: 'Color: Pale pink' } ) - .click( { force: true } ); - // Pale cyan blue for the background color - await page - .getByRole( 'button', { name: 'Background', exact: true } ) - .click(); - // 142, 209, 252 is the color of the "Pale cyan blue" color preset - const paleCyan = 'rgb(142, 209, 252)'; - await page - .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) - .click( { force: true } ); - // Cyan bluish gray for the submenu and overlay text color - await page - .getByRole( 'button', { name: 'Submenu & overlay text' } ) - .click(); - // 171, 184, 195 is the color of the "Cyan bluish gray" color preset - const cyanBluishGray = 'rgb(171, 184, 195)'; - await page - .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) - .click( { force: true } ); - // Luminous vivid amber for the submenu and overlay background color - await page - .getByRole( 'button', { name: 'Submenu & overlay background' } ) - .click(); - // 252, 185, 0 is the color of the "Luminous vivid amber" color preset - const vividAmber = 'rgb(252, 185, 0)'; - await page - .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(); - - const expectedNavigationColors = { - textColor: palePink, - backgroundColor: paleCyan, // There should be no background color set - submenuTextColor: cyanBluishGray, - submenuBackgroundColor: vividAmber, - }; - - await colorControl.testEditorColors( expectedNavigationColors ); - - // And finally we check the colors of the links on the frontend - await page.goto( '/' ); - - await colorControl.testFrontendColors( expectedNavigationColors ); - } ); - } ); } ); test.describe( 'Navigation block - Frontend interactivity', () => { @@ -1633,164 +1252,6 @@ test.describe( 'Navigation block - Frontend interactivity', () => { } ); } ); -class ColorControl { - constructor( { admin, editor, page, pageUtils } ) { - this.admin = admin; - this.editor = editor; - this.page = page; - this.pageUtils = pageUtils; - - // Colors for readability - this.black = 'rgb(0, 0, 0)'; - this.white = 'rgb(255, 255, 255)'; - // If there is no background color set, it will not have any background, which computes to 'rgab(0, 0, 0, 0)'. - this.transparent = 'rgba(0, 0, 0, 0)'; - } - - async testEditorColors( { - textColor, - backgroundColor, - submenuTextColor, - submenuBackgroundColor, - } ) { - // Editor elements - const customLink = this.editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Custom Link' } ); - const pageLink = this.editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Page Link' } ); - - await expect( customLink ).toHaveCSS( 'color', textColor ); - await expect( pageLink ).toHaveCSS( 'color', textColor ); - // Navigation background - const navigationWrapper = this.editor.canvas.getByRole( 'document', { - name: 'Block: Navigation', - } ); - await expect( navigationWrapper ).toHaveCSS( - 'background-color', - backgroundColor - ); - - await customLink.click(); - - // Submenu elements - const submenuLink = this.editor.canvas - .locator( 'a' ) - .filter( { hasText: 'Submenu Link' } ); - const submenuWrapper = this.editor.canvas - .getByRole( 'document', { name: 'Block: Custom Link' } ) - .filter( { has: submenuLink } ); - - // Submenu link color - await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); - - // Submenu background color - await expect( submenuWrapper ).toHaveCSS( - 'background-color', - submenuBackgroundColor - ); - - // Switch to mobile view for the rest of the editor color tests - // Focus the navigation block - await this.editor.canvas - .getByRole( 'document', { name: 'Block: Navigation' } ) - .click(); - await this.editor.openDocumentSettingsSidebar(); - // Switch to settings tab - await this.page.getByRole( 'tab', { name: 'Settings' } ).click(); - // Set it to always be the mobile view, but don't save this setting so we can still check all the frontend colors - await this.page.getByRole( 'radio', { name: 'Always' } ).click(); - await this.editor.canvas - .getByRole( 'button', { name: 'Open menu' } ) - .click(); - - const overlay = this.editor.canvas - .locator( '.wp-block-navigation__responsive-container' ) - .filter( { hasText: 'Submenu Link' } ); - - // All of the mobile menu navigation links should be the same color as the submenuTextColor - await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); - await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); - await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); - - // The mobile menu background should be the same color as the submenu background - await expect( overlay ).toHaveCSS( - 'background-color', - submenuBackgroundColor - ); - } - - async testFrontendColors( { - textColor, - backgroundColor, - submenuTextColor, - submenuBackgroundColor, - } ) { - // Top level link elements - const customLink = this.page - .locator( 'a' ) - .filter( { hasText: 'Custom Link' } ); - const pageLink = this.page - .locator( 'a' ) - .filter( { hasText: 'Page Link' } ); - - // Top level link colors - await expect( customLink ).toHaveCSS( 'color', textColor ); - await expect( pageLink ).toHaveCSS( 'color', textColor ); - - // Navigation background - const menuWrapperFront = this.page - .getByRole( 'navigation', { name: 'Colored menu' } ) - .getByRole( 'list' ); - await expect( menuWrapperFront ).toHaveCSS( - 'background-color', - backgroundColor - ); - - await customLink.hover(); - - // Submenu elements - const submenuLink = this.page - .locator( 'a' ) - .filter( { hasText: 'Submenu Link' } ); - const submenuWrapper = this.page - .locator( '.wp-block-navigation__submenu-container' ) - .filter( { has: submenuLink } ); - - // Submenu link color - await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); - - // Submenu background color - await expect( submenuWrapper ).toHaveCSS( - 'background-color', - submenuBackgroundColor - ); - - // Open the frontend overlay so we can test the colors - await this.pageUtils.setBrowserViewport( { width: 599, height: 700 } ); - await this.page.getByRole( 'button', { name: 'Open menu' } ).click(); - - // All of the mobile menu navigation links should be the same color as the submenuTextColor - await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); - await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); - await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); - - const overlayFront = this.page - .locator( '.wp-block-navigation__responsive-container' ) - .filter( { hasText: 'Submenu Link' } ); - - // The mobile menu background should be the same color as the submenu background - await expect( overlayFront ).toHaveCSS( - 'background-color', - submenuBackgroundColor - ); - - // We need to reset the overlay to the default viewport if something runs after these tests - await this.pageUtils.setBrowserViewport( 'large' ); - } -} - class LinkControl { constructor( { page } ) { this.page = page; From db21c637802921ced6e7c53e795ed030b0c5cdbf Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:39:23 +0100 Subject: [PATCH 33/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index c2eb8354e5fae8..242bff4c9a28bc 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -536,7 +536,7 @@ class ColorControl { submenuBackgroundColor ); - // We need to reset the overlay to the default viewport if something runs after these tests + // We need to reset the overlay to the default viewport if something runs after these tests. await this.pageUtils.setBrowserViewport( 'large' ); } } From ada037c1d77040d9f00005facdd42c86b15ba748 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:39:30 +0100 Subject: [PATCH 34/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 242bff4c9a28bc..85267e0c591a85 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -521,7 +521,7 @@ class ColorControl { await this.pageUtils.setBrowserViewport( { width: 599, height: 700 } ); await this.page.getByRole( 'button', { name: 'Open menu' } ).click(); - // All of the mobile menu navigation links should be the same color as the submenuTextColor + // All of the mobile menu navigation links should be the same color as the submenuTextColor. await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); From 8786a7cedfd0c3a121d938687e5f16effd2553b4 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:39:37 +0100 Subject: [PATCH 35/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 85267e0c591a85..d1c3f66f311110 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -517,7 +517,7 @@ class ColorControl { submenuBackgroundColor ); - // Open the frontend overlay so we can test the colors + // Open the frontend overlay so we can test the colors. await this.pageUtils.setBrowserViewport( { width: 599, height: 700 } ); await this.page.getByRole( 'button', { name: 'Open menu' } ).click(); From 3131a7d838bcb735c54d2bcc93e2423749d6d557 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:39:53 +0100 Subject: [PATCH 36/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index d1c3f66f311110..f531c3b0f87a3b 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -530,7 +530,7 @@ class ColorControl { .locator( '.wp-block-navigation__responsive-container' ) .filter( { hasText: 'Submenu Link' } ); - // The mobile menu background should be the same color as the submenu background + // The mobile menu background should be the same color as the submenu background. await expect( overlayFront ).toHaveCSS( 'background-color', submenuBackgroundColor From 680072dd3da1cc35ef1ec538a6cd1da3f3211cce Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:40:00 +0100 Subject: [PATCH 37/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index f531c3b0f87a3b..73244f7a1a1015 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -511,7 +511,7 @@ class ColorControl { // Submenu link color await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); - // Submenu background color + // Submenu background color. await expect( submenuWrapper ).toHaveCSS( 'background-color', submenuBackgroundColor From 716d9926c92928506efe68756896b1ee4d4d0d94 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:40:13 +0100 Subject: [PATCH 38/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 73244f7a1a1015..e87d90c55ebe4f 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -123,7 +123,7 @@ test.describe( 'Navigation colors', () => { await editor.canvas.click( 'body' ); - // Focus the navigation block inside the header template part + // Focus the navigation block inside the header template part. await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); From e726585f3cd8b22009dcd683e6c11611ed87bdbe Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:40:22 +0100 Subject: [PATCH 39/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index e87d90c55ebe4f..11b3b705a7aab1 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -116,7 +116,7 @@ test.describe( 'Navigation colors', () => { // 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 + // 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 } ); From e49f42354278e78bdd144624add0bbaf289680b4 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:40:29 +0100 Subject: [PATCH 40/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 11b3b705a7aab1..3e26197555b7b6 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -99,7 +99,7 @@ test.describe( 'Navigation colors', () => { .click(); await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - // In the sidebar inspector we add a link color and link hover color to the group block + // In the sidebar inspector we add a link color and link hover color to the group block. await editor.openDocumentSettingsSidebar(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color Text styles' } ).click(); From ffc68061334493b0e431708af62dad1820fd50e1 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:40:40 +0100 Subject: [PATCH 41/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 3e26197555b7b6..4abaa74d6714fc 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -92,7 +92,7 @@ test.describe( 'Navigation colors', () => { colorControl, } ) => { // Set the text and background styles for the group. The text color should apply to the top level links but not the submenu or overlay. - // We wrap the nav block inside a group block + // We wrap the nav block inside a group block. await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) From 57fe3b11e1c39a165f8569d8457c9a83c23ac247 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:40:48 +0100 Subject: [PATCH 42/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 4abaa74d6714fc..ee9a36caca041f 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -80,7 +80,7 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend + // And finally we check the colors of the links on the frontend. await page.goto( '/' ); await colorControl.testFrontendColors( expectedNavigationColors ); From 6988f59072ba0c4f41aa160645dacad5c7a72851 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:40:56 +0100 Subject: [PATCH 43/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index ee9a36caca041f..079f029265af4a 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -73,7 +73,7 @@ test.describe( 'Navigation colors', () => { } ) => { const expectedNavigationColors = { textColor: colorControl.black, - backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black + backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black. submenuTextColor: colorControl.black, submenuBackgroundColor: colorControl.white, }; From 1bdd9aae6986892917436dba511763d53bd530c3 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:41:03 +0100 Subject: [PATCH 44/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 079f029265af4a..51ee6db0041e0b 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -37,7 +37,7 @@ test.describe( 'Navigation colors', () => { await editor.saveSiteEditorEntities(); await admin.visitSiteEditor(); await editor.canvas.click( 'body' ); - // Focus the navigation block inside the header template part + // Focus the navigation block inside the header template part. await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); From 05927a077b5a2cdfaae3daac585434106dd17ef2 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:41:10 +0100 Subject: [PATCH 45/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 51ee6db0041e0b..48a15c94754d35 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -5,7 +5,7 @@ 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 + // We want emptytheme because it doesn't have any styles. await requestUtils.activateTheme( 'emptytheme' ); await requestUtils.deleteAllTemplates( 'wp_template_part' ); await requestUtils.deleteAllMenus(); From 50113d2fa59c7e23a1f30f6cf4f8d508d5c4ba1a Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:41:27 +0100 Subject: [PATCH 46/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 48a15c94754d35..0f8f97f0ac7022 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -133,7 +133,7 @@ test.describe( 'Navigation colors', () => { const expectedNavigationColors = { textColor: colorControl.white, - backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black + backgroundColor: colorControl.transparent, // There should be no background color set even though the body background is black. submenuTextColor: colorControl.black, submenuBackgroundColor: colorControl.white, }; From 53c4d8d2382e55807ef4f4729ced369721f65983 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:41:40 +0100 Subject: [PATCH 47/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 0f8f97f0ac7022..54887ce749b045 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -140,7 +140,7 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend + // And finally we check the colors of the links on the frontend. await page.goto( '/' ); await colorControl.testFrontendColors( expectedNavigationColors ); From c5e10fd2dadf933a5588d5cb097df310eee7a596 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:41:56 +0100 Subject: [PATCH 48/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 54887ce749b045..d43ed1db653329 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -151,7 +151,7 @@ test.describe( 'Navigation colors', () => { editor, colorControl, } ) => { - // Wrap the nav block inside a group block + // Wrap the nav block inside a group block. await page .getByRole( 'toolbar', { name: 'Block tools' } ) .getByRole( 'button', { name: 'Options' } ) From 83d168c0651b82bc56e96ad5c2eebab090f26aff Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:42:16 +0100 Subject: [PATCH 49/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index d43ed1db653329..fdbd187f146232 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -158,7 +158,7 @@ test.describe( 'Navigation colors', () => { .click(); await page.getByRole( 'menuitem', { name: 'Group' } ).click(); - // In the sidebar inspector we add a link color and link hover color to the group block + // In the sidebar inspector we add a link color and link hover color to the group block. await editor.openDocumentSettingsSidebar(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color options' } ).click(); From 6a80a1bb67ab3a8014d805653e133f503d0bff4e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:42:34 +0100 Subject: [PATCH 50/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index fdbd187f146232..c7c41556b9f23f 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -167,7 +167,7 @@ test.describe( 'Navigation colors', () => { .click(); await page.getByRole( 'tab', { name: 'Styles' } ).click(); await page.getByRole( 'button', { name: 'Color Link styles' } ).click(); - // rga(207, 46 ,46) is the color of the "vivid red" color preset + // rga(207, 46 ,46) is the color of the "vivid red" color preset. await page .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); From 6b3710d68b42c0507af25e1dcbbdb6e89150635e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:42:48 +0100 Subject: [PATCH 51/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index c7c41556b9f23f..6a55e2a5788407 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -172,7 +172,7 @@ test.describe( 'Navigation colors', () => { .getByRole( 'button', { name: 'Color: Vivid red' } ) .click( { force: true } ); await page.getByRole( 'tab', { name: 'Hover' } ).click(); - // rgb(155, 81, 224) is the color of the "vivid purple" color preset + // rgb(155, 81, 224) is the color of the "vivid purple" color preset. await page .getByRole( 'button', { name: 'Color: Vivid purple' } ) .click( { force: true } ); From 211586898d96d9fabc0c2580477ecde9b04a0e5e Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:43:01 +0100 Subject: [PATCH 52/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 6a55e2a5788407..8799609adf8b4e 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -179,7 +179,7 @@ test.describe( 'Navigation colors', () => { // 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 + // 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 } ); From b1a972441eab4c135aad4b4af1eb0cf79c990f0c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:43:14 +0100 Subject: [PATCH 53/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 8799609adf8b4e..de6fb300847879 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -186,7 +186,7 @@ test.describe( 'Navigation colors', () => { await editor.canvas.click( 'body' ); - // Focus the navigation block inside the header template part + // Focus the navigation block inside the header template part. await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); From 92f289d0f4a2aa948f5e936708ecbdeb7bcc7c0d Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:43:26 +0100 Subject: [PATCH 54/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index de6fb300847879..13969bf9d7f510 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -203,7 +203,7 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend + // And finally we check the colors of the links on the frontend. await page.goto( '/' ); await colorControl.testFrontendColors( expectedNavigationColors ); From ca771080f143591f5075a34a262919bc7ec81865 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:43:40 +0100 Subject: [PATCH 55/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 13969bf9d7f510..ad73c9ade1c8de 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -216,7 +216,7 @@ test.describe( 'Navigation colors', () => { } ) => { await editor.openDocumentSettingsSidebar(); - // In the inspector sidebar, we change the nav block colors + // In the inspector sidebar, we change the nav block colors. await page.getByRole( 'tab', { name: 'Styles' } ).click(); // Pale pink for the text color await page.getByRole( 'button', { name: 'Text', exact: true } ).click(); From 299c02808743c5a4ffec55e6362749847e56077c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:43:54 +0100 Subject: [PATCH 56/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index ad73c9ade1c8de..da3ae740db3f5f 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -218,7 +218,7 @@ test.describe( 'Navigation colors', () => { // In the inspector sidebar, we change the nav block colors. await page.getByRole( 'tab', { name: 'Styles' } ).click(); - // Pale pink for the text color + // Pale pink for the text color. await page.getByRole( 'button', { name: 'Text', exact: true } ).click(); // 247, 141, 167 is the color of the "Pale pink" color preset const palePink = 'rgb(247, 141, 167)'; From 3a261f730318f2c7e9fe7f21b5dc163caca1e26c Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:44:07 +0100 Subject: [PATCH 57/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index da3ae740db3f5f..1cfdacb9b51b31 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -220,7 +220,7 @@ test.describe( 'Navigation colors', () => { await page.getByRole( 'tab', { name: 'Styles' } ).click(); // Pale pink for the text color. await page.getByRole( 'button', { name: 'Text', exact: true } ).click(); - // 247, 141, 167 is the color of the "Pale pink" color preset + // 247, 141, 167 is the color of the "Pale pink" color preset. const palePink = 'rgb(247, 141, 167)'; await page .getByRole( 'button', { name: 'Color: Pale pink' } ) From 4c111b910ac3554a736faa6927c59f1b543872cf Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:44:22 +0100 Subject: [PATCH 58/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 1cfdacb9b51b31..3810ec9200c122 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -227,7 +227,7 @@ test.describe( 'Navigation colors', () => { .click( { force: true } ); await editor.saveSiteEditorEntities(); - // Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas + // 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 } ); From 27a1694099a5e77adc8a2f3501c617315ec175d4 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:45:00 +0100 Subject: [PATCH 59/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 3810ec9200c122..64981998055c30 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -270,7 +270,7 @@ test.describe( 'Navigation colors', () => { await page .getByRole( 'button', { name: 'Background', exact: true } ) .click(); - // 142, 209, 252 is the color of the "Pale cyan blue" color preset + // 142, 209, 252 is the color of the "Pale cyan blue" color preset. const paleCyan = 'rgb(142, 209, 252)'; await page .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) From ff5be802782cfac52df220a4bcb77b1bd02ff9a8 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:45:34 +0100 Subject: [PATCH 60/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 64981998055c30..7f7354c275c206 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -234,7 +234,7 @@ test.describe( 'Navigation colors', () => { await editor.canvas.click( 'body' ); - // Focus the navigation block inside the header template part + // Focus the navigation block inside the header template part. await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); From f1e0f3dc2db39c1319f268077fbe2e47912183b1 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:45:54 +0100 Subject: [PATCH 61/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 7f7354c275c206..87fabfe63503ef 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -244,7 +244,7 @@ test.describe( 'Navigation colors', () => { const expectedNavigationColors = { textColor: palePink, - backgroundColor: colorControl.transparent, // There should be no background color set + backgroundColor: colorControl.transparent, // There should be no background color set. submenuTextColor: palePink, submenuBackgroundColor: colorControl.white, }; From f10b86ab5a33cb9deb16ca6fbc149b2d09fcd2e0 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:46:27 +0100 Subject: [PATCH 62/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 87fabfe63503ef..ecd2b0a6399cf3 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -251,7 +251,7 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend + // And finally we check the colors of the links on the frontend. await page.goto( '/' ); await colorControl.testFrontendColors( expectedNavigationColors ); From cfb8266bb5927482d0d44fe009bc9f0adfd20664 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:47:00 +0100 Subject: [PATCH 63/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index ecd2b0a6399cf3..54766719b74aa0 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -264,7 +264,7 @@ test.describe( 'Navigation colors', () => { } ) => { await editor.openDocumentSettingsSidebar(); - // In the inspector sidebar, we change the nav block colors + // In the inspector sidebar, we change the nav block colors. await page.getByRole( 'tab', { name: 'Styles' } ).click(); // Pale pink for the text color await page From 2aa309d776d31cdf59030fbada814e9bf4a85da6 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:47:21 +0100 Subject: [PATCH 64/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index 54766719b74aa0..c9eee8546af19e 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -266,7 +266,7 @@ test.describe( 'Navigation colors', () => { // In the inspector sidebar, we change the nav block colors. await page.getByRole( 'tab', { name: 'Styles' } ).click(); - // Pale pink for the text color + // Pale pink for the text color. await page .getByRole( 'button', { name: 'Background', exact: true } ) .click(); From 6a0cc47512d0133f601bae66c22a59ae3edc55b5 Mon Sep 17 00:00:00 2001 From: scruffian Date: Thu, 13 Jul 2023 14:49:55 +0100 Subject: [PATCH 65/66] update comments --- .../editor/blocks/navigation-colors.spec.js | 66 +++++++++---------- 1 file changed, 33 insertions(+), 33 deletions(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index c9eee8546af19e..e856bb84aeb47d 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -277,13 +277,13 @@ test.describe( 'Navigation colors', () => { .click( { force: true } ); await editor.saveSiteEditorEntities(); - // Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas + // 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 + // Focus the navigation block inside the header template part. await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -291,7 +291,7 @@ test.describe( 'Navigation colors', () => { .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); - // The navigation background, submenu background and overlay background should all be paleCyan + // The navigation background, submenu background and overlay background should all be paleCyan. const expectedNavigationColors = { textColor: colorControl.black, backgroundColor: paleCyan, @@ -301,7 +301,7 @@ test.describe( 'Navigation colors', () => { await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend + // And finally we check the colors of the links on the frontend. await page.goto( '/' ); await colorControl.testFrontendColors( expectedNavigationColors ); @@ -314,52 +314,52 @@ test.describe( 'Navigation colors', () => { } ) => { await editor.openDocumentSettingsSidebar(); - // In the inspector sidebar, we change the nav block colors + // In the inspector sidebar, we change the nav block colors. await page.getByRole( 'tab', { name: 'Styles' } ).click(); // Pale pink for the text color await page.getByRole( 'button', { name: 'Text', exact: true } ).click(); - // 247, 141, 167 is the color of the "Pale pink" color preset + // 247, 141, 167 is the color of the "Pale pink" color preset. const palePink = 'rgb(247, 141, 167)'; await page .getByRole( 'button', { name: 'Color: Pale pink' } ) .click( { force: true } ); - // Pale cyan blue for the background color + // Pale cyan blue for the background color. await page .getByRole( 'button', { name: 'Background', exact: true } ) .click(); - // 142, 209, 252 is the color of the "Pale cyan blue" color preset + // 142, 209, 252 is the color of the "Pale cyan blue" color preset. const paleCyan = 'rgb(142, 209, 252)'; await page .getByRole( 'button', { name: 'Color: Pale cyan blue' } ) .click( { force: true } ); - // Cyan bluish gray for the submenu and overlay text color + // Cyan bluish gray for the submenu and overlay text color. await page .getByRole( 'button', { name: 'Submenu & overlay text' } ) .click(); - // 171, 184, 195 is the color of the "Cyan bluish gray" color preset + // 171, 184, 195 is the color of the "Cyan bluish gray" color preset. const cyanBluishGray = 'rgb(171, 184, 195)'; await page .getByRole( 'button', { name: 'Color: Cyan bluish gray' } ) .click( { force: true } ); - // Luminous vivid amber for the submenu and overlay background color + // Luminous vivid amber for the submenu and overlay background color. await page .getByRole( 'button', { name: 'Submenu & overlay background' } ) .click(); - // 252, 185, 0 is the color of the "Luminous vivid amber" color preset + // 252, 185, 0 is the color of the "Luminous vivid amber" color preset. const vividAmber = 'rgb(252, 185, 0)'; await page .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 + // 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 + // Focus the navigation block inside the header template part. await editor.canvas .getByRole( 'document', { name: 'Block: header' } ) .focus(); @@ -369,14 +369,14 @@ test.describe( 'Navigation colors', () => { const expectedNavigationColors = { textColor: palePink, - backgroundColor: paleCyan, // There should be no background color set + backgroundColor: paleCyan, // There should be no background color set. submenuTextColor: cyanBluishGray, submenuBackgroundColor: vividAmber, }; await colorControl.testEditorColors( expectedNavigationColors ); - // And finally we check the colors of the links on the frontend + // And finally we check the colors of the links on the frontend. await page.goto( '/' ); await colorControl.testFrontendColors( expectedNavigationColors ); @@ -390,7 +390,7 @@ class ColorControl { this.page = page; this.pageUtils = pageUtils; - // Colors for readability + // Colors for readability. this.black = 'rgb(0, 0, 0)'; this.white = 'rgb(255, 255, 255)'; // If there is no background color set, it will not have any background, which computes to 'rgab(0, 0, 0, 0)'. @@ -403,7 +403,7 @@ class ColorControl { submenuTextColor, submenuBackgroundColor, } ) { - // Editor elements + // Editor elements. const customLink = this.editor.canvas .locator( 'a' ) .filter( { hasText: 'Custom Link' } ); @@ -413,7 +413,7 @@ class ColorControl { await expect( customLink ).toHaveCSS( 'color', textColor ); await expect( pageLink ).toHaveCSS( 'color', textColor ); - // Navigation background + // Navigation background. const navigationWrapper = this.editor.canvas.getByRole( 'document', { name: 'Block: Navigation', } ); @@ -424,7 +424,7 @@ class ColorControl { await customLink.click(); - // Submenu elements + // Submenu elements. const submenuLink = this.editor.canvas .locator( 'a' ) .filter( { hasText: 'Submenu Link' } ); @@ -432,24 +432,24 @@ class ColorControl { .getByRole( 'document', { name: 'Block: Custom Link' } ) .filter( { has: submenuLink } ); - // Submenu link color + // Submenu link color. await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); - // Submenu background color + // Submenu background color. await expect( submenuWrapper ).toHaveCSS( 'background-color', submenuBackgroundColor ); - // Switch to mobile view for the rest of the editor color tests - // Focus the navigation block + // Switch to mobile view for the rest of the editor color tests. + // Focus the navigation block. await this.editor.canvas .getByRole( 'document', { name: 'Block: Navigation' } ) .click(); await this.editor.openDocumentSettingsSidebar(); - // Switch to settings tab + // Switch to settings tab. await this.page.getByRole( 'tab', { name: 'Settings' } ).click(); - // Set it to always be the mobile view, but don't save this setting so we can still check all the frontend colors + // Set it to always be the mobile view, but don't save this setting so we can still check all the frontend colors. await this.page.getByRole( 'radio', { name: 'Always' } ).click(); await this.editor.canvas .getByRole( 'button', { name: 'Open menu' } ) @@ -459,12 +459,12 @@ class ColorControl { .locator( '.wp-block-navigation__responsive-container' ) .filter( { hasText: 'Submenu Link' } ); - // All of the mobile menu navigation links should be the same color as the submenuTextColor + // All of the mobile menu navigation links should be the same color as the submenuTextColor. await expect( customLink ).toHaveCSS( 'color', submenuTextColor ); await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); await expect( pageLink ).toHaveCSS( 'color', submenuTextColor ); - // The mobile menu background should be the same color as the submenu background + // The mobile menu background should be the same color as the submenu background. await expect( overlay ).toHaveCSS( 'background-color', submenuBackgroundColor @@ -477,7 +477,7 @@ class ColorControl { submenuTextColor, submenuBackgroundColor, } ) { - // Top level link elements + // Top level link elements. const customLink = this.page .locator( 'a' ) .filter( { hasText: 'Custom Link' } ); @@ -485,11 +485,11 @@ class ColorControl { .locator( 'a' ) .filter( { hasText: 'Page Link' } ); - // Top level link colors + // Top level link colors. await expect( customLink ).toHaveCSS( 'color', textColor ); await expect( pageLink ).toHaveCSS( 'color', textColor ); - // Navigation background + // Navigation background. const menuWrapperFront = this.page .getByRole( 'navigation', { name: 'Colored menu' } ) .getByRole( 'list' ); @@ -500,7 +500,7 @@ class ColorControl { await customLink.hover(); - // Submenu elements + // Submenu elements. const submenuLink = this.page .locator( 'a' ) .filter( { hasText: 'Submenu Link' } ); @@ -508,7 +508,7 @@ class ColorControl { .locator( '.wp-block-navigation__submenu-container' ) .filter( { has: submenuLink } ); - // Submenu link color + // Submenu link color. await expect( submenuLink ).toHaveCSS( 'color', submenuTextColor ); // Submenu background color. From 1b66e92097e906fd41d553fffe2413c05f660572 Mon Sep 17 00:00:00 2001 From: Ben Dwyer Date: Thu, 13 Jul 2023 14:50:57 +0100 Subject: [PATCH 66/66] Update test/e2e/specs/editor/blocks/navigation-colors.spec.js --- test/e2e/specs/editor/blocks/navigation-colors.spec.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/test/e2e/specs/editor/blocks/navigation-colors.spec.js b/test/e2e/specs/editor/blocks/navigation-colors.spec.js index e856bb84aeb47d..dd74b3194a16a4 100644 --- a/test/e2e/specs/editor/blocks/navigation-colors.spec.js +++ b/test/e2e/specs/editor/blocks/navigation-colors.spec.js @@ -316,7 +316,7 @@ test.describe( 'Navigation colors', () => { // In the inspector sidebar, we change the nav block colors. await page.getByRole( 'tab', { name: 'Styles' } ).click(); - // Pale pink for the text color + // Pale pink for the text color. await page.getByRole( 'button', { name: 'Text', exact: true } ).click(); // 247, 141, 167 is the color of the "Pale pink" color preset. const palePink = 'rgb(247, 141, 167)';