-
Notifications
You must be signed in to change notification settings - Fork 466
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
fix(ByLabelText): support IE and other legacy browsers #726
fix(ByLabelText): support IE and other legacy browsers #726
Conversation
Polyfill HTMLInputElement.labels to support IE and other legacy browsers. Closes #723.
This pull request is automatically built and testable in CodeSandbox. To see build info of the built libraries, click here or the icon next to each commit SHA. Latest deployment of this branch, based on commit 311891b:
|
Codecov Report
@@ Coverage Diff @@
## master #726 +/- ##
=========================================
Coverage 100.00% 100.00%
=========================================
Files 24 24
Lines 646 651 +5
Branches 168 170 +2
=========================================
+ Hits 646 651 +5
Continue to review full report at Codecov.
|
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.
Solid 👍 Just a few items of some feedback. Thanks a bunch!
src/__tests__/element-queries.js
Outdated
expect(getByLabelText('7th one').id).toBe('seventh-id') | ||
expect(getByLabelText('8th one').id).toBe('eighth.id') | ||
|
||
inputLabelsSpy.mockRestore() |
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.
If this test fails, then the mock won't be restored and other tests could be impacted.
What we should do instead, is add jest.restoreAllMocks
in place of the line in our setup here:
dom-testing-library/tests/setup-env.js
Line 40 in 54aebf7
console.warn.mockRestore() |
That should handle this case and everything else.
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.
Got it! I didn't realize this approach could hurt test isolation, but it makes plenty of sense. 🌠
src/__tests__/element-queries.js
Outdated
// Simulate lack of support for HTMLInputElement.prototype.labels | ||
const inputLabelsSpy = jest | ||
.spyOn(HTMLInputElement.prototype, 'labels', 'get') | ||
.mockReturnValue(undefined) |
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.
This is a great idea!
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, but all credit goes to @eps1lon's reference implementation 🙂
.spyOn(HTMLInputElement.prototype, 'labels', 'get') | ||
.mockReturnValue(undefined) | ||
|
||
const {getByLabelText} = renderIntoDocument(` |
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.
I'm not sure how necessary it is to copy/paste this from the other test. I think a single label that situation that covers the code path we're testing should suffice.
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.
Ideally we'd use the same test that is run with a test matrix covering different environments i.e. run with
.labels
and.control
(modern browser- no
.labels
but.control
(IE 11) - neither
.lables
nor.control
(edge 17)
I guess we can set something up like this in another PR where we leverage different jest environments that mock out problematic DOM methods we're aware of.
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.
neither .lables nor .control (edge 17)
Shoot, I overlooked this. Appreciate you calling it out, @eps1lon !
I'll push my changes that reduce this to one test case for now. I also like the idea of running a comprehensive set of tests in different environments, and if it's preferable to take that approach instead of what's in this PR, please feel free to close this.
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.
Nah, let's get this in then we can add that in a future PR.
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.
Sure thing. Then if there are no other comments, this just needs an approval. 🙏
@all-contributors please add @maxnewlands for code and tests |
I've put up a pull request to add @maxnewlands! 🎉 |
🎉 This PR is included in version 7.21.8 🎉 The release is available on:
Your semantic-release bot 📦🚀 |
What:
*ByLabelText
is updated to support IE11 and other legacy browsers.Why:
Closes #723.
How:
HTMLInputElement.prototype.labels
is polyfilled. Existing test covering primary use cases of getByLabelText is copied into a new test, where thelabels
property is mocked to simulate absence of support.Checklist:
Documentation added to theN/Adocs site
Typescript definitions updatedN/AThis PR stops short of polyfilling
HTMLLabelElement.prototype.control
, which appears to be well-supported in older browsers.