Place element integration test

mui · Aug 19, 2022 · c333d82 · c333d82
1 parent 7ea4eaa
commit c333d82
Show file tree

Hide file tree

Showing 8 changed files with 175 additions and 12 deletions.
diff --git a/packages/toolpad-app/src/runtime/ToolpadApp.tsx b/packages/toolpad-app/src/runtime/ToolpadApp.tsx
@@ -307,7 +307,7 @@ function PageRoot({ children }: PageRootProps) {
   return (
     <Container>
       <Stack
-        data-testid="page-root"
+        data-test-id="page-root"
         direction="column"
         sx={{
           my: 2,

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/ComponentCatalog.tsx
@@ -97,6 +97,7 @@ export default function ComponentCatalog({ className }: ComponentCatalogProps) {
 
   return (
     <ComponentCatalogRoot
+      data-test-id="component-catalog-root"
       className={className}
       onMouseEnter={handleMouseEnter}
       onMouseLeave={handleMouseLeave}

diff --git a/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx b/packages/toolpad-app/src/toolpad/AppEditor/PageEditor/RenderPanel/RenderOverlay.tsx
@@ -1326,6 +1326,7 @@ export default function RenderOverlay({ canvasHostRef }: RenderOverlayProps) {
 
   return (
     <OverlayRoot
+      data-test-id="page-overlay"
       ref={overlayRef}
       className={clsx({
         [overlayClasses.nodeDrag]: isDraggingOver,

diff --git a/test/fixtures/dom/basicDom.json b/test/fixtures/dom/basicDom.json
@@ -0,0 +1,118 @@
+{
+  "root": "cl6zan11c0000jss9h1zf22tk",
+  "nodes": {
+    "cl6zan11c0000jss9h1zf22tk": {
+      "id": "cl6zan11c0000jss9h1zf22tk",
+      "name": "Application",
+      "type": "app",
+      "parentId": null,
+      "attributes": {},
+      "parentProp": null,
+      "parentIndex": null
+    },
+    "cl6zan11c0001jss9a7mdh31m": {
+      "id": "cl6zan11c0001jss9a7mdh31m",
+      "name": "page1",
+      "type": "page",
+      "parentId": "cl6zan11c0000jss9h1zf22tk",
+      "attributes": {
+        "title": {
+          "type": "const",
+          "value": "Page 1"
+        }
+      },
+      "parentProp": "pages",
+      "parentIndex": "a0"
+    },
+    "cl6zb2hh300013b6tc84j5ql3": {
+      "name": "pageRow",
+      "props": {},
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "PageRow"
+        }
+      },
+      "layout": {},
+      "id": "cl6zb2hh300013b6tc84j5ql3",
+      "type": "element",
+      "parentId": "cl6zan11c0001jss9a7mdh31m",
+      "parentProp": "children",
+      "parentIndex": "a0"
+    },
+    "cl6zb2h4100003b6tgemtlsle": {
+      "name": "dataGrid",
+      "props": {},
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "DataGrid"
+        }
+      },
+      "layout": {},
+      "id": "cl6zb2h4100003b6tgemtlsle",
+      "type": "element",
+      "parentId": "cl6zb2hh300013b6tc84j5ql3",
+      "parentProp": "children",
+      "parentIndex": "a0"
+    },
+    "cl6zb2iuz00023b6tu2g2av37": {
+      "name": "image",
+      "props": {},
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "Image"
+        }
+      },
+      "layout": {},
+      "id": "cl6zb2iuz00023b6tu2g2av37",
+      "type": "element",
+      "parentId": "cl6zb2m2300043b6trct15qlr",
+      "parentProp": "children",
+      "parentIndex": "a1"
+    },
+    "cl6zb2m2300043b6trct15qlr": {
+      "name": "pageColumn",
+      "props": {},
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "PageColumn"
+        }
+      },
+      "layout": {
+        "columnSize": {
+          "type": "const",
+          "value": 1
+        }
+      },
+      "id": "cl6zb2m2300043b6trct15qlr",
+      "type": "element",
+      "parentId": "cl6zb2hh300013b6tc84j5ql3",
+      "parentProp": "children",
+      "parentIndex": "a2"
+    },
+    "cl6zb2lid00033b6thwix35hg": {
+      "name": "button",
+      "props": {
+        "justifyContent": {
+          "type": "const",
+          "value": "end"
+        }
+      },
+      "attributes": {
+        "component": {
+          "type": "const",
+          "value": "Button"
+        }
+      },
+      "layout": {},
+      "id": "cl6zb2lid00033b6thwix35hg",
+      "type": "element",
+      "parentId": "cl6zb2m2300043b6trct15qlr",
+      "parentProp": "children",
+      "parentIndex": "a0V"
+    }
+  }
+}
diff --git a/test/integration/appRename.spec.ts b/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()}`;

diff --git a/test/integration/editor.spec.ts b/test/integration/editor.spec.ts
@@ -0,0 +1,31 @@
+import { test, expect } from '@playwright/test';
+import createApp from '../utils/createApp';
+import generateId from '../utils/generateId';
+import { canvasFrame, componentCatalog, pageOverlay } from '../utils/locators';
+
+test('can place new component from catalog', async ({ page }) => {
+  const appId = generateId();
+
+  await page.goto('/');
+  await createApp(page, `App ${appId}`);
+
+  await page.waitForNavigation({ url: /\/_toolpad\/app\/[^/]+\/editor\/pages\/[^/]+/ });
+
+  const canvasFrameLocator = page.frameLocator(canvasFrame);
+
+  const componentCatalogLocator = page.locator(componentCatalog);
+  const canvasPageOverlayLocator = canvasFrameLocator.locator(pageOverlay);
+  const canvasInputLocator = canvasFrameLocator.locator('input');
+
+  await canvasPageOverlayLocator.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();
+});
diff --git a/test/utils/createApp.ts b/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\/[^/]+/ });
+}
diff --git a/test/utils/locators.ts b/test/utils/locators.ts
@@ -1,3 +1,9 @@
 export function toolpadHomeAppRow(appName: string): string {
   return `[role="row"] >> has="input[value='${appName}']"`;
 }
+
+export const componentCatalog = 'data-test-id=component-catalog-root';
+
+export const canvasFrame = 'iframe[data-toolpad-canvas]';
+
+export const pageOverlay = 'data-test-id=page-overlay';