test(component): refactor Checkbox component tests #655
Conversation
yurytut1993
force-pushed
the
bigdesign-635-checkbox
branch
2 times, most recently
from
18d08e2
to
a2e99ac
Compare
yurytut1993
force-pushed
the
bigdesign-635-checkbox
branch
from
a2e99ac
to
884bc18
Compare
| const labels = container.querySelectorAll('label'); | ||
| render(<Checkbox label="Checked" checked={true} onChange={onChange} />); | ||
|
|
||
| const labels = screen.getByRole<HTMLInputElement>('checkbox').parentElement!.querySelectorAll('label'); |
There was a problem hiding this comment.
Could this be screen.getAllByRole('label')?
There was a problem hiding this comment.
I was also looking on similar approach but looks like such role does not exist
There was a problem hiding this comment.
what about getByText(/checked/)? might still be better than all this... 🤷
There was a problem hiding this comment.
In this case we will not catch label with svg inside
There was a problem hiding this comment.
Totally forgot there is the screen.getByLabelText('') query 🤦
There was a problem hiding this comment.
Query above may return an input associated with the label, but we need to collect all labels and then iterate through them. Can you provide some code according to our component? Maybe I have wrong understanding of your idea
|
Outdated 👍 |
What?
This PR is aimed to refactor Checkbox component's tests according to best practices. We take into account recommendations from Kent C. Dodds article. For instance, using
containerforquery-ing elements has been removed. Instead, we replace it withscreen.Why?
the changes are based on GitHub issue and PRs will be open for each component separately.
Testing/Proof
The tests have been successfully run locally.