Skip to content

Add test:storybook script and wire story play-tests into CI #1251

@cliffhall

Description

@cliffhall

Background

The clients/web/vite.config.ts already wires @storybook/addon-vitest's storybookTest plugin into a vitest project named storybook, so every story's play function is already runnable as a test under vitest run --project=storybook. What's missing is an npm script and a CI step to actually run them.

Today the only way to invoke the suite is to type npx vitest run --project=storybook by hand — which is what clients/web/src/components/.../InlineSamplingRequest/InlineSamplingRequest.stories.tsx's test plan in #1239 / PR #1250 ended up referencing. With nothing wired into CI, broken play functions land silently (see #1248, surfaced only because work on #1237 happened to run the suite locally).

Scope

  • Add clients/web/package.json scripts:
    • "test:storybook": "vitest run --project=storybook" — single-shot for CI / pre-commit / local check.
    • "test:storybook:watch": "vitest --project=storybook" — interactive iteration.
  • Surface test:storybook at the repo root (package.json) so it can be invoked from anywhere in the workspace.
  • Wire test:storybook into CI as a separate step in .github/workflows/main.yml. Keep npm run validate (format + lint + build) fast and synchronous; the storybook test step takes ~10s on a clean tree because it spins up headless Chromium via @vitest/browser-playwright, so it doesn't belong inside validate.
  • Decide whether test:storybook should fail CI on a missing browser binary or silently skip — likely fail, given Playwright is already a devDependency.

Precondition

#1248 (the ambiguous findByText("config.json") failure in ResourcesScreen > ResourceSelected) must land first. Turning the CI gate on while v2/main has a known red play function would block every subsequent PR.

Acceptance criteria

  • npm run test:storybook from clients/web/ runs the suite and exits 0 on a clean tree.
  • npm run test:storybook from the repo root delegates to the web client and behaves identically.
  • CI runs test:storybook on every PR after validate; failure blocks merge.
  • AGENTS.md mentions test:storybook alongside validate in the "Lint-fixed, Formatted code" / pre-push section.

Test plan

  • Run npm run test:storybook locally on a clean v2/main — passes.
  • Push a PR with a deliberately broken play function — CI step fails.
  • Push a PR with a fixed play function — CI step passes.

Out of scope

Related

Metadata

Metadata

Assignees

Labels

v2Issues and PRs for v2

Type

No type
No fields configured for issues without a type.

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions