Improve UX around integration testing

.gitignore

@@ -55,4 +55,6 @@ packages/toolpad-app/public/reactDevtools
 packages/toolpad-app/public/runtime
 packages/toolpad-app/public/typings.json
 
-examples/*/yarn.lock
+examples/*/yarn.lock
+
+.toolpad-generated

CONTRIBUTING.md

@@ -96,6 +96,35 @@ _If you're looking into contributing to the docs, follow the [instructions](#bui
 
 1. Open the docs application in the browser [http://localhost:3003/toolpad](http://localhost:3003/toolpad)
 
+## Integration tests
+
+- To run Toolpad on a fixture
+
+  ```sh
+  yarn toolpad dev --dev ./path/to/fixture
+  ```
+
+- To run the tests locally in production mode
+
+  ```sh
+  yarn build:release
+  yarn test:integration --project chromiun
+  ```
+
+- To run the tests locally in dev mode
+
+  ```sh
+  yarn dev
+  ```
+
+  then run
+
+  ```sh
+  TOOLPAD_NEXT_DEV=1 yarn test:integration --project chromiun
+  ```
+
+- Use the `--ui` flag to run the tests interactively
+
 ## Sending a pull request
 
 Please have a look at our general guidelines for sending pull requests [here](https://mui-org.notion.site/GitHub-PRs-7112d03a6c4346168090b29a970c0154) and [here](https://github.com/mui/material-ui/blob/master/CONTRIBUTING.md#sending-a-pull-request).

package.json

@@ -38,7 +38,8 @@
     "test:build": "lerna run build --scope @mui/toolpad-core --scope @mui/toolpad-components --stream",
     "test:integration": "playwright test --config ./test/integration/playwright.config.ts",
     "test": "jest",
-    "check-types": "lerna run check-types"
+    "check-types": "lerna run check-types",
+    "toolpad": "toolpad"
   },
   "devDependencies": {
     "@mui/monorepo": "https://github.com/mui/material-ui.git",

packages/toolpad-app/cli/index.ts

@@ -36,9 +36,13 @@ interface RunCommandArgs {
   // Whether Toolpad editor is running in debug mode
   devMode?: boolean;
   port?: number;
+  dir?: string;
 }
 
-async function runApp(cmd: 'dev' | 'start', { devMode = false, port }: RunCommandArgs) {
+async function runApp(
+  cmd: 'dev' | 'start',
+  { devMode = false, port, dir = process.cwd() }: RunCommandArgs,
+) {
   const { execaNode } = await import('execa');
   const { default: chalk } = await import('chalk');
   const { default: getPort } = await import('get-port');
@@ -58,14 +62,13 @@ async function runApp(cmd: 'dev' | 'start', { devMode = false, port }: RunComman
   const serverPath = path.resolve(__dirname, './server.js');
 
   const cp = execaNode(serverPath, [], {
-    cwd: process.cwd(),
+    cwd: dir,
     stdio: 'pipe',
     env: {
       NODE_ENV: devMode ? 'development' : 'production',
       TOOLPAD_DIR: toolpadDir,
+      TOOLPAD_PROJECT_DIR: dir,
       TOOLPAD_PORT: String(port),
-      TOOLPAD_DEV: devMode ? 'true' : 'false',
-      TOOLPAD_PROJECT_DIR: process.cwd(),
       TOOLPAD_CMD: cmd,
       FORCE_COLOR: '1',
     },
@@ -139,11 +142,13 @@ export default async function cli(argv: string[]) {
     },
   );
 
-  const command = args._[0];
+  const command: string | undefined = args._[0];
+  const dir: string = args._[1];
 
   const runArgs = {
     devMode: args['--dev'],
     port: args['--port'],
+    dir,
   };
 
   switch (command) {

packages/toolpad-app/cli/server.ts

@@ -6,17 +6,17 @@ import invariant from 'invariant';
 async function main() {
   const { default: chalk } = await import('chalk');
 
+  const projectDir = process.env.TOOLPAD_PROJECT_DIR;
+
   const dir = process.env.TOOLPAD_DIR;
-  const dev = process.env.TOOLPAD_DEV === 'true';
+  const dev = process.env.NODE_ENV !== 'production';
   const hostname = 'localhost';
   const port = Number(process.env.TOOLPAD_PORT);
 
   // when using middleware `hostname` and `port` must be provided below
   const app = next({ dir, dev, hostname, port });
   const handle = app.getRequestHandler();
 
-  await app.prepare();
-
   const server = createServer(async (req, res) => {
     try {
       invariant(req.url, 'request must have a url');
@@ -42,7 +42,13 @@ async function main() {
   });
 
   // eslint-disable-next-line no-console
-  console.log(`> Toolpad ready on ${chalk.green(`http://${hostname}:${port}`)}`);
+  console.log(
+    `${chalk.green('ready')} - toolpad project ${chalk.cyan(projectDir)} ready on ${chalk.cyan(
+      `http://${hostname}:${port}`,
+    )}`,
+  );
+
+  await app.prepare();
 }
 
 main().catch((err) => {

test/playwright/localTest.ts

@@ -107,7 +107,7 @@ const test = base.extend<
   },
   { browserCloser: null }
 >({
-  toolpadDev: !!process.env.TOOLPAD_DEV,
+  toolpadDev: !!process.env.TOOLPAD_NEXT_DEV,
   localAppConfig: [undefined, { option: true }],
   localApp: async ({ localAppConfig, toolpadDev }, use) => {
     if (!localAppConfig) {