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

.gitignore

@@ -16,6 +16,8 @@ packages/@lwc/integration-tests/errorShots/
 packages/@lwc/integration-tests/results/
 packages/@lwc/integration-tests/.env
 
+packages/@lwc/integration-karma/**/__screenshots__/
+
 # custom node_modules for testing
 !packages/@lwc/module-resolver/src/__tests__/**/node_modules/
 !packages/@lwc/rollup-plugin/src/__tests__/**/node_modules/

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-setup.js

@@ -116,5 +116,23 @@ afterAll(function () {
  throwIfConsoleCalled();
 });
 
+const { createSpy } = jasmine;
+
+jasmine.createSpy = function () {
+ const spy = createSpy();
+
+ spy.mockClear = function () {
+ spy.calls.reset();
+ };
+
+ spy.mock = {
+ get calls() {
+ return spy.calls.allArgs();
+ },
+ };
+
+ return spy;
+};
+
 // The default of 5000ms seems to get surpassed frequently in Safari 14 in SauceLabs
 jasmine.DEFAULT_TIMEOUT_INTERVAL = 60000;

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

@@ -327,6 +327,8 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
  : windowErrorListener(callback);
  }
 
+ const getNormalizedFunctionAsString = (fn) => fn.toString().replace(/(\s|\n)/g, '');
+
  const customMatchers = {
  toLogErrorDev: consoleDevMatcherFactory('error'),
  toLogError: consoleDevMatcherFactory('error', true),
@@ -343,6 +345,29 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
  windowErrorListener,
  true
  ),
+ 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,
+ };
+ },
+ };
+ },
  };
 
  beforeAll(function () {
@@ -642,6 +667,24 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
  TEMPLATE_CLASS_NAME_OBJECT_BINDING: process.env.API_VERSION >= 62,
  };
 
+ /**
+ * Returns a promise that resolves with the composed path of the event.
+ * @param {Event} event - The event to be dispatched and whose composed path is to be resolved.
+ * @param {EventTarget} target - The target to which the event listener is added.
+ * @param {EventTarget} dispatcher - The dispatcher that dispatches the event.
+ * @returns {Promise<EventTarget[]>} A promise that resolves with the composed path of the event.
+ */
+ async function expectComposedPath(event, target, dispatcher = target) {
+ const composedPath = await new Promise((resolve) => {
+ target.addEventListener(event.type, (event) => {
+ resolve(event.composedPath());
+ });
+ dispatcher.dispatchEvent(event);
+ });
+
+ return composedPath;
+ }
+
  return {
  clearRegister,
  extractDataIds,
@@ -667,6 +710,8 @@ window.TestUtils = (function (lwc, jasmine, beforeAll) {
  expectConsoleCalls,
  expectConsoleCallsDev,
  catchUnhandledRejectionsAndErrors,
+ spyOn,
+ expectComposedPath,
  ...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:/karma-runner/karma-sauce-launcher/issues/275"
@@ -23,6 +24,8 @@
  "@lwc/rollup-plugin": "8.1.2",
  "@lwc/synthetic-shadow": "8.1.2",
  "@types/jasmine": "^5.1.4",
+ "@types/karma-jasmine": "^4.0.5",
+ "@vitest/browser": "^2.1.1",
  "chokidar": "^4.0.1",
  "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/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/light-dom/style-global/index.spec.js

@@ -4,6 +4,8 @@ import Container from 'x/container';
 import Two from 'x/two';
 import Shadow from 'x/shadow';
 
+// @ts-check
+
 describe('Light DOM styling at the global level', () => {
  it('styles bleed into other light DOM but not shadow DOM components in root context', () => {
  const elm = createElement('x-container', { is: Container });