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.

Sign up for GitHub

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

Jump to bottom

Add basic e2e test for the most ContrastChecker simple cases #68853

Open
2 of 6 tasks
afercia opened this issue Jan 23, 2025 · 3 comments · May be fixed by #68856
Open
2 of 6 tasks

Add basic e2e test for the most ContrastChecker simple cases #68853

afercia opened this issue Jan 23, 2025 · 3 comments · May be fixed by #68856
Assignees
@himanshupathak95
Labels
[Feature] Colors Color management [Package] E2E Tests /packages/e2e-tests [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended

Comments

@afercia
Copy link
Contributor

afercia commented Jan 23, 2025

Description

After #68799 it would be nice to add at least one e2e test to make sure the ContrastChecker detects and checks colors reliably for the most simple case:

  • Add a paragraph with some content.
  • Set both background and text colors to black.
  • Test that the ContrastChecker notice appears in the block settings panel immediately as soon as the low-contrast color pair is applied.

For the future, it would be nice to expand the ContrastChecker tests when other pending issues will ne solved, they are tracked at #60824

Step-by-step reproduction instructions

N/A

Screenshots, screen recording, code snippet

No response

Environment info

No response

Please confirm that you have searched existing issues in the repo.

  • Yes

Please confirm that you have tested with all plugins deactivated except Gutenberg.

  • Yes

Please confirm which theme type you used for testing.

  • Block
  • Classic
  • Hybrid (e.g. classic with theme.json)
  • Not sure
@afercia afercia added [Feature] Colors Color management [Package] E2E Tests /packages/e2e-tests [Type] Bug An existing feature does not function as intended labels Jan 23, 2025
@afercia afercia mentioned this issue Jan 23, 2025
Merged
@himanshupathak95
Copy link
Contributor

Hey @afercia, I agree with this proposal and would love to write an e2e test for the ContrastChecker component since I have already written a storybook for the same.

@himanshupathak95 himanshupathak95 linked a pull request Jan 23, 2025 that will close this issue
Open
@github-actions github-actions bot added the [Status] In Progress Tracking issues with work in progress label Jan 23, 2025
@afercia
Copy link
Contributor Author

afercia commented Jan 24, 2025

Sure @himanshupathak95 do feel free to go ahead!

@juanfra
Copy link
Member

juanfra commented Jan 24, 2025

This is great! The code currently detects the background color from parent nodes, so it might be a good idea to test that as well. Specifically, we could check if selecting a text color triggers a warning when it doesn’t meet contrast requirements against the site’s background color.

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

@himanshupathak95 himanshupathak95

Labels
[Feature] Colors Color management [Package] E2E Tests /packages/e2e-tests [Status] In Progress Tracking issues with work in progress [Type] Bug An existing feature does not function as intended
Projects
None yet
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Testing: Add e2e test for basic ContrastChecker functionality himanshupathak95/gutenberg
3 participants
@juanfra @afercia @himanshupathak95