Size Change: 0 B

Total Size: 1.25 MB

_{compressed-size-action}

Optionally, we could look into partially rewriting these tests using @testing-library/user-event

The key word "partially" 😄. I had a go at it a few days ago and realized there's no user-event way to manipulate a input type=range testing-library/user-event#871.

Optionally, we could look into partially rewriting these tests using @testing-library/user-event

The key word "partially" 😄. I had a go at it a few days ago and realized there's no user-event way to manipulate a input type=range testing-library/user-event#871.

Oh well 😅 We could at least stop using document.querySelector and switch to getByRole or something similar

Thanks for the suggested improvements 👍

I've removed the use of querySelector from these tests.

The one catch here was being able to select the icons as they are only spans with no alt, text, or role. I've added a role="img" to the RangeControl's icons. Is this ok? Or, does that create different problems?

As for leveraging @testing-library/user-event I'd like to address that in a follow-up even if it is only a partial conversion.

The one catch here was being able to select the icons as they are only spans with no alt, text, or role. I've added a role="img" to the RangeControl's icons. Is this ok? Or, does that create different problems?

I think this is safe, especially since the svg element is aria-hidden="true" to begin with.

But... to be honest I don't think the "should render with icons" test is worth contorting ourselves to avoid a querySelector. Querying for the img role isn't making our test robust (it will break when we add some kind of other image to the component), and we still need to check for the CSS class names anyway. We might as well just querySelector the class names — it's actually more robust in this case.

I'm actually not sure about adding the role="img" to icons — that should be done only if we believe that they should be announced by assistive technology, i.e. if they carry any "semantic value" (which they may not, in case they're added only for "visual presentation")

Thanks for the guidance @mirka & @ciampo 🙇

I've removed the role="img" from the Icons and reverted the test to use querySelector. (57fb884)