[test] Improve tests related to lists #13517
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
eps1lon
added
test
component: list
| }); | ||
|
|
||
| it('should change the component', () => { | ||
| const wrapper = mount(<ListItem button component="li" />); | ||
| const listItem = wrapper.find(MergeListContext).childAt(0); | ||
| assert.strictEqual(listItem.props().component, 'li'); | ||
| assert.strictEqual(wrapper.find(ButtonBase).props().component, 'li'); |
There was a problem hiding this comment.
Why not using findOutermostIntrinsic everywhere?
There was a problem hiding this comment.
Good point. First iteration didn't have that method. Only came up with it after the initial rewrite.
There was a problem hiding this comment.
Used getDOMNode since that is closer to what we want to test. The new helper is really only if you want to chain other enzyme methods on it.
|
@eps1lon well done! :) |
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.
Followup on #13498
The general idea is to move away from explicit child traversal to a more component tree agnostic approach. We can always argue what the actual implementation detail is (component tree or DOM tree) but I read the test as
"ok if I pass component="li" I want the li DOM element"so that's what we're testing. As far as I'm concerned nobody cares how the component tree looks and every time we add/remove a wrapper component that just handles logic we break our unit tests.For this purpose I introduced a
findOutermostIntrinsichelper. It works similar toReactWrapper#getDOMNodebut returns an actualReactWrapper. I thought about usingfind('*').first()since#findis top-down but the universal selector is not implemented (enzymejs/enzyme#1158) and might select any component if implemented and not just "DOM components".Intrinsicis something I picked up from the way TypeScript handles react: https://www.typescriptlang.org/docs/handbook/jsx.html