Skip to content

test(design-system): setup Storybook docs tests [AR-74627]#587

Open
iromanchuk-dn wants to merge 3 commits into
drivenets:mainfrom
iromanchuk-dn:AR-74627-dap-design-system-ai-toolkit-improve-code-quality-in-storybook-files
Open

test(design-system): setup Storybook docs tests [AR-74627]#587
iromanchuk-dn wants to merge 3 commits into
drivenets:mainfrom
iromanchuk-dn:AR-74627-dap-design-system-ai-toolkit-improve-code-quality-in-storybook-files

Conversation

@iromanchuk-dn

Copy link
Copy Markdown
Collaborator

Summary

Storybook Autodocs Show code snippets and MCP manifest snippets are what agents and developers copy from docs, but nothing in CI caught when those outputs drifted after story edits. Dev Storybook also differs from the production build (e.g. React Compiler), so manual checks against pnpm start were unreliable.

This PR adds automated docs snippet tests (*.docs.test.ts) as a dedicated Vitest storybook-docs project. Global setup builds and serves storybook-static on an ephemeral port (same artifact as GitHub Pages), then tests verify both outputs per story:

  • Show code — Playwright opens Autodocs, expands Show code, snapshots the panel text
  • MCP manifest — fetches components.json and snapshots the story snippet

Shared helpers live under tests/storybook/. test:storybook-docs runs the project explicitly; default pnpm test excludes it (like requires-build). CI builds Storybook and runs docs tests on PRs. Initial coverage: ds-breadcrumb and ds-button-v3. Agent skills and workflows are updated to point authors at the new pattern.

@netlify

netlify Bot commented Jul 9, 2026

Copy link
Copy Markdown

Deploy Preview for drivenets-design-system ready!

Name Link
🔨 Latest commit c02a199
🔍 Latest deploy log https://app.netlify.com/projects/drivenets-design-system/deploys/6a4fd0f57ba6c40008349320
😎 Deploy Preview https://deploy-preview-587--drivenets-design-system.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@github-actions github-actions Bot added ci tooling design-system cursor PR that changes cursor rules, skills, etc. labels Jul 9, 2026
@iromanchuk-dn iromanchuk-dn changed the title test(design-system): setup docs tests [AR-74627] test(design-system): setup Storybook docs tests [AR-74627] Jul 9, 2026

@mmurawski-dn mmurawski-dn left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice one

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

ci cursor PR that changes cursor rules, skills, etc. design-system skip changelog tooling

Projects

None yet

Development

Successfully merging this pull request may close these issues.

3 participants