Editor integration tests

.circleci/config.yml

@@ -170,7 +170,7 @@ jobs:
       - run:
           command: |
             # See https://circleci.com/docs/2.0/env-vars/#setting-an-environment-variable-in-a-shell-command
-            TAG=$CIRCLE_SHA1 docker-compose -f ./docker/compose/docker-compose.yml up -d
+            TAG=$CIRCLE_SHA1 docker-compose -f ./docker/compose/docker-compose.test.yml up -d
             yarn workspace @mui/toolpad-app waitForApp --url=http://172.17.0.1:3000/
             docker run -it --rm \
               --ipc=host \
@@ -179,7 +179,7 @@ jobs:
               -e PLAYWRIGHT_TEST_BASE_URL=http://172.17.0.1:3000/ \
               mcr.microsoft.com/playwright:v1.23.1-focal \
               yarn test:integration --forbid-only
-            docker-compose -f ./docker/compose/docker-compose.yml down
+            docker-compose -f ./docker/compose/docker-compose.test.yml down
 
       # push the image
       - when:

docker/compose/docker-compose.test.yml

@@ -0,0 +1,30 @@
+version: '3.7'
+
+services:
+  toolpad:
+    image: muicom/toolpad:${TAG:-latest}
+    environment:
+      - TOOLPAD_DATABASE_URL=postgresql://toolpad-app:secretpw@postgres:5432/postgres?connect_timeout=10
+      - TOOLPAD_CREATE_WITH_DOM=true
+      - PORT=3000
+      - EXTERNAL_URL=http://localhost:3000/
+    ports:
+      - '3000:3000'
+
+  postgres:
+    image: postgres:14.2
+    restart: always
+    environment:
+      - POSTGRES_USER=toolpad-app
+      - POSTGRES_PASSWORD=secretpw
+    logging:
+      options:
+        max-size: 10m
+        max-file: '3'
+    expose:
+      - '5432'
+    volumes:
+      - postgres-data:/var/lib/postgresql/data
+
+volumes:
+  postgres-data:

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/ComponentEditor.tsx

