feat(lib): Migrated from test-runner to vitest

Author: rkaraivanov

package-lock.json

@@ -18,6 +18,7 @@
     "url": "https://github.com/IgniteUI/igniteui-webcomponents/issues"
   },
   "scripts": {
+    "vitest:debug": "vitest --no-file-parallelism --isolate false",
     "start": "npm run storybook",
     "build:publish": "npm run cem && node scripts/build.mjs",
     "cem": "cem analyze --config cem.config.mjs",
@@ -40,8 +41,9 @@
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "format": "biome check --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "release": "node scripts/gen-changelog.mjs",
-    "test": "npm run build:styles && wtr --coverage",
-    "test:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"wtr --watch\"",
+    "test": "npm run build:styles && vitest --watch false --coverage",
+    "test:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"vitest\"",
+    "test:debug": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"npm:vitest:debug\"",
     "storybook": "npm run build:styles && concurrently -k -r \"npm run cem:watch\" \"npm:watch-scss\" \"npm:watch-meta\" \"storybook dev -p 8000\"",
     "storybook:build": "npm run build:styles && storybook build -o ./storybook-static",
     "build:typedoc:export": "node scripts/build-typedoc.js export",
@@ -63,18 +65,19 @@
     "@biomejs/biome": "~2.3.8",
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@igniteui/material-icons-extended": "^3.1.0",
-    "@open-wc/testing": "^4.0.0",
+    "@open-wc/semantic-dom-diff": "^0.20.1",
     "@storybook/addon-a11y": "^10.1.2",
     "@storybook/addon-docs": "^10.1.2",
     "@storybook/addon-links": "^10.1.2",
     "@storybook/web-components-vite": "^10.1.2",
-    "@types/mocha": "^10.0.10",
-    "@web/dev-server-esbuild": "^1.0.4",
-    "@web/test-runner": "^0.20.2",
-    "@web/test-runner-playwright": "^0.11.1",
+    "@types/chai-dom": "^1.11.3",
+    "@vitest/browser-playwright": "^4.0.14",
+    "@vitest/coverage-v8": "^4.0.15",
     "autoprefixer": "^10.4.22",
     "browser-sync": "^3.0.4",
     "cem-plugin-expanded-types": "^1.4.0",
+    "chai-a11y-axe": "^1.5.0",
+    "chai-dom": "^1.12.1",
     "concurrently": "^9.2.1",
     "custom-element-jet-brains-integration": "^1.7.0",
     "custom-element-vs-code-integration": "^1.5.0",
@@ -93,7 +96,6 @@
     "prettier": "^3.7.3",
     "rimraf": "^6.1.2",
     "sass-embedded": "~1.93.3",
-    "sinon": "^21.0.0",
     "storybook": "^10.1.2",
     "stylelint": "^16.26.1",
     "stylelint-config-standard-scss": "^16.0.0",

package.json

@@ -11,7 +11,6 @@ import {
 import customElements from '../custom-elements.json' with { type: 'json' };
 import report from './report.mjs';
 import { buildComponents, buildThemes } from './sass.mjs';
-import { globby } from 'globby';
 
 const exec = promisify(_exec);
 
@@ -51,20 +50,9 @@ async function runTask(tag, cmd) {
   );
 
   await runTask('Copying release files', async () => {
-    const pngFiles = await globby('src/components/**/*.png');
-    pngFiles.forEach(
-      async (dest) =>
-        await mkdir(path.dirname(DEST_DIR(dest.replace('src', ''))), {
-          recursive: true,
-        })
-    );
-
     Promise.all([
       copyFile('scripts/_package.json', DEST_DIR('package.json')),
       ...RELEASE_FILES.map((file) => copyFile(file, DEST_DIR(file))),
-      ...pngFiles.map((file) =>
-        copyFile(file, DEST_DIR(file.replace('src', '')))
-      ),
     ]);
   });
 

scripts/build.mjs

@@ -2,6 +2,7 @@
   "extends": "../tsconfig.json",
   "exclude": [
     "../vite.config.ts",
+    "../vitest.setup.ts",
     "../**/*.spec.ts",
     "../stories"
   ],
@@ -12,7 +13,5 @@
     "declarationMap": false,
     "removeComments": true
   },
-  "include": [
-    "../**/*.ts"
-  ]
+  "include": ["../**/*.ts"]
 }

