test: improve web-test-runner significantly

vaadin · Jul 4, 2024 · 95500fd · 95500fd
1 parent 5649cab
commit 95500fd
Show file tree

Hide file tree

Showing 17 changed files with 3,862 additions and 3,869 deletions.
diff --git a/.gitignore b/.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/

diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -33,11 +33,12 @@
     "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",
@@ -63,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",

diff --git a/packages/ts/react-crud/package.json b/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": "cd ../../.. && wtr --group react-crud",
+    "test": "tsx ../../../scripts/test.ts",
     "test:coverage": "npm run test -- --coverage",
     "test:watch": "npm run test -- --watch",
     "typecheck": "tsc --noEmit"
@@ -74,15 +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"
   }

diff --git a/packages/ts/react-crud/src/autogrid.tsx b/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>
   );

diff --git a/packages/ts/react-crud/test/autocrud.spec.tsx b/packages/ts/react-crud/test/autocrud.spec.tsx
@@ -11,9 +11,10 @@ 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);
@@ -25,7 +26,7 @@ describe('@vaadin/hilla-react-crud', () => {
 
     beforeEach(async () => {
       // Desktop resolution
-      await setViewport({ width: 1024, height: 768 });
+      await setViewport(viewports.default);
       user = userEvent.setup();
     });
 

diff --git a/packages/ts/react-crud/test/autoform.spec.tsx b/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;

diff --git a/packages/ts/react-crud/test/autogrid.spec.tsx b/packages/ts/react-crud/test/autogrid.spec.tsx
@@ -3,22 +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 {
@@ -39,6 +40,7 @@ import {
   PersonWithSimpleIdPropertyModel,
 } from './test-models-and-services.js';
 import TextFieldController from './TextFieldController.js';
+import { viewports } from './utils.js';
 
 use(sinonChai);
 use(chaiAsPromised);
@@ -82,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', () => {
@@ -454,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)
@@ -463,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();
         });
       });
 

diff --git a/packages/ts/react-crud/test/dataprovider.spec.tsx b/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');

diff --git a/packages/ts/react-crud/test/locale.spec.tsx b/packages/ts/react-crud/test/locale.spec.tsx
@@ -1,7 +1,9 @@
 import { expect } from '@esm-bundle/chai';
 import { render } from '@testing-library/react';
 import type { DatePickerDate } from '@vaadin/react-components/DatePicker.js';
+import { setViewport } from '@web/test-runner-commands';
 import { LocaleFormatter, useDatePickerI18n } from '../src/locale.js';
+import { viewports } from './utils.js';
 
 describe('@vaadin/hilla-react-crud', () => {
   describe('LocaleFormatter', () => {
@@ -32,6 +34,10 @@ describe('@vaadin/hilla-react-crud', () => {
       { locale: 'bg', input: '5.07.99 г.', output: '5.07.99 г.', iso: '0099-07-05' },
     ];
 
+    beforeEach(async () => {
+      await setViewport(viewports.default);
+    });
+
     it('should format and parse dates', () => {
       function toIso(date: DatePickerDate) {
         const day = date.day.toString().padStart(2, '0');

diff --git a/packages/ts/react-crud/test/util.spec.tsx b/packages/ts/react-crud/test/util.spec.tsx
@@ -1,7 +1,7 @@
 import { expect } from '@esm-bundle/chai';
-import { isFilterEmpty } from '../src/util';
-import type FilterUnion from '../types/com/vaadin/hilla/crud/filter/FilterUnion';
-import Matcher from '../types/com/vaadin/hilla/crud/filter/PropertyStringFilter/Matcher';
+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 { isFilterEmpty } from '../src/util.js';
 
 describe('@vaadin/hilla-react-crud', () => {
   describe('util', () => {

diff --git a/packages/ts/react-crud/test/utils.tsx b/packages/ts/react-crud/test/utils.tsx
@@ -0,0 +1,6 @@
+import type { Viewport } from '@web/test-runner-commands/plugins';
+
+export const viewports: Record<string, Viewport> = {
+  default: { width: 1024, height: 768 },
+  'screen-1440-900': { width: 1440, height: 900 },
+};
diff --git a/packages/ts/react-crud/tsconfig.json b/packages/ts/react-crud/tsconfig.json
@@ -3,6 +3,6 @@
   "compilerOptions": {
     "jsx": "react-jsx"
   },
-  "include": ["src", "test"],
+  "include": ["src", "test", "*.config.js"],
   "exclude": ["test/**/*.snap.ts"]
 }
diff --git a/scripts/test.ts b/scripts/test.ts
@@ -0,0 +1,4 @@
+import { startTestRunner } from '@web/test-runner';
+import config from '../web-test-runner.config.js';
+
+await startTestRunner({ config, readFileConfig: false });
diff --git a/vite.config.ts b/vite.config.ts
@@ -1,8 +1,8 @@
 /* eslint-disable no-console */
 import { readFile } from 'node:fs/promises';
 import { basename } from 'node:path';
-import { fileURLToPath } from 'node:url';
-import { parseArgs } from 'node:util';
+import { fileURLToPath, pathToFileURL } from 'node:url';
+import react from '@vitejs/plugin-react';
 import cssnanoPlugin from 'cssnano';
 import type { TsconfigRaw } from 'esbuild';
 import MagicString from 'magic-string';
@@ -89,18 +89,7 @@ async function load<T>(path: URL, ignoreFailure?: string): Promise<T | null> {
   }
 }
 
-const {
-  values: { group },
-} = parseArgs({
-  options: {
-    group: {
-      type: 'string',
-    },
-  },
-  strict: false,
-});
-
-const cwd = new URL(`./packages/ts/${group}/`, root);
+const cwd = pathToFileURL(`${process.cwd()}/`);
 
 export default defineConfig(async () => {
   const [tsconfig, packageJson, mocks] = await Promise.all([
@@ -130,13 +119,14 @@ export default defineConfig(async () => {
         },
       },
     },
-    plugins: [constructCss(), loadRegisterJs()],
+    plugins: [constructCss(), loadRegisterJs(), react()],
     resolve: {
       alias: Object.entries(mocks ?? {}).map(([find, file]) => {
         const replacement = fileURLToPath(new URL(`./test/mocks/${file}`, cwd));
 
         return {
-          customResolver(_, importer) {
+          customResolver(id, importer) {
+            console.log(id);
             if (importer?.includes('/mocks/')) {
               return false;
             }