Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Setup and add initial Dark Mode visual regression test screenshots #4305

Open
zackkrida opened this issue May 10, 2024 · 0 comments
Open

Setup and add initial Dark Mode visual regression test screenshots #4305

zackkrida opened this issue May 10, 2024 · 0 comments
Labels
🤖 aspect: dx Concerns developers' experience with the codebase ✨ goal: improvement Improvement to an existing user-facing feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend ⛔ status: blocked Blocked & therefore, not ready for work

Comments

@zackkrida
Copy link
Member

This issue is part of the Dark Mode project: #3592. Please see the implementation plan for additional detail and context.

Important

This issue is blocked until #4303 and #4304 are completed.

Description

Once the dark mode palette is added and can be forced via feature flag, update our visual regression tests to create new dark mode snapshots. Existing screenshots should be renamed to <snapshot_name>_light and the new dark mode screenshots should be named <snapshot_name>_dark.

For setting dark mode in the tests, update frontend/test/playwright/utils/breakpoints.ts so that each breakpoint produces and expects a dark mode screenshot to pass as well as the existing light mode screenshot. Emulating dark mode can be easily handled via Playwright's emulation controls.

This will produce a large file diff. When this PR lands @fcoveram and @WordPress/openverse-frontend should review the full dark mode appearance for correctness and sufficient color contrast (see the “Accessibility” section for more details).

@zackkrida zackkrida added 🟨 priority: medium Not blocking but should be addressed soon ✨ goal: improvement Improvement to an existing user-facing feature 🤖 aspect: dx Concerns developers' experience with the codebase ⛔ status: blocked Blocked & therefore, not ready for work 🧱 stack: frontend Related to the Nuxt frontend labels May 10, 2024
@zackkrida zackkrida added this to the Dark Mode A - Color Palette milestone May 10, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
🤖 aspect: dx Concerns developers' experience with the codebase ✨ goal: improvement Improvement to an existing user-facing feature 🟨 priority: medium Not blocking but should be addressed soon 🧱 stack: frontend Related to the Nuxt frontend ⛔ status: blocked Blocked & therefore, not ready for work
Projects
Status: ⛔ Blocked
Development

No branches or pull requests

1 participant