Skip to content

E2E: Add test coverage for Navigation block fallback behavior #69137

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

Open
himanshupathak95 wants to merge 9 commits into
base: trunk
Choose a base branch
from
Open

E2E: Add test coverage for Navigation block fallback behavior #69137

Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
2fdf625
E2E: Add test coverage for Navigation block fallback behavior
himanshupathak95 Feb 11, 2025
ff84508
E2E: Update page list fallback behaviour for frontend
himanshupathak95 May 23, 2025
ce026a0
E2E: Improve fallback behaviour for the first non-empty menu
himanshupathak95 May 23, 2025
a8a593f
E2E: Test fallback to page list when all menus are empty
himanshupathak95 May 23, 2025
9106f32
E2E: Improve test title
himanshupathak95 May 23, 2025
a05c084
E2E: Improve test group name
himanshupathak95 May 30, 2025
3ac6ab4
E2E: Test page list render on the frontend when no menus exist
himanshupathak95 Jun 20, 2025
4821e51
E2E: Test rendering first non-empty menu on the frontend
himanshupathak95 Jun 20, 2025
1e79f92
E2E: Test skipping empty menus and rendering the next available menu
himanshupathak95 Jun 20, 2025
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
94 changes: 94 additions & 0 deletions test/e2e/specs/editor/blocks/navigation.spec.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -199,6 +199,100 @@
} );
} );

test.describe( 'Fronted fallback behavior', () => {
test( 'should render a Page List on the frontend when no menus exist', async ( {
admin,
editor,
page,
} ) => {
await admin.createNewPost();
await editor.insertBlock( { name: 'core/navigation' } );

const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await expect( page.locator( '.wp-block-page-list' ) ).toBeVisible();

Check failure on line 214 in test/e2e/specs/editor/blocks/navigation.spec.js

View workflow job for this annotation

GitHub Actions / Playwright - 2

[chromium] › test/e2e/specs/editor/blocks/navigation.spec.js:203:3 › Navigation block › Fronted fallback behavior › should render a Page List on the frontend when no menus exist 

  1) [chromium] › test/e2e/specs/editor/blocks/navigation.spec.js:203:3 › Navigation block › Fronted fallback behavior › should render a Page List on the frontend when no menus exist 
    Error: Timed out 5000ms waiting for expect(locator).toBeVisible()

    Locator: locator('.wp-block-page-list')
    Expected: visible
    Received: <element(s) not found>
    Call log:
      - expect.toBeVisible with timeout 5000ms
      - waiting for locator('.wp-block-page-list')


      212 | 			await page.goto( `/?p=${ postId }` );
      213 |
    > 214 | 			await expect( page.locator( '.wp-block-page-list' ) ).toBeVisible();
          | 			                                                      ^
      215 | 			await expect(
      216 | 				page.getByRole( 'link', { name: 'Cat', exact: true } )
      217 | 			).toBeVisible();
        at /home/runner/work/gutenberg/gutenberg/test/e2e/specs/editor/blocks/navigation.spec.js:214:58
await expect(
page.getByRole( 'link', { name: 'Cat', exact: true } )
).toBeVisible();
await expect(
page.getByRole( 'link', { name: 'Dog', exact: true } )
).toBeVisible();
await expect(
page.getByRole( 'link', { name: 'Walrus', exact: true } )
).toBeVisible();
} );

test( 'should render the first non-empty menu on the frontend', async ( {
admin,
editor,
page,
requestUtils,
} ) => {
// The fallback should pick "Menu A" because it comes first alphabetically.
await requestUtils.createNavigationMenu( {
title: 'Menu B',
content:
'<!-- wp:navigation-link {"label":"Dog","url":"#dog"} /-->',
} );
await requestUtils.createNavigationMenu( {
title: 'Menu A',
content:
'<!-- wp:navigation-link {"label":"Cat","url":"#cat"} /-->',
} );

await admin.createNewPost();
await editor.insertBlock( { name: 'core/navigation' } );

const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await expect(
page.getByRole( 'link', {
name: 'Cat',
exact: true,
} )
).toBeVisible();
await expect(
page.getByRole( 'link', {
name: 'Dog',
exact: true,
} )
).toBeHidden();
} );

test( 'should skip empty menus and render the next available menu', async ( {
admin,
editor,
page,
requestUtils,
} ) => {
// The fallback should skip empty 'Menu A' and render non-empty 'Menu B'.
await requestUtils.createNavigationMenu( {
title: 'Menu A',
content: '',
} );
await requestUtils.createNavigationMenu( {
title: 'Menu B',
content:
'<!-- wp:navigation-link {"label":"Dog","url":"#dog"} /-->',
} );

await admin.createNewPost();
await editor.insertBlock( { name: 'core/navigation' } );

const postId = await editor.publishPost();
await page.goto( `/?p=${ postId }` );

await expect(
page.getByRole( 'link', {
name: 'Dog',
exact: true,
} )
).toBeVisible();
} );
} );

test.describe( 'As a user I want to create submenus using the navigation block', () => {
test( 'create a submenu', async ( {
admin,
Expand Down
Loading