test(design-system): setup Storybook docs tests [AR-74627] by iromanchuk-dn · Pull Request #587 · drivenets/design-system

iromanchuk-dn · 2026-07-09T15:56:34Z

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 · 2026-07-09T15:56:39Z

✅ Deploy Preview for drivenets-design-system ready!

Name	Link
🔨 Latest commit	`57007fd`
🔍 Latest deploy log	https://app.netlify.com/projects/drivenets-design-system/deploys/6a5f8793f0d62600086a780b
😎 Deploy Preview	https://deploy-preview-587--drivenets-design-system.netlify.app
📱 Preview on mobile	Toggle 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.

mmurawski-dn

Nice one

StyleShit

I reviewed mostly the "infra" part, but I don't really understand the tests themselves

…e-code-quality-in-storybook-files

… for every listed component

StyleShit · 2026-07-21T04:42:16Z

 autoboot
 autodocs
 borderless
+buttonv


Suggested change

buttonv

seems like it's not needed anymore

StyleShit · 2026-07-21T05:06:33Z

+const dirname = path.dirname(fileURLToPath(import.meta.url));
+const packageRoot = path.resolve(dirname, '../../');
+
+const COMPONENTS = ['ds-button-v3', 'ds-breadcrumb'];


You can do this:

Suggested change

const COMPONENTS = ['ds-button-v3', 'ds-breadcrumb'];

const COMPONENTS = ['button-v3', 'breadcrumb'];

And then: (see next comment)

StyleShit · 2026-07-21T05:10:09Z

+	const allComponents = Object.values(manifest.components);
+
+	return allowlist.map((folder) => {
+		const component = allComponents.find((entry) => entry.path.includes(`/${folder}/`));
+
+		if (!component) {
+			throw new Error(`No manifest component found for folder "${folder}"`);
+		}
+
+		return component;
+	});


Suggested change

const allComponents = Object.values(manifest.components);

return allowlist.map((folder) => {

const component = allComponents.find((entry) => entry.path.includes(`/${folder}/`));

if (!component) {

throw new Error(`No manifest component found for folder "${folder}"`);

}

return component;

});

return allowlist.map((componentName) => {

const manifest = manifest.components[`components-${componentName}`];

if (!manifest) {

throw new Error(`No manifest component found for folder "${folder}"`);

}

return component;

});

(just to be slightly more performant)

StyleShit · 2026-07-21T05:15:00Z

+function getComponentFolder(componentPath: string): string {
+	const match = /components\/([^/]+)\//.exec(componentPath);
+
+	if (!match?.[1]) {
+		throw new Error(`Could not derive component folder from path "${componentPath}"`);
+	}
+
+	return match[1];
+}


I think I would drop this and just build the path manually, based on the new kebab-case COMPONENTS array we now have:

function getComponentDirectoryName(componentName: string) { return `ds-${componentName}`; }

StyleShit · 2026-07-21T05:23:28Z

+const manifest = await fetchComponentsManifest();
+const components = resolveAllowlistedComponents(manifest, COMPONENTS);
+
+describe.sequential('docs snippets', () => {


why does it need to be sequential? it'll be slower, no?
can we have a dedicated browser tab for each test instead?

StyleShit · 2026-07-21T05:27:44Z

+			docsStoryId: `${component.id}--docs`,
+			storyName: story.name,
+		});
+		const manifestSnippet = await readManifestSnippet(component.id, story.name);


calling readManifestSnippet here will re-fetch and re-validate things that were already fetched & validated through the test flow (lines 101-102)

Can we just fetch the manifest once before the tests and have it cached at the module level or something?
There is no need to re-fetch it for every component, and currently we do it twice per component

personally, I would probably have a components-manifest.ts file that handles all manifest-related stuff in a cached way (getManifest(componentId), getStorySnippet(componentId, storyId), etc.)

StyleShit · 2026-07-21T05:34:45Z

+	const deadline = Date.now() + 10_000;
+	let text = (await source.innerText()).trim();
+
+	while (!text && Date.now() < deadline) {
+		await page.waitForTimeout(100);
+		text = (await source.innerText()).trim();
+	}


why do we need this polling mechanism?

StyleShit · 2026-07-21T05:41:44Z

maybe let's use vercel's serve-handler package to make things simpler on our end (mime types, URL rewrites, error handling, etc.)?

see serve's github for api usage with node:http

…e-code-quality-in-storybook-files

StyleShit

🔥

…e-code-quality-in-storybook-files