@@ -50,7 +50,7 @@ function ComponentPropsEditor<P>({ componentConfig, node }: ComponentPropsEditor
   const hasLayoutControls = hasLayoutHorizontalControls || hasLayoutVerticalControls;
 
   return (
-    <ComponentPropsEditorRoot>
+    <ComponentPropsEditorRoot data-testid="component-props-editor">
       {hasLayoutControls ? (
         <React.Fragment>
           <Typography variant="subtitle2" sx={{ mt: 1 }}>

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/integration/appRename.spec.ts

@@ -1,17 +1,8 @@
-import { test, expect, 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/domInput.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/editor/index.spec.ts

@@ -0,0 +1,157 @@
+import { test, expect, Page, Locator } from '@playwright/test';
+import createApp from '../../utils/createApp';
+import clickCenter from '../../utils/clickCenter';
+import generateId from '../../utils/generateId';
+import { canvasFrame, componentCatalog, pageRoot } from '../../utils/locators';
+import domInput from './domInput.json';
+
+async function dragCenterToCenter(page: Page, sourceLocator: Locator, targetLocator: Locator) {
+  const sourceBoundingBox = await sourceLocator.boundingBox();
+  const targetBoundingBox = await targetLocator.boundingBox();
+
+  expect(sourceBoundingBox).toBeDefined();
+  expect(targetBoundingBox).toBeDefined();
+
+  await page.mouse.move(
+    sourceBoundingBox!.x + sourceBoundingBox!.width / 2,
+    sourceBoundingBox!.y + sourceBoundingBox!.height / 2,
+    { steps: 5 },
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    targetBoundingBox!.x + targetBoundingBox!.width / 2,
+    targetBoundingBox!.y + targetBoundingBox!.height / 2,
+    { steps: 5 },
+  );
+  await page.mouse.up();
+}
+
+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 canvasInputLocator = canvasFrameLocator.locator('input');
+
+  await canvasPageRootLocator.waitFor();
+
+  await expect(canvasInputLocator).toHaveCount(0);
+
+  // Drag in a first component
+
+  await componentCatalogLocator.hover();
+
+  const textFieldDragSourceLocator = componentCatalogLocator.locator(
+    ':has-text("TextField")[draggable]',
+  );
+  await dragCenterToCenter(page, textFieldDragSourceLocator, canvasPageRootLocator);
+
+  await expect(canvasInputLocator).toHaveCount(1);
+  await expect(canvasInputLocator).toBeVisible();
+
+  // Drag in a second component
+
+  await componentCatalogLocator.hover();
+  await dragCenterToCenter(page, textFieldDragSourceLocator, canvasPageRootLocator);
+
+  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(domInput));
+
+  const canvasFrameLocator = page.frameLocator(canvasFrame);
+
+  const canvasPageRootLocator = canvasFrameLocator.locator(pageRoot);
+  const canvasInputLocator = canvasFrameLocator.locator('input');
+  const canvasMoveElementHandleLocator = canvasFrameLocator.locator(
+    ':has-text("TextField")[draggable]',
+  );
+
+  await canvasPageRootLocator.waitFor();
+
+  const firstTextFieldLocator = canvasInputLocator.first();
+  const secondTextFieldLocator = canvasInputLocator.nth(1);
+
+  await firstTextFieldLocator.focus();
+  await firstTextFieldLocator.type('textField1');
+
+  await secondTextFieldLocator.focus();
+  await secondTextFieldLocator.type('textField2');
+
+  await expect(firstTextFieldLocator).toHaveAttribute('value', 'textField1');
+  await expect(secondTextFieldLocator).toHaveAttribute('value', 'textField2');
+
+  await expect(canvasMoveElementHandleLocator).not.toBeVisible();
+
+  // Move first element by dragging it to the right side of second element
+
+  await clickCenter(page, firstTextFieldLocator);
+
+  const canvasMoveElementHandleBoundingBox = await canvasMoveElementHandleLocator.boundingBox();
+  const secondTextFieldBoundingBox = await secondTextFieldLocator.boundingBox();
+
+  expect(canvasMoveElementHandleBoundingBox).toBeDefined();
+  expect(secondTextFieldBoundingBox).toBeDefined();
+
+  await page.mouse.move(
+    canvasMoveElementHandleBoundingBox!.x + canvasMoveElementHandleBoundingBox!.width / 2,
+    canvasMoveElementHandleBoundingBox!.y + canvasMoveElementHandleBoundingBox!.height / 2,
+    { steps: 5 },
+  );
+  await page.mouse.down();
+  await page.mouse.move(
+    secondTextFieldBoundingBox!.x + secondTextFieldBoundingBox!.width,
+    secondTextFieldBoundingBox!.y + secondTextFieldBoundingBox!.height / 2,
+    { steps: 5 },
+  );
+  await page.mouse.up();
+
+  await expect(firstTextFieldLocator).toHaveAttribute('value', 'textField2');
+  await expect(secondTextFieldLocator).toHaveAttribute('value', 'textField1');
+});
+
+test('can delete elements from page', async ({ page }) => {
+  const appId = generateId();
+
+  await page.goto('/');
+  await createApp(page, `App ${appId}`, JSON.stringify(domInput));
+
+  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 firstTextFieldLocator = canvasInputLocator.first();
+
+  await clickCenter(page, firstTextFieldLocator);
+  await canvasRemoveElementButtonLocator.click();
+
+  await expect(canvasInputLocator).toHaveCount(1);
+
+  // Delete element by pressing key
+
+  await clickCenter(page, firstTextFieldLocator);
+  await page.keyboard.press('Backspace');
+
+  await expect(canvasInputLocator).toHaveCount(0);
+});