test(integration): more web-test-runner test fixes @W-18763051 (#5414)

* refactor(wtr): move NODE_ENV_FOR_TEST default into options file

* chore(wtr): move hooks util to separate file

* chore(wtr): move aria utils to separate file

* chore(wtr): move constants to separate file

* chore(wtr): clean up custom rollup plugin

* test(wtr): get hydration tests kinda running

* test(wtr): kinda start moving to ESM instead of IIFE

* fix(shared): make sanitizeHtmlContent work

* chore(ci): run hydration tests in ci

* test(wtr): remove unused script

* test(wtr): implement missing jasmine assertions

* test(wtr): clean up test to make assertions more clear

* test(wtr): implement custom console matchers

* test(wtr): use simpler console spy

* test(wtr): remove outdated, unnecessary spies

* test(wtr): move signals util to own file

* test(wtr): implement custom error matchers

everything passed first try, which is kinda sus

* chore: split matchers into separate files

* chore: ugh tui go away

* chore: remove unused file

code is now in helpers/matchers/index.mjs

* test(wtr): conditionally import polyfills

reduces test failures from 291 to 220

* test(wtr): use one setup file instead of two

* chore: add comment explaining file

* chore(wtr): rename file

* chore(wtr): move test configs into directory

* chore(wtr): extract shared parts of config into base config object

* chore(wtr): rename config files

who needs convention?

* chore(wtr): move WTR plugins from helpers dir to config dir

* chore: move full plugins to plugin files

instead of just inner logic

* test(wtr): not all env vars are boolean

fixes ~50 test failures

* test(wtr): make tests async so they clean up properly

I'm not sure why the async matters, but it does.

* test(wtr): fix resolution of wire-service

* test(wtr): skip flaky tests

* test(wtr): add more jasmine spy adapter methods

* test(wtr): enable passing tests

turns out they just had browser log warnings, not failures

* test(wtr): make spy props non-enumerable

* test(wtr): remove unused matcher

* test(wtr): fix assertion to match error message

* test(wtr): implement jasmine.any

* test(wtr): mark test as flaky timeout

* update comment

* update comment

* test(wtr): move scripts to head instead of body

tests manipulate the body, so we use head for scripts to keep the body clean

* Update packages/@lwc/integration-not-karma/configs/base.mjs

* Update packages/@lwc/integration-not-karma/configs/base.mjs

Author: wjhsf

packages/@lwc/integration-karma/test/api/getComponentDef/index.spec.js

@@ -17,36 +17,6 @@ function testInvalidComponentConstructor(name, ctor) {
     });
 }
 
-beforeAll(function () {
-    const getNormalizedFunctionAsString = (fn) => fn.toString().replace(/(\s|\n)/g, '');
-
-    jasmine.addMatchers({
-        toEqualWireSettings: function () {
-            return {
-                compare: function (actual, expected) {
-                    Object.keys(actual).forEach((currentKey) => {
-                        const normalizedActual = Object.assign({}, actual[currentKey], {
-                            config: getNormalizedFunctionAsString(actual[currentKey].config),
-                        });
-
-                        const normalizedExpected = Object.assign({}, expected[currentKey], {
-                            config: getNormalizedFunctionAsString(
-                                expected[currentKey].config || function () {}
-                            ),
-                        });
-
-                        expect(normalizedActual).toEqual(normalizedExpected);
-                    });
-
-                    return {
-                        pass: true,
-                    };
-                },
-            };
-        },
-    });
-});
-
 testInvalidComponentConstructor('null', null);
 testInvalidComponentConstructor('undefined', undefined);
 testInvalidComponentConstructor('String', 'component');

packages/@lwc/integration-karma/test/component/native-vs-synthetic-lifecycle/index.spec.js

@@ -25,7 +25,8 @@ const expectLogs = (regexes) => {
         const args = logger.calls.allArgs();
         expect(args.length).toBe(regexes.length);
         for (let i = 0; i < args.length; i++) {
-            expect(args[i][0]).toMatch(regexes[i]);
+            expect(args[i][0]).toBeInstanceOf(Error);
+            expect(args[i][0].message).toMatch(regexes[i]);
         }
     }
 };

packages/@lwc/integration-karma/test/wire/wiring/index.spec.js

