Tabs: overhaul unit tests

[ciampo]

What?

Follow-up to #66097

Rewrite the suite of tests for the Tabs component

Why?

The previous suite of tests was incomplete, flaky, and included many repetitions, and inaccurate descriptions.

The new suite:

• has more tests, especially on areas like initial tab selection, keyboard behavior, tabs becoming disabled, and tabs being removed from the document;
• is more robust, thanks to explicit assertions that make sure that the underlying ariakit component has fully initialized;
• is better organized, with a more clear subdivision of the tests and accurate descriptions
• has better assertions, following the RTL mantra "test from the point of view of the user"

How?

• I rewrote existing tests in a more robust and idiomatic way
• I deleted / grouped duplicate tests
• I added may tests, inspired from the changes applied in Tabs: remove custom logic #66097

Testing Instructions

• Read and review the test code
• Make sure the new suite of tests passes all checks reliably

This PR doesn't include any runtime changes.

(apologies for the size of the PR, but I couldn't really find a good way to split it into smaller pieces)

Screenshots or screencast

  Tabs
    Adherence to spec and basic behavior
      ✓ should apply the correct roles, semantics and attributes (81 ms)
      ✓ should associate each `tab` with the correct `tabpanel`, even if they are not rendered in the same order (420 ms)
      ✓ should apply the tab's `className` to the tab button (34 ms)
    pointer interactions
      ✓ should select a tab when clicked (325 ms)
      ✓ should not select a disabled tab when clicked (152 ms)
    initial tab selection
      when a selected tab id is not specified
        when left `undefined` [Uncontrolled]
          ✓ should choose the first tab as selected (141 ms)
          ✓ should choose the first non-disabled tab if the first tab is disabled (124 ms)
        when `null` [Controlled]
          ✓ should not have a selected tab nor show any tabpanels, make the tablist tabbable and still allow selecting tabs (247 ms)
      when a selected tab id is specified
        through the `defaultTabId` prop [Uncontrolled]
          ✓ should select the initial tab matching the `defaultTabId` prop (121 ms)
          ✓ should select the initial tab matching the `defaultTabId` prop even if the tab is disabled (110 ms)
          ✓ should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab when `defaultTabId` prop does not match any known tab (237 ms)
          ✓ should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab, even when disabled, when `defaultTabId` prop does not match any known tab (213 ms)
          ✓ should ignore any changes to the `defaultTabId` prop after the first render (39 ms)
        through the `selectedTabId` prop [Controlled]
          when the `selectedTabId` matches an existing tab
            ✓ should choose the initial tab matching the `selectedTabId` (128 ms)
            ✓ should choose the initial tab matching the `selectedTabId` even if a `defaultTabId` is passed (117 ms)
            ✓ should choose the initial tab matching the `selectedTabId` even if the tab is disabled (121 ms)
          when the `selectedTabId` doesn't match an existing tab
            ✓ should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab (241 ms)
            ✓ should not have a selected tab nor show any tabpanels, but allow tabbing to the first tab even when disabled (236 ms)
    keyboard interactions
      [`Uncontrolled`]
        ✓ should handle the tablist as one tab stop (246 ms)
        ✓ should not focus the tabpanel container when its `focusable` property is set to `false` (238 ms)
        ✓ should select tabs in the tablist when using the left and right arrow keys by default (automatic tab activation) (425 ms)
        ✓ should not automatically select tabs in the tablist when pressing the left and right arrow keys if the `selectOnMove` prop is set to `false` (manual tab activation) (296 ms)
        ✓ should not select tabs in the tablist when using the up and down arrow keys, unless the `orientation` prop is set to `vertical` (541 ms)
        ✓ should loop tab focus at the end of the tablist when using arrow keys (370 ms)
        ✓ should swap the left and right arrow keys when selecting tabs if the writing direction is set to RTL (492 ms)
        ✓ should focus tabs in the tablist even if disabled (276 ms)
      [`Controlled`]
        ✓ should handle the tablist as one tab stop (227 ms)
        ✓ should not focus the tabpanel container when its `focusable` property is set to `false` (245 ms)
        ✓ should select tabs in the tablist when using the left and right arrow keys by default (automatic tab activation) (408 ms)
        ✓ should not automatically select tabs in the tablist when pressing the left and right arrow keys if the `selectOnMove` prop is set to `false` (manual tab activation) (357 ms)
        ✓ should not select tabs in the tablist when using the up and down arrow keys, unless the `orientation` prop is set to `vertical` (530 ms)
        ✓ should loop tab focus at the end of the tablist when using arrow keys (287 ms)
        ✓ should swap the left and right arrow keys when selecting tabs if the writing direction is set to RTL (424 ms)
        ✓ should focus tabs in the tablist even if disabled (307 ms)
      When `selectedId` is changed by the controlling component [Controlled]
        and `selectOnMove` is true
          ✓ should continue to handle arrow key navigation properly (233 ms)
          ✓ should focus the correct tab when tabbing out and back into the tablist (446 ms)
        and `selectOnMove` is false
          ✓ should continue to handle arrow key navigation properly (237 ms)
          ✓ should focus the correct tab when tabbing out and back into the tablist (435 ms)
    miscellaneous runtime changes
      removing a tab
        with no explicitly set initial tab
          ✓ should not select a new tab when the selected tab is removed (170 ms)
        when using the `defaultTabId` prop [Uncontrolled]
          ✓ should not select a new tab when the selected tab is removed (53 ms)
          ✓ should not select the tab matching the `defaultTabId` prop as a fallback when the selected tab is removed (171 ms)
        when using the `selectedTabId` prop [Controlled]
          ✓ should not select a new tab when the selected tab is removed (48 ms)
          ✓ should not select the tab matching the `selectedTabId` prop as a fallback when the selected tab is removed (147 ms)
      adding a tab
        when using the `defaultTabId` prop [Uncontrolled]
          ✓ should select a newly added tab if it matches the `defaultTabId` prop (39 ms)
        when using the `selectedTabId` prop [Controlled]
          ✓ should select a newly added tab if it matches the `selectedTabId` prop (30 ms)
      a tab becomes disabled
        when using the `defaultTabId` prop [Uncontrolled]
          ✓ should keep the initial tab matching the `defaultTabId` prop as selected even if it becomes disabled (44 ms)
          ✓ should keep the current tab selected by the user as selected even if it becomes disabled (157 ms)
        when using the `selectedTabId` prop [Controlled]
          ✓ should keep the initial tab matching the `selectedTabId` prop as selected even if it becomes disabled (45 ms)
          ✓ should keep the current tab selected by the user as selected even if it becomes disabled (208 ms)

Test Suites: 1 passed, 1 total
Tests:       49 passed, 49 total
Snapshots:   0 total

[github-actions]

Flaky tests detected in 7cd9c71.
Some tests passed with failed attempts. The failures may not be related to this commit but are still reported for visibility. See the documentation for more information.

🔍 Workflow run URL: https://github.com/WordPress/gutenberg/actions/runs/12073525069
📝 Reported issues:

• [Flaky Test] submenu click on the arrow interactions #61884 in /test/e2e/specs/editor/blocks/navigation-frontend-interactivity.spec.js

[github-actions]

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: ciampo <[email protected]>
Co-authored-by: tyxla <[email protected]>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

[tyxla]

Thank you for reorganizing them, I dig the new organization 👏

Tests look great and are more readable and thorough than before.

Took me a while to go through them but I appreciate the tons of improvements 💯

🚀

[ciampo]

Thank you for reviewing this, @tyxla — especially given the size of the PR 🙏