Self-document integration test mode

docker-compose.test.yml

@@ -5,7 +5,7 @@ services:
     image: muicom/toolpad:${TAG}
     environment:
       - TOOLPAD_DATABASE_URL=postgresql://postgres:postgres@postgres:5432/postgres?connect_timeout=10
-      - TOOLPAD_INTEGRATION_TEST=1
+      - TOOLPAD_ENABLE_CREATE_BY_DOM=1
       - PORT=3000
       - EXTERNAL_URL=http://localhost:3000/
     ports:

packages/toolpad-app/src/config.ts

@@ -37,7 +37,7 @@ export type BuildEnvVars = Record<
 export interface RuntimeConfig {
   // Enable input field for seeding a dom in the app creation dialog
   // (For testing purposes)
-  integrationTest?: boolean;
+  enableCreateByDom?: boolean;
 }
 
 declare global {
@@ -65,7 +65,7 @@ const runtimeConfig: RuntimeConfig =
   typeof window === 'undefined'
     ? {
         // Define runtime config here
-        integrationTest: !!process.env.TOOLPAD_INTEGRATION_TEST,
+        enableCreateByDom: !!process.env.TOOLPAD_ENABLE_CREATE_BY_DOM,
       }
     : getBrowsersideRuntimeConfig();
 

packages/toolpad-app/src/toolpad/Home.tsx

@@ -95,7 +95,7 @@ function CreateAppDialog({ onClose, ...props }: CreateAppDialogProps) {
                 setName(event.target.value);
               }}
             />
-            {config.integrationTest ? (
+            {config.enableCreateByDom ? (
               <TextField
                 label="seed DOM"
                 fullWidth

render.yaml

@@ -14,6 +14,8 @@ services:
     envVars:
       - key: NODE_VERSION
         value: '16.17.0'
+      - key: TOOLPAD_ENABLE_CREATE_BY_DOM
+        previewValue: '1'
       - key: TOOLPAD_DATABASE_URL
         fromDatabase:
           name: toolpad-db

test/integration/appRename.spec.ts

@@ -1,29 +1,19 @@
-import { test, expect, Page } from '../playwright/test';
+import { ToolpadHome } from '../models/ToolpadHome';
+import { test, expect } from '../playwright/test';
 import generateId from '../utils/generateId';
 import * as locators from '../utils/locators';
 
-async function createApp(page: Page, name: string) {
-  await page.locator('button:has-text("create new")').click();
-
-  await page.fill('[role="dialog"] label:has-text("name")', name);
-
-  await page.click('[role="dialog"] button:has-text("create")');
-
-  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ });
-}
-
 test('app create/rename flow', async ({ page }) => {
   const appName1 = `App ${generateId()}`;
   const appName2 = `App ${generateId()}`;
   const appName3 = `App ${generateId()}`;
 
-  await page.goto('/');
-  await createApp(page, appName1);
-
-  await page.goto('/');
-  await createApp(page, appName2);
-
-  await page.goto('/');
+  const homeModel = new ToolpadHome(page);
+  await homeModel.goto();
+  await homeModel.createApplication({ name: appName1 });
+  await homeModel.goto();
+  await homeModel.createApplication({ name: appName2 });
+  await homeModel.goto();
 
   await page.click(`${locators.toolpadHomeAppRow(appName1)} >> [aria-label="Application menu"]`);
 

test/integration/smoke.spec.ts

@@ -1,21 +1,19 @@
+import { ToolpadHome } from '../models/ToolpadHome';
 import { test, expect, Request } from '../playwright/test';
 import generateId from '../utils/generateId';
 import * as locators from '../utils/locators';
 
 test('basic app creation flow', async ({ page }) => {
   const appName = `App ${generateId()}`;
 
-  await page.goto('/');
+  const homeModel = new ToolpadHome(page);
+
+  await homeModel.goto();
   const brand = page.locator('data-test-id=brand');
   await expect(brand).toHaveText('MUI Toolpad CE');
 
-  await page.locator('button:has-text("create new")').click();
-
-  await page.fill('[role="dialog"] label:has-text("name")', appName);
-
-  await page.click('[role="dialog"] button:has-text("create")');
-
-  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/pages\/[^/]+/ });
+  await homeModel.createApplication({ name: appName });
+  await homeModel.goto();
 
   // TODO: basic editor tests
 

test/models/ToolpadHome.ts

@@ -48,6 +48,13 @@ export class ToolpadHome {
     await this.newAppNameInput.fill(name);
 
     if (dom) {
+      const isDomInputEnabled = await this.newAppDomInput.isVisible();
+      if (!isDomInputEnabled) {
+        throw new Error(
+          `Toolpad not in integration test mode. Make sure to start Toolpad with environment variable TOOLPAD_ENABLE_CREATE_BY_DOM=1.`,
+        );
+      }
+
       await this.newAppDomInput.fill(JSON.stringify(dom));
     }