Skip to content

E2E Tests: Add test case for Link color support #69141

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
Merged
merged 14 commits into from
Jun 5, 2025
Merged

E2E Tests: Add test case for Link color support #69141

merged 14 commits into from
Jun 5, 2025

Conversation

im3dabasia
Copy link
Contributor

@im3dabasia im3dabasia commented Feb 11, 2025 •
edited
Loading

What?

Closes #30458
Related comment: #30452 (review)

Adds an E2E test to ensure that the selected link color is correctly applied in traditional (PHP-based) themes that use add_theme_support( 'experimental-link-color' );.

Why?

This E2E test ensures that link colors in traditional themes are correctly applied in the editor and frontend, preventing future regressions.

How?

  • The test inserts a paragraph block, adds a hyperlink, and applies a preset link color.
  • It verifies that the color is correctly applied in the block attributes.
  • It opens the preview page and confirms that the .has-link-color class and anchor tag are present.
  • The test is added under packages/e2e/specs/editor/various to monitor the experimental link color feature.

Testing Instructions

Ensure the tests pass

To run this specific test:

npm run test:e2e test/e2e/specs/editor/various/link-color-support.spec.js

Screenshot

image

@t-hamano t-hamano added the [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. label Feb 14, 2025
@im3dabasia im3dabasia marked this pull request as ready for review February 20, 2025 10:40
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 20, 2025 •
edited
Loading

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: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: ockham <bernhard-reiter@git.wordpress.org>

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

@im3dabasia
Copy link
Contributor Author

Hi @t-hamano ,

When you get a chance please review my PR

@im3dabasia im3dabasia force-pushed the fix/add-link-color-test branch from 05c8450 to 106531f Compare May 12, 2025 09:44
@im3dabasia
Copy link
Contributor Author

I'd appreciate your review here @ciampo and @t-hamano . I have worked on fixing the failing test cases.

Please have a look at this PR when you have a chance. 🙇

t-hamano
t-hamano reviewed May 16, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

Thanks for the PR!

If I understand correctly, the regression that #30458 wants to prevent is the problem that the link UI is available, but the color is not applied on the front end.

On the other hand, this PR does the following three things:

  • Whether the inline link UI works correctly
  • Whether the attribute for the link is added to the block
  • Whether an element or an anchor element with a class called has-link-color exist on the front end

In other words, it does not test at all whether the color is actually applied on the front end.

It would be a good idea to first organize what we really need to test.

@im3dabasia
Copy link
Contributor Author

im3dabasia commented May 16, 2025 •
edited
Loading

In other words, it does not test at all whether the color is actually applied on the front end.

It would be a good idea to first organize what we really need to test.

Thanks for the review @t-hamano , I assumed here that if the class 'has-link-color' is added the test would be good considering this class is only added if a paragraph has a link text inside it. But yeah you are right and make sense, I should have gone deeper to check the actual style is being applied or not.

Originally commented here: #30452 (review)

Original Comment

I tested this with twentytwentyone and can verify it fixes the issue with link colors set to a preset color.

This is the markup and inline style applied:

Screen Shot 2021-04-01 at 10 44 14 AM

And the before + after:

Before This PR
Screen Shot 2021-04-01 at 10 41 18 AM Screen Shot 2021-04-01 at 10 44 06 AM

Edit:

I have updated the test case to now check accurately both in editor(this was done previously also) and now the frontend too by checking the link styling are applied or not.

I would appreciate it if you could review the latest changes on this PR. I look forward to your feedback.

@im3dabasia im3dabasia force-pushed the fix/add-link-color-test branch from a0540f7 to b1089df Compare May 16, 2025 12:46
@im3dabasia im3dabasia requested a review from t-hamano May 16, 2025 12:47
t-hamano
t-hamano reviewed Jun 2, 2025
View reviewed changes
@ciampo
Copy link
Contributor

ciampo commented Jun 2, 2025

Generally speaking, I'd recommend:

  • use semantics tags to find elements on the page (eg by role, by accessible text, ...)
  • if really needed, write assertions against an element's computed styles to check applied colors (instead of classnames)

t-hamano
t-hamano reviewed Jun 5, 2025
View reviewed changes
t-hamano
t-hamano approved these changes Jun 5, 2025
View reviewed changes
Copy link
Contributor

@t-hamano t-hamano left a comment

Choose a reason for hiding this comment

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

LGTM 👍

@t-hamano t-hamano merged commit 7952344 into WordPress:trunk Jun 5, 2025
60 of 61 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.1 milestone Jun 5, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@im3dabasia @t-hamano
@ciampo @ockham @chriszarate
E2E Tests: Add test case for Link color support (WordPress#69141)
038d553 
* feat: Add initial test case setup for link color support

* fix: Add waitFor and timeout in button click

* fix: Change API to click button

* fix: Change API to click button

* feat: Check link color is applied in FE and editor

* fix: Renamed file to color-support for future continuity

* feat: Use accesible selectors for selecting menu options

* feat: Remove redundant code for applying link manually

* refactor: use api toMatchObject to check and compare styles applied in editor

* fix: Removed use of force option while clicking button

* fix: Changed to use custom link color options and not default ones for longetivity

* fix: Use accesible selector for link selection snippet

* fix: Use toHaveCSS instead of boiler plate code to check CSS applied in the frontend

* chore: Update the Test comment for frontend CSS assert

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@git.wordpress.org>
Co-authored-by: ciampo <mciampini@git.wordpress.org>
Co-authored-by: ockham <bernhard-reiter@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@t-hamano t-hamano t-hamano approved these changes

Assignees
No one assigned
Labels
[Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests.
Projects
None yet
Milestone
Gutenberg 21.1
Development

Successfully merging this pull request may close these issues.

Link color support (experimental): Add E2E Test
3 participants
@im3dabasia @ciampo @t-hamano