fix(test): correct Storybook serve config so visual stories actually render#1094
Merged
TaprootFreak merged 1 commit intoMay 12, 2026
Merged
Conversation
Two correctness bugs found while seeding the initial baselines:
1. `npx serve storybook-static` strips `.html` extensions by default
and 301-redirects `/iframe.html?id=…` to `/iframe`, dropping the
query string. Storybook then has no story to render and falls back
to its "No Preview" screen — every story was captured as the same
empty page, so the test could not have detected any layout drift.
Fix: ship a `serve.json` (cleanUrls: false) as a Storybook static
asset via `staticDirs`, so the built bundle is self-contained and
serves correctly to any tool that reads `serve.json`.
2. The snapshot path template referenced `{projectName}` but the
`<name>-actual.png` files Playwright emits on failure carry no
project suffix. Re-shaping the actuals into the baseline directory
layout produced filenames that the next run would not look for.
Fix: drop `-{projectName}` from snapshotPathTemplate. We only run a
single project (chromium-linux); adding more later means re-adding
the segment.
Verified locally that the three stories now render distinctly
(Default == Fullscreen by design, Dialog with backdrop + centered
card), so the regression guard is actually load-bearing.
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
1 participant
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.
Stacked on top of #1093.
What
Two correctness bugs discovered while extracting the initial baselines from the first CI run of #1093:
1.
servestrips.htmland drops the query stringnpx serve storybook-staticdefaults tocleanUrls: true— it 301-redirects/iframe.html?id=…&viewMode=storyto/iframe, losing the query string in the redirect. Storybook receives no story id and falls back to its "No Preview" screen.Effect on the previous baseline run: all three stories captured the same empty fallback page. The test would have been green for any future Modal regression because every snapshot was already identical garbage.
Fix: Ship
.storybook/static/serve.jsonwithcleanUrls: falsevia Storybook'sstaticDirs, so the built bundle is self-contained and serves correctly to anything that readsserve.json.2.
snapshotPathTemplatemismatch with actualsThe template included
{projectName}(→…-chromium-linux.png), but the-actual.pngfiles Playwright writes on snapshot mismatch carry no project suffix. Re-shaping them into the baseline directory produced filenames the next run wouldn't look for.Fix: Drop
-{projectName}from the template. Single-project setup; if we add Firefox/WebKit later we re-add the segment.Verified locally
npm run build-storybookshipsserve.jsonintostorybook-static/.curl -I http://localhost:6006/iframe.html?id=…returns 200, not 301.playwright test --update-snapshotsproduces three visually distinct PNGs:DefaultandFullscreenare byte-identical (by design — that's the regression guard).Dialogrenders the centered card on the dim backdrop.Next step
Once this PR is merged into
test/modal-visual-regression, the parent PR's next CI run will produce real baselines invisual-regression-diff.zipthat can then be committed to seed the snapshots directory.