Components: Improve BorderBoxControl tests
#45208
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
tyxla
added
[Type] Code Quality
|
Size Change: 0 B Total Size: 1.28 MB ℹ️ View Unchanged
|
ciampo
approved these changes
Oct 24, 2022
| <BorderBoxControl { ...props } value={ defaultBorder } /> | ||
| ); | ||
|
|
||
| const widthInput = screen.getByRole( 'spinbutton' ); |
There was a problem hiding this comment.
It would even better if the spinbutton had a name that we could use in the query (like we do for other buttons).
This change would apply for all of the screen.getByRole( 'spinbutton' ) queries throughout the file
There was a problem hiding this comment.
Thanks, that's a good call! I've addressed that in 21ad8ad and actually did it for a few more of the elements we're querying. Looks much better now! 🙌
ciampo
reviewed
Oct 24, 2022
Comment on lines
+269
to
+311
| await user.click( colorButtons[ 0 ] ); | ||
| assertStyleOptionsMissing(); | ||
| await user.click( colorButtons[ 0 ] ); | ||
|
|
||
| await user.click( colorButtons[ 1 ] ); | ||
| assertStyleOptionsMissing(); | ||
| await user.click( colorButtons[ 1 ] ); | ||
|
|
||
| await user.click( colorButtons[ 2 ] ); | ||
| assertStyleOptionsMissing(); | ||
| await user.click( colorButtons[ 2 ] ); | ||
|
|
||
| await user.click( colorButtons[ 3 ] ); | ||
| assertStyleOptionsMissing(); | ||
| await user.click( colorButtons[ 3 ] ); |
There was a problem hiding this comment.
It looks like this test is timing out — could it be somehow related to the refactor from forEach to a linear set of instructions?
There was a problem hiding this comment.
I think that's the reason - the user-event clicks are much more complicated than just simulating a single event. And because there's quite a few here, plus quite a few assertions between every click pair, this could take longer on some setups. For example, I never got to fail it locally. I've increased the timeout in 4e6c822 to fix this, but since we're working with fake timers, it doesn't make the test slower, so we're good.
tyxla
force-pushed
the
refactor/border-box-control-tests
branch
from
4e6c822 to
abc6cbd
Compare
tyxla
force-pushed
the
refactor/border-box-control-tests
branch
from
abc6cbd to
67c344f
Compare
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
What?
This PR improves the
BorderBoxControlcomponent tests.Why?
This helps the tests to follow the best practices for writing RTL tests and improves the code quality.
How?
We're enhancing a few different items in these tests:
@testing-library/user-eventinstead offireEvent- primary motivation for this PR.render()in separate helper functions, rather run them inline.screenqueries in separate helper functions either.Testing Instructions
Verify tests still pass:
npm run test:unit packages/components/src/border-box-control/test/index.js