Fix flaky test in tabs.spec.js

[alecgeatches]

What?

Fixes the adds and activates a new tab when pressing Enter at the end of a tab label tabs test to pass reliably in CI.

Why?

See #80106. The test has been flaky including 10 trunk failures in the last week. I've personally also seeing very reliable failures in other PRs (#79685), but because of the test flakiness it's hard to tell if it's a PR problem or not.

How?

The test previously ran this code to check for tab panels:

const panels = editor.canvas.getByRole( 'document', {
    name: 'Block: Tab Panel',
} );

await expect( panels ).toHaveCount( 3 );
await expect( panels.nth( 2 ) ).toBeVisible();

This was probably not working as expected. getByRole() by default only returns visible elements:

includeHidden

Option that controls whether hidden elements are matched. By default, only non-hidden elements, as defined by ARIA, are matched by role selector.

That means toHaveCount( 3 ) was expecting 3 visible tab sections at the same time, which doesn't make sense for the test, given that only 1 should be visible. Instead, here's what I think was happening. Visually, after the 3rd tab is added in the test, a direct Block: Tab Panel document query actually results in 4 results (including non-visible items):

tab-panel-selector.mov

This includes the Block: Tab Panels parent item and each of the three child tabs. In local testing with getByRole(), the test was actually returning 2 panels, the newly created tab panel and the parent panel, and none of the hidden panels. When the test was "failing", it was properly reporting the correct number (2) of matching panels. I think in CI, running slower, there's a brief window when both Tab 2 and the new third tab are both present in the DOM before Tab 2 is hidden. The briefly still-visible Tab 2, the new tab, plus the parent DOM item, were adding to 3 incidentally.

To fix it, first use exact: true to avoid matching the parent "Block: Tab Panels" DOM item, and then explicitly includeHidden: true so the test assertion makes sense. Otherwise, we're only querying visible panels. Now we can correctly assert the 3 final panels exist, excluding the parent item, and that the last is visible.

Testing Instructions

See CI test passes.

[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: alecgeatches <alecgeatches@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>

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

[alecgeatches]

@t-hamano I've been seeing a reliable tab test failure and flakiness (#80106), here's a PR to address that.

[github-actions]

Size Change: 0 B

Total Size: 7.72 MB

_{compressed-size-action}

[github-actions]

Flaky tests detected in 842f67e.
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/29522730896
📝 Reported issues:

• [Flaky Test] Should insert content using the global inserter #78924 in /test/e2e/specs/widgets/editing-widgets.spec.js

[Mamaduka]

Also fixed this in #80192, but makes sense to land separately to resolve flaky tests.