Components: Refactor Icon tests to @testing-library/react#44051
Merged
Components: Refactor Icon tests to @testing-library/react#44051
Icon tests to @testing-library/react#44051Conversation
t-hamano
added
[Type] Enhancement
t-hamano
force-pushed
the
refactor/icon-test-to-rtl
branch
from
1714311 to
1dc79b1
Compare
t-hamano
force-pushed
the
refactor/icon-test-to-rtl
branch
from
1dc79b1 to
fa8a107
Compare
t-hamano
changed the title
Tooltip tests to @testing-library/reactIcon tests to @testing-library/react
|
Size Change: +1.42 kB (0%) Total Size: 1.25 MB
ℹ️ View Unchanged
|
t-hamano
commented
Sep 10, 2022
| [ 'component', { icon: MyComponent } ], | ||
| ] )( '%s', ( label, props ) => { | ||
| it( 'should pass through size', () => { | ||
| it.skip( 'should pass through size', () => { |
Contributor
Author
There was a problem hiding this comment.
This test is tentatively skipped because it tests the full implementation and I was not sure how this could be replaced.
If you have a better approach to this test, I would like to hear your advice.
Contributor
There was a problem hiding this comment.
I think we can delete this whole describe.each call, I don't think it adds any value to the tests (especially since it used to check the value of the size prop on the wrapper component, and not the prop's effects on its children)
t-hamano
changed the title
Icon tests to @testing-library/reactIcon tests to @testing-library/react
ciampo
added
the
[Type] Automated Testing
ciampo
reviewed
Sep 12, 2022
Contributor
ciampo
left a comment
ciampo
left a comment
There was a problem hiding this comment.
Thank you for working on this!
Could you add a CHANGELOG entry? 🙏
| [ 'component', { icon: MyComponent } ], | ||
| ] )( '%s', ( label, props ) => { | ||
| it( 'should pass through size', () => { | ||
| it.skip( 'should pass through size', () => { |
Contributor
There was a problem hiding this comment.
I think we can delete this whole describe.each call, I don't think it adds any value to the tests (especially since it used to check the value of the size prop on the wrapper component, and not the prop's effects on its children)
Contributor
Author
|
@ciampo
|
ciampo
approved these changes
Sep 12, 2022
tyxla
approved these changes
Sep 12, 2022
| render( <Icon icon={ () => <span data-testid={ testId } /> } /> ); | ||
|
|
||
| expect( wrapper.name() ).toBe( 'span' ); | ||
| expect( screen.getByTestId( testId ) ).toBeInTheDocument(); |
Member
There was a problem hiding this comment.
Does it make sense to use .toBeVisible() which is a bit more specific than .toBeInTheDocument()?
| it( 'renders an svg element with a default width and height of 24', () => { | ||
| const wrapper = shallow( <Icon icon={ svg } /> ); | ||
| render( <Icon data-testid={ testId } icon={ svg } /> ); | ||
| const icon = screen.queryByTestId( testId ); |
Member
There was a problem hiding this comment.
We should be able to use get* instead of query* here, see this for the rationale.
Suggested change
| const icon = screen.queryByTestId( testId ); | |
| const icon = screen.getByTestId( testId ); |
| size={ 32 } | ||
| /> | ||
| ); | ||
| const icon = screen.queryByTestId( testId ); |
Member
There was a problem hiding this comment.
Suggested change
| const icon = screen.queryByTestId( testId ); | |
| const icon = screen.getByTestId( testId ); |
| it( 'renders an svg element and does not override width and height if already specified', () => { | ||
| const wrapper = shallow( <Icon icon={ svg } size={ 32 } /> ); | ||
| render( <Icon data-testid={ testId } icon={ svg } size={ 32 } /> ); | ||
| const icon = screen.queryByTestId( testId ); |
Member
There was a problem hiding this comment.
Suggested change
| const icon = screen.queryByTestId( testId ); | |
| const icon = screen.getByTestId( testId ); |
Contributor
Author
|
Thank you for the review, @tyxla ! |
t-hamano
commented
Sep 12, 2022
| render( <Icon data-testid={ testId } /> ); | ||
|
|
||
| expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument(); | ||
| expect( screen.queryByTestId( testId ) ).toBeNull(); |
Contributor
Author
There was a problem hiding this comment.
Do you think this additional fix is reasonable?
(.not.toBeVisible() didn't work)
Member
There was a problem hiding this comment.
No, I think .not.toBeInTheDocument() is ideally expressing our goal here; .toBeNull() makes the assertion vague and unclear, while what we have already is pretty transparent IMHO.
Member
There was a problem hiding this comment.
.not.toBeVisible() won't work by design, an element can't be visible if it doesn't exist in the DOM tree, that's why we check with .not.toBeInTheDocument().
Contributor
Author
There was a problem hiding this comment.
I see!
I have reverted this change and would like to merge it once the test passes.
Contributor
|
Thank you @tyxla for the additional review ❤️ |
cbravobernal
added
[Type] Code Quality
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
4 participants
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 refactors the
Icontests fromenzymeto@testing-library/react.Why?
To clarify the specification of the
Iconcomponent before refactoring to TypeScript in #35744.How?
I rewrote it according to two approaches:
testIdin almost all tests because there is no accesible text and roles.Testing Instructions
Confirm that all tests pass:
npm run test:unit packages/components/src/icon/test/index.jsAlso, it would be easier to see the changes in a split view.