Run every test with and without scoped-element-registry polyfill

[aghArdeshir]

This PR fixes #2351

• Runs every test two times: once with the scoped-element-registry polyfill and once without it.
• Uses testGroups to achieve this
• Why? Because that polyfill affects the behavior of components, and gives us false positives. The users of the lion library may not all have loaded that polyfill.
• Creates two suffixes for test files: some-test.polyfill.test.js and some-test.no-polyfill.test.js for tests that require to be run only with/without the polyfill.
• The SlotMixin test had two tests at the end of the file:
• • Moved one of them to another file and suffixed it with .polyfill, because that needed polyfill to pass. Also refactored it to use a simple spy instead of a mocked object.
• • Removed the other test because it was lying. The title of the test was does not scope elements when polyfill not loaded but when you actually remove the polyfill from test config, it fails!
• • ❓ Do I need to extract the refactor and removal of SlotMixin tests as a separate MR?
• ❓ I'd loved to be able to hint when a test fails, did it fail with or without the polyfill, but failed to do so. Any idea?

UPDATE: Below is the original message of MR, which is not accurate anymore. This PR is re-purposed.

- We should not load a polyfill globally in tests environment, because it affects how tests behave and may give us false positive and false confidence.
- Every test that needs polyfill, loads the polyfill only for itself.
- No unnecessary mocking is required. Spy would do the job in this scneario.
- Adds a util for adding a script in tests on demand.
- Removes one unnecessary ts-ignore

[changeset-bot]

⚠️ No Changeset found

Latest commit: 2e883d6

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[okadurin]

Hi @aghArdeshir ,
Thanks a lot for the contribution! Indeed at some point we added a polyfill for all tests. The right solution would be to run all the tests with and without the polyfill to be sure the code works well in all cases. I think ideally there should be 2 configuration files like web-test-runner-with-polyfill.config.mjs and web-test-runner-without-polyfill.config.mjs which we run on every npm run test. To do that it will require duplicating some tests as some of them were slightly modified when the polyfill support was added. Here is one of those that was modified.
Do you think you could propose a solution for this request?

[aghArdeshir]

Intersting @okadurin . I see now what we are trying to test. Yes I may be able to look into this.

I'll let you know here if I could come up with a solution or if I eventually gave up

[aghArdeshir]

I believe I found a better approach @okadurin : https://modern-web.dev/docs/test-runner/cli-and-configuration/#customize-html-environment-per-test-group

I can duplicate our test groups (groups.concat(groups)), but give each a different testRunnerHtml. That works. But right now I'm trying to make sure the output is also obvious, like, if a test fails, I immediately know if it fails with or without the scoped custom element registry polyfill.

[aghArdeshir]

@okadurin I've updated my MR and have also updated my original message (#2353 (comment)) to list what changes I made. Take another look?