-
-
Notifications
You must be signed in to change notification settings - Fork 32.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
[material-ui][Divider] Enable borderStyle enhancement in divider with children #42715
Conversation
Netlify deploy previewhttps://deploy-preview-42715--material-ui.netlify.app/ Bundle size reportDetails of bundle changes (Toolpad) |
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.
Thanks for working on this @anuujj! I left a question.
The solution is working as expected: https://codesandbox.io/p/sandbox/pr-42715-1-pyqg9y
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.
May I ask you to add a test to prevent future regressions? 😊
Hi @DiegoAndai, I tried adding a test for this but ran into a limitation of JSDOM i.e it does not implement the cascading of styles. So, the styling in test is different from the behaviour in browser. Similar issue is highlighted here #24761, if you are aware of any workaround, feel free to suggest that. |
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.
Hi @DiegoAndai, I tried adding a test for this but ran into a limitation of JSDOM i.e it does not implement the cascading of styles. So, the styling in test is different from the behaviour in browser. Similar issue is highlighted here #24761, if you are aware of any workaround, feel free to suggest that.
Can you try to skip the test in JSDOM as suggested in the warning above:
if (/jsdom/.test(window.navigator.userAgent)) {
this.skip();
}
You can take a look at other test files on how it's done. When you skip the test in JSDOM, it will run on browser instead.
} | ||
}); | ||
|
||
it('should set the border-style dashed in before and after pseudoclass', () => { |
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.
@anuujj here's an example on how to assert:
expect(container.firstChild).toHaveComputedStyle({ |
We use expect
.
On another note, the border left style should only be applied with the vertical
prop, so we'll need two tests. One for horizontal and one for vertical.
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.
yeah, I was low on bandwidth this week and having some issue with the local test setup. I will try to fix these on the weekend. Moving the PR to draft for now.
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.
added two tests as you suggested and used expect for assertions. You can review now. Thanks.
ede8015
to
2fd81b7
Compare
@anuujj I pushed a commit to fix the test structure and description in 89dcd02. Rest looks good. @DiegoAndai to review. I think we can cherry-pick this to master. |
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, thanks @anuujj and @ZeeshanTamboli.
Closes #42569