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

Refactoring BorderControl's unit tests #54155

Conversation

andrewhayward
Copy link
Contributor

What?

This patch migrates uses of fireEvent in BorderControl to testing-library/user-event, where possible; there is one remaining usage around sliders/range inputs that isn't currently supported by userEvent.

Why?

We should, where feasible, be using userEvent over fireEvent, as it better replicates how users interact with the DOM.

How?

The BorderControl test file has been refactored to (mostly) replace fireEvent calls with an equivalent use of userEvent.

Testing Instructions

Nothing user-facing is changed, only automated tests. This should be covered by the CI running against this PR.

This patch migrates uses of `fireEvent` in `BorderControl` to `testing-library/user-event`, where possible; there is one remaining usage that isn't currently supported by `userEvent`.
Andrew Hayward added 2 commits September 4, 2023 16:09
@andrewhayward
Copy link
Contributor Author

@ciampo @mirka would appreciate your feedback here – not used userEvent before.

Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

Great job! Just left one comment, but once that's solved I believe this PR is an good place.

Could you also add an entry to the CHANGELOG? I'd say under the Internal section. Thank you!


expect( props.onChange ).toHaveBeenNthCalledWith( 3, {
expect( props.onChange ).toHaveBeenNthCalledWith( 4, {
Copy link
Contributor

Choose a reason for hiding this comment

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

What is causing the onChange prop to be called one more time? Could it be related to the fact that user.type also clicks on the element? If that's the case, we could try passing the skipClick option, or use user.key instead (since the input already has focus).

Same applies to other instances of this PR where the number of times that the onChange prop was called changed.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

It's because of the additional user.clear call, which generates a change event of its own. Without it, user.type appends to the current value, rather than replacing it (which makes sense).

Did a bit of digging though, and user.type also accepts a selection range, which means the value of the field is totally replaced. This is closer to the original intent of directly firing a change event, so while user.clear => user.type is probably closer to most user interactions, user.type with a selection is probably preferable.

await user.type( getWidthInput(), '0', {
  initialSelectionStart: 0,
  initialSelectionEnd: 1,
} );

Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you for the digging, your proposed solution looks good :)

Andrew Hayward added 3 commits September 5, 2023 12:02
Calling `user.clear` was necessary to prevent `user.type` from adding to an existing input value. However, by providing a selection range to `user.type` we can avoid that call entirely.
Copy link
Contributor

@ciampo ciampo left a comment

Choose a reason for hiding this comment

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

LGTM 🚀

Thank you for working on this one!


expect( props.onChange ).toHaveBeenNthCalledWith( 3, {
expect( props.onChange ).toHaveBeenNthCalledWith( 4, {
Copy link
Contributor

Choose a reason for hiding this comment

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

Thank you for the digging, your proposed solution looks good :)

@ciampo ciampo merged commit e2237b8 into WordPress:trunk Sep 5, 2023
@github-actions github-actions bot added this to the Gutenberg 16.7 milestone Sep 5, 2023
@mikachan mikachan added [Type] Enhancement A suggestion for improvement. [Package] Components /packages/components labels Sep 20, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
[Package] Components /packages/components [Type] Enhancement A suggestion for improvement.
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants