Historical diff snapshots · additions + deletions. Both fixes are now merged.
#23910 · a separate CSS fix
One selector. A 50-line test.
/* Before */
:deep(.dataset-details-popover) { max-width: 420px; }
/* After */
.dataset-details-popover { max-width: 420px; }
GPopover moves the content under body. The old descendant selector no longer matches. The plain scoped selector matches the content’s retained scope id.
Vitest doesn’t load SFC styles. The test reads the Vue file, compiles and injects its CSS, mounts the component, and checks the computed 420px cap.
Per-test play commits, with accessibility annotations folded in.
A passing unit job does not run these plays or axe checks. Browser CI is still required for adoption.
Render-only stories are not interaction checks. Counts are not coverage percentages.
Runtime tradeoff
About eight seconds longer overall
Roughly 12% longer
Moving checks out of units offsets much of the browser cost.
Earlier local benchmark: smaller catalog, accessibility excluded. The current combined branch has not been benchmarked.
Extra Slides
Play functions
Check the state in real Chromium
Browser plays
Click, hover, and scroll. Query by role and label. Assert what the user can see.
Remaining unit tests
Keep checks about spies, request payloads, and controlled timing in Vitest.
Each moved check is tested against a deliberate break. Every original assertion should still have a home.
The shiny features
A browsable catalog is useful beyond tests
Now · stories and plays
Browse real component states and watch interactions step by step.
Now · accessibility alongside plays
Axe checks, violation highlighting and vision simulations in the same branch as plays.
Future · visual regression
Compare the same states during UI migrations. Screenshot baselines and a review workflow still need building.
150 known axe-failing stories ≠ 150 distinct bugs. Viewport presets alone do not run a screenshot matrix.
“But these aren’t unit tests”
HOT TAKE: Unit tests are a deeply human thing.
Part of their value is how they push us to think about the design. I don’t see agents responding to that pressure the same way.
Decomposition
Humans feel shame writing a bad test
A ton of mocking. A test more complicated than the feature or fix. We know when we’re writing a bad test — and the bad test is telling us the implementation sucks.
That pushes us to decompose and design better.
Good unit tests require good decomposition. That feedback is part of their value.
What I see with agents
They can write around the implementation instead of rethinking it.
What I keep seeing: a complicated implementation gets a complicated test. The agent makes it pass, and I’m left reviewing both.
I want the test to help us see when the design needs work.
The review loop
Look at what these tests let us review
These Storybook tests communicate between the implementation, the agents, and the humans. That is the part I care about.
They’re easier to review — and the review covers so much more when you can see the story in action.
Discussion
Our review time matters too.
I want to see the story in action, understand the behavior, and trust the test.