Migrate from @web/test-runner to vitest

.changeset/hungry-sloths-relax.md

@@ -0,0 +1,6 @@
+---
+'@sl-design-system/toggle-button': patch
+'@sl-design-system/icon': patch
+---
+
+Use `import.meta.env.DEV` instead of custom `isDevMode()` check

.changeset/three-laws-lick.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/tree': patch
+---
+
+Fix empty `aria-setsize` attribute when size isn't known

.changeset/young-banks-divide.md

@@ -0,0 +1,5 @@
+---
+'@sl-design-system/vitest-browser-lit': patch
+---
+
+New helpers for writing unit tests using vitest

.gitignore

@@ -100,6 +100,7 @@ storybook-static
 documentation.json
 
 # Test files
+__screenshots__
 __snapshots__
 
 # Intellij

.storybook/main.ts

@@ -11,7 +11,8 @@ const config: StorybookConfig = {
   ],
   addons: [
     '@storybook/addon-a11y',
-    '@storybook/addon-docs'
+    '@storybook/addon-docs',
+    '@storybook/addon-vitest'
   ],
   core: {
     disableTelemetry: true

.storybook/preview.ts

@@ -1,4 +1,3 @@
-import '@oddbird/popover-polyfill';
 import '@webcomponents/scoped-custom-element-registry/scoped-custom-element-registry.min.js';
 import '@sl-design-system/announcer/register.js';
 import { configureLocalization } from '@lit/localize';

.storybook/vitest.setup.ts

@@ -0,0 +1,8 @@
+import * as a11yAddonAnnotations from '@storybook/addon-a11y/preview';
+import { setProjectAnnotations } from '@storybook/web-components-vite';
+import '../vitest.setup';
+import * as projectAnnotations from './preview';
+
+// This is an important step to apply the right configuration when testing your stories.
+// More info at: https://storybook.js.org/docs/api/portable-stories/portable-stories-vitest#setprojectannotations
+setProjectAnnotations([a11yAddonAnnotations, projectAnnotations]);

package.json

@@ -21,6 +21,7 @@
     "tools/example-data",
     "tools/stylelint-config",
     "tools/theme-selector-plugin",
+    "tools/vitest-browser-lit",
     "website"
   ],
   "scripts": {
@@ -419,7 +420,7 @@
       ]
     },
     "test:components": {
-      "command": "wtr --static-logging",
+      "command": "vitest --project=unit",
       "dependencies": [
         "build:components",
         "test:setup"
@@ -455,32 +456,33 @@
     "@changesets/get-github-info": "^0.6.0",
     "@custom-elements-manifest/analyzer": "^0.10.6",
     "@lit/localize-tools": "^0.8.0",
-    "@open-wc/testing": "^4.0.0",
     "@storybook/addon-a11y": "^9.1.8",
     "@storybook/addon-docs": "^9.1.8",
+    "@storybook/addon-vitest": "^9.1.8",
     "@storybook/web-components": "^9.1.8",
     "@storybook/web-components-vite": "^9.1.8",
-    "@types/chai-as-promised": "^8.0.2",
-    "@types/mocha": "^10.0.10",
+    "@types/chai-dom": "^1.11.3",
     "@types/sinon": "^17.0.4",
-    "@web/dev-server-esbuild": "^1.0.4",
-    "@web/test-runner": "^0.20.2",
-    "@web/test-runner-commands": "^0.9.0",
-    "@web/test-runner-playwright": "^0.11.1",
+    "@types/sinon-chai": "^4.0.0",
+    "@vitest/browser": "^3.2.4",
+    "@vitest/coverage-v8": "^3.2.4",
+    "@vitest/ui": "^3.2.4",
     "@webcomponents/scoped-custom-element-registry": "^0.0.10",
     "chai": "^6.0.1",
-    "chai-as-promised": "^8.0.2",
+    "chai-dom": "^1.12.1",
     "chromatic": "^13.2.0",
     "eslint": "^9.27.0",
     "husky": "^9.1.7",
     "lint-staged": "^16.2.0",
     "lit": "^3.3.1",
     "playwright": "^1.55.1",
     "sinon": "^21.0.0",
+    "sinon-chai": "^4.0.1",
     "storybook": "^9.1.8",
     "stylelint": "^16.19.1",
     "typescript": "^5.5.4",
     "vite": "^7.1.7",
+    "vitest": "^3.2.4",
     "wireit": "^0.14.12"
   }
 }

packages/components/accordion/src/accordion-item.spec.ts

@@ -1,6 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { AccordionItem } from './accordion-item.js';
 
