Build: Wait for composed Storybooks to load before continuing E2E test by ghengeveld · Pull Request #33278 · storybookjs/storybook

ghengeveld · 2025-12-04T12:32:45Z

Closes #

What I did

The composition E2E test was timing out because the Badge component could not be clicked. This seemed to be caused by it taking longer than usual to load the external Storybook. I've added a check with a 15s timeout to wait for the Storybook to load before making further assertions.

Quotes were changed from single to double, consistent with other TS files in the monorepo. My linter insisted and I think it's doing the right thing.

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

stories
unit tests
integration tests
end-to-end tests

Manual testing

This section is mandatory for all contributions. If you believe no manual test is necessary, please state so explicitly. Thanks!

Documentation

Add or update documentation reflecting your changes
If you are deprecating/removing a feature, make sure to update
MIGRATION.MD

Checklist for Maintainers

When this PR is ready for testing, make sure to add ci:normal, ci:merged or ci:daily GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found in code/lib/cli-storybook/src/sandbox-templates.ts
Make sure this PR contains one of the labels below:
Available labels
- bug: Internal changes that fixes incorrect behavior.
- maintenance: User-facing maintenance tasks.
- dependencies: Upgrading (sometimes downgrading) dependencies.
- build: Internal-facing build tooling & test updates. Will not show up in release changelog.
- cleanup: Minor cleanup style change. Will not show up in release changelog.
- documentation: Documentation only changes. Will not show up in release changelog.
- feature request: Introducing a new feature.
- BREAKING CHANGE: Changes that break compatibility in some way with current major version.
- other: Changes that don't fit in the above categories.

🦋 Canary release

This PR does not have a canary release associated. You can request a canary release of this pull request by mentioning the @storybookjs/core team here.

core team members can create a canary release here or locally with gh workflow run --repo storybookjs/storybook publish.yml --field pr=<PR_NUMBER>

nx-cloud · 2025-12-04T12:33:18Z

View your CI Pipeline Execution ↗ for commit 81f5768

Command	Status	Duration	Result
`nx run-many -t compile --parallel=3`	✅ Succeeded	58s	View ↗

☁️ Nx Cloud last updated this comment at 2025-12-04 12:51:52 UTC

coderabbitai · 2025-12-04T12:36:07Z

📝 Walkthrough

Walkthrough

Two E2E test files in the composition test suite have been updated with quote normalization (double to single quotes), explicit visibility checks for badge elements with timeouts, and adjusted selectors. No functional logic or exported APIs were modified.

Changes

Cohort / File(s)	Summary
Test quote normalization and badge visibility checks `test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts` `test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts`	Standardized string literals from double to single quotes across imports, constants, and test descriptions. Added explicit 15-second timeout visibility checks for Storybook badge elements (8.0.0 and 7.6.18 versions). Updated selectors and text-based queries to single-quoted format. Test control flow and overall structure preserved.

Estimated code review effort

🎯 2 (Simple) | ⏱️ ~10 minutes

String quote normalization is cosmetic and repetitive across both files
Visibility checks are straightforward additions with consistent pattern application
No complex logic changes or functional modifications
Both files follow identical change patterns, reducing review diversity

✨ Finishing touches

📝 Generate docstrings

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between 7bd55eb and 81f5768.

📒 Files selected for processing (2)

test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts (4 hunks)
test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts (4 hunks)

🧰 Additional context used

📓 Path-based instructions (3)

**/*.{test,spec}.{ts,tsx}

📄 CodeRabbit inference engine (.cursorrules)

**/*.{test,spec}.{ts,tsx}: Test files should follow the naming pattern *.test.ts, *.test.tsx, *.spec.ts, or *.spec.tsx
Follow the spy mocking rules defined in .cursor/rules/spy-mocking.mdc for consistent mocking patterns with Vitest

Files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

**/*.{js,jsx,json,html,ts,tsx,mjs}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Use ESLint and Prettier configurations that are enforced in the codebase

Files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

**/*.{ts,tsx}

📄 CodeRabbit inference engine (.github/copilot-instructions.md)

Enable TypeScript strict mode

Files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

🧠 Learnings (13)

📚 Learning: 2025-11-05T09:38:47.712Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/Select/Select.tsx:200-204
Timestamp: 2025-11-05T09:38:47.712Z
Learning: Repo: storybookjs/storybook — Guidance: Until Storybook 11 is released, do not suggest using React.useId anywhere (e.g., in code/core/src/components/components/Select/Select.tsx) to maintain compatibility with React 17 runtimes. Prefer advising: accept a caller-provided props.id and, if needed, generate a client-only fallback id to minimize SSR hydration issues — but avoid useId. Resume prompting for useId after Storybook 11.

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Document complex mock behaviors in Vitest tests

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid inline mock implementations within test cases in Vitest tests

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mocking only a subset of required dependencies in Vitest tests

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Applies to code/**/*.{test,spec}.{ts,tsx,js,jsx} : Write meaningful unit tests that actually import and call the functions being tested

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-10-01T15:24:01.060Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32594
File: code/core/src/components/components/Popover/WithPopover.tsx:7-9
Timestamp: 2025-10-01T15:24:01.060Z
Learning: In the Storybook repository, "react-aria-components/patched-dist/*" (e.g., "react-aria-components/patched-dist/Dialog", "react-aria-components/patched-dist/Popover", "react-aria-components/patched-dist/Tooltip") are valid import paths created by a patch applied to the react-aria-components package. These imports should not be flagged as broken or invalid until a maintainer explicitly states they are no longer acceptable.

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Keep mock implementations simple and focused in Vitest tests

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-28T14:50:24.889Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .github/copilot-instructions.md:0-0
Timestamp: 2025-11-28T14:50:24.889Z
Learning: Follow existing patterns and conventions in the Storybook codebase

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-05T09:37:25.920Z

