Skip to content

tests: remove CSS animations from unit tests#1220

Draft
jderochervlk wants to merge 12 commits intomasterfrom
vlk/disable-animations
Draft

tests: remove CSS animations from unit tests#1220
jderochervlk wants to merge 12 commits intomasterfrom
vlk/disable-animations

Conversation

@jderochervlk
Copy link
Copy Markdown
Collaborator

@jderochervlk jderochervlk commented Apr 2, 2026

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 in vitest.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 global toMatchScreenshot config in vitest.config.mjs. Playwright defaults to scale: "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 to MemoryRouter with initialEntries={["/docs/manual/introduction"]} to match the third test and reflect real-world usage.

Remove flaky Video screenshot test

The renders Video with caption test was screenshotting a live Vimeo iframe embed, which loads non-deterministically over the network. Removed the toMatchScreenshot assertion (DOM/visibility assertions are still in place).

Delete old full-viewport screenshots

Removed all leftover *-1.png screenshots from a previous approach that captured the entire 1440×900 viewport. The current tests use element-level screenshots via data-testid wrappers, making these obsolete.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Apr 2, 2026

Cloudflare deployment

Deployement ID: da7a6769-944d-4bc0-ac7e-a60f8a499c53
Deployment Environment: preview

⛅️ wrangler 4.63.0 (update available 4.80.0)
─────────────────────────────────────────────
✨ Compiled Worker successfully
Uploading... (7651/7653)
Uploading... (7652/7653)
Uploading... (7653/7653)
✨ Success! Uploaded 2 files (7651 already uploaded) (2.87 sec)

✨ Uploading _redirects
✨ Uploading Functions bundle
🌎 Deploying...
✨ Deployment complete! Take a peek over at https://da7a6769.rescript-lang.pages.dev
✨ Deployment alias URL: https://vlk-disable-animations.rescript-lang.pages.dev

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant