chore: add Storybook 10 with browser-mode tests via Vitest - #3
Merged
Conversation
Set up Storybook 10 (react-vite) for visual development and wire its play() interaction tests into the existing pnpm test pipeline through @storybook/addon-vitest's storybookTest plugin. Stories run headlessly in Playwright Chromium alongside the existing jsdom unit tests as two Vitest projects. Includes initial stories for BlockKitBuilder, Toolbar, Palette, and Button covering rendering smoke + interaction assertions (clear, add from palette, send dialog, theme/surface controls, disabled state). The .storybook preview wires Tailwind v4 + shadcn token defaults so components render with real colors and dark mode in the catalog. CI installs Playwright Chromium before pnpm test in both ci.yml and publish.yml; storybook-static/ is gitignored. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
…tt-743327 # Conflicts: # package.json # pnpm-lock.yaml
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
@storybook/react-vite) for visual development, with addonsdocs,a11y, andvitest.play()interaction tests intopnpm testvia@storybook/addon-vitest'sstorybookTestVitest plugin. The existing jsdom unit project is preserved; stories run headlessly in Playwright Chromium as a second project.BlockKitBuilder,Toolbar,Palette, andButtoncovering rendering smoke + interaction assertions.Details
Config
.storybook/main.ts— react-vite framework, addons, Tailwind v4 plugin viaviteFinal..storybook/preview.{ts,css}— globals + theme toolbar, plus shadcn token defaults (light/dark) so components render with real colors in the catalog.vitest.config.tssplit into two projects:unit(jsdom) — existingtest/**/*.test.tsstorybook(browser) — Playwright Chromium via@vitest/browser-playwright, picks upsrc/**/*.stories.tsxStories
BlockKitBuilder— Empty, WithStarterBlocks, MessageSurfaceLocked, DarkPreviewDefault, plus play() tests for Clear and AddSection-from-palette flows.Toolbar— 6 variants with click assertions for Send, Issues, etc.Palette— wrapped inDndContext, with an add-via-chevron interaction test.Button— 8 variant + interaction stories including disabled-state assertion.CI
ci.ymlandpublish.ymlinstall Playwright Chromium beforepnpm test. Test job timeout raised to 10 min.storybook-static/added to.gitignore.Test plan
pnpm test— 34 passed (12 unit + 22 Storybook stories in Chromium).pnpm run typecheck— clean.pnpm run lint— clean.pnpm run build— package bundle unchanged (stories not pulled in).pnpm run build-storybook— producesstorybook-static/.pnpm storybooklocally to browse the catalog.Notes for reviewers
*.stories.tsx) rather than in a separate top-level directory; tsup only bundles what's reachable fromsrc/index.ts, so they don't ship.@storybook/addon-vitest10.3+ auto-provisions preview annotations, so novitest.setup.tsis needed.pnpm test.🤖 Generated with Claude Code