@@ -21,7 +21,7 @@ function filterCalls(echoAdapterSpy, methodType) {
 
 describe('wiring', () => {
     describe('component lifecycle and wire adapter', () => {
-        it('should call a connect when component is connected', () => {
+        it('should call a connect when component is connected', async () => {
             const spy = [];
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
             AdapterId.setSpy(spy);
@@ -30,7 +30,7 @@ describe('wiring', () => {
             expect(filterCalls(spy, 'connect').length).toBe(1);
         });
 
-        it('should call a disconnect when component is disconnected', () => {
+        it('should call a disconnect when component is disconnected', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
@@ -40,7 +40,7 @@ describe('wiring', () => {
             expect(filterCalls(spy, 'disconnect').length).toBe(1);
         });
 
-        it('should call a connect and disconnect when component is connected, disconnected twice', () => {
+        it('should call a connect and disconnect when component is connected, disconnected twice', async () => {
             const spy = [];
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
             AdapterId.setSpy(spy);
@@ -59,7 +59,7 @@ describe('wiring', () => {
     });
 
     describe('update method on wire adapter', () => {
-        it('should be called in same tick when component with wire no dynamic params is created', () => {
+        it('should be called in same tick when component with wire no dynamic params is created', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             expect(spy.length).toBe(0);
@@ -83,7 +83,7 @@ describe('wiring', () => {
                 setFeatureFlagForTest('ENABLE_WIRE_SYNC_EMIT', false);
             });
 
-            it('should be called synchronously after connect when a component with wire that has dynamic params is created', () => {
+            it('should be called synchronously after connect when a component with wire that has dynamic params is created', async () => {
                 const spy = [];
                 AdapterId.setSpy(spy);
                 expect(spy.length).toBe(0);
@@ -96,7 +96,7 @@ describe('wiring', () => {
                 expect(spy[1].method).toBe('update');
             });
 
-            it('should call synchronously update only once when the component is created and a wire dynamic param is modified', () => {
+            it('should call synchronously update only once when the component is created and a wire dynamic param is modified', async () => {
                 const spy = [];
                 AdapterId.setSpy(spy);
                 expect(spy.length).toBe(0);
@@ -112,7 +112,7 @@ describe('wiring', () => {
             });
         });
 
-        it('should be called next tick when the component with wire that has dynamic params is created', () => {
+        it('should be called next tick when the component with wire that has dynamic params is created', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             expect(spy.length).toBe(0);
@@ -130,7 +130,7 @@ describe('wiring', () => {
             });
         });
 
-        it('should call update only once when the component is created and a wire dynamic param is modified in the same tick', () => {
+        it('should call update only once when the component is created and a wire dynamic param is modified in the same tick', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             expect(spy.length).toBe(0);
@@ -147,7 +147,7 @@ describe('wiring', () => {
             });
         });
 
-        it('should be called only once during multiple renders when the wire config does not change', () => {
+        it('should be called only once during multiple renders when the wire config does not change', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
@@ -165,7 +165,7 @@ describe('wiring', () => {
                 });
         });
 
-        it('should be called when the wire parameters change its value.', () => {
+        it('should be called when the wire parameters change its value.', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
@@ -186,7 +186,7 @@ describe('wiring', () => {
                 });
         });
 
-        it('should be called for common parameter when shared among wires', () => {
+        it('should be called for common parameter when shared among wires', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             const elm = createElement('x-bc-consumer', { is: BroadcastConsumer });
@@ -209,7 +209,7 @@ describe('wiring', () => {
             });
         });
 
-        it('should not update when setting parameter with same value', () => {
+        it('should not update when setting parameter with same value', async () => {
             const spy = [];
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
             document.body.appendChild(elm);
@@ -255,7 +255,7 @@ describe('wiring', () => {
             expect(dynamicValue.textContent).toBe('modified value');
         });
 
-        it('should not call update when component is disconnected.', () => {
+        it('should not call update when component is disconnected.', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
@@ -272,7 +272,7 @@ describe('wiring', () => {
                 });
         });
 
-        it('should call update when component is re-connected.', () => {
+        it('should call update when component is re-connected.', async () => {
             const spy = [];
             AdapterId.setSpy(spy);
             const elm = createElement('x-echo-adapter-consumer', { is: ComponentClass });
@@ -302,7 +302,7 @@ describe('wiring', () => {
 });
 
 describe('wired fields', () => {
-    it('should rerender component when adapter pushes data', () => {
+    it('should rerender component when adapter pushes data', async () => {
         BroadcastAdapter.clearInstances();
         const elm = createElement('x-bc-consumer', { is: BroadcastConsumer });
         document.body.appendChild(elm);
@@ -322,7 +322,7 @@ describe('wired fields', () => {
             });
     });
 
-    it('should rerender component when wired field is mutated from within the component', () => {
+    it('should rerender component when wired field is mutated from within the component', async () => {
         BroadcastAdapter.clearInstances();
         const elm = createElement('x-bc-consumer', { is: BroadcastConsumer });
         document.body.appendChild(elm);
@@ -343,7 +343,7 @@ describe('wired fields', () => {
 });
 
 describe('wired methods', () => {
-    it('should call component method when wired to a method', () => {
+    it('should call component method when wired to a method', async () => {
         BroadcastAdapter.clearInstances();
         const elm = createElement('x-bc-consumer', { is: BroadcastConsumer });
         document.body.appendChild(elm);
@@ -355,7 +355,7 @@ describe('wired methods', () => {
         });
     });
 
-    it('should support method override', () => {
+    it('should support method override', async () => {
         const spy = [];
         EchoWireAdapter.setSpy(spy);
         const elm = createElement('x-inherited-methods', { is: InheritedMethods });
@@ -376,7 +376,7 @@ describe('wired methods', () => {
 });
 
 describe('context aware', () => {
-    it('should receive the source element tag name when adapter is constructed', () => {
+    it('should receive the source element tag name when adapter is constructed', async () => {
         const spy = [];
         ContextLog.setSpy(spy);
 

…-not-karma/web-test-runner.hydration.mjs …c/integration-not-karma/configs/base.mjspackages/@lwc/integration-not-karma/web-test-runner.hydration.mjs renamed to packages/@lwc/integration-not-karma/configs/base.mjs packages/@lwc/integration-not-karma/web-test-runner.hydration.mjs renamed to packages/@lwc/integration-not-karma/configs/base.mjs

@@ -1,8 +1,9 @@
+import { join } from 'node:path';
 import { LWC_VERSION } from '@lwc/shared';
-import * as options from './helpers/options.mjs';
-import wrapHydrationTest from './helpers/hydration-tests.mjs';
+import * as options from '../helpers/options.mjs';
 
-const pluck = (obj, keys) => Object.fromEntries(keys.map((k) => [k, Boolean(obj[k])]));
+const pluck = (obj, keys) => Object.fromEntries(keys.map((k) => [k, obj[k]]));
+const maybeImport = (file, condition) => (condition ? `await import('${file}');` : '');
 
 /** `process.env` to inject into test environment. */
 const env = {
@@ -20,32 +21,21 @@ const env = {
     LWC_VERSION,
     NODE_ENV: options.NODE_ENV_FOR_TEST,
 };
+
 /** @type {import("@web/test-runner").TestRunnerConfig} */
 export default {
-    files: [
-        // FIXME: These tests are just symlinks to integration-karma for now so the git diff smaller
-        'test-hydration/**/*.spec.js',
-        '!test-hydration/light-dom/scoped-styles/replace-scoped-styles-with-dynamic-templates/index.spec.js',
-    ],
     nodeResolve: true,
-    rootDir: import.meta.dirname,
+    rootDir: join(import.meta.dirname, '..'),
     plugins: [
         {
             resolveImport({ source }) {
                 if (source === 'test-utils') {
-                    return '/helpers/wtr-utils.mjs';
+                    return '/helpers/utils.mjs';
                 } else if (source === 'wire-service') {
-                    return '@lwc/wire-service';
-                }
-            },
-            async serve(ctx) {
-                // Hydration test "index.spec.js" files are actually just config files.
-                // They don't directly define the tests. Instead, when we request the file,
-                // we wrap it with some boilerplate. That boilerplate must include the config
-                // file we originally requested, so the ?original query parameter is used
-                // to return the file unmodified.
-                if (ctx.path.endsWith('.spec.js') && !ctx.query.original) {
-                    return await wrapHydrationTest(ctx.path.slice(1)); // remove leading /
+                    // To serve files outside the web root (e.g. node_modules in the monorepo root),
+                    // @web/dev-server provides this "magic" path. It's hacky of us to use it directly.
+                    // `/__wds-outside-root__/${depth}/` === '../'.repeat(depth)
+                    return '/__wds-outside-root__/1/wire-service/dist/index.js';
                 }
             },
             async transform(ctx) {
@@ -59,16 +49,19 @@ export default {
     testRunnerHtml: (testFramework) =>
         `<!DOCTYPE html>
         <html>
-          <body>
+          <head>
+            <!-- scripts are included in the head so that the body can be fully reset between tests -->
             <script type="module">
             globalThis.process = ${JSON.stringify({ env })};
             globalThis.lwcRuntimeFlags = ${JSON.stringify(
                 pluck(options, ['DISABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE'])
             )};
+
+            ${maybeImport('@lwc/synthetic-shadow', !options.DISABLE_SYNTHETIC)}
+            ${maybeImport('@lwc/aria-reflection', options.ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL)}
             </script>
             <script type="module" src="./helpers/setup.mjs"></script>
-            <script type="module" src="./helpers/wtr-utils.mjs"></script>
             <script type="module" src="${testFramework}"></script>
-          </body>
+          </head>
         </html>`,
 };

packages/@lwc/integration-not-karma/configs/hydration.mjs

@@ -0,0 +1,19 @@
+// Use native shadow by default in hydration tests; MUST be set before imports
+process.env.DISABLE_SYNTHETIC ??= 'true';
+import baseConfig from './base.mjs';
+import hydrationTestPlugin from './plugins/serve-hydration.mjs';
+
+/** @type {import("@web/test-runner").TestRunnerConfig} */
+export default {
+    ...baseConfig,
+    files: [
+        // FIXME: These tests are just symlinks to integration-karma for now so the git diff smaller
+        'test-hydration/**/*.spec.js',
+        // FIXME: hits timeout?
+        '!test-hydration/light-dom/scoped-styles/replace-scoped-styles-with-dynamic-templates/index.spec.js',
+        // FIXME: This uses ENABLE_SYNTHETIC_SHADOW_IN_MIGRATION to detect status,
+        // we should just use DISABLE_SYNTHETIC instead
+        '!test-hydration/synthetic-shadow/index.spec.js',
+    ],
+    plugins: [...baseConfig.plugins, hydrationTestPlugin],
+};

packages/@lwc/integration-not-karma/configs/integration.mjs

@@ -0,0 +1,52 @@
+import baseConfig from './base.mjs';
+import testPlugin from './plugins/serve-integration.mjs';
+
+/** @type {import("@web/test-runner").TestRunnerConfig} */
+export default {
+    ...baseConfig,
+    files: [
+        // FIXME: These tests are just symlinks to integration-karma for now so the git diff smaller
+        'test/**/*.spec.js',
+        '!test/events/focus-event-related-target/index.spec.js',
+        '!test/light-dom/multiple-templates/index.spec.js',
+        '!test/light-dom/scoped-slot/if-block/index.spec.js',
+        '!test/light-dom/scoped-styles/index.spec.js',
+        '!test/light-dom/style-global/index.spec.js',
+        '!test/misc/clean-dom/index.spec.js',
+        '!test/polyfills/document-body-properties/index.spec.js',
+        '!test/polyfills/document-properties/index.spec.js',
+        '!test/profiler/mutation-logging/index.spec.js',
+        '!test/regression/invalid-key/index.spec.js',
+        '!test/rendering/iframe/index.spec.js',
+        '!test/rendering/inner-outer-html/index.spec.js',
+        '!test/rendering/legacy-stylesheet-api/index.spec.js',
+        '!test/rendering/sanitize-stylesheet-token/index.spec.js',
+        '!test/rendering/slotting/index.spec.js',
+        '!test/rendering/stylesheet-caching/index.spec.js',
+        '!test/shadow-dom/ShadowRoot.elementsFromPoint/index.spec.js',
+        '!test/signal/protocol/index.spec.js',
+        '!test/spread/index.spec.js',
+        '!test/swapping/styles/index.spec.js',
+        '!test/template/directive-for-each/index.spec.js',
+
+        // Flaky tests that sometimes time out
+        '!test/light-dom/host-pseudo/index.spec.js',
+        '!test/rendering/programmatic-stylesheets/index.spec.js',
+        '!test/shadow-dom/multiple-templates/index.spec.js',
+        '!test/synthetic-shadow/dom-manual-sharing-nodes/index.spec.js',
+        '!test/synthetic-shadow/host-pseudo/index.spec.js',
+        '!test/synthetic-shadow/style-svg/index.spec.js',
+
+        // Cannot reassign properties of module
+        '!test/api/sanitizeAttribute/index.spec.js',
+
+        // Hacky nonsense highly tailored to Karma
+        '!test/custom-elements-registry/index.spec.js',
+
+        // Logging mismatches
+        '!test/accessibility/synthetic-cross-root-aria/index.spec.js',
+        '!test/api/freezeTemplate/index.spec.js',
+        '!test/component/LightningElement.addEventListener/index.spec.js',
+    ],
+    plugins: [...baseConfig.plugins, testPlugin],
+};