tests: remove CSS animations from unit tests#1220
Draft
jderochervlk wants to merge 12 commits intomasterfrom
Draft
tests: remove CSS animations from unit tests#1220jderochervlk wants to merge 12 commits intomasterfrom
jderochervlk wants to merge 12 commits intomasterfrom
Conversation
Cloudflare deploymentDeployement ID: da7a6769-944d-4bc0-ac7e-a60f8a499c53 ⛅️ wrangler 4.63.0 (update available 4.80.0) ✨ Uploading _redirects |
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.
Fixes several issues with screenshot tests producing inconsistent or incorrect results.
Disable CSS animations and transitions in tests
Added
styles/test-overrides.css(imported only invitest.setup.mjs) that disables all CSS animations and transitions. This prevents non-deterministic diffs caused by screenshots capturing mid-animation frames. This follows the vitest recommendation for visual regression testing.Fix screenshot size inconsistency between headless and headed mode
Added
scale: "css"to the globaltoMatchScreenshotconfig invitest.config.mjs. Playwright defaults toscale: "device", which captures at the device pixel ratio — so a HiDPI display produces 2x screenshots while headless Chromium runs at 1x. Pinning to"css"ensures identical screenshot dimensions regardless of environment.Fix NavbarSecondary tests using wrong router
The desktop and mobile navbar tests were using
BrowserRouter, which meant the route was the vitest internal URL — no link matched an active route, so "Language Manual" was never highlighted. Switched toMemoryRouterwithinitialEntries={["/docs/manual/introduction"]}to match the third test and reflect real-world usage.Remove flaky Video screenshot test
The
renders Video with captiontest was screenshotting a live Vimeo iframe embed, which loads non-deterministically over the network. Removed thetoMatchScreenshotassertion (DOM/visibility assertions are still in place).Delete old full-viewport screenshots
Removed all leftover
*-1.pngscreenshots from a previous approach that captured the entire 1440×900 viewport. The current tests use element-level screenshots viadata-testidwrappers, making these obsolete.