From 3d702833c48037f5f424cc1e1d1305eafe3561b4 Mon Sep 17 00:00:00 2001 From: Maggie Date: Thu, 16 Feb 2023 01:48:24 +0800 Subject: [PATCH] Navigation block: e2e code quality fixes (#48071) * code quality fixes * add no pause rule * Update .eslintrc.js Co-authored-by: Kai Hao * Update test/e2e/specs/editor/blocks/navigation.spec.js Co-authored-by: Kai Hao * Update test/e2e/specs/editor/blocks/navigation.spec.js Co-authored-by: Kai Hao * Update test/e2e/specs/editor/blocks/navigation.spec.js Co-authored-by: Kai Hao * Update test/e2e/specs/editor/blocks/navigation.spec.js Co-authored-by: Kai Hao * remove type from docs * add page as an argument --------- Co-authored-by: Kai Hao --- .eslintrc.js | 1 + .../src/request-utils/menus.ts | 36 +++++------ .../specs/editor/blocks/navigation.spec.js | 64 +++++++------------ 3 files changed, 42 insertions(+), 59 deletions(-) diff --git a/.eslintrc.js b/.eslintrc.js index 11e5eb394dd39..70926c8a9c541 100644 --- a/.eslintrc.js +++ b/.eslintrc.js @@ -392,6 +392,7 @@ module.exports = { rules: { '@wordpress/no-global-active-element': 'off', '@wordpress/no-global-get-selection': 'off', + 'playwright/no-page-pause': 'error', 'no-restricted-syntax': [ 'error', { diff --git a/packages/e2e-test-utils-playwright/src/request-utils/menus.ts b/packages/e2e-test-utils-playwright/src/request-utils/menus.ts index e5da27e032c79..4058662a4d9ee 100644 --- a/packages/e2e-test-utils-playwright/src/request-utils/menus.ts +++ b/packages/e2e-test-utils-playwright/src/request-utils/menus.ts @@ -16,8 +16,8 @@ export interface NavigationMenu { /** * Create a classic menu * - * @param {string} name Menu name. - * @return {string} Menu content. + * @param name Menu name. + * @return Menu content. */ export async function createClassicMenu( this: RequestUtils, name: string ) { const menuItems = [ @@ -37,20 +37,18 @@ export async function createClassicMenu( this: RequestUtils, name: string ) { }, } ); - if ( menuItems?.length ) { - await this.batchRest( - menuItems.map( ( menuItem ) => ( { - method: 'POST', - path: `/wp/v2/menu-items`, - body: { - menus: menu.id, - object_id: undefined, - ...menuItem, - parent: undefined, - }, - } ) ) - ); - } + await this.batchRest( + menuItems.map( ( menuItem ) => ( { + method: 'POST', + path: `/wp/v2/menu-items`, + body: { + menus: menu.id, + object_id: undefined, + ...menuItem, + parent: undefined, + }, + } ) ) + ); return menu; } @@ -58,7 +56,7 @@ export async function createClassicMenu( this: RequestUtils, name: string ) { /** * Create a navigation menu * - * @param {Object} menuData navigation menu post data. + * @param menuData navigation menu post data. * @return {string} Menu content. */ export async function createNavigationMenu( @@ -84,7 +82,7 @@ export async function deleteAllMenus( this: RequestUtils ) { path: `/wp/v2/navigation/`, } ); - if ( navMenus?.length ) { + if ( navMenus.length ) { await this.batchRest( navMenus.map( ( menu ) => ( { method: 'DELETE', @@ -97,7 +95,7 @@ export async function deleteAllMenus( this: RequestUtils ) { path: `/wp/v2/menus/`, } ); - if ( classicMenus?.length ) { + if ( classicMenus.length ) { await this.batchRest( classicMenus.map( ( menu ) => ( { method: 'DELETE', diff --git a/test/e2e/specs/editor/blocks/navigation.spec.js b/test/e2e/specs/editor/blocks/navigation.spec.js index 57ef99cbc09d6..b6e0b832eab5a 100644 --- a/test/e2e/specs/editor/blocks/navigation.spec.js +++ b/test/e2e/specs/editor/blocks/navigation.spec.js @@ -3,12 +3,6 @@ */ const { test, expect } = require( '@wordpress/e2e-test-utils-playwright' ); -test.use( { - navBlockUtils: async ( { editor, page, requestUtils }, use ) => { - await use( new NavigationBlockUtils( { editor, page, requestUtils } ) ); - }, -} ); - test.describe( 'As a user I want the navigation block to fallback to the best possible default', () => { @@ -66,7 +60,6 @@ test.describe( editor, page, requestUtils, - navBlockUtils, } ) => { await admin.createNewPost(); const createdMenu = await requestUtils.createNavigationMenu( { @@ -78,7 +71,11 @@ test.describe( await editor.insertBlock( { name: 'core/navigation' } ); // Check the block in the canvas. - await navBlockUtils.selectNavigationItemOnCanvas( 'WordPress' ); + await expect( + editor.canvas.locator( + `role=textbox[name="Navigation link text"i] >> text="WordPress"` + ) + ).toBeVisible(); // Check the markup of the block is correct. await editor.publishPost(); @@ -91,14 +88,19 @@ test.describe( await page.locator( 'role=button[name="Close panel"i]' ).click(); // Check the block in the frontend. - await navBlockUtils.selectNavigationItemOnFrontend( 'WordPress' ); + await page.goto( '/' ); + await expect( + page.locator( + `role=navigation >> role=link[name="WordPress"i]` + ) + ).toBeVisible(); } ); test( 'default to the only existing classic menu if there are no block menus', async ( { admin, + page, editor, requestUtils, - navBlockUtils, } ) => { // Create a classic menu. await requestUtils.createClassicMenu( 'Test Classic 1' ); @@ -113,42 +115,24 @@ test.describe( ] ); // Check the block in the canvas. - await editor.page.pause(); - await navBlockUtils.selectNavigationItemOnCanvas( 'Custom link' ); + await expect( + editor.canvas.locator( + `role=textbox[name="Navigation link text"i] >> text="Custom link"` + ) + ).toBeVisible(); // Check the block in the frontend. - await navBlockUtils.selectNavigationItemOnFrontend( 'Custom link' ); - await editor.page.pause(); + await page.goto( '/' ); + + await expect( + page.locator( + `role=navigation >> role=link[name="Custom link"i]` + ) + ).toBeVisible(); } ); } ); -class NavigationBlockUtils { - constructor( { editor, page, requestUtils } ) { - this.editor = editor; - this.page = page; - this.requestUtils = requestUtils; - } - - async selectNavigationItemOnCanvas( name ) { - await expect( - this.editor.canvas.locator( - `role=textbox[name="Navigation link text"i] >> text="${ name }"` - ) - ).toBeVisible(); - } - - async selectNavigationItemOnFrontend( name ) { - await this.page.goto( '/' ); - await this.editor.page.pause(); - await expect( - this.page.locator( - `role=navigation >> role=link[name="${ name }"i]` - ) - ).toBeVisible(); - } -} - test.describe( 'Navigation block', () => { test.describe( 'As a user I want to see a warning if the menu referenced by a navigation block is not available',