Components: Refactor Icon tests to @testing-library/react
#44051
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
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
| @@ -111,7 +108,7 @@ describe( 'Icon', () => { | |||
| [ 'svg element', { icon: svg } ], | |||
| [ 'component', { icon: MyComponent } ], | |||
| ] )( '%s', ( label, props ) => { | |||
| it( 'should pass through size', () => { | |||
| it.skip( 'should pass through size', () => { | |||
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.
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
| @@ -111,7 +108,7 @@ describe( 'Icon', () => { | |||
| [ 'svg element', { icon: svg } ], | |||
| [ 'component', { icon: MyComponent } ], | |||
| ] )( '%s', ( label, props ) => { | |||
| it( 'should pass through size', () => { | |||
| it.skip( 'should pass through size', () => { | |||
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)
|
@ciampo
|
ciampo
approved these changes
Sep 12, 2022
tyxla
approved these changes
Sep 12, 2022
|
|
||
| expect( wrapper.name() ).toBe( 'span' ); | ||
| expect( screen.getByTestId( testId ) ).toBeInTheDocument(); |
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 ); |
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 ); |
| @@ -74,73 +70,26 @@ describe( 'Icon', () => { | |||
| size={ 32 } | |||
| /> | |||
| ); | |||
| const icon = screen.queryByTestId( testId ); | |||
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 ); |
There was a problem hiding this comment.
Suggested change
| const icon = screen.queryByTestId( testId ); | |
| const icon = screen.getByTestId( testId ); |
|
Thank you for the review, @tyxla ! |
t-hamano
commented
Sep 12, 2022
| @@ -21,7 +21,7 @@ describe( 'Icon', () => { | |||
| it( 'renders nothing when icon omitted', () => { | |||
| render( <Icon data-testid={ testId } /> ); | |||
|
|
|||
| expect( screen.queryByTestId( testId ) ).not.toBeInTheDocument(); | |||
| expect( screen.queryByTestId( testId ) ).toBeNull(); | |||
There was a problem hiding this comment.
Do you think this additional fix is reasonable?
(.not.toBeVisible() didn't work)
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.
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().
There was a problem hiding this comment.
I see!
I have reverted this change and would like to merge it once the test passes.
|
Thank you @tyxla for the additional review ❤️ |
cbravobernal
added
[Type] Code Quality
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 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.