Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Use posts instead of template parts for navigation color tests #52654

Merged
merged 1 commit into from
Jul 17, 2023
Merged

Use posts instead of template parts for navigation color tests #52654

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
109 changes: 35 additions & 74 deletions test/e2e/specs/editor/blocks/navigation-colors.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,57 +6,44 @@ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' );
test.describe( 'Navigation colors', () => {
test.beforeAll( async ( { requestUtils } ) => {
// We want emptytheme because it doesn't have any styles.
await requestUtils.activateTheme( 'emptytheme' );
await requestUtils.deleteAllTemplates( 'wp_template_part' );
await requestUtils.deleteAllMenus();
await requestUtils.deleteAllPages();
await Promise.all( [
requestUtils.activateTheme( 'emptytheme' ),
requestUtils.deleteAllMenus(),
requestUtils.deleteAllPages(),
] );
} );

test.beforeEach( async ( { admin, editor, requestUtils } ) => {
await admin.visitSiteEditor( {
postId: 'emptytheme//header',
postType: 'wp_template_part',
} );
await editor.canvas.click( 'body' );
const { id: pageId } = await requestUtils.createPage( {
title: 'Test Page',
status: 'publish',
} );

const { id: menuId } = await requestUtils.createNavigationMenu( {
title: 'Colored menu',
content: `<!-- wp:navigation-submenu {"label":"Custom Link","type":"custom","url":"https://wordpress.org","kind":"custom"} --><!-- wp:navigation-link {"label":"Submenu Link","type":"custom","url":"https://wordpress.org","kind":"custom"} /--><!-- /wp:navigation-submenu --><!-- wp:navigation-link {"label":"Page Link","type":"page","id": ${ pageId },"url":"http://localhost:8889/?page_id=${ pageId }","kind":"post-type"} /-->`,
attributes: { openSubmenusOnClick: true },
} );

await admin.createNewPost();

await editor.insertBlock( {
name: 'core/navigation',
attributes: {
ref: menuId,
},
} );

await editor.saveSiteEditorEntities();
await admin.visitSiteEditor();
await editor.canvas.click( 'body' );
// Focus the navigation block inside the header template part.
await editor.canvas
.getByRole( 'document', { name: 'Block: header' } )
.focus();
await editor.canvas
.getByRole( 'document', { name: 'Block: Navigation' } )
.click();
} );

test.afterEach( async ( { requestUtils } ) => {
await requestUtils.deleteAllTemplates( 'wp_template_part' );
await requestUtils.deleteAllMenus();
await requestUtils.deleteAllPages();
await Promise.all( [
requestUtils.deleteAllMenus(),
requestUtils.deleteAllPages(),
] );
} );

test.afterAll( async ( { requestUtils } ) => {
await Promise.all( [
requestUtils.deleteAllTemplates( 'wp_template_part' ),
requestUtils.deleteAllMenus(),
requestUtils.deleteAllPages(),
requestUtils.activateTheme( 'twentytwentyone' ),
] );
} );
Expand All @@ -68,6 +55,7 @@ test.describe( 'Navigation colors', () => {
} );

test( 'All navigation links should default to the body color and submenus and mobile overlay should default to a white background with black text', async ( {
editor,
page,
colorControl,
} ) => {
Expand All @@ -80,8 +68,9 @@ test.describe( 'Navigation colors', () => {

await colorControl.testEditorColors( expectedNavigationColors );

// And finally we check the colors of the links on the frontend.
await page.goto( '/' );
// Check the colors of the links on the frontend.
const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await colorControl.testFrontendColors( expectedNavigationColors );
} );
Expand Down Expand Up @@ -114,19 +103,11 @@ test.describe( 'Navigation colors', () => {
.getByRole( 'button', { name: 'Color: Black' } )
.click( { force: true } );

// Save them so we can check on the frontend later too.
await editor.saveSiteEditorEntities();
// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
await page
.getByRole( 'button', { name: 'Close Settings' } )
.click( { force: true } );

await editor.canvas.click( 'body' );

// Focus the navigation block inside the header template part.
await editor.canvas
.getByRole( 'document', { name: 'Block: header' } )
.focus();
await editor.canvas
.getByRole( 'document', { name: 'Block: Navigation' } )
.click();
Expand All @@ -140,8 +121,9 @@ test.describe( 'Navigation colors', () => {

await colorControl.testEditorColors( expectedNavigationColors );

// And finally we check the colors of the links on the frontend.
await page.goto( '/' );
// Check the colors of the links on the frontend.
const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await colorControl.testFrontendColors( expectedNavigationColors );
} );
Expand Down Expand Up @@ -177,19 +159,11 @@ test.describe( 'Navigation colors', () => {
.getByRole( 'button', { name: 'Color: Vivid purple' } )
.click( { force: true } );

// Save them so we can check on the frontend later too.
await editor.saveSiteEditorEntities();
// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
await page
.getByRole( 'button', { name: 'Close Settings' } )
.click( { force: true } );

await editor.canvas.click( 'body' );

// Focus the navigation block inside the header template part.
await editor.canvas
.getByRole( 'document', { name: 'Block: header' } )
.focus();
await editor.canvas
.getByRole( 'document', { name: 'Block: Navigation' } )
.click();
Expand All @@ -203,8 +177,9 @@ test.describe( 'Navigation colors', () => {

await colorControl.testEditorColors( expectedNavigationColors );

// And finally we check the colors of the links on the frontend.
await page.goto( '/' );
// Check the colors of the links on the frontend.
const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await colorControl.testFrontendColors( expectedNavigationColors );
} );
Expand All @@ -226,18 +201,11 @@ test.describe( 'Navigation colors', () => {
.getByRole( 'button', { name: 'Color: Pale pink' } )
.click( { force: true } );

await editor.saveSiteEditorEntities();
// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
await page
.getByRole( 'button', { name: 'Close Settings' } )
.click( { force: true } );

await editor.canvas.click( 'body' );

// Focus the navigation block inside the header template part.
await editor.canvas
.getByRole( 'document', { name: 'Block: header' } )
.focus();
await editor.canvas
.getByRole( 'document', { name: 'Block: Navigation' } )
.click();
Expand All @@ -251,8 +219,9 @@ test.describe( 'Navigation colors', () => {

await colorControl.testEditorColors( expectedNavigationColors );

// And finally we check the colors of the links on the frontend.
await page.goto( '/' );
// Check the colors of the links on the frontend.
const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await colorControl.testFrontendColors( expectedNavigationColors );
} );
Expand All @@ -276,17 +245,11 @@ test.describe( 'Navigation colors', () => {
.getByRole( 'button', { name: 'Color: Pale cyan blue' } )
.click( { force: true } );

await editor.saveSiteEditorEntities();
// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
await page
.getByRole( 'button', { name: 'Close Settings' } )
.click( { force: true } );
await editor.canvas.click( 'body' );

// Focus the navigation block inside the header template part.
await editor.canvas
.getByRole( 'document', { name: 'Block: header' } )
.focus();
await editor.canvas
.getByRole( 'document', { name: 'Block: Navigation' } )
.click();
Expand All @@ -301,8 +264,9 @@ test.describe( 'Navigation colors', () => {

await colorControl.testEditorColors( expectedNavigationColors );

// And finally we check the colors of the links on the frontend.
await page.goto( '/' );
// Check the colors of the links on the frontend.
const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await colorControl.testFrontendColors( expectedNavigationColors );
} );
Expand Down Expand Up @@ -351,18 +315,11 @@ test.describe( 'Navigation colors', () => {
.getByRole( 'button', { name: 'Color: Luminous vivid amber' } )
.click( { force: true } );

await editor.saveSiteEditorEntities();
// Close the sidebar so our selectors don't accidentally select the sidebar links instead of the editor canvas.
await page
.getByRole( 'button', { name: 'Close Settings' } )
.click( { force: true } );

await editor.canvas.click( 'body' );

// Focus the navigation block inside the header template part.
await editor.canvas
.getByRole( 'document', { name: 'Block: header' } )
.focus();
await editor.canvas
.getByRole( 'document', { name: 'Block: Navigation' } )
.click();
Expand All @@ -376,8 +333,9 @@ test.describe( 'Navigation colors', () => {

await colorControl.testEditorColors( expectedNavigationColors );

// And finally we check the colors of the links on the frontend.
await page.goto( '/' );
// Check the colors of the links on the frontend.
const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await colorControl.testFrontendColors( expectedNavigationColors );
} );
Expand Down Expand Up @@ -469,6 +427,9 @@ class ColorControl {
'background-color',
submenuBackgroundColor
);

// Set the mobile view option back to mobile
await this.page.getByRole( 'radio', { name: 'Mobile' } ).click();
}

async testFrontendColors( {
Expand Down