Editor integration tests

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog.tsx

@@ -97,6 +97,7 @@ export default function ComponentCatalog({ className }: ComponentCatalogProps) {
 
   return (
     <ComponentCatalogRoot
+      data-testid="component-catalog"
       className={className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx

@@ -1326,6 +1326,7 @@ export default function RenderOverlay({ canvasHostRef }: RenderOverlayProps) {
 
   return (
     <OverlayRoot
+      data-testid="page-overlay"
       ref={overlayRef}
       className={clsx({
         [overlayClasses.nodeDrag]: isDraggingOver,

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

@@ -102,7 +102,7 @@ function Header({ actions, navigation }: HeaderProps) {
         >
           <HomeIcon fontSize="medium" />
         </IconButton>
-        <Typography data-test-id="brand" variant="h6" color="inherit" component="div">
+        <Typography data-testid="brand" variant="h6" color="inherit" component="div">
           MUI Toolpad {process.env.TOOLPAD_TARGET}
         </Typography>
         {navigation}

test/domTemplates/twoTextFields.json

@@ -0,0 +1,86 @@
+{
+  "root": "y3c19mb",
+  "nodes": {
+    "ft63r75": {
+      "id": "ft63r75",
+      "name": "textField1",
+      "type": "element",
+      "props": {
+        "label": {
+          "type": "const",
+          "value": "textField1"
+        }
+      },
+      "layout": {},
+      "parentId": "w173rcy",
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "TextField"
+        }
+      },
+      "parentProp": "children",
+      "parentIndex": "a0"
+    },
+    "rl83rbf": {
+      "id": "rl83rbf",
+      "name": "textField2",
+      "type": "element",
+      "props": {
+        "label": {
+          "type": "const",
+          "value": "textField2"
+        }
+      },
+      "layout": {},
+      "parentId": "w173rcy",
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "TextField"
+        }
+      },
+      "parentProp": "children",
+      "parentIndex": "a1"
+    },
+    "w173rcy": {
+      "id": "w173rcy",
+      "name": "pageRow",
+      "type": "element",
+      "props": {},
+      "layout": {},
+      "parentId": "y4d19z0",
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "PageRow"
+        }
+      },
+      "parentProp": "children",
+      "parentIndex": "a0"
+    },
+    "y3c19mb": {
+      "id": "y3c19mb",
+      "name": "Application",
+      "type": "app",
+      "parentId": null,
+      "attributes": {},
+      "parentProp": null,
+      "parentIndex": null
+    },
+    "y4d19z0": {
+      "id": "y4d19z0",
+      "name": "page1",
+      "type": "page",
+      "parentId": "y3c19mb",
+      "attributes": {
+        "title": {
+          "type": "const",
+          "value": "Page 1"
+        }
+      },
+      "parentProp": "pages",
+      "parentIndex": "a0"
+    }
+  }
+}

test/integration/appRename.spec.ts

@@ -1,17 +1,8 @@
-import { test, expect, Request, Page } from '@playwright/test';
+import { test, expect } from '@playwright/test';
+import createApp from '../utils/createApp';
 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\/[^/]+\/editor\/pages\/[^/]+/ });
-}
-
 test('app create/rename flow', async ({ page }) => {
   const appName1 = `App ${generateId()}`;
   const appName2 = `App ${generateId()}`;

test/integration/editor.spec.ts

@@ -0,0 +1,154 @@
+import { test, expect, Page, Locator } from '@playwright/test';
+import createApp from '../utils/createApp';
+import generateId from '../utils/generateId';
+import { canvasFrame, componentCatalog, pageRoot, pageOverlay } from '../utils/locators';
+import twoFieldsDomTemplate from '../domTemplates/twoTextFields.json';
+
+async function selectComponent(page: Page, componentLocator: Locator) {
+  const canvasFrameLocator = page.frameLocator(canvasFrame);
+
+  const canvasPageOverlayLocator = canvasFrameLocator.locator(pageOverlay);
+  const canvasPageOverlayBoundingBox = await canvasPageOverlayLocator.boundingBox();
+
+  const componentBoundingBox = await componentLocator.boundingBox();
+
+  expect(canvasPageOverlayBoundingBox).toBeDefined();
+
+  await canvasPageOverlayLocator.click({
+    position: {
+      x:
+        componentBoundingBox!.x + componentBoundingBox!.width / 2 - canvasPageOverlayBoundingBox!.x,
+      y:
+        componentBoundingBox!.y +
+        componentBoundingBox!.height / 2 -
+        canvasPageOverlayBoundingBox!.y,
+    },
+  });
+}
+
+test('can place new components from catalog', async ({ page }) => {
+  const appId = generateId();
+
+  await page.goto('/');
+  await createApp(page, `App ${appId}`);
+
+  const canvasFrameLocator = page.frameLocator(canvasFrame);
+
+  const componentCatalogLocator = page.locator(componentCatalog);
+  const canvasPageRootLocator = canvasFrameLocator.locator(pageRoot);
+  const canvasPageOverlayLocator = canvasFrameLocator.locator(pageOverlay);
+  const canvasInputLocator = canvasFrameLocator.locator('input');
+
+  await canvasPageRootLocator.waitFor();
+
+  await expect(canvasInputLocator).toHaveCount(0);
+
+  await componentCatalogLocator.hover();
+  await componentCatalogLocator
+    .locator(':has-text("TextField")[draggable]')
+    .dragTo(canvasPageOverlayLocator);
+
+  await expect(canvasInputLocator).toHaveCount(1);
+  await expect(canvasInputLocator).toBeVisible();
+
+  // Drag in a second component
+
+  await componentCatalogLocator.hover();
+  await componentCatalogLocator
+    .locator(':has-text("TextField")[draggable]')
+    .dragTo(canvasPageOverlayLocator);
+
+  await expect(canvasInputLocator).toHaveCount(2);
+});
+
+test('can move elements in page', async ({ page }) => {
+  const appId = generateId();
+
+  await page.goto('/');
+  await createApp(page, `App ${appId}`, JSON.stringify(twoFieldsDomTemplate));
+
+  const canvasFrameLocator = page.frameLocator(canvasFrame);
+
+  const canvasPageRootLocator = canvasFrameLocator.locator(pageRoot);
+  const canvasPageOverlayLocator = canvasFrameLocator.locator(pageOverlay);
+  const canvasInputLocator = canvasFrameLocator.locator('input');
+  const canvasMoveElementHandleLocator = canvasFrameLocator.locator(
+    ':has-text("TextField")[draggable]',
+  );
+
+  await canvasPageRootLocator.waitFor();
+
+  await canvasInputLocator.first().type('textField1');
+  await canvasInputLocator.nth(1).type('textField2');
+
+  await expect(canvasInputLocator.first()).toHaveAttribute('value', 'textField1');
+
+  // Move element by dragging
+
+  await expect(canvasMoveElementHandleLocator).not.toBeVisible();
+
+  const firstInputLocator = canvasInputLocator.first();
+  await selectComponent(page, firstInputLocator);
+
+  const canvasPageOverlayBoundingBox = await canvasPageOverlayLocator.boundingBox();
+
+  const secondTextFieldLocator = canvasInputLocator.nth(1);
+  const secondTextFieldBoundingBox = await secondTextFieldLocator.boundingBox();
+
+  expect(canvasPageOverlayBoundingBox).toBeDefined();
+  expect(secondTextFieldBoundingBox).toBeDefined();
+
+  await canvasMoveElementHandleLocator.dragTo(canvasPageOverlayLocator, {
+    targetPosition: {
+      x:
+        secondTextFieldBoundingBox!.x +
+        secondTextFieldBoundingBox!.width -
+        canvasPageOverlayBoundingBox!.x,
+      y:
+        secondTextFieldBoundingBox!.y +
+        secondTextFieldBoundingBox!.height / 2 -
+        canvasPageOverlayBoundingBox!.y,
+    },
+  });
+
+  await expect(canvasInputLocator.first()).toHaveAttribute('value', 'textField2');
+});
+
+test('can delete elements from page', async ({ page }) => {
+  const appId = generateId();
+
+  await page.goto('/');
+  await createApp(page, `App ${appId}`, JSON.stringify(twoFieldsDomTemplate));
+
+  const canvasFrameLocator = page.frameLocator(canvasFrame);
+
+  const canvasPageRootLocator = canvasFrameLocator.locator(pageRoot);
+  const canvasInputLocator = canvasFrameLocator.locator('input');
+  const canvasRemoveElementButtonLocator = canvasFrameLocator.locator(
+    'button[aria-label="Remove element"]',
+  );
+
+  await canvasPageRootLocator.waitFor();
+
+  await expect(canvasInputLocator).toHaveCount(2);
+
+  // Delete element by clicking
+
+  await expect(canvasRemoveElementButtonLocator).not.toBeVisible();
+
+  const firstInputLocator = canvasInputLocator.first();
+  await selectComponent(page, firstInputLocator);
+
+  await canvasRemoveElementButtonLocator.click();
+
+  await expect(canvasInputLocator).toHaveCount(1);
+
+  // Delete element by pressing key
+
+  const remainingTextFieldLocator = canvasInputLocator.first();
+  await selectComponent(page, remainingTextFieldLocator);
+
+  await page.keyboard.press('Backspace');
+
+  await expect(canvasInputLocator).toHaveCount(0);
+});

test/integration/smoke.spec.ts

@@ -6,7 +6,7 @@ test('basic app creation flow', async ({ page }) => {
   const appName = `App ${generateId()}`;
 
   await page.goto('/');
-  const brand = page.locator('data-test-id=brand');
+  const brand = page.locator('data-testid=brand');
   await expect(brand).toHaveText('MUI Toolpad CE');
 
   await page.locator('button:has-text("create new")').click();

test/utils/createApp.ts

@@ -0,0 +1,15 @@
+import { Page } from '@playwright/test';
+
+export default async function createApp(page: Page, name: string, dom?: string) {
+  await page.locator('button:has-text("create new")').click();
+
+  await page.fill('[role="dialog"] label:has-text("name")', name);
+
+  if (dom) {
+    await page.fill('[role="dialog"] label:has-text("dom")', dom);
+  }
+
+  await page.click('[role="dialog"] button:has-text("create")');
+
+  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/editor\/pages\/[^/]+/ });
+}

test/utils/locators.ts

@@ -1,3 +1,10 @@
 export function toolpadHomeAppRow(appName: string): string {
   return `[role="row"] >> has="input[value='${appName}']"`;
 }
+
+export const componentCatalog = 'data-testid=component-catalog';
+
+export const canvasFrame = 'iframe[data-toolpad-canvas]';
+
+export const pageRoot = 'data-testid=page-root';
+export const pageOverlay = 'data-testid=page-overlay';