…7] (#614) ## Improved components | Component | Stories | Docs snapshot | New browser test | Cleanup (SCSS/impl) | |---|---|---|---|---| | `ds-alert-banner` | ✓ | ✓ | | | | `ds-autocomplete` | ✓ | ✓ | | | | `ds-avatar` | | ✓ | | | | `ds-avatar-group` | ✓ | ✓ | ✓ | ✓ (scss, tsx, types) | | `ds-card` | ✓ | ✓ | ✓ | ✓ (scss, tsx) | | `ds-catalog-layout` | ✓ | ✓ | | | | `ds-checkbox` | ✓ | ✓ | | ✓ (scss, tsx) | | `ds-date-picker` | ✓ | ✓ | | ✓ (scss, tsx, types) | | `ds-date-range-picker` | ✓ | ✓ | | ✓ (scss) | | `ds-dialog` | ✓ | ✓ | ✓ | ✓ (scss, tsx) | Notes: - All 10 had their `*.stories.tsx` cleaned up for code quality and were opted into the docs-snippet tests (each got a colocated `*.docs.snap` golden file). - `ds-avatar` only shows a snapshot file because its stories were already clean — just newly covered by the docs tests. - Three (`ds-avatar-group`, `ds-card`, `ds-dialog`) also gained new `*.browser.test.tsx` coverage. - `ds-date-range-picker` is the one whose snapshot I regenerated in the CI fix (timezone determinism). For reference, `ds-breadcrumb` and `ds-button-v3` are also in the docs-test allowlist but were the reference components set up in the earlier docs-tests PR (#587), not part of this branch's component improvements.

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

2f637a2

iromanchuk-dn requested review from mmurawski-dn and vpolessky-dn July 9, 2026 15:56

iromanchuk-dn requested review from StyleShit and aroba-dn as code owners July 9, 2026 15:56

github-actions Bot added ci tooling design-system cursor PR that changes cursor rules, skills, etc. labels Jul 9, 2026

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

iromanchuk-dn added the skip changelog label Jul 9, 2026

iromanchuk-dn added 2 commits July 9, 2026 18:35

fix tests

2deeb6e

fix tests

c02a199

mmurawski-dn previously approved these changes Jul 10, 2026

View reviewed changes

vpolessky-dn previously approved these changes Jul 10, 2026

View reviewed changes

StyleShit requested changes Jul 12, 2026

View reviewed changes

iromanchuk-dn added 2 commits July 16, 2026 15:31

Merge branch 'main' into AR-74627-dap-design-system-ai-toolkit-improv…

413d078

…e-code-quality-in-storybook-files

Improve skills and ds-breadcrumb component

00ad22c

iromanchuk-dn dismissed stale reviews from mmurawski-dn and vpolessky-dn via 00ad22c July 16, 2026 15:27

Address PR comments

5cab5bb

iromanchuk-dn requested a review from StyleShit July 16, 2026 15:49

iromanchuk-dn added 3 commits July 20, 2026 11:25

Merge branch 'main' into AR-74627-dap-design-system-ai-toolkit-improv…

603b106

…e-code-quality-in-storybook-files

Refactor docs test to have a single test file that produces snapshots…

6e19c5c

… for every listed component

Prevent minified name leakage in Autodocs

5443f9a

StyleShit requested changes Jul 21, 2026

View reviewed changes

iromanchuk-dn added 3 commits July 21, 2026 11:23

Merge branch 'main' into AR-74627-dap-design-system-ai-toolkit-improv…

2b81e75

…e-code-quality-in-storybook-files

Cleanup local-words

ca5b302

address PR comments

9e58e9f

github-actions Bot added the dependencies label Jul 21, 2026

StyleShit previously approved these changes Jul 21, 2026

View reviewed changes

fix knip

cf3cf53

iromanchuk-dn dismissed StyleShit’s stale review via cf3cf53 July 21, 2026 14:44

iromanchuk-dn added 2 commits July 21, 2026 16:45

Simplify

610e52d

dedupe

c72bc91

vpolessky-dn approved these changes Jul 21, 2026

View reviewed changes

Merge branch 'main' into AR-74627-dap-design-system-ai-toolkit-improv…

57007fd

…e-code-quality-in-storybook-files

StyleShit approved these changes Jul 21, 2026

View reviewed changes

iromanchuk-dn merged commit b8b8466 into drivenets:main Jul 21, 2026
26 checks passed

iromanchuk-dn mentioned this pull request Jul 22, 2026

feat(design-system): improve code quality in Storybook files [AR-74627] #614

Merged

	const COMPONENTS = ['ds-button-v3', 'ds-breadcrumb'];
	const COMPONENTS = ['button-v3', 'breadcrumb'];

Uh oh!

Conversation

iromanchuk-dn commented Jul 9, 2026

Summary

Uh oh!

netlify Bot commented Jul 9, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

✅ Deploy Preview for drivenets-design-system ready!

Uh oh!

mmurawski-dn left a comment

Choose a reason for hiding this comment

Uh oh!

StyleShit left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

StyleShit left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

netlify Bot commented Jul 9, 2026 •

edited

Loading