chore: switch from Karma to Web Test Runner + Vite

.gitignore

@@ -40,6 +40,7 @@ packages/ts/*/.coverage
 packages/ts/*/.vite
 packages/ts/*/types/**
 !packages/ts/*/.lintstagedrc.js
+!packages/ts/*/web-test-runner.config.js
 scripts/prepare/results/
 packages/java/hilla/*.json
 packages/java/hilla/src/main/resources/

package.json

@@ -33,10 +33,14 @@
     "prettier": "$prettier"
   },
   "devDependencies": {
-    "@nx/js": "^18.0.4",
+    "@nx/js": "^19.1.1",
+    "@remcovaes/web-test-runner-vite-plugin": "^1.2.1",
     "@types/karma": "^6.3.8",
     "@types/node": "^20.11.19",
     "@vaadin/react-components": "24.5.0-alpha3",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@web/test-runner": "^0.18.2",
+    "@web/test-runner-commands": "^0.9.0",
     "chai-dom": "^1.12.0",
     "compare-versions": "^6.1.0",
     "concurrently": "^8.2.2",
@@ -60,7 +64,7 @@
     "meow": "^13.2.0",
     "micromatch": "^4.0.5",
     "mocha": "^10.3.0",
-    "nx": "^18.0.4",
+    "nx": "^19.1.1",
     "postcss": "^8.4.35",
     "prettier": "^3.2.5",
     "simple-git-hooks": "^2.9.0",

packages/ts/frontend/package.json

@@ -20,9 +20,9 @@
     "build:dts": "tsc --isolatedModules -p tsconfig.build.json",
     "lint": "eslint src test",
     "lint:fix": "eslint src test --fix",
-    "test": "karma start ../../../karma.config.cjs --port 9880",
+    "test": "cd ../../.. && wtr --group frontend",
+    "test:watch": "npm run test1 -- --watch",
     "test:coverage": "npm run test -- --coverage",
-    "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"
   },
   "exports": {

packages/ts/frontend/test/Connect.test.ts

@@ -4,6 +4,7 @@ import { ConnectionState, ConnectionStateStore } from '@vaadin/common-frontend';
 import chaiAsPromised from 'chai-as-promised';
 import fetchMock from 'fetch-mock';
 import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
 import type { WritableDeep } from 'type-fest';
 import type { MiddlewareContext, MiddlewareNext } from '../src/Connect.js';
 import CookieManager from '../src/CookieManager.js';
@@ -18,7 +19,7 @@ import {
   UnauthorizedResponseError,
   type FluxConnection,
 } from '../src/index.js';
-import type { Vaadin, VaadinWindow } from '../src/types.js';
+import type { Vaadin } from '../src/types.js';
 import { subscribeStub } from './mocks/atmosphere.js';
 import { fluxConnectionSubscriptionStubs } from './mocks/FluxConnection.js';
 import {
@@ -28,6 +29,7 @@ import {
   TEST_SPRING_CSRF_TOKEN_VALUE,
 } from './SpringCsrfTestUtils.test.js';
 
+use(sinonChai);
 use(chaiAsPromised);
 
 // `connectClient.call` adds the host and context to the endpoint request.

packages/ts/frontend/test/FluxConnection.test.ts

@@ -1,6 +1,7 @@
-import { expect } from '@esm-bundle/chai';
+import { expect, use } from '@esm-bundle/chai';
 import type { ReactiveControllerHost, ReactiveController } from '@lit/reactive-element';
 import sinon from 'sinon';
+import sinonChai from 'sinon-chai';
 import { FluxConnection, State } from '../src/FluxConnection.js';
 import type {
   AbstractMessage,
@@ -10,6 +11,8 @@ import type {
 } from '../src/FluxMessages.js';
 import { getSubscriptionEventSpies, subscribeStub } from './mocks/atmosphere.js';
 
+use(sinonChai);
+
 describe('@vaadin/hilla-frontend', () => {
   describe('FluxConnection', () => {
     function emitMessage(msg: AbstractMessage) {

packages/ts/lit-form/package.json

@@ -21,7 +21,7 @@
     "build:dts": "tsc --isolatedModules -p tsconfig.build.json",
     "lint": "eslint src test",
     "lint:fix": "npm run lint -- --fix",
-    "test": "karma start ../../../karma.config.cjs --port 9877",
+    "test": "cd ../../.. && wtr --group lit-form",
     "test:coverage": "npm run test -- --coverage",
     "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"

packages/ts/react-auth/package.json

@@ -23,7 +23,7 @@
     "build:copy": "cd src && copyfiles **/*.d.ts ..",
     "lint": "eslint src test",
     "lint:fix": "eslint src test --fix",
