Build: Fix E2E and chromatic inconsistencies #23051
Merged
Conversation
This file contains 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
yannbf
added
build
yannbf
force-pushed
the
fix/viewports-e2e-test
branch
from
48abd77 to
b2d03d5
Compare
yannbf
changed the title
yannbf
force-pushed
the
fix/viewports-e2e-test
branch
from
b2ccb65 to
8e239f1
Compare
shilman
approved these changes
Jun 14, 2023
yannbf
added
the
patch:yes
This was referenced Jun 14, 2023
Merged
shilman
added a commit
that referenced
this pull request
Jun 14, 2023
Build: Fix E2E and chromatic inconsistencies (cherry picked from commit d00fe88)
kasperpeulen
pushed a commit
that referenced
this pull request
Jun 14, 2023
Build: Fix E2E and chromatic inconsistencies (cherry picked from commit d00fe88)
kasperpeulen
pushed a commit
that referenced
this pull request
Jun 14, 2023
Build: Fix E2E and chromatic inconsistencies (cherry picked from commit d00fe88)
JReinhold
added
the
patch:done
8 tasks
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.
Closes #
What I did
This PR solves a few sources of flakiness.
Viewports E2E test
It seemed to be testing the wrong element, which playwright assumed had the same dimensions either without or with viewports enabled:
Chromatic
The "Desktop" component stories had a counter which was causing inconsistencies, and now it has chromatic ignore regions to avoid it:
The "DocsPage" story has a very inconsistent args table row which keeps changing in order, therefore I added a play function which injects a chromatic ignore region to it. I did it in the play function and not in the component so that we don't always ignore snapshots for the argstable component, and we really just ignore in the place we know is inconsistent.
Additionally I made the "play function banner" (we display only when snapshotting stories in Chromatic that have play function) more prominent and explanatory
The "TS Argtypes" suffers a similar issue, where a minified function name keeps changing, so I added a similar mechanism using the play function.
How to test
Tests should work correctly
Checklist
MIGRATION.MD
Maintainers
make sure to add the
ci:mergedorci:dailyGH label to it.["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]