Repository navigation
ci: run the visual smoke tests - #213
Merged
Merged
Conversation
The suite in frontend (vitest browser mode, Chromium via Playwright) asserts computed styles for the shadcn components, which is what catches a bits-ui data-state that lost its @custom-variant remap: the logic works, the component renders unstyled, and neither svelte-check nor a build can see it. CLAUDE.md already requires running it after touching ui/**, app.css or the theme, but nothing enforced that, so it was a manual step that could be forgotten. It was in fact skipped for the recent dependency bumps. Runs after the frontend build so a broken build reports first, and installs the Chromium binary the config needs (the pnpm store does not carry it).
Contributor
There was a problem hiding this comment.
✅ No new issues found.
Reviewed changes
- CI runs the visual smoke suite — adds
pnpm exec playwright install --with-deps chromiumandpnpm test:visualto thecheckjob, placed afterpnpm buildand before the Go steps, so the real-browser computed-style suite is enforced on every push tomainand every PR.
I confirmed the new steps ran and passed on 6a69e39 (job 125632983912), that test:visual resolves to vitest run against the browser-mode vitest.config.ts (headless Chromium via @vitest/browser-playwright), and that playwright is a devDependency so pnpm exec playwright resolves. The suite is the only src/**/*.test.ts file, so vitest run matches exactly the intended tests.
The only tradeoff worth naming is that the Chromium download (~1–2 min) is not cached across runs; the PR body already prices that in, and caching the browser is optional rather than required for correctness.
deepseek-v4.1-flash | 𝕏
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.

The repo's
CLAUDE.mdsays to runpnpm test:visualafter touchingui/**,app.cssor the theme, because the suite mounts components in a real Chromium and asserts computed styles. That is the only thing that catches a bits-uidata-statelosing its@custom-variantremap: the logic stays green while the component renders unstyled, which neithersvelte-checknor a build can see.Nothing enforced it, so it was a manual step. It was skipped during the recent dependency bumps, including a major bump of
vitest-browser-svelte, and only ran because I did it by hand.Change
Placed after
pnpm buildso a broken build reports first, and before the Go steps.Cost
Chromium download plus system deps, roughly 1 to 2 minutes. The suite itself is under 2 seconds (5 tests).
Verification
This PR is its own test:
CIshould now show both new steps, and the suite passed locally on currentmainin 1.29s.