-    "test": "karma start ../../../karma.config.cjs --port 9877",
+    "test": "cd ../../.. && wtr --group react-auth",
     "test:coverage": "npm run test -- --coverage",
     "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"

packages/ts/react-crud/package.json

@@ -23,7 +23,7 @@
     "build:copy": "cd src && copyfiles **/*.d.ts ..",
     "lint": "eslint src test",
     "lint:fix": "eslint src test --fix",
-    "test": "karma start ../../../karma.config.cjs --port 9879",
+    "test": "tsx ../../../scripts/test.ts",
     "test:coverage": "npm run test -- --coverage",
     "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"
@@ -74,14 +74,15 @@
     "@types/chai-as-promised": "^7.1.6",
     "@types/chai-dom": "^1.11.1",
     "@types/mocha": "^10.0.2",
-    "@types/react": "^18.2.23",
-    "@types/sinon": "^10.0.17",
+    "@types/react": "^18.3.3",
+    "@types/sinon": "^17.0.3",
     "@types/sinon-chai": "^3.2.10",
     "@types/validator": "^13.11.2",
+    "@web/test-runner-commands": "^0.9.0",
     "chai-as-promised": "^7.1.1",
-    "chai-dom": "^1.11.0",
+    "chai-dom": "^1.12.0",
     "karma-viewport": "^1.0.9",
-    "sinon": "^16.0.0",
+    "sinon": "^18.0.0",
     "sinon-chai": "^3.7.0",
     "typescript": "5.5.2"
   }

packages/ts/react-crud/src/autogrid.tsx

@@ -426,7 +426,7 @@ function AutoGridInner<TItem>(
   }, [experimentalFilter, internalFilter]);
 
   return (
-    <Grid itemIdPath={modelInfo.idProperty?.name} {...gridProps} ref={gridRef}>
+    <Grid size={itemCounts?.totalCount} itemIdPath={modelInfo.idProperty?.name} {...gridProps} ref={gridRef}>
       {children}
     </Grid>
   );

packages/ts/react-crud/test/autocrud.spec.tsx

@@ -1,36 +1,35 @@
 // eslint-disable-next-line
-/// <reference types="karma-viewport" />
 import { expect, use } from '@esm-bundle/chai';
 import { render, screen, waitForElementToBeRemoved, within } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { TextField } from '@vaadin/react-components/TextField.js';
+import { setViewport } from '@web/test-runner-commands';
+import chaiAsPromised from 'chai-as-promised';
 import chaiDom from 'chai-dom';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
 import { type AutoCrudProps, AutoCrud } from '../src/autocrud.js';
 import ConfirmDialogController from './ConfirmDialogController.js';
 import { CrudController } from './CrudController.js';
-import FormController from './FormController';
-import GridController from './GridController';
+import FormController from './FormController.js';
+import GridController from './GridController.js';
 import { getItem, PersonModel, personService } from './test-models-and-services.js';
+import { viewports } from './utils.js';
 
 use(sinonChai);
