test(switch): Redo switch tests in react-testing-library #386
Conversation
|
Test summary
Run details
View run in Cypress Dashboard ➡️ This comment has been generated by cypress-bot as a result of this project's GitHub integration settings. You can manage this integration in this project's settings in the Cypress Dashboard |
These are caught in viz reg
Remove conditional testing for check/uncheck
| getSwitch().click(); | ||
| }); | ||
| it('should be checked', () => { | ||
| getSwitch().should('be.checked'); |
There was a problem hiding this comment.
Isn't this duplication of RTL/enzyme tests?
There was a problem hiding this comment.
Cypress tests are about specifications from a user's perspective. This spec reads in full "Non-disabled Switch when the switch is clicked should be checked". Linking the given of the story being rendered, the when of the switch being clicked, and the then of the side effect of that action where the switch is now checked.
I might argue that "checked" is an implementation detail of a switch being "on", but there is a bit of controversy around how a "switch" should be labelled/read by screen readers from an accessibility standpoint. I don't remember the final say the role attribute of a Switch which effects how it will be read by a screen reader.
I personally avoid actions in unit-level tests including clicks. Most of the time firing a click event is enough for the semantic action we'd call "click", but some components will expect other browser events in a specific order and some events aren't as simple as a "click". I leave that all for Cypress which has wiring for all that. In Cypress, a "click" includes other events normally associated with "click" like "mouseover". I've seen unit tests that try to recreate all that. Yuck.
I wouldn't worry about possible duplication in testing levels. Each serve a specific purpose.
|
Dang, TravisCI is slow! 10s isn't enough to verify a Storybook doc is loaded. |
Using Workday#372 as a canonical example
Specify checkbox as an input in test desc
Add ErrorType as a static member
Summary
Alright, lots of changes here:
jest-emotioninsetupTestsinstead of locally inPageHeader.spec.tsxDoing these tests revealed a few changes that we'll need to make (tracked in #387):
tabIndex={0}, this is the default already.Switch.ErrorType.AlerttoErrorTypefromcanvas-kit-react-common. It's kind of a pain to import that also just to useSwitch.roleattribute a configurable prop. Instead ofcheckboxit could be something likeswitch.SwitchBackgroundandSwitchCircleto something more semantically correct likeSwitchTrackandSwitchThumb.