Components: improve tests for ToggleGroupControl

[flootr]

What?

Improve tests for the ToggleGroupControl component.

Why?

Follow along RTL best practices to improve code quality.

How?

• Using @testing-library/user-event instead of fireEvent
• Assert using .toBeVisible rather than .toBeInTheDocument in one case

Testing Instructions

Verify unit tests still pass

npm run test:unit packages/components/src/toggle-group-control/test

[codesandbox]

  Open in CodeSandbox Web Editor | VS Code | VS Code Insiders

[tyxla]

Thanks for this @flootr! It looks good overall, I just have a couple of questions.

[tyxla]

Did we mean to change the focus to be click instead?

[jsnajdr]

In both tests, we're testing whether a tooltip appears or not over a radio form item when the item is focused. If userEvent has some method for simulating "move the mouse over the input", that would be great to use here. The tooltip is then supposed to appear.

user.tab() works because it focuses the right element, but it's quite an indirect and non-obvious way to do that.

I think user.click is wrong. The tooltip indeed doesn't appear, so the test passes, but it doesn't appear for the wrong reasons.

[tyxla]

I agree with Jarda on this. Also IMHO the safest bet is to just keep triggering the focus event, but just not with fireEvent:

Suggested change

	await user.click( secondRadio );
	secondRadio.focus();

[flootr]

Thanks for the feedback! I agree on keeping it simple in this case. Does 848e112 work?

[tyxla]

As discussed face-to-face, we can try using userEvent.hover() and if that's enough, it resembles the user behavior much better, but it also is wrapped in an act() so it'll be compatible to React 18.

[flootr]

Implemented via 443a127

[tyxla]

LGTM 🚀 Thanks!