Run toolpad/core tests in the browser (#3640)

.circleci/config.yml

@@ -165,6 +165,24 @@ jobs:
  name: Tests fake browser
  command: pnpm test
 
+ test_unit_browser:
+ <<: *default-job
+ docker:
+ - image: mcr.microsoft.com/playwright:v1.44.1-focal
+ environment:
+ NODE_ENV: test
+
+ steps:
+ - checkout
+ - install_js:
+ browsers: true
+ - run:
+ name: 'Build packages'
+ command: pnpm release:build
+ - run:
+ name: Tests real browser
+ command: pnpm test:browser
+
  test_integration:
  <<: *default-job
  resource_class: 'large'
@@ -174,7 +192,6 @@ jobs:
  environment:
  NODE_ENV: test
  TOOLPAD_TEST_RETRIES: 1
- EXPERIMENTAL_INLINE_CANVAS: 1
 
  steps:
  - checkout
@@ -216,6 +233,10 @@ workflows:
  <<: *default-context
  requires:
  - checkout
+ - test_unit_browser:
+ <<: *default-context
+ requires:
+ - checkout
  - test_integration:
  <<: *default-context
  requires:

.eslintrc.js

@@ -142,7 +142,7 @@ module.exports = {
  '*.spec.tsx',
  '*.test.ts',
  '*.test.tsx',
- 'vitest.config.ts',
+ 'vitest.config.mts',
  ],
  rules: {
  'import/no-extraneous-dependencies': ['error'],

docs/pages/toolpad/core/api/app-provider.json

@@ -1,12 +1,36 @@
 {
- "props": {},
+ "props": {
+ "children": { "type": { "name": "node" }, "required": true },
+ "branding": {
+ "type": { "name": "shape", "description": "{ logo?: node, title?: string }" },
+ "default": "null"
+ },
+ "navigation": {
+ "type": {
+ "name": "arrayOf",
+ "description": "Array&lt;{ children?: Array&lt;object<br>&#124;&nbsp;{ kind: 'header', title: string }<br>&#124;&nbsp;{ kind: 'divider' }&gt;, icon?: node, kind?: 'page', slug?: string, title: string }<br>&#124;&nbsp;{ kind: 'header', title: string }<br>&#124;&nbsp;{ kind: 'divider' }&gt;"
+ },
+ "default": "[]"
+ },
+ "router": {
+ "type": {
+ "name": "shape",
+ "description": "{ navigate: func, pathname: string, searchParams?: URLSearchParams }"
+ },
+ "default": "null"
+ },
+ "theme": { "type": { "name": "object" }, "default": "baseTheme" }
+ },
  "name": "AppProvider",
- "imports": ["import { AppProvider } from '@toolpad-core/nextjs';"],
+ "imports": [
+ "import { AppProvider } from '@toolpad-core/AppProvider';",
+ "import { AppProvider } from '@toolpad-core';"
+ ],
  "classes": [],
  "spread": true,
  "themeDefaultProps": null,
  "muiName": "AppProvider",
- "filename": "/packages/toolpad-core/src/nextjs/AppProvider.tsx",
+ "filename": "/packages/toolpad-core/src/AppProvider/AppProvider.tsx",
  "inheritance": null,
  "demos": "<ul><li><a href=\"/toolpad/core/react-app-provider/\">App Provider</a></li>\n<li><a href=\"/toolpad/core/react-dashboard-layout/\">Dashboard Layout</a></li></ul>",
  "cssComponent": false

docs/translations/api-docs/app-provider/app-provider.json

@@ -1 +1,13 @@
-{ "componentDescription": "", "propDescriptions": {}, "classDescriptions": {} }
+{
+ "componentDescription": "",
+ "propDescriptions": {
+ "branding": { "description": "Branding options for the app." },
+ "children": { "description": "The content of the app provider." },
+ "navigation": { "description": "Navigation definition for the app." },
+ "router": { "description": "Router implementation used inside Toolpad components." },
+ "theme": {
+ "description": "<a href=\"https://mui.com/material-ui/customization/theming/\">Theme</a> used by the app."
+ }
+ },
+ "classDescriptions": {}
+}

package.json

@@ -30,8 +30,9 @@
  "release:changelog": "dotenv -- node ./scripts/releaseChangelog.mjs --repo mui-toolpad",
  "test:build": "lerna run build --scope @toolpad/studio-runtime --scope @toolpad/studio-components --stream",
  "test:integration": "rimraf ./node_modules/.vite && playwright test --config ./test/playwright.config.ts",
+ "test:browser": "FORCE_COLOR=1 pnpm run -r test:browser",
  "test:argos": "node ./scripts/pushArgos.mjs",
- "test": "lerna run test",
+ "test": "lerna run test --stream",
  "check-types": "lerna run check-types",
  "toolpad-studio": "node --enable-source-maps packages/toolpad-studio/cli.mjs",
  "jsonSchemas": "tsx ./scripts/docs/generateJsonSchemas.ts",
@@ -106,6 +107,7 @@
  },
  "dependencies": {
  "@types/lodash": "4.17.4",
+ "@vitest/browser": "beta",
  "archiver": "7.0.1",
  "cross-env": "7.0.3",
  "dotenv-cli": "7.4.2",
@@ -117,7 +119,7 @@
  "semver": "7.6.2",
  "tsup": "8.0.2",
  "tsx": "4.11.0",
- "vitest": "1.6.0",
+ "vitest": "beta",
  "yargs": "17.7.2",
  "zod": "3.23.8",
  "zod-to-json-schema": "3.23.0"

packages/create-toolpad-app/package.json

@@ -45,6 +45,7 @@
  "@types/node": "20.14.1",
  "@types/semver": "7.5.8",
  "@types/tar": "6.1.13",
- "@types/yargs": "17.0.32"
+ "@types/yargs": "17.0.32",
+ "terminate": "^2.6.1"
  }
 }

packages/create-toolpad-app/tests/index.spec.ts

@@ -3,10 +3,12 @@ import * as path from 'path';
 import * as url from 'url';
 import readline from 'readline';
 import { Readable } from 'stream';
-import { execa, ExecaChildProcess } from 'execa';
+import { execa } from 'execa';
 import { test, expect, afterEach } from 'vitest';
-import { once } from 'events';
 import * as os from 'os';
+import terminate from 'terminate';
+
+type ExecaChildProcess = ReturnType<typeof execa>;
 
 const TEST_TIMEOUT = process.env.CI ? 60000 : 600000;
 
@@ -15,8 +17,8 @@ const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 const cliPath = path.resolve(currentDirectory, '../dist/index.js');
 
 let testDir: string | undefined;
-let cp: ExecaChildProcess<string> | undefined;
-let toolpadProcess: ExecaChildProcess<string> | undefined;
+let cp: ExecaChildProcess | undefined;
+let toolpadProcess: ExecaChildProcess | undefined;
 
 async function waitForMatch(input: Readable, regex: RegExp): Promise<RegExpExecArray | null> {
  return new Promise((resolve, reject) => {
@@ -92,22 +94,20 @@ test(
 );
 
 afterEach(async () => {
- if (toolpadProcess && typeof toolpadProcess.exitCode !== 'number') {
- toolpadProcess.catch(() => null);
- toolpadProcess.kill('SIGKILL');
- await once(toolpadProcess, 'exit');
+ if (toolpadProcess) {
+ await terminate(toolpadProcess.pid!);
+ await toolpadProcess.catch(() => null);
+ console.log('toolpad ended');
  }
-});
 
-afterEach(async () => {
- if (testDir) {
- await fs.rm(testDir, { recursive: true, force: true, maxRetries: 3 });
+ if (cp) {
+ await terminate(cp.pid!);
+ await cp.catch(() => null);
+ console.log('create-toolpad-app ended');
  }
-});
 
-afterEach(async () => {
- if (cp && typeof cp.exitCode !== 'number') {
- cp.kill('SIGKILL');
- await once(cp, 'exit');
+ if (testDir) {
+ await fs.rm(testDir, { recursive: true, force: true });
+ console.log('test directory cleaned up');
  }
-});
+}, 30000);

packages/toolpad-core/package.json

@@ -43,7 +43,8 @@
  "prebuild": "rimraf build tsconfig.build.tsbuildinfo",
  "dev": "concurrently \"pnpm build:stable --watch\" \"pnpm build:types --watch --preserveWatchOutput\"",
  "check-types": "tsc --noEmit",
- "test": "vitest run"
+ "test": "vitest run",
+ "test:browser": "vitest run --browser.enabled"
  },
  "dependencies": {
  "@mui/lab": "5.0.0-alpha.170",
@@ -64,9 +65,12 @@
  "@types/react": "18.3.3",
  "@types/react-dom": "18.3.0",
  "@types/sinon": "^17.0.3",
+ "@vitest/browser": "beta",
  "next": "^14.2.3",
  "next-router-mock": "^0.9.13",
- "sinon": "^18.0.0"
+ "playwright": "^1.44.1",
+ "sinon": "^18.0.0",
+ "vitest": "beta"
  },
  "peerDependencies": {
  "@mui/icons-material": "^5",

packages/toolpad-core/src/DataGrid/DataGrid.tsx

@@ -54,7 +54,7 @@ import {
  DataGridNotification,
  SetDataGridNotificationContext,
 } from './NotificationSnackbar';
-import { Filter } from '../DataProvider/filter';
+import { type Filter } from '../DataProvider/filter';
 
 const RootContainer = styled('div')({
  display: 'flex',

packages/toolpad-core/src/DataProvider/DataProvider.tsx

@@ -3,9 +3,9 @@ import invariant from 'invariant';
 import * as React from 'react';
 import { getObjectKey } from '@toolpad/utils/objectKey';
 import { deepmerge } from '@mui/utils';
-import { Filter, FilterProvider, getKeyFromFilter, useFilter } from './filter';
+import { type Filter, FilterProvider, getKeyFromFilter, useFilter } from './filter';
 
-export { Filter, useFilter } from './filter';
+export { type Filter, useFilter } from './filter';
 
 /**
  * @ignore - do not document.

packages/toolpad-core/src/LineChart/LineChart.test.tsx

@@ -4,7 +4,7 @@
 
 import * as React from 'react';
 import { describe, test, expect, afterEach } from 'vitest';
-import { render, cleanup } from '@testing-library/react';
+import { render, cleanup, waitFor } from '@testing-library/react';
 import sinon from 'sinon';
 import { LineChart as XLineChart } from '@mui/x-charts';
 import describeConformance from '@toolpad/utils/describeConformance';
@@ -34,8 +34,13 @@ describe('LineChart', () => {
  test('renders content correctly', async () => {
  window.matchMedia = stubMatchMedia(false);
  // placeholder test
- const { getByText } = render(<LineChart />);
+ const { getByText } = render(<LineChart height={300} />);
 
- expect(getByText('No data to display')).toBeTruthy();
+ await waitFor(
+ () => {
+ expect(getByText('No data to display')).toBeTruthy();
+ },
+ { timeout: 1000 },
+ );
  });
 });

packages/toolpad-core/src/nextjs/AppProvider.test.tsx

@@ -8,8 +8,21 @@ import { render, cleanup } from '@testing-library/react';
 import { AppProvider } from './AppProvider';
 import { Router } from '../AppProvider';
 
-vi.mock('next/router', () => vi.importActual('next-router-mock'));
-vi.mock('next/compat/router', () => vi.importActual('next-router-mock'));
+vi.mock('./nextNavigation', () => {
+ const searchParams = new URLSearchParams();
+ const push = () => {};
+ const replace = () => {};
+ const router = { push, replace };
+ return {
+ usePathname: () => '/',
+ useSearchParams: () => searchParams,
+ useRouter: () => router,
+ };
+});
+
+vi.mock('./nextRouter', () => ({ useRouter: () => null }));
+
+vi.mock('./nextCompatRouter', () => ({ useRouter: () => null }));
 
 interface RouterTestProps {
  children: React.ReactNode;
@@ -29,7 +42,7 @@ function RouterTest({ children }: RouterTestProps) {
  return <AppProvider router={router}>{children}</AppProvider>;
 }
 
-describe('AppProvider', () => {
+describe('Nextjs AppProvider', () => {
  afterEach(cleanup);
 
  test('renders content correctly', async () => {

packages/toolpad-core/src/nextjs/AppProvider.tsx

@@ -1,20 +1,12 @@
 'use client';
 import * as React from 'react';
-import { useRouter } from 'next/compat/router';
+import { useRouter } from './nextCompatRouter';
 import { AppProviderNextApp } from './AppProviderNextApp';
 import { AppProviderNextPages } from './AppProviderNextPages';
 import { AppProviderProps } from '../AppProvider';
 
 /**
- *
- * Demos:
- *
- * - [App Provider](https://mui.com/toolpad/core/react-app-provider/)
- * - [Dashboard Layout](https://mui.com/toolpad/core/react-dashboard-layout/)
- *
- * API:
- *
- * - [AppProvider API](https://mui.com/toolpad/core/api/app-provider)
+ * @ignore - internal component.
  */
 function AppProvider(props: AppProviderProps) {
  const router = useRouter();

packages/toolpad-core/src/nextjs/AppProviderNextApp.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { usePathname, useSearchParams, useRouter } from 'next/navigation';
+import { usePathname, useSearchParams, useRouter } from './nextNavigation';
 import { AppProvider, AppProviderProps, Navigate, Router } from '../AppProvider';
 
 /**

packages/toolpad-core/src/nextjs/AppProviderNextPages.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
-import { useRouter } from 'next/router';
 import { asArray } from '@toolpad/utils/collections';
+import { useRouter } from './nextRouter';
 import { AppProvider, AppProviderProps, Navigate, Router } from '../AppProvider';
 
 /**

packages/toolpad-core/src/nextjs/nextCompatRouter.ts

@@ -0,0 +1 @@
+export * from 'next/compat/router';

packages/toolpad-core/src/nextjs/nextNavigation.ts

@@ -0,0 +1 @@
+export * from 'next/navigation';

packages/toolpad-core/src/nextjs/nextRouter.ts

@@ -0,0 +1 @@
+export * from 'next/router';

packages/toolpad-core/vitest.config.mts

@@ -0,0 +1,13 @@
+import { defineConfig } from 'vitest/config';
+
+export default defineConfig({
+ test: {
+ setupFiles: ['../../test/setupVitest.ts'],
+ browser: {
+ enabled: false, // enabled through CLI
+ name: 'chromium',
+ provider: 'playwright',
+ headless: !!process.env.CI,
+ },
+ },
+});

packages/toolpad-studio/src/server/appServerWorker.ts

@@ -90,6 +90,7 @@ export async function main({ port, ...config }: AppViteServerConfig) {
  }
  case 'exit': {
  await devServer.close();
+ process.exit();
  break;
  }
  default: