Feature/create unit tests #9
Conversation
|
Here's a general question: Sometimes I see instructions to say I was kind of expecting to see |
|
When I ran
|
|
Here's what we decided to do about this:
Maybe Luke will create a new branch to hold JUST the axe stuff, and a new ticket to describe it, and we will declare victory. |
|
@tikaro npm does have some reserved words that don't require |
…s ticket and right now it isn't doing very much
|
@tikaro I updated the code to not use the Axe library for now. It's good that we doubled down on this because I was having some issues with webpack, we may want to break out our config at some point, especially when we start having different directories for test/build/etc. |
What is this PR for?
This adds two tests to the project, a unit test for testing the instantiation of Announcer, and an a11y test which uses Axe to test a couple of a features.
Where should the reviewer start?
npm installnpm testWhat should the reviewer look at?
test:jestwhich runs the unit test to make sure the component is created, has default props, and that the text node which thearia-livenode depends on updates correctly.test:a11ywhich loads the basic demo example but with the Axe suite running, this checks a few properties to make sure they are correctly used. (I wasn't really sure where else to go with this, so I am open to suggestions).Open the browser and make sure there are no errors in the dev tools console
In your terminal make sure all three tests have passed
What gif best describes this PR or how it makes you feel?
Additional comments:
This was certainly a very tricky piece to work on. Jest made things a lot easier after I took a few moments to read through the docs. It seems to be a little more opinionated since it is designed to work with React, but I think that helps a lot.
For the actual a11y testing, I have a few checks in place, but we may want to see if there are other automatic ways to test what we are doing. On the Jest end, we can check the text values inside of the components node when the prop for
textchanges which lets us know that it should update on the front-end, but that doesn't actually handle the announcing as you would hear from a screen reader.I almost wonder if we could use speech synthesis of some kind to have an easy way to test the announcing, for example the app could load, and then speech synthesis would read the text value as it changes. It wouldn't be a replacement for testing on actual devices, but might make working with it a little easier.
Definition of Done: