Skip to content

Cover Block: Add E2E Test for FocalPointPicker #69077

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 8 commits into from
May 27, 2025
Merged

Cover Block: Add E2E Test for FocalPointPicker #69077

merged 8 commits into from
May 27, 2025

Conversation

im3dabasia
Copy link
Contributor

What?

Closes: #29002

This PR adds an end-to-end (E2E) test to ensure the Focal Point Picker in the Cover block works correctly.

Why?

We've encountered regressions in the past related to the Cover block's Focal Point Picker (e.g., #28487). Currently, there is no E2E test coverage for this feature, so adding a test will help prevent future regressions.

How?

  1. Inserts a Cover block in the editor.
  2. Uploads an image to the Cover block.
  3. Uses the Focal Point Picker to set specific values for the left and top focal points.
  4. Verifies that the values are correctly applied and constrained within the valid range.

Testing Instructions

Run the test using the following command:

npm run test:e2e /Users/im3dabasia/Desktop/gutenberg/test/e2e/specs/editor/blocks/cover.spec.js

To run only this test, temporarily modify the test to use .only() like this:

test.only( 'can use focal point picker...', async () => { ... } );

For debugging, change headless to false in the playwright.config.js file to view the UI while the test runs.

Screencast

Screen.Recording.2025-02-06.at.5.08.46.PM.mov

Screenshot of the test cases for the Cover block. Observe the 8th test case, which has been added in this PR.

image

@im3dabasia im3dabasia marked this pull request as ready for review February 6, 2025 12:13
@github-actions GitHub Actions
Copy link

github-actions bot commented Feb 6, 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: 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.

@Mamaduka Mamaduka added [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests. [Block] Cover Affects the Cover Block - used to display content laid over a background image labels Feb 9, 2025
@im3dabasia
Copy link
Contributor Author

@t-hamano ,

When you have a moment, could you please review this PR?

t-hamano
t-hamano reviewed May 15, 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!

I think the current test checks the behavior of the FocalPointPicker component itself, and does not seem to be related to the Cover block at all.

We should check that the values ​​set in the focal point picker are correctly applied to the block.

So I think we need to check at least two things:

toMatchObject: Whether the focal point values are saved as attributes
toHaveCSS: Whether inline styles are added to block HTML

@im3dabasia im3dabasia requested a review from t-hamano May 26, 2025 06:06
t-hamano
t-hamano reviewed May 26, 2025
View reviewed changes
@im3dabasia im3dabasia force-pushed the fix/add-e2e-test-for-cover-block branch from 7880ab1 to 251631b Compare May 27, 2025 10:55
t-hamano
t-hamano approved these changes May 27, 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 3fb1a8f into WordPress:trunk May 27, 2025
60 checks passed
@github-actions github-actions bot added this to the Gutenberg 21.0 milestone May 27, 2025
chriszarate pushed a commit to chriszarate/gutenberg that referenced this pull request Jul 1, 2025
@im3dabasia @t-hamano
@ockham @chriszarate
Cover Block: Add E2E Test for FocalPointPicker (WordPress#69077)
3b7ba62 
* feat: Add e2e test for focal point picker in cover block

* fix: Use existing editor API to select blocks

* fix: Refactored to use Accessible selectors while selecting focalPointInputs

* feat: Expect cover block to have updated focalPoint attributes

* feat: Expect the visual DOM to have the CSS applied because of updates in focals

* feat: Update the focal inputs to have different values for top and left

* feat: Add toMatchObject for the check for attributes in core/cover

* feat: Update frontend expect to have 30% in left object-position

Co-authored-by: im3dabasia <im3dabasia1@git.wordpress.org>
Co-authored-by: t-hamano <wildworks@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
[Block] Cover Affects the Cover Block - used to display content laid over a background image [Type] Automated Testing Testing infrastructure changes impacting the execution of end-to-end (E2E) and/or unit tests.
Projects
None yet
Milestone
Gutenberg 21.0
Development

Successfully merging this pull request may close these issues.

Cover Block: Add e2e test for Focal Point Picker
3 participants
@im3dabasia @t-hamano @Mamaduka