From 37757d1aabaac132f9b6351f0a705a9346892d78 Mon Sep 17 00:00:00 2001 From: MaggieCabrera Date: Fri, 30 Jun 2023 13:49:17 +0200 Subject: [PATCH] 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 ( {} ) => {} ); } ); } );