@@ -69,7 +70,7 @@ describe('sl-accordion-item', () => {
 
     it('should open on Enter', async () => {
       summary.focus();
-      await sendKeys({ press: 'Enter' });
+      await userEvent.keyboard('{Enter}');
 
       await el.updateComplete;
 
@@ -79,7 +80,7 @@ describe('sl-accordion-item', () => {
 
     it('should open on Space', async () => {
       summary.focus();
-      await sendKeys({ press: 'Space' });
+      await userEvent.keyboard('{Space}');
 
       await el.updateComplete;
 
@@ -169,7 +170,7 @@ describe('sl-accordion-item', () => {
 
     it('should ignore Enter', async () => {
       summary.focus();
-      await sendKeys({ press: 'Enter' });
+      await userEvent.keyboard('{Enter}');
       await el.updateComplete;
       await new Promise(resolve => setTimeout(resolve));
 
@@ -179,7 +180,7 @@ describe('sl-accordion-item', () => {
 
     it('should ignore Space', async () => {
       summary.focus();
-      await sendKeys({ press: 'Space' });
+      await userEvent.keyboard('{Space}');
       await el.updateComplete;
       await new Promise(resolve => setTimeout(resolve));
 

packages/components/accordion/src/accordion.spec.ts

@@ -1,6 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
-import { sendKeys } from '@web/test-runner-commands';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { Accordion } from './accordion.js';
 
@@ -58,13 +59,13 @@ describe('sl-accordion', () => {
 
       items.at(0)?.focus();
 
-      await sendKeys({ press: 'ArrowDown' });
+      await userEvent.keyboard('{ArrowDown}');
       expect(items.at(1)).to.equal(document.activeElement);
 
-      await sendKeys({ press: 'ArrowDown' });
+      await userEvent.keyboard('{ArrowDown}');
       expect(items.at(0)).to.equal(document.activeElement);
 
-      await sendKeys({ press: 'ArrowUp' });
+      await userEvent.keyboard('{ArrowUp}');
       expect(items.at(1)).to.equal(document.activeElement);
     });
 

packages/components/announcer/src/announcer.spec.ts

@@ -1,6 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
 import { EventEmitter } from '@sl-design-system/shared';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
 import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { Announcer, SlAnnounceEvent } from './announcer.js';
 

packages/components/avatar/src/avatar.spec.ts

@@ -1,5 +1,6 @@
-import { expect, fixture } from '@open-wc/testing';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
 import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { type Avatar } from './avatar.js';
 

packages/components/badge/src/badge.spec.ts

@@ -1,5 +1,6 @@
-import { expect, fixture } from '@open-wc/testing';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
 import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { type Badge } from './badge.js';
 

packages/components/breadcrumbs/src/breadcrumbs.spec.ts

@@ -1,6 +1,7 @@
-import { expect, fixture } from '@open-wc/testing';
-import { setViewport } from '@web/test-runner-commands';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { page } from '@vitest/browser/context';
 import { html } from 'lit';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { Breadcrumbs } from './breadcrumbs.js';
 
@@ -50,7 +51,7 @@ describe('sl-breadcrumbs', () => {
 
       expect(homeLink).to.exist;
       expect(homeLink).to.have.attribute('href', '/');
-      expect(homeLink).to.have.text('Home');
+      expect(homeLink).to.have.trimmed.text('Home');
       expect(homeLink.querySelector('sl-icon')).to.have.attribute('name', 'home-blank');
     });
 
@@ -193,7 +194,7 @@ describe('sl-breadcrumbs', () => {
   describe('on mobile', () => {
     beforeEach(async () => {
       // iPhone 15 portrait
-      await setViewport({ width: 393, height: 852 });
+      await page.viewport(393, 852);
 
       el = await fixture(html`
         <sl-breadcrumbs>

packages/components/breadcrumbs/src/breadcrumbs.ts

@@ -147,11 +147,10 @@ export class Breadcrumbs extends ScopedElementsMixin(LitElement) {
           ? nothing
           : html`
               <li class="home">
-                <a href=${this.homeUrl}
-                  ><sl-icon name="home-blank"></sl-icon>${isMobile()
-                    ? ''
-                    : msg('Home', { id: 'sl.breadcrumbs.home' })}</a
-                >
+                <a href=${this.homeUrl}>
+                  <sl-icon name="home-blank"></sl-icon>
+                  ${isMobile() ? '' : msg('Home', { id: 'sl.breadcrumbs.home' })}
+                </a>
               </li>
               <sl-icon name="breadcrumb-separator"></sl-icon>
             `}

packages/components/button-bar/src/button-bar.spec.ts

@@ -1,7 +1,8 @@
-import { expect, fixture } from '@open-wc/testing';
 import '@sl-design-system/button/register.js';
 import '@sl-design-system/icon/register.js';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
 import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { type ButtonBar, type ButtonBarAlign } from './button-bar.js';
 

packages/components/button/src/button.spec.ts

@@ -1,9 +1,10 @@
-import { expect, fixture } from '@open-wc/testing';
 import { type Form } from '@sl-design-system/form';
 import '@sl-design-system/form/register.js';
-import { sendKeys } from '@web/test-runner-commands';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { userEvent } from '@vitest/browser/context';
 import { html } from 'lit';
 import { restore, spy, stub } from 'sinon';
+import { afterEach, beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { type Button, type ButtonType } from './button.js';
 
@@ -255,7 +256,7 @@ describe('sl-button', () => {
           reset = stub(form, 'reset').returns(undefined);
 
         el.focus();
-        await sendKeys({ press: 'Enter' });
+        await userEvent.keyboard('{Enter}');
 
         expect(requestSubmit).not.to.have.been.called;
         expect(reset).not.to.have.been.called;
@@ -266,7 +267,7 @@ describe('sl-button', () => {
           reset = stub(form, 'reset').returns(undefined);
 
         el.focus();
-        await sendKeys({ press: 'Space' });
+        await userEvent.keyboard('{Space}');
 
         expect(requestSubmit).not.to.have.been.called;
         expect(reset).not.to.have.been.called;
@@ -288,7 +289,7 @@ describe('sl-button', () => {
         const reset = stub(form, 'reset').returns(undefined);
 
         el.focus();
-        await sendKeys({ press: 'Enter' });
+        await userEvent.keyboard('{Enter}');
 
         expect(reset).to.have.been.calledOnce;
       });
@@ -297,7 +298,7 @@ describe('sl-button', () => {
         const reset = stub(form, 'reset').returns(undefined);
 
         el.focus();
-        await sendKeys({ press: 'Space' });
+        await userEvent.keyboard('{Space}');
 
         expect(reset).to.have.been.calledOnce;
       });
@@ -318,7 +319,7 @@ describe('sl-button', () => {
         const requestSubmit = stub(form, 'requestSubmit').returns(undefined);
 
         el.focus();
-        await sendKeys({ press: 'Enter' });
+        await userEvent.keyboard('{Enter}');
 
         expect(requestSubmit).to.have.been.calledOnce;
       });
@@ -327,7 +328,7 @@ describe('sl-button', () => {
         const requestSubmit = stub(form, 'requestSubmit').returns(undefined);
 
         el.focus();
-        await sendKeys({ press: 'Space' });
+        await userEvent.keyboard('{Space}');
 
         expect(requestSubmit).to.have.been.calledOnce;
       });

packages/components/card/src/card.spec.ts

@@ -1,10 +1,11 @@
-import { expect, fixture } from '@open-wc/testing';
 import '@sl-design-system/icon/register.js';
 import { MenuButton } from '@sl-design-system/menu';
 import '@sl-design-system/menu/register.js';
 import { ToggleButton } from '@sl-design-system/toggle-button';
 import '@sl-design-system/toggle-button/register.js';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
 import { html } from 'lit';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { type Card } from './card.js';
 

packages/components/checkbox/src/checkbox-group.spec.ts

@@ -1,9 +1,10 @@
-import { expect, fixture } from '@open-wc/testing';
 import { type SlFormControlEvent } from '@sl-design-system/form';
 import '@sl-design-system/form/register.js';
-import { sendKeys } from '@web/test-runner-commands';
+import { fixture } from '@sl-design-system/vitest-browser-lit';
+import { userEvent } from '@vitest/browser/context';
 import { LitElement, type TemplateResult, html } from 'lit';
 import { spy } from 'sinon';
+import { beforeEach, describe, expect, it } from 'vitest';
 import '../register.js';
 import { CheckboxGroup } from './checkbox-group.js';
 
@@ -242,13 +243,13 @@ describe('sl-checkbox-group', () => {
       expect(el.boxes?.[1].tabIndex).to.equal(-1);
 
       el.boxes?.[0]?.focus();
-      await sendKeys({ press: 'Space' });
+      await userEvent.keyboard('{Space}');
 
       expect(el.boxes?.[0].checked).to.be.true;
       expect(el.boxes?.[1].checked).not.to.be.true;
 
-      await sendKeys({ press: 'ArrowDown' });
-      await sendKeys({ press: 'Enter' });
+      await userEvent.keyboard('{ArrowDown}');
+      await userEvent.keyboard('{Enter}');
 
       expect(el.boxes?.[0].checked).to.be.true;
       expect(el.boxes?.[1].checked).to.be.true;