+use(chaiAsPromised);
 use(chaiDom);
 
 describe('@vaadin/hilla-react-crud', () => {
   describe('Auto crud', () => {
     let user: ReturnType<(typeof userEvent)['setup']>;
 
-    beforeEach(() => {
+    beforeEach(async () => {
       // Desktop resolution
-      viewport.set(1024, 768);
+      await setViewport(viewports.default);
       user = userEvent.setup();
     });
 
-    after(() => {
-      viewport.reset();
-    });
-
     function TestAutoCrud(props: Partial<AutoCrudProps<PersonModel>> = {}) {
       return <AutoCrud service={personService()} model={PersonModel} {...props} />;
     }
@@ -287,9 +286,9 @@ describe('@vaadin/hilla-react-crud', () => {
       let saveSpy: sinon.SinonSpy;
       let service: ReturnType<typeof personService>;
 
-      beforeEach(() => {
+      beforeEach(async () => {
         // iPhone 13 Pro resolution
-        viewport.set(390, 844);
+        await setViewport({ width: 390, height: 844 });
 
         service = personService();
         saveSpy = sinon.spy(service, 'save');

packages/ts/react-crud/test/autoform.spec.tsx

@@ -1,6 +1,3 @@
-// eslint-disable-next-line
-/// <reference types="karma-viewport" />
-
 import { expect, use } from '@esm-bundle/chai';
 import { fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
@@ -11,6 +8,8 @@ import type { SelectElement } from '@vaadin/react-components/Select.js';
 import { TextArea, type TextAreaElement } from '@vaadin/react-components/TextArea.js';
 import type { TextFieldElement } from '@vaadin/react-components/TextField.js';
 import { VerticalLayout } from '@vaadin/react-components/VerticalLayout.js';
+import { setViewport } from '@web/test-runner-commands';
+import type { Viewport } from '@web/test-runner-commands/plugins';
 import chaiAsPromised from 'chai-as-promised';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
@@ -32,6 +31,7 @@ import {
   PersonWithSimpleIdPropertyModel,
   PersonWithoutIdPropertyModel,
 } from './test-models-and-services.js';
+import { viewports } from './utils';
 
 use(sinonChai);
 use(chaiAsPromised);
@@ -108,12 +108,12 @@ describe('@vaadin/hilla-react-crud', () => {
     async function populatePersonForm(
       personId: number,
       formProps?: Omit<AutoFormProps<PersonModel>, 'item' | 'model' | 'service'>,
-      screenSize?: string,
+      screenSize?: Viewport,
       disabled?: boolean,
       service: CrudService<Person> & HasTestInfo = personService(),
     ): Promise<FormController> {
       if (screenSize) {
-        viewport.set(screenSize);
+        await setViewport(screenSize);
       }
       const person = await getItem(service, personId);
       const result = render(
@@ -122,14 +122,11 @@ describe('@vaadin/hilla-react-crud', () => {
       return await FormController.init(user, result.container);
     }
 
-    beforeEach(() => {
+    beforeEach(async () => {
+      await setViewport(viewports.default);
       user = userEvent.setup();
     });
 
-    afterEach(() => {
-      viewport.reset();
-    });
-
     it('renders fields for the properties in the form', async () => {
       const person: Person = {
         id: 1,
@@ -681,7 +678,7 @@ describe('@vaadin/hilla-react-crud', () => {
           return <VerticalLayout>{children}</VerticalLayout>;
         }
 
-        const form = await populatePersonForm(1, { layoutRenderer: MyLayoutRenderer }, 'screen-1440-900');
+        const form = await populatePersonForm(1, { layoutRenderer: MyLayoutRenderer }, viewports['screen-1440-900']);
         expect(form.formLayout).to.not.exist;
         const layout = await waitFor(() => form.renderResult.querySelector('vaadin-vertical-layout')!);
         expect(layout).to.exist;

packages/ts/react-crud/test/autogrid.spec.tsx

@@ -3,21 +3,23 @@ import { render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { GridColumn } from '@vaadin/react-components/GridColumn.js';
 import { TextField } from '@vaadin/react-components/TextField.js';
+import { setViewport } from '@web/test-runner-commands';
 import chaiAsPromised from 'chai-as-promised';
+import chaiDom from 'chai-dom';
 import { useEffect, useRef } from 'react';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import type { ListService } from '../crud';
-import type { HeaderFilterRendererProps } from '../header-filter';
 import { AutoGrid, type AutoGridProps, type AutoGridRef } from '../src/autogrid.js';
+import type { ListService } from '../src/crud.js';
 import type { CountService, CrudService } from '../src/crud.js';
+import type { HeaderFilterRendererProps } from '../src/header-filter.js';
 import { LocaleContext } from '../src/locale.js';
 import type AndFilter from '../src/types/com/vaadin/hilla/crud/filter/AndFilter.js';
+import type FilterUnion from '../src/types/com/vaadin/hilla/crud/filter/FilterUnion.js';
 import Matcher from '../src/types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js';
 import type PropertyStringFilter from '../src/types/com/vaadin/hilla/crud/filter/PropertyStringFilter.js';
 import type Sort from '../src/types/com/vaadin/hilla/mappedtypes/Sort.js';
 import Direction from '../src/types/org/springframework/data/domain/Sort/Direction.js';
-import type FilterUnion from '../types/com/vaadin/hilla/crud/filter/FilterUnion';
 import GridController from './GridController.js';
 import SelectController from './SelectController.js';
 import {
@@ -38,9 +40,11 @@ import {
   PersonWithSimpleIdPropertyModel,
 } from './test-models-and-services.js';
 import TextFieldController from './TextFieldController.js';
+import { viewports } from './utils.js';
 
 use(sinonChai);
 use(chaiAsPromised);
+use(chaiDom);
 
 export async function nextFrame(): Promise<void> {
   return new Promise<void>((resolve) => {
@@ -80,13 +84,9 @@ describe('@vaadin/hilla-react-crud', () => {
 
     let user: ReturnType<(typeof userEvent)['setup']>;
 
-    beforeEach(() => {
+    beforeEach(async () => {
+      await setViewport(viewports.default);
       user = userEvent.setup();
-      sinon.spy(console, 'error');
-    });
-
-    afterEach(() => {
-      sinon.restore();
     });
 
     describe('basics', () => {
@@ -452,6 +452,7 @@ describe('@vaadin/hilla-react-crud', () => {
         });
 
         it('provides error in console when either of totalCount or filterCount are present and the service does not implement CountService', async () => {
+          const consoleErrorSpy = sinon.stub(console, 'error');
           const service = personListService();
           const personTestData: Person[] = Array(3)
             .fill(null)
@@ -461,9 +462,10 @@ describe('@vaadin/hilla-react-crud', () => {
           const result = render(<TestAutoGrid service={service} model={PersonModel} filteredCount totalCount />);
           await GridController.init(result, user);
 
-          expect(console.error).to.have.been.calledWith(
+          expect(consoleErrorSpy).to.have.been.calledWith(
             '"totalCount" and "filteredCount" props require the provided service to implement the CountService interface.',
           );
+          consoleErrorSpy.restore();
         });
       });
 

packages/ts/react-crud/test/dataprovider.spec.tsx

@@ -1,9 +1,10 @@
 import { expect, use } from '@esm-bundle/chai';
 import { renderHook } from '@testing-library/react';
 import type { GridDataProvider, GridSorterDefinition } from '@vaadin/react-components/Grid.js';
+import { setViewport } from '@web/test-runner-commands';
 import sinon from 'sinon';
 import sinonChai from 'sinon-chai';
-import type { CountService, ListService } from '../crud.js';
+import type { CountService, ListService } from '../src/crud.js';
 import { DataProvider } from '../src/data-provider.js';
 import {
   createDataProvider,
@@ -12,11 +13,12 @@ import {
   useDataProvider,
   type ItemCounts,
 } from '../src/data-provider.js';
-import type AndFilter from '../types/com/vaadin/hilla/crud/filter/AndFilter.js';
-import type FilterUnion from '../types/com/vaadin/hilla/crud/filter/FilterUnion.js';
-import Matcher from '../types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js';
-import type PropertyStringFilter from '../types/com/vaadin/hilla/crud/filter/PropertyStringFilter.js';
-import type Pageable from '../types/com/vaadin/hilla/mappedtypes/Pageable.js';
+import type AndFilter from '../src/types/com/vaadin/hilla/crud/filter/AndFilter.js';
+import type FilterUnion from '../src/types/com/vaadin/hilla/crud/filter/FilterUnion.js';
+import Matcher from '../src/types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher.js';
+import type PropertyStringFilter from '../src/types/com/vaadin/hilla/crud/filter/PropertyStringFilter.js';
+import type Pageable from '../src/types/com/vaadin/hilla/mappedtypes/Pageable.js';
+import { viewports } from './utils.js';
 
 use(sinonChai);
 
@@ -154,7 +156,8 @@ describe('@hilla/react-crud', () => {
     let countServiceListSpy: sinon.SinonSpy<[request: Pageable, filter: FilterUnion | undefined], Promise<number[]>>;
     let countServiceCountSpy: sinon.SinonSpy<[filter: FilterUnion | undefined], Promise<number>>;
 
-    beforeEach(() => {
+    beforeEach(async () => {
+      await setViewport(viewports.default);
       listSpy = sinon.spy(listService, 'list');
       countServiceListSpy = sinon.spy(listAndCountService, 'list');
       countServiceCountSpy = sinon.spy(listAndCountService, 'count');