chore(integration-karma): migrate to webdriverio/vitest

package.json

@@ -103,5 +103,6 @@
         "http-cache-semantics": "4.1.1",
         "semver": "7.6.0"
     },
-    "dependencies": {}
+    "dependencies": {},
+    "packageManager": "[email protected]+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
 }

packages/@lwc/integration-karma/helpers/test-utils.js

@@ -667,6 +667,24 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
         expectConsoleCalls,
         expectConsoleCallsDev,
         catchUnhandledRejectionsAndErrors,
+        jasmine: {
+            ...jasmine,
+            createSpy() {
+                const spy = jasmine.createSpy();
+
+                spy.mockClear = function () {
+                    spy.calls.reset();
+                };
+
+                spy.mock = {
+                    get calls() {
+                        return spy.calls.allArgs();
+                    },
+                };
+
+                return spy;
+            },
+        },
         ...apiFeatures,
     };
 })(LWC, jasmine, beforeAll);

packages/@lwc/integration-karma/package.json

@@ -11,7 +11,8 @@
         "hydration:sauce:ci": "../../../scripts/ci/retry.sh karma start ./scripts/karma-configs/hydration/sauce.js --single-run",
         "sauce": "karma start ./scripts/karma-configs/test/sauce.js --single-run",
         "sauce:ci": "../../../scripts/ci/retry.sh karma start ./scripts/karma-configs/test/sauce.js --single-run",
-        "coverage": "node ./scripts/merge-coverage.js"
+        "coverage": "node ./scripts/merge-coverage.js",
+        "test:browser": "vitest --config=./vitest.config.mjs"
     },
     "//": {
         "karma-sauce-launcher-fix-firefox": "using a fork to work around https://github.com/karma-runner/karma-sauce-launcher/issues/275"
@@ -23,6 +24,8 @@
         "@lwc/rollup-plugin": "8.1.0",
         "@lwc/synthetic-shadow": "8.1.0",
         "@types/jasmine": "^5.1.4",
+        "@types/karma-jasmine": "^4.0.5",
+        "@vitest/browser": "^2.1.1",
         "chokidar": "^4.0.0",
         "istanbul-lib-coverage": "^3.2.2",
         "istanbul-lib-report": "^3.0.1",
@@ -31,6 +34,7 @@
         "karma-chrome-launcher": "^3.2.0",
         "karma-coverage": "^2.2.1",
         "karma-jasmine": "^5.1.0",
-        "karma-sauce-launcher-fix-firefox": "3.0.1"
+        "karma-sauce-launcher-fix-firefox": "3.0.1",
+        "playwright": "^1.47.2"
     }
 }

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

@@ -1,12 +1,16 @@
 import { registerTemplate, freezeTemplate, setFeatureFlagForTest } from 'lwc';
 
