Popover component tests in happy-dom

[gu-stav]

Environment

Developement/Production OS: Windows 10 19043.1110
Node version: 20.0.0
Package manager: [email protected]
Radix Vue version: 1.7.1
Vue version: 3.4.21

Link to minimal reproduction

https://stackblitz.com/edit/github-zsxecm?file=src%2Fcomponents%2F__tests__%2FRadixPopover.spec.ts

Steps to reproduce

I hope you are able to see the problem in the reproduction test-suites. It took me quite long to understand where the problem is coming from (whether it is test-utils, Teleport or testing-library), but I believe now it is coming from radix-vue.

Teleport-testing-library.spec.ts shows how testing of a ref within a Popover component is supposed to work.

RadixPopover.spec.ts contains a test that proves that this approach does not work when using Popover. The test fails, because it can never find {{ user }}.

The test suite is using vitest and happy-dom. I've swapped out the latter for jsdom, which doesn't change the situation.

Describe the bug

I think the test-suite shows two problems:

1. I think, it is currently not possible to stub out Teleport for tests. When doing so, the popover content never gets rendered which makes testing a bit harder than it could be.

2. If opening the Popover triggers an async operation, which sets a ref in the background that should be rendered within PopoverContent the ref doesn't seem to get re-rendered in a test environment.

I run into this case in a real-world application, when user-data is loaded in the background once the Popover is opened, but once the data is resolved it never gets rendered in the test, although I can see (through a console.log) that it has been resolved.

Expected behavior

1. It would be nice if we could stub Teleport. I see this more as a nice-to-have. In any case it would probably be good to add some guidance on how to test these components to the docs or a better error message, because at the moment it is a bit unclear what the proper way of testing is.

2. I would expect to be able to test refs within PopoverContent like I can for other Teleport components aswell.

Context & Screenshots (if applicable)

No response

[zernonia]

Had a quick test with the reproduction link, seems like happy-dom doesn't behave as expected.

I've added a console.log of the state of html after clicking Toggle, and realized that something was off. The data-state somehow was closed.
https://stackblitz.com/edit/github-zsxecm-dphr8r?file=src%2Fcomponents%2F__tests__%2FRadixPopover.spec.ts

I tested the same on the current repo (using jsdom), seems to be working fine.

[gu-stav]

Oh you are right 🤦🏼 Apologies I must have overlooked that jsdom works without the Teleport stub.

Do you have any idea what kind of APIs might not be implemented in happy-dom? I've had a look, but my feeling is that it must come from floating-ui already, because neither Popover, Popper or Teleport contain any DOM related APIs that might be missing.

[zernonia]

No sure tho, not quite familiar with happy-dom. In jsdom there's error being logged when DOM API were missing.
Perhaps there's a way to log that in happy-dom too?

[gu-stav]

I'll have a look 👍🏼 So far I couldn't make it log any error which makes me thing floating-ui swallows it somewhow.

What's your position on the Teleport stub? If you don't consider that a bug I'd go ahead and close this one and make sure to create a follow-up either for happy-dom or floating ui.

[zernonia]

I'll take a look too. Let's keep this open for now so anyone using happy-dom for testing can comment if they have any resolution for this 😁

[zernonia]

As this doesn't seems like an issue with radix-vue, as I've tested with jsdom and it works. Moving this to discussion instead 😁