Learnt from: Sidnioulz
Repo: storybookjs/storybook PR: 32458
File: code/core/src/components/components/tooltip/WithTooltip.tsx:54-96
Timestamp: 2025-11-05T09:37:25.920Z
Learning: Repo: storybookjs/storybook — In code/core/src/components/components/tooltip/WithTooltip.tsx, the legacy WithTooltip implementation is intentionally reintroduced for backward compatibility and is deprecated; maintainers (per Sidnioulz) do not want maintenance or improvements on it. Prefer WithTooltipNew/Popover; avoid suggesting changes to WithTooltip.* going forward.

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-24T17:49:31.838Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursorrules:0-0
Timestamp: 2025-11-24T17:49:31.838Z
Learning: Applies to **/*.{test,spec}.{ts,tsx} : Follow the spy mocking rules defined in `.cursor/rules/spy-mocking.mdc` for consistent mocking patterns with Vitest

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts

📚 Learning: 2025-09-24T09:39:39.233Z

Learnt from: ndelangen
Repo: storybookjs/storybook PR: 32507
File: code/core/src/manager/globals/globals-module-info.ts:25-33
Timestamp: 2025-09-24T09:39:39.233Z
Learning: In Storybook, storybook/actions/decorator is a preview-only entrypoint and should not be included in manager globals configuration. The duplicatedKeys array in code/core/src/manager/globals/globals-module-info.ts is specifically for manager-side externalization, not preview entrypoints.

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts
test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Avoid mock implementations outside of `beforeEach` blocks in Vitest tests

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

📚 Learning: 2025-11-24T17:49:59.279Z

Learnt from: CR
Repo: storybookjs/storybook PR: 0
File: .cursor/rules/spy-mocking.mdc:0-0
Timestamp: 2025-11-24T17:49:59.279Z
Learning: Applies to **/*.test.{ts,tsx,js,jsx} : Group related mocks together in Vitest tests

Applied to files:

test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts

🧬 Code graph analysis (2)

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts (1)

code/e2e-tests/util.ts (1)

SbPage (8-274)

test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts (1)

code/e2e-tests/util.ts (1)

SbPage (8-274)

⏰ Context from checks skipped due to timeout of 90000ms. You can increase the timeout in your CodeRabbit configuration to a maximum of 15 minutes (900000ms). (4)

GitHub Check: normal
GitHub Check: nx
GitHub Check: nx
GitHub Check: Core Unit Tests, windows-latest

🔇 Additional comments (2)

test-storybooks/portable-stories-kitchen-sink/react/e2e-tests/composition.spec.ts (1)

14-22: Good fix for the slow-loading composed Storybooks.

The explicit visibility checks with 15-second timeout for both badge elements directly address the PR's stated problem. This ensures the composed Storybooks are fully loaded before the test attempts to interact with them, preventing the timeout failures.

test-storybooks/portable-stories-kitchen-sink/react-vitest-3/e2e-tests/composition.spec.ts (1)

14-22: LGTM - consistent fix applied across test suites.

The timeout fix is identical to the one in the react test suite, ensuring both test environments properly wait for composed Storybooks to load.

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

Wait for composed storybooks to load before continuing

81f5768

ghengeveld requested review from ndelangen and valentinpalkovic December 4, 2025 12:32

ghengeveld self-assigned this Dec 4, 2025

ghengeveld added build Internal-facing build tooling & test updates ci:normal labels Dec 4, 2025

valentinpalkovic approved these changes Dec 4, 2025

View reviewed changes

ghengeveld merged commit 8edd8c5 into next Dec 4, 2025
69 of 76 checks passed

ghengeveld deleted the fix-composition-e2e branch December 4, 2025 14:29

github-actions Bot mentioned this pull request Dec 5, 2025

Release: Prerelease alpha 10.2.0-alpha.4 #33288

Merged

15 tasks

ghengeveld changed the title ~~E2E: Wait for composed Storybooks to load before continuing test~~ Build: Wait for composed Storybooks to load before continuing E2E test Dec 9, 2025

coderabbitai Bot mentioned this pull request Dec 22, 2025

[Bug]: waitForAnimations blocks rerender #33411

Open

coderabbitai Bot mentioned this pull request Mar 13, 2026

Build: Use Playwright setup project for Storybook readiness #34123

Draft

8 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Build: Wait for composed Storybooks to load before continuing E2E test#33278

Build: Wait for composed Storybooks to load before continuing E2E test#33278
ghengeveld merged 1 commit into
nextfrom
fix-composition-e2e

ghengeveld commented Dec 4, 2025 •

edited

Loading

Uh oh!

nx-cloud Bot commented Dec 4, 2025 •

edited

Loading

Uh oh!

coderabbitai Bot commented Dec 4, 2025

Walkthrough

Changes

Estimated code review effort

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Uh oh!

Conversation

ghengeveld commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

What I did

Checklist for Contributors

Testing

The changes in this PR are covered in the following automated tests:

Manual testing

Documentation

Checklist for Maintainers

🦋 Canary release

Uh oh!

nx-cloud Bot commented Dec 4, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

coderabbitai Bot commented Dec 4, 2025

Walkthrough

Changes

Estimated code review effort

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

ghengeveld commented Dec 4, 2025 •

edited

Loading

nx-cloud Bot commented Dec 4, 2025 •

edited

Loading