8000 chore(docs): add dark theme visual testing by evwilkin · Pull Request #6702 · patternfly/patternfly · GitHub
[go: up one dir, main page]
Skip to content

chore(docs): add dark theme visual testing#6702

Merged
mcoker merged 2 commits intopatternfly:v6from
evwilkin:feat/6602-dark-visual-tests
May 31, 2024
Merged

chore(docs): add dark theme visual testing#6702
mcoker merged 2 commits intopatternfly:v6from
evwilkin:feat/6602-dark-visual-tests

Conversation

@evwilkin
Copy link
Member
@evwilkin evwilkin commented May 28, 2024 •
edited
Loading

Closes #6602

This PR adds the ability to run visual regression testing with dark theme enabled by passing the --dark flag when running the CLI command (ex: yarn backstop: test --dark, yarn backstop:approve --dark) or by using the new CLI command shortcuts (backstop:test:dark, backstop:approve:dark).

  • These dark theme tests create new directories for test & reference images as well as a new html report (all suffixed with _dark) to keep the light theme & dark theme testing separate. Note that this means light theme & dark theme testing are currently 2 separate processes/steps.
  • Approving dark theme test images (ex: yarn backstop:approve:dark) will save the approved images in a new bitmaps_reference_dark directory - same reasoning as above.

Screenshot 2024-05-28 at 4 22 08 PM

Note:

  • Dark theme reference images are not included as part of this PR (screenshot above shows directory generated for verification purposes).
    • Once this PR is merged we should run the full dark theme tests and approve the results to generate a baseline (see comments in Visual regression updates #6602 for discussion on when these original tests should be captured).
  • For testing purposes, after pulling this code I recommend reducing the relativeUrls array in backstop.config.js to 10-20 URLs to save time, so you don't need to wait for the tests to run on every example.
  • Note that some full screen examples do not contain any background color, so white/light text & icons can be hard to see in test images.
    Screenshot 2024-05-28 at 4 36 47 PM

@patternfly-build
Copy link
Collaborator
patternfly-build commented May 28, 2024 •
edited
Loading

Preview: https://patternfly-pr-6702.surge.sh

A11y report: https://patternfly-pr-6702-a11y.surge.sh

@evwilkin evwilkin linked an issue May 28, 2024 that may be closed by this pull request
Visual regression updates #6602
Closed
mcoker
mcoker approved these changes May 31, 2024
View reviewed changes
Copy link
Contributor
@mcoker mcoker left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Awesome! Thanks @evwilkin 🫵🪨

@mcoker mcoker merged commit ceb0aa1 into patternfly:v6 May 31, 2024
@mcoker mcoker mentioned this pull request May 31, 2024
Closed
@patternfly-build
Copy link
Collaborator
patternfly-build commented May 31, 2024

🎉 This PR is included in version 6.0.0-alpha.147 🎉

The release is available on:

Your semantic-release bot 📦🚀

mattnolting pushed a commit to mattnolting/patternfly that referenced this pull request Jun 21, 2024
@evwilkin
chore(docs): add dark theme visual testing (patternfly#6702)
c7ef653
@patternfly-build patternfly-build mentioned this pull request Apr 16, 2025
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mcoker mcoker mcoker approved these changes

Assignees

No one assigned

Labels

released on @alpha

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

Visual regression updates

3 participants

@evwilkin @patternfly-build @mcoker
0