-
Notifications
You must be signed in to change notification settings - Fork 4.3k
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
Refactoring BorderControl
's unit tests
#54155
Conversation
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`.
Was running the wrong tests locally
…fireevent-userevent
There was a problem hiding this 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, { |
There was a problem hiding this comment.
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.
There was a problem hiding this comment.
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,
} );
There was a problem hiding this comment.
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 :)
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.
…fireevent-userevent
There was a problem hiding this 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, { |
There was a problem hiding this comment.
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 :)
What?
This patch migrates uses of
fireEvent
inBorderControl
totesting-library/user-event
, where possible; there is one remaining usage around sliders/range inputs that isn't currently supported byuserEvent
.Why?
We should, where feasible, be using
userEvent
overfireEvent
, as it better replicates how users interact with the DOM.How?
The
BorderControl
test file has been refactored to (mostly) replacefireEvent
calls with an equivalent use ofuserEvent
.Testing Instructions
Nothing user-facing is changed, only automated tests. This should be covered by the CI running against this PR.