fix: preserve CSS pseudo states in snapshots#323
Conversation
🦋 Changeset detectedLatest commit: 8256a68 The changes in this PR will be included in the next version bump. This PR includes changesets to release 4 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
There was a problem hiding this comment.
These Cypress tests are completely written by Github Copilot. I've reviewed them.
We need to use CDP for these actions so that browser doesn't see events as simulated ones. CSS requires real events. There is a third party cypress-real-events package that provides better API for this, but as we need these only for this one test file I think it's fine to inline the helpers here. It's isolated and maintainable.
AriPerkkio
force-pushed
the
ari/fix-css-pseudo-state-preserve
branch
from
735f661 to
4b34acb
Compare
Codecov Report✅ All modified and coverable lines are covered by tests. Additional details and impacted files@@ Coverage Diff @@
## main #323 +/- ##
==========================================
+ Coverage 91.47% 92.06% +0.59%
==========================================
Files 22 22
Lines 598 605 +7
Branches 109 109
==========================================
+ Hits 547 557 +10
+ Misses 48 45 -3
Partials 3 3 ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
AriPerkkio
force-pushed
the
ari/fix-css-pseudo-state-preserve
branch
from
4b34acb to
8256a68
Compare
| // @ts-expect-error rebuild is typed incorreclty, cache and mirror are optional | ||
| const html = (await rebuild(htmlNode, { doc: document })) as HTMLElement; | ||
| const mirror = createMirror(); | ||
| const html = rebuild(htmlNode!, { doc: document, mirror, cache: createCache() }) as HTMLElement; |
There was a problem hiding this comment.
we're not awaiting rebuild here anymore and I just want to confirm that that is intentional.
There was a problem hiding this comment.
Yes, it's intentional. rebuild was always synchronous
skitterm
left a comment
skitterm
left a comment
There was a problem hiding this comment.
@AriPerkkio this looks great!
3 participants
Issue: Related to #295
Requires chromaui/rrweb#7
What Changed
When a snapshot is taken, store IDs (rrweb serialized DOM IDs) of elements with CSS pseudo states right next to the snapshot in the archive file. When we rebuild the DOM in Storybook, we "hydrate" the states back to the DOM by applying CSS classes with corresponding names as the state had.
rrweb-snapshotmakes sure CSS is rewritten during serialization: chromaui/rrweb#7.How to test
css-pseudo-statestest of each test runner packagerrweb-pseudo-css-fixes.mov