feat(browser): isolate browser tests

[userquin]

This PR isolates tests creating an iframe per test file.

On my local tests, I need to start the tests a few times to get it working, I have added vue and react examples and vue should also work (this is one we need to revert changes).

DRAFT: we'll need to revert some changes in existing tests and cleanup some modules.

[bolt-new-by-stackblitz[bot]]

Run & review this pull request in StackBlitz Codeflow.

[nstepien]

creating an iframe per test file

There can be only 1 focused element per page, so I don't think iframes are good enough for isolation. Maybe 1 page per test? Not sure if it's possible to preserve/emulate focus like with the devtools' "Emulate a focused page" command.

[sheremet-va]

creating an iframe per test file

There can be only 1 focused element per page, so I don't think iframes are good enough for isolation. Maybe 1 page per test? Not sure if it's possible to preserve/emulate focus like with the devtools' "Emulate a focused page" command.

This is a valid concern. We need to add a test with focusing elements.

[userquin]

creating an iframe per test file

There can be only 1 focused element per page, so I don't think iframes are good enough for isolation. Maybe 1 page per test? Not sure if it's possible to preserve/emulate focus like with the devtools' "Emulate a focused page" command.

This is a valid concern. We need to add a test with focusing elements.

I'll try to add a focus test...

[userquin]

working

[userquin]

To run browser tests:

1. from root ni && nr build and then
2. open a new terminal, change to examples/vue-browser and run nr test
3. open a new terminal, change to examples/react-testing-lib-browser and run nr test
4. open a new terminal, change to examples/svelte-browser and run nr test

I'll try to add more frameworks examples: lit (error: check screenshot below), svelte (done), preact (is there some preact test in the repo?) and solid, and maybe also sveltekit.

lit error:

[netlify[bot]]

✅ Deploy Preview for fastidious-cascaron-4ded94 canceled.

Name	Link
🔨 Latest commit	94296614fcafd48e595aaf1f07d07c30b16bbc26
🔍 Latest deploy log	https://app.netlify.com/sites/fastidious-cascaron-4ded94/deploys/652f04002f4a9f0008ae9bfd

[sheremet-va]

@userquin can you resolve conflicts last time?

[userquin]

@userquin can you resolve conflicts last time?

Sure

[jfgreffier]

Closes #3154

[shairez]

Looks like an awesome feature! Is there anything blocking it other than fixing the conflicts?

[DanWebb]

Is the browser UI tab still a planned addition after #5036? 🤞🙏

[grumd]

Seems like this PR also fixes another issue. By default iframe width is 300px, and currently vitest does not override it with 100vw. So all the tests you'll run are limited to 300px width instead of the full browser viewport because they are run in #vitest-tester > iframe. I had to resort to window.parent.document hacks in my vitest.setup.ts to make it work.