-import { attachReportingControlDispatcher, detachReportingControlDispatcher } from 'test-utils';
+import {
+    attachReportingControlDispatcher,
+    detachReportingControlDispatcher,
+    jasmine,
+} from 'test-utils';
 
 describe('freezeTemplate', () => {
-    let dispatcher;
+    const dispatcher = jasmine.createSpy();
 
     beforeEach(() => {
-        dispatcher = jasmine.createSpy();
+        dispatcher.mockClear();
         attachReportingControlDispatcher(dispatcher, ['StylesheetMutation', 'TemplateMutation']);
     });
 
@@ -30,7 +34,7 @@ describe('freezeTemplate', () => {
         );
 
         expect(template.stylesheetToken).toEqual('newToken');
-        expect(dispatcher.calls.allArgs()).toEqual([
+        expect(dispatcher.mock.calls).toEqual([
             ['TemplateMutation', { propertyName: 'stylesheetToken' }],
         ]);
     });
@@ -56,11 +60,12 @@ describe('freezeTemplate', () => {
             /Mutating the "stylesheetTokens" property on a template is deprecated and will be removed in a future version of LWC/
         );
 
+        // @ts-expect-error stylesheetTokens is deprecated
         expect(template.stylesheetTokens).toEqual({
             hostAttribute: 'newToken-host',
             shadowAttribute: 'newToken',
         });
-        expect(dispatcher.calls.allArgs()).toEqual([
+        expect(dispatcher.mock.calls).toEqual([
             ['TemplateMutation', { propertyName: 'stylesheetTokens' }],
         ]);
     });
@@ -85,7 +90,7 @@ describe('freezeTemplate', () => {
 
         expect(template.stylesheets.length).toEqual(1);
         expect(template.stylesheets[0]).toBe(newStylesheet);
-        expect(dispatcher.calls.allArgs()).toEqual([
+        expect(dispatcher.mock.calls).toEqual([
             ['TemplateMutation', { propertyName: 'stylesheets' }],
         ]);
     });
@@ -122,7 +127,7 @@ describe('freezeTemplate', () => {
 
         expect(template.stylesheets.length).toEqual(1);
         expect(template.stylesheets[0]).toBe(stylesheet);
-        expect(dispatcher.calls.allArgs()).toEqual([
+        expect(dispatcher.mock.calls).toEqual([
             ['TemplateMutation', { propertyName: 'stylesheets' }],
             ['TemplateMutation', { propertyName: 'stylesheets' }],
         ]);
@@ -143,7 +148,7 @@ describe('freezeTemplate', () => {
         }).toLogWarningDev(
             /Mutating the "stylesheets" property on a template is deprecated and will be removed in a future version of LWC/
         );
-        expect(dispatcher.calls.allArgs()).toEqual([
+        expect(dispatcher.mock.calls).toEqual([
             ['TemplateMutation', { propertyName: 'stylesheets' }],
         ]);
     });
@@ -164,9 +169,7 @@ describe('freezeTemplate', () => {
         );
 
         expect(template.slots).toBe(newSlots);
-        expect(dispatcher.calls.allArgs()).toEqual([
-            ['TemplateMutation', { propertyName: 'slots' }],
-        ]);
+        expect(dispatcher.mock.calls).toEqual([['TemplateMutation', { propertyName: 'slots' }]]);
     });
 
     it('should warn when setting tmpl.renderMOde', () => {
@@ -183,7 +186,7 @@ describe('freezeTemplate', () => {
         );
 
         expect(template.renderMode).toBe(undefined);
-        expect(dispatcher.calls.allArgs()).toEqual([
+        expect(dispatcher.mock.calls).toEqual([
             ['TemplateMutation', { propertyName: 'renderMode' }],
         ]);
     });
@@ -200,7 +203,7 @@ describe('freezeTemplate', () => {
         }).toLogWarningDev(
             /Mutating the "\$scoped\$" property on a stylesheet is deprecated and will be removed in a future version of LWC\./
         );
-        expect(dispatcher.calls.allArgs()).toEqual([
+        expect(dispatcher.mock.calls).toEqual([
             ['StylesheetMutation', { propertyName: '$scoped$' }],
         ]);
     });

packages/@lwc/integration-karma/test/polyfills/event-composed/index.spec.js

@@ -11,14 +11,14 @@ it('should respect when the event composed flag is set during construction', ()
     expect(notComposedClickEvent.composed).toBe(false);
 });
 
-it('should set composed to true for click events dispatched by the user agent', (done) => {
+it('should set composed to true for click events dispatched by the user agent', async () => {
     const elm = document.createElement('div');
     document.body.appendChild(elm);
 
-    elm.addEventListener('click', (evt) => {
-        expect(evt.composed).toBe(true);
-        done();
+    const evt = await new Promise((resolve) => {
+        elm.addEventListener('click', resolve);
+        elm.click();
     });
 
-    elm.click();
+    expect(evt.composed).toBe(true);
 });

packages/@lwc/integration-karma/tsconfig.json

@@ -0,0 +1,21 @@
+{
+    "extends": "../../../tsconfig.json",
+    "compilerOptions": {
+        "esModuleInterop": true,
+        "noEmit": true,
+        "allowJs": true,
+        "target": "ESNext",
+        "lib": ["ES2015.Promise", "DOM"],
+        "types": ["vitest/globals", "@vitest/browser/providers/playwright"],
+        "paths": {
+            "test-utils": ["./vitest-helpers/test-utils.ts"]
+        }
+    },
+    "files": ["../../lwc/types.d.ts"],
+    "include": [
+        "vitest-scripts/**/*.ts",
+        "vitest-helpers/*.ts",
+        "test/**/*.spec.ts",
+        "test/**/*.spec.js"
+    ]
+}

packages/@lwc/integration-karma/vitest-helpers/global-setup.ts

@@ -0,0 +1,26 @@
+// globalThis.process = {
+//     env: {
+//         API_VERSION: 63,
+//         DISABLE_STATIC_CONTENT_OPTIMIZATION: false,
+//         ENABLE_ARIA_REFLECTION_GLOBAL_POLYFILL: false,
+//         ENABLE_SYNTHETIC_SHADOW_IN_HYDRATION: false,
+//         FORCE_NATIVE_SHADOW_MODE_FOR_TEST: false,
+//         LWC_VERSION: "8.1.0",
+//         NATIVE_SHADOW: false,
+//         NODE_ENV: "development",
+//     }
+// };
+// globalThis.lwcRuntimeFlags = {
+//   DISABLE_NATIVE_CUSTOM_ELEMENT_LIFECYCLE: false
+// };
+import type { GlobalSetupContext } from 'vitest/node';
+
+export default function setup({ provide }: GlobalSetupContext) {
+    provide('wsPort', 3000);
+}
+
+declare module 'vitest' {
+    export interface ProvidedContext {
+        wsPort: number;
+    }
+}

packages/@lwc/integration-karma/vitest-helpers/test-hydrate.js

@@ -0,0 +1,97 @@
+/*
+ * Copyright (c) 2018, salesforce.com, inc.
+ * All rights reserved.
+ * SPDX-License-Identifier: MIT
+ * For full license text, see the LICENSE file in the repo root or https://opensource.org/licenses/MIT
+ */
+
+window.HydrateTest = (function (lwc, testUtils) {
+    testUtils.setHooks({
+        sanitizeHtmlContent: (content) => content,
+    });
+
+    // As of this writing, Firefox does not support programmatic access to parsing DSD,
+    // i.e. `Document.parseHTMLUnsafe`
+    // See: https://developer.mozilla.org/en-US/docs/Web/API/Document/parseHTMLUnsafe_static
+    function testSupportsProgrammaticDSD() {
+        const html = '<div><template shadowrootmode="open"></template></div>';
+        try {
+            return !!Document.parseHTMLUnsafe(html).body.firstChild.shadowRoot;
+        } catch (_err) {
+            return false;
+        }
+    }
+
+    const browserSupportsProgrammaticDSD = testSupportsProgrammaticDSD();
+
+    function parseStringToDom(html) {
+        if (browserSupportsProgrammaticDSD) {
+            return Document.parseHTMLUnsafe(html).body.firstChild;
+        } else {
+            return new DOMParser().parseFromString(html, 'text/html').body.firstChild;
+        }
+    }
+
+    function polyfillDeclarativeShadowDom(root) {
+        root.querySelectorAll('template[shadowrootmode]').forEach((template) => {
+            const mode = template.getAttribute('shadowrootmode');
+            const shadowRoot = template.parentNode.attachShadow({ mode });
+            shadowRoot.appendChild(template.content);
+            template.remove();
+
+            polyfillDeclarativeShadowDom(shadowRoot);
+        });
+    }
+
+    function appendTestTarget(ssrText) {
+        const div = document.createElement('div');
+
+        const testTarget = parseStringToDom(ssrText);
+        if (!browserSupportsProgrammaticDSD) {
+            polyfillDeclarativeShadowDom(testTarget);
+        }
+        div.appendChild(testTarget);
+
+        document.body.appendChild(div);
+
+        return div;
+    }
+
+    function runTest(ssrRendered, Component, testConfig) {
+        const container = appendTestTarget(ssrRendered);
+        const selector = container.firstChild.tagName.toLowerCase();
+        let target = container.querySelector(selector);
+
+        let testResult;
+        const consoleSpy = testUtils.spyConsole();
+
+        if (testConfig.test) {
+            const snapshot = testConfig.snapshot ? testConfig.snapshot(target) : {};
+
+            const props = testConfig.props || {};
+            const clientProps = testConfig.clientProps || props;
+
+            lwc.hydrateComponent(target, Component, clientProps);
+
+            // let's select again the target, it should be the same elements as in the snapshot
+            target = container.querySelector(selector);
+            testResult = testConfig.test(target, snapshot, consoleSpy.calls);
+        } else if (testConfig.advancedTest) {
+            testResult = testConfig.advancedTest(target, {
+                Component,
+                hydrateComponent: lwc.hydrateComponent.bind(lwc),
+                consoleSpy,
+                container,
+                selector,
+            });
+        }
+
+        consoleSpy.reset();
+
+        return testResult;
+    }
+
+    return {
+        runTest,
+    };
+})(window.LWC, window.TestUtils);