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

Testing: Add e2e test for basic ContrastChecker functionality #68856

Open
wants to merge 7 commits into
base: trunk
Choose a base branch
from

Conversation

himanshupathak95
Copy link
Contributor

@himanshupathak95 himanshupathak95 commented Jan 23, 2025

Closes: #68853

What?

Add a basic end-to-end test for the ContrastChecker component that verifies the low-contrast warning appears immediately when the text and background colors have insufficient contrast.

Why?

After enhancing the ContrastChecker component in #68799, it's important to ensure its core functionality of detecting and warning about low-contrast color combinations works reliably.

Testing Instructions

  • Run npm run test:e2e -- editor/various/contrast-checker.spec.js to execute the test
  • Verify that it is passing and debug (if necessary) to check the working

Screencast

Screen.Recording.2025-01-24.at.13.25.25.mov

@himanshupathak95 himanshupathak95 marked this pull request as ready for review January 24, 2025 07:57
Copy link

github-actions bot commented Jan 24, 2025

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org>
Co-authored-by: Mamaduka <mamaduka@git.wordpress.org>
Co-authored-by: afercia <afercia@git.wordpress.org>
Co-authored-by: juanfra <juanfra@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

@juanfra juanfra added [Type] Bug An existing feature does not function as intended [Feature] Colors Color management labels Jan 24, 2025
@Mamaduka Mamaduka self-requested a review January 27, 2025 08:05
@afercia
Copy link
Contributor

afercia commented Jan 27, 2025

After the first test gets refined, it would be nice to add another test as @juanfra mentioned in #68853 (comment)
To my understanding, it would be basically: set only the text color to white and see if the contrastChecker warns against the default background color.

} );

await page.getByRole( 'button', { name: 'Text', exact: true } ).click();
await page.getByLabel( 'Black' ).click();
Copy link
Member

Choose a reason for hiding this comment

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

I think this can be located using the following getByRole selector.

await page.getByRole( 'option', { name: 'Black' } ).click();

await page.getByLabel( 'Black' ).click();

await page.getByRole( 'button', { name: 'Background' } ).click();
await page.getByLabel( 'Black' ).click();
Copy link
Member

Choose a reason for hiding this comment

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

Same.

@Mamaduka
Copy link
Member

@himanshupathak95, thanks for refactoring. Left two minor notes. Let's add the test case @afercia mentioned and this should be good to merge.

I think we can just use test steps and test everything in a single test.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Feature] Colors Color management [Type] Bug An existing feature does not function as intended
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Add basic e2e test for the most ContrastChecker simple cases
4 participants