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

nx.json

@@ -24,5 +24,8 @@
     },
     "$schema": "./node_modules/nx/schemas/nx-schema.json",
     "cacheDirectory": "./.nx-cache",
-    "defaultBase": "master"
+    "defaultBase": "master",
+    "tui": {
+        "enabled": false
+    }
 }

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/LightningElement.disconnectedCallback/index.spec.js

@@ -92,14 +92,6 @@ describe('disconnectedCallback for host with slots', () => {
     let slotAcceptingChildSpy;
     let parent;
 
-    beforeAll(() => {
-        // Ignore the engine logging about passing slot content to a component that does not accept slot
-        // These should become unnecessary when #869 is fixed
-        spyOn(console, 'group');
-        spyOn(console, 'log');
-        spyOn(console, 'groupEnd');
-    });
-
     beforeEach(() => {
         parentDisconnectSpy = jasmine.createSpy();
         slotIgnoringChildSpy = jasmine.createSpy();

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/shadow-dom/ignoring-slotted/issue-1090.spec.js

@@ -3,14 +3,6 @@ import { createElement } from 'lwc';
 import Parent from 'x/parent';
 
 describe('Issue #1090', () => {
-    beforeAll(() => {
-        // Ignore the engine logging about passing slot content to a component that does not accept slot
-        // These should become unnecessary when #869 is fixed
-        spyOn(console, 'group');
-        spyOn(console, 'log');
-        spyOn(console, 'groupEnd');
-    });
-
     it('should disconnect slotted content even if it is not allocated into a slot', () => {
         const elm = createElement('x-parent', { is: Parent });
         document.body.appendChild(elm);

packages/@lwc/integration-karma/test/template/directive-lwc-dom-manual/index.spec.js

@@ -14,17 +14,16 @@ describe('dom mutation without the lwc:dom="manual" directive', () => {
             const root = createElement('x-without-lwc-dom-manual', { is: withoutLwcDomManual });
             document.body.appendChild(root);
             const elm = root.shadowRoot.querySelector('div');
+            const mutate = () => fn(elm);
 
-            // eslint-disable-next-line vitest/valid-expect
-            let expected = expect(() => fn(elm));
+            const warning = new RegExp(
+                `\\[LWC warn\\]: The \`${method}\` method is available only on elements that use the \`lwc:dom="manual"\` directive.`
+            );
             if (process.env.NATIVE_SHADOW) {
-                expected = expected.not; // no error
+                expect(mutate).not.toLogWarningDev(warning);
+            } else {
+                expect(mutate).toLogWarningDev(warning);
             }
-            expected.toLogWarningDev(
-                new RegExp(
-                    `\\[LWC warn\\]: The \`${method}\` method is available only on elements that use the \`lwc:dom="manual"\` directive.`
-                )
-            );
         });
     }
 

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);
 

packages/@lwc/integration-not-karma/web-test-runner.hydration.mjs → 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,19 @@ 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 /
+                    // `/__wds-outside-roout__/${depth}/` === '../'.repeat(depth)
+                    return '/__wds-outside-root__/1/wire-service/dist/index.js';
                 }
             },
             async transform(ctx) {
@@ -65,9 +53,11 @@ export default {
             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>
         </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],
+};