Skip to content

Commit

Permalink
Use steps to break up test
Browse files Browse the repository at this point in the history
  • Loading branch information
@getdave
getdave committed Dec 13, 2023
1 parent bcbe5ac commit 76e3ec5
Showing 1 changed file with 114 additions and 108 deletions.
222 changes: 114 additions & 108 deletions test/e2e/specs/site-editor/navigation-editor.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,131 +19,137 @@ test.describe( 'Editing Navigation Menus', () => {
requestUtils,
editor,
} ) => {
// We could Navigate directly to editing the Navigation Menu but we intentionally do not do this.
//
// Why? To provide coverage for a bug that caused the Navigation Editor behaviours to fail
// only when navigating through the editor screens (rather than going directly to the editor by URL).
// See: https://github.com/WordPress/gutenberg/pull/56856.
//
// Example (what we could do):
// await admin.visitSiteEditor( {
// postId: createdMenu?.id,
// postType: 'wp_navigation',
// } );
//
await admin.visitSiteEditor();

// create a Navigation Menu called "Test Menu" using the REST API helpers
const createdMenu = await requestUtils.createNavigationMenu( {
title: 'Primary Menu',
content:
'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
} );

// Add another so we get a list of Navigation menus in the editor.
await requestUtils.createNavigationMenu( {
title: 'Another One',
content:
'<!-- wp:navigation-link {"label":"Another Item","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
} );
await test.step( 'Manually browse to focus mode for a Navigation Menu', async () => {
// We could Navigate directly to editing the Navigation Menu but we intentionally do not do this.
//
// Why? To provide coverage for a bug that caused the Navigation Editor behaviours to fail
// only when navigating through the editor screens (rather than going directly to the editor by URL).
// See: https://github.com/WordPress/gutenberg/pull/56856.
//
// Example (what we could do):
// await admin.visitSiteEditor( {
// postId: createdMenu?.id,
// postType: 'wp_navigation',
// } );
//
await admin.visitSiteEditor();

// create a Navigation Menu called "Test Menu" using the REST API helpers
const createdMenu = await requestUtils.createNavigationMenu( {
title: 'Primary Menu',
content:
'<!-- wp:navigation-link {"label":"WordPress","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
} );

const editorSidebar = page.getByRole( 'region', {
name: 'Navigation',
} );
// Add another so we get a list of Navigation menus in the editor.
await requestUtils.createNavigationMenu( {
title: 'Another One',
content:
'<!-- wp:navigation-link {"label":"Another Item","type":"custom","url":"http://www.wordpress.org/","kind":"custom"} /-->',
} );

await editorSidebar
.getByRole( 'button', {
const editorSidebar = page.getByRole( 'region', {
name: 'Navigation',
} )
.click();
} );

// Wait for list of Navigations to appear.
await expect(
await editorSidebar
.getByRole( 'button', {
name: 'Navigation',
} )
.click();

// Wait for list of Navigations to appear.
await expect(
editorSidebar.getByRole( 'heading', {
name: 'Navigation',
level: 1,
} )
).toBeVisible();

await editorSidebar
.getByRole( 'button', {
name: 'Primary Menu',
} )
.click();

await expect( page ).toHaveURL(
`wp-admin/site-editor.php?postId=${ createdMenu?.id }&postType=wp_navigation`
);

// Wait for list of Navigations to appear.
editorSidebar.getByRole( 'heading', {
name: 'Navigation',
level: 1,
} )
).toBeVisible();

await editorSidebar
.getByRole( 'button', {
name: 'Primary Menu',
} )
.click();

await expect( page ).toHaveURL(
`wp-admin/site-editor.php?postId=${ createdMenu?.id }&postType=wp_navigation`
);
level: 1,
} );

// Wait for list of Navigations to appear.
editorSidebar.getByRole( 'heading', {
name: 'Primary Menu',
level: 1,
// Switch to editing the Navigation Menu
await editorSidebar
.getByRole( 'link', {
name: 'Edit',
} )
.click();
} );

// Switch to editing the Navigation Menu
await editorSidebar
.getByRole( 'link', {
name: 'Edit',
} )
.click();

// Open List View.
await pageUtils.pressKeys( 'access+o' );

const listView = page
.getByRole( 'region', {
name: 'List View',
} )
.getByRole( 'treegrid', {
name: 'Block navigation structure',
} );
await test.step( 'Check Navigation block is present and locked', async () => {
// Open List View.
await pageUtils.pressKeys( 'access+o' );

await expect( listView ).toBeVisible();

const navBlockNode = listView.getByRole( 'link', {
name: 'Navigation (locked)',
exact: true,
} );
const listView = page
.getByRole( 'region', {
name: 'List View',
} )
.getByRole( 'treegrid', {
name: 'Block navigation structure',
} );

// The Navigation block should be present and locked.
await expect( navBlockNode ).toBeVisible();
await expect( listView ).toBeVisible();

// The block should have no options menu.
await expect(
listView.getByRole( 'button', {
name: 'Options for Navigation',
const navBlockNode = listView.getByRole( 'link', {
name: 'Navigation (locked)',
exact: true,
} )
).toBeHidden();
} );

// Select the Navigation block.
await navBlockNode.click();
// The Navigation block should be present and locked.
await expect( navBlockNode ).toBeVisible();

// Open the document settings sidebar
await editor.openDocumentSettingsSidebar();
// The block should have no options menu.
await expect(
listView.getByRole( 'button', {
name: 'Options for Navigation',
exact: true,
} )
).toBeHidden();

const sidebar = page.getByRole( 'region', {
name: 'Editor settings',
// Select the Navigation block.
await navBlockNode.click();
} );

await expect( sidebar ).toBeVisible();

// Check that the `Menu` control is visible.
// This is effectively the contents of the "List View" tab.
await expect(
sidebar.getByRole( 'heading', { name: 'Menu', exact: true } )
).toBeVisible();

// Check the standard tabs are not present.
await expect(
sidebar.getByRole( 'tab', { name: 'List View' } )
).toBeHidden();
await expect(
sidebar.getByRole( 'tab', { name: 'Settings' } )
).toBeHidden();
await expect(
sidebar.getByRole( 'tab', { name: 'Styles' } )
).toBeHidden();
await test.step( 'Check Navigation block has no controls other than editable list view', async () => {
// Open the document settings sidebar
await editor.openDocumentSettingsSidebar();

const sidebar = page.getByRole( 'region', {
name: 'Editor settings',
} );

await expect( sidebar ).toBeVisible();

// Check that the `Menu` control is visible.
// This is effectively the contents of the "List View" tab.
await expect(
sidebar.getByRole( 'heading', { name: 'Menu', exact: true } )
).toBeVisible();

// Check the standard tabs are not present.
await expect(
sidebar.getByRole( 'tab', { name: 'List View' } )
).toBeHidden();
await expect(
sidebar.getByRole( 'tab', { name: 'Settings' } )
).toBeHidden();
await expect(
sidebar.getByRole( 'tab', { name: 'Styles' } )
).toBeHidden();
} );
} );
} );

0 comments on commit 76e3ec5

Please sign in to comment.