Improve Navigation block tests

[getdave]

The current Nav block tests have grown overly complex and are flaky. These types of tests should be optimised for testing the critical paths to provide confidence that these features continue to work.

Let's rework the tests as follows to provide greater utilility:

• Migrate to Playwright - provides a more stable foundation.
• Rewrite to focus on critical user journeys only.

We should end up with a small set of tests which are:

• reliable
• provide confidence
• run (relatively) quickly
• are easy to extend/augment

User stories

First test that we can add the block

• As a user I want to create an empty menu to replace an existing menu in a navigation block
• As a user I want to build my navigation manually using internal links (we should test external links on the link component instead of the navigation block suite)
• As a user I want to insert blocks that are not navigation links in the navigation (one test per possible block)

Submenus

• As a user I want to create submenus using the navigation block #45201
• As a user I want to change how visitors interact with the submenus

Tests

• change how submenus open

• As a user I want to style my submenus different than the menu they're in

Tests

• set submenu specific typography style
• set submenu specific background color

Page creation

• As a user I want to create pages from the navigation block if they don’t exist.

Multiple menu management

• Create the user stories because we have none yet

Patterns

• As a user I want demo navigation items in a pattern, even if I have existing menus
• As a user I want to be able to modify demo content in a pattern

Permissions

• As a user I want to see a warning if I don’t have permission to create a navigation menu
• As a user I want to see a warning if I don’t have permission to edit a navigation menu
• As a user I don’t want to see the delete button if I don’t have permission to delete a navigation menu

Fallbacks

• As a user I want the navigation block to fallback to the best possible default #45199

Overlay

• As a user I want to set up an overlay variant of the navigation block
• As a user I want to change the colors of the submenu and overlay

Loading states

• As a user I don’t want to see loading indicator for demo content in the navigation block
• As a user I want to see loading indicator when menu data is unavailable yet
• As a user I want to see a warning if the menu referenced by a navigation block is not available

Color handling

• [FSE]: Global Styles link color setting overrides color set for Navigation items Automattic/themes#6195

Themes

• As a theme I want the navigation block to render an accessible aria label
• As a theme I want the navigation view script to only load if there is a rendered navigation block on screen

Developer stories:

• As a developer I want to set the nesting level of the navigation block (maybe a unit test?)
• As a plugin developer I want my custom placehol

[getdave]

@MaggieCabrera How do you feel about the state of this now? Do we need to update the Issue?

[getdave]

@MaggieCabrera Did we complete the migration to Playwright? Do you recall how many tests were still needing to be written.

My gut instinct is that as things stand we have a decent amount of coverage and we can add more if/when needed to:

• cover high level workflows (not low level minutiae)
• specific coverage for hard to test flows that are open to regressions

What do you think?

Also welcome opinions from other contributors - may be @scruffian @draganescu?

[MaggieCabrera]

There are no puppeteer navigation tests, but I don't think we wrote all the tests we initially decided to write. We didn't cover patterns, permissions, or the ones here labeled under "themes." We did include more that are not here, and we covered color switching on the overlay way more thoroughly than we mentioned on this issue, just off the top of my head.

[scruffian]

I think we should close this and when we see a need for more tests create an issue for them specifically.