scripts/tsconfig.prod.json

@@ -1,11 +1,11 @@
+import { css, LitElement } from 'lit';
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest';
 import {
   defineCE,
-  expect,
   fixture,
   html,
   unsafeStatic,
-} from '@open-wc/testing';
-import { css, LitElement } from 'lit';
+} from '../components/common/helpers.spec.js';
 
 import { EaseOut } from './easings.js';
 import { addAnimationController } from './player.js';
@@ -27,7 +27,7 @@ describe('Animations Player', () => {
   let tag: string;
   let el: HTMLElement & { player: ReturnType<typeof addAnimationController> };
 
-  before(() => {
+  beforeAll(() => {
     tag = defineCE(
       class extends LitElement {
         public static override styles = css`

src/animations/player.spec.ts

@@ -1,5 +1,4 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
+import { beforeAll, beforeEach, describe, expect, it } from 'vitest';
 import {
   altKey,
   arrowDown,
@@ -9,12 +8,13 @@ import {
   shiftKey,
 } from '../common/controllers/key-bindings.js';
 import { defineComponents } from '../common/definitions/defineComponents.js';
+import { elementUpdated, fixture, html } from '../common/helpers.spec.js';
 import { simulateClick, simulateKeyboard } from '../common/utils.spec.js';
 import IgcExpansionPanelComponent from '../expansion-panel/expansion-panel.js';
 import IgcAccordionComponent from './accordion.js';
 
 describe('Accordion', () => {
-  before(() => {
+  beforeAll(() => {
     defineComponents(IgcAccordionComponent);
   });
 

src/components/accordion/accordion.spec.ts

@@ -1,14 +1,14 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
+import { beforeAll, describe, expect, it } from 'vitest';
 import { defineComponents } from '../common/definitions/defineComponents.js';
+import { elementUpdated, fixture, html } from '../common/helpers.spec.js';
 import IgcAvatarComponent from './avatar.js';
 
 describe('Avatar', () => {
   const DIFF_OPTIONS = {
     ignoreAttributes: ['style'],
   };
 
-  before(() => {
+  beforeAll(() => {
     defineComponents(IgcAvatarComponent);
   });
 

src/components/avatar/avatar.spec.ts

@@ -1,10 +1,10 @@
-import { elementUpdated, expect, fixture, html } from '@open-wc/testing';
-
+import { beforeAll, describe, expect, it } from 'vitest';
 import { defineComponents } from '../common/definitions/defineComponents.js';
+import { elementUpdated, fixture, html } from '../common/helpers.spec.js';
 import IgcBadgeComponent from './badge.js';
 
 describe('Badge', () => {
-  before(() => {
+  beforeAll(() => {
     defineComponents(IgcBadgeComponent);
   });
 

src/components/badge/badge.spec.ts

@@ -1,8 +1,8 @@
 import { html, LitElement, type PropertyValues } from 'lit';
-import { property } from 'lit/decorators.js';
+import { property, state } from 'lit/decorators.js';
 import { addThemingController } from '../../theming/theming-controller.js';
 import { addInternalsController } from '../common/controllers/internals.js';
-import { addSlotController } from '../common/controllers/slot.js';
+import { addSlotController, setSlots } from '../common/controllers/slot.js';
 import { registerComponent } from '../common/definitions/register.js';
 import { partMap } from '../common/part-map.js';
 import type { BadgeShape, StyleVariant } from '../types.js';
@@ -29,24 +29,18 @@ export default class IgcBadgeComponent extends LitElement {
     registerComponent(IgcBadgeComponent);
   }
 
-  private _iconPart = false;
+  private readonly _internals = addInternalsController(this, {
+    initialARIA: { role: 'status' },
+  });
 
   private readonly _slots = addSlotController(this, {
+    slots: setSlots(),
     onChange: this._handleSlotChange,
+    initial: true,
   });
 
-  protected _handleSlotChange(): void {
-    const assignedNodes = this._slots.getAssignedNodes('[default]', true);
-    this._iconPart = assignedNodes.some(
-      (node) =>
-        node.nodeType === Node.ELEMENT_NODE &&
-        (node as Element).tagName.toLowerCase() === 'igc-icon'
-    );
-  }
-
-  private readonly _internals = addInternalsController(this, {
-    initialARIA: { role: 'status' },
-  });
+  @state()
+  private _iconPart = false;
 
   /**
    * The type of badge.
@@ -87,6 +81,13 @@ export default class IgcBadgeComponent extends LitElement {
     }
   }
 
+  protected _handleSlotChange(): void {
+    this._iconPart = this._slots.hasAssignedElements('[default]', {
+      flatten: true,
+      selector: 'igc-icon',
+    });
+  }
+
   protected override render() {
     return html`
       <span part=${partMap({ base: true, icon: this._iconPart })}>

src/components/badge/badge.ts

@@ -1,19 +1,17 @@
+import { beforeAll, beforeEach, describe, expect, it, vi } from 'vitest';
+import { defineComponents } from '../common/definitions/defineComponents.js';
 import {
   elementUpdated,
-  expect,
   fixture,
   html,
   nextFrame,
-} from '@open-wc/testing';
-import { spy } from 'sinon';
-
-import { defineComponents } from '../common/definitions/defineComponents.js';
+} from '../common/helpers.spec.js';
 import { finishAnimationsFor, simulateClick } from '../common/utils.spec.js';
 import IgcIconComponent from '../icon/icon.js';
 import IgcBannerComponent from './banner.js';
 
 describe('Banner', () => {
-  before(() => {
+  beforeAll(() => {
     defineComponents(IgcBannerComponent, IgcIconComponent);
   });
 
@@ -246,7 +244,7 @@ describe('Banner', () => {
     });
 
     it('should emit correct event sequence for the default action button', async () => {
-      const eventSpy = spy(banner, 'emitEvent');
+      const spy = vi.spyOn(banner, 'emitEvent');
       const button = banner.renderRoot.querySelector('igc-button')!;
 
       expect(banner.open).to.be.false;
@@ -256,19 +254,19 @@ describe('Banner', () => {
 
       simulateClick(button);
 
-      expect(eventSpy.callCount).to.equal(1);
-      expect(eventSpy).calledWith('igcClosing', { cancelable: true });
+      expect(spy).toHaveBeenCalledTimes(1);
+      expect(spy).toHaveBeenCalledWith('igcClosing', { cancelable: true });
 
-      eventSpy.resetHistory();
+      spy.mockClear();
       await elementUpdated(banner);
       await clickHideComplete();
 
-      expect(eventSpy).calledWith('igcClosed');
+      expect(spy).toHaveBeenCalledWith('igcClosed');
       expect(banner.open).to.be.false;
     });
 
     it('can cancel `igcClosing` event', async () => {
-      const eventSpy = spy(banner, 'emitEvent');
+      const spy = vi.spyOn(banner, 'emitEvent');
       const button = banner.renderRoot.querySelector('igc-button')!;
 
       banner.addEventListener('igcClosing', (event) => {
@@ -282,8 +280,8 @@ describe('Banner', () => {
       await elementUpdated(banner);
       await clickHideComplete();
 
-      expect(eventSpy).calledWith('igcClosing');
-      expect(eventSpy).not.calledWith('igcClosed');
+      expect(spy).toHaveBeenCalledWith('igcClosing', { cancelable: true });
+      expect(spy).not.toHaveBeenCalledWith('igcClosed');
       expect(banner.open).to.be.true;
     });
   });