WordPress / openverse

Openverse is a search engine for openly-licensed media. This monorepo includes all application code.

Home Page:https://openverse.org

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Setup and add initial Dark Mode visual regression test screenshots

zackkrida opened this issue · comments

commented

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).