E2E testing and tooltip hover

[luixo]

Provide a general summary of the issue here

Hello,
I'm using tooltip from @nextui-org/react that uses @react-aria/tooltip internally (specifically useTooltipTrigger).
While trying to verify that tooltip opens in my tests (using playwright) I stumbled upon tooltip not getting opened on hover while testing.

The diff that is happening is that the tooltip state always has prop open: false and never shows up in playwright's browser.
It is happening because of the useTooltipTriggers onHoverStart function that checks interactionModality and doesn't open tooltip if it's not pointer.

Real browser sets interactionModality to pointer whenever hover is happening on a document, but testing software doesn't happen to do that.
When I add additional clicking in the browser before first hover - it works as intended.

🤔 Expected Behavior?

I expect playwright's browser hover make tooltip open - without additional clicking.

😯 Current Behavior

Tooltip is not opened if no click (move?) was made before in playwright.

💁 Possible Solution

No response

🔦 Context

No response

🖥️ Steps to Reproduce

1. Add a tooltip on a page
2. (in playwright test) Hover the tooltip
3. (in playwright test) Verify tooltip exists

Version

3.20.0

What browsers are you seeing the problem on?

Chrome

If other, please specify.

No response

What operating system are you using?

MacOS

🧢 Your Company/Team

No response

🕷 Tracking Issue

No response

[reidbarber]

When I add additional clicking in the browser before first hover - it works as intended.

I think this is working as expected, since this is how it works in a real browser currently. (i.e. open https://react-spectrum.adobe.com/react-aria/Tooltip.html and click on some other window or your desktop, then try hovering the tooltip).

If the issue is mainly excess verbosity in tests, I would suggest putting this as setup inside test.beforeEach/test.beforeAll.

I think changing this behavior could potentially have unintended consequences in places where we are relying on checking for pointer modality.

[snowystinger]

Correct, we cannot know all possible events and data that test utilities fire. Especially ones that are an abstraction to be close to user events. We work around userEvent in the same way you are describing.

react-spectrum/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js

Line 446 in cd91f8a

// trigger modality to keyboard first

react-spectrum/packages/@react-spectrum/tooltip/test/TooltipTrigger.test.js

Line 500 in cd91f8a

fireEvent.mouseMove(document.body);

I'm going to close this as working as intended, though it might be something useful to add to the discussion in #5508

[Tiberriver256]

@luixo Did you ever find something that works? None of the tricks that work in jsdom seem to work in a real browser for me.

[luixo]

Yes, I just click in the top-left corner of the screen:

await page.mouse.click(0, 0);
await locator.hover();