[Accessibility] test(react): add toHaveNoViolations matcher #3927
Conversation
ghost
requested review from
|
Deploy preview for the-carbon-components ready! Built with commit dd458ff https://deploy-preview-3927--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit dd458ff |
|
Deploy preview for carbon-components-react failed. Built with commit dd458ff https://app.netlify.com/sites/carbon-components-react/deploys/5d726bb04aa2c400077aa37a |
|
Deploy preview for the-carbon-components ready! Built with commit 73cf6f3 https://deploy-preview-3927--the-carbon-components.netlify.com |
|
Deploy preview for carbon-elements ready! Built with commit 73cf6f3 |
|
Deploy preview for carbon-components-react ready! Built with commit 73cf6f3 https://deploy-preview-3927--carbon-components-react.netlify.com |
|
Great! Thank you so much for taking the initiative here. 🎉 |
| }); | ||
| } | ||
|
|
||
| function format(violations) { |
There was a problem hiding this comment.
Would you be down to call this like formatOutput?
There was a problem hiding this comment.
For sure, feel free to use a commit suggestion block in the comment and I'll apply it for sure 👍
| * LICENSE file in the root directory of this source tree. | ||
| */ | ||
|
|
||
| const toHaveNoViolations = require('./matchers/toHaveNoViolations'); |
There was a problem hiding this comment.
I see what this is doing, but I don't know why we need to do this 😸. Totally down to my lack of knowledge here, but maybe a quick comment block talking about what we're doing here.
There was a problem hiding this comment.
What specifically? In this case, we need to extend expect so that anywhere in our tests we can call expect(...).toHaveNoViolations similar to expect(...).toEqual(...)
There was a problem hiding this comment.
Gotcha! Exactly what I was asking. Thanks 👍
There was a problem hiding this comment.
With the file name "setup.." I just wanting to make sure I knew what was happening here.
There was a problem hiding this comment.
Totally fair, let me add a block 👍
Co-Authored-By: DAK <40970507+dakahn@users.noreply.github.com>
Co-Authored-By: DAK <40970507+dakahn@users.noreply.github.com>
…to test/add-axe-testing
| ); | ||
|
|
||
| await expect(document).toHaveNoViolations(); | ||
| mountNode.parentNode.removeChild(mountNode); |
There was a problem hiding this comment.
Does this code run when the assertion fails?
There was a problem hiding this comment.
Good call! Let me pull it out into afterEach 👍
I've been wanting to explore how to add
axe-coreas a Jest matcher and ended up throwing this exploratory PR together. Specifically, this PR adds the following matcher:Under the hood, this matcher uses
axe-coreto run tests on the given HTML Element. This PR also shows how it could be used in our React codebase underAccordion-test.jsChangelog
New
setupAfterEnv.jstest config for setting up custom jest matchersChanged
Accordion-test.jsnow includes anit('should have no AVT1 violations')blockRemoved