Add snapshot tests for vertical resizing of elements

mui · Nov 1, 2023 · 6f0aaec · 6f0aaec
1 parent fbfca0b
commit 6f0aaec
Show file tree

Hide file tree

Showing 6 changed files with 130 additions and 23 deletions.
diff --git a/test/models/ToolpadEditor.ts b/test/models/ToolpadEditor.ts
@@ -1,6 +1,7 @@
 import { setTimeout } from 'timers/promises';
 import { expect, FrameLocator, Locator, Page } from '@playwright/test';
 import { gotoIfNotCurrent } from './shared';
+import waitForBoundingBox from '../utils/waitForBoundingBox';
 
 class CreateComponentDialog {
   readonly page: Page;
@@ -137,11 +138,7 @@ export class ToolpadEditor {
 
     await this.componentCatalog.hover();
 
-    let pageRootBoundingBox;
-    await expect(async () => {
-      pageRootBoundingBox = await this.pageRoot.boundingBox();
-      expect(pageRootBoundingBox).toBeTruthy();
-    }).toPass();
+    const pageRootBoundingBox = await waitForBoundingBox(this.pageRoot);
 
     if (!moveTargetX) {
       moveTargetX = pageRootBoundingBox!.x + pageRootBoundingBox!.width / 2;

diff --git a/test/utils/clickCenter.ts b/test/utils/clickCenter.ts
@@ -1,13 +1,8 @@
-import { Page, Locator, expect } from '@playwright/test';
+import { Page, Locator } from '@playwright/test';
+import waitForBoundingBox from './waitForBoundingBox';
 
 export default async function clickCenter(page: Page, targetLocator: Locator) {
-  let targetBoundingBox;
-  await expect(async () => {
-    targetBoundingBox = await targetLocator.boundingBox();
-    expect(targetBoundingBox).toBeTruthy();
-    expect(targetBoundingBox!.width).toBeGreaterThan(0);
-    expect(targetBoundingBox!.height).toBeGreaterThan(0);
-  }).toPass();
+  const targetBoundingBox = await waitForBoundingBox(targetLocator);
 
   await page.mouse.click(
     targetBoundingBox!.x + targetBoundingBox!.width / 2,

diff --git a/test/utils/waitForBoundingBox.ts b/test/utils/waitForBoundingBox.ts
@@ -0,0 +1,15 @@
+import { Locator, expect } from '@playwright/test';
+
+export default async function waitForBoundingBox(
+  locator: Locator,
+): Promise<Pick<DOMRect, 'x' | 'y' | 'width' | 'height'>> {
+  let boundingBox;
+  await expect(async () => {
+    boundingBox = await locator.boundingBox();
+    expect(boundingBox).toBeTruthy();
+    expect(boundingBox!.width).toBeGreaterThan(0);
+    expect(boundingBox!.height).toBeGreaterThan(0);
+  }).toPass();
+
+  return boundingBox!;
+}
diff --git a/test/visual/components/fixture/toolpad/pages/grids/page.yml b/test/visual/components/fixture/toolpad/pages/grids/page.yml
@@ -0,0 +1,43 @@
+apiVersion: v1
+kind: page
+spec:
+  id: Dh9u36B
+  title: grids
+  display: shell
+  content:
+    - component: PageRow
+      name: pageRow
+      props:
+        justifyContent: start
+      children:
+        - component: PageColumn
+          name: pageColumn
+          layout:
+            columnSize: 1
+          children:
+            - component: DataGrid
+              name: dataGrid
+              layout:
+                columnSize: 1
+              props:
+                rows:
+                  - id: one
+                columns:
+                  - field: id
+                    type: string
+            - component: DataGrid
+              name: dataGrid2
+              props:
+                rows:
+                  - id: two
+                columns:
+                  - field: id
+                    type: string
+        - component: DataGrid
+          name: dataGrid1
+          props:
+            rows:
+              - id: three
+            columns:
+              - field: id
+                type: string
diff --git a/test/visual/components/fixture/toolpad/pages/rows/page.yml b/test/visual/components/fixture/toolpad/pages/rows/page.yml
@@ -9,16 +9,8 @@ spec:
       name: pageRow1
       children:
         [
-          {
-              component: TextField,
-              name: textField,
-              props: { fullWidth: true }
-            },
-          {
-              component: TextField,
-              name: textField1,
-              props: { fullWidth: true }
-            }
+          { component: TextField, name: textField, props: { fullWidth: true } },
+          { component: TextField, name: textField1, props: { fullWidth: true } },
         ]
       props:
         justifyContent: start
diff --git a/test/visual/components/index.spec.ts b/test/visual/components/index.spec.ts
@@ -4,6 +4,7 @@ import { ToolpadEditor } from '../../models/ToolpadEditor';
 import { ToolpadRuntime } from '../../models/ToolpadRuntime';
 import { test } from '../../playwright/localTest';
 import clickCenter from '../../utils/clickCenter';
+import waitForBoundingBox from '../../utils/waitForBoundingBox';
 
 const currentDirectory = url.fileURLToPath(new URL('.', import.meta.url));
 
@@ -71,6 +72,70 @@ test('showing grid while resizing elements', async ({ page, argosScreenshot }) =
   await argosScreenshot('resize-grid');
 });
 
+test('resizing element heights', async ({ page, argosScreenshot }) => {
+  const editorModel = new ToolpadEditor(page);
+  await editorModel.goToPageById('Dh9u36B');
+
+  await editorModel.waitForOverlay();
+
+  const appCanvasBoundingBox = await editorModel.appCanvas.locator('body').boundingBox();
+
+  const screenshotConfig = {
+    clip: appCanvasBoundingBox || undefined,
+  };
+
+  const firstGrid = editorModel.appCanvas.getByRole('grid').nth(0);
+
+  await clickCenter(page, firstGrid);
+  await argosScreenshot('vertical-resize-before', screenshotConfig);
+
+  const firstGridBoundingBox = await waitForBoundingBox(firstGrid);
+
+  await page.mouse.move(
+    firstGridBoundingBox!.x + firstGridBoundingBox!.width / 2,
+    firstGridBoundingBox!.y + firstGridBoundingBox!.height - 4,
+    { steps: 10 },
+  );
+
+  await page.mouse.down();
+
+  await page.mouse.move(
+    firstGridBoundingBox!.x + firstGridBoundingBox!.width / 2,
+    firstGridBoundingBox!.y + firstGridBoundingBox!.height + 100,
+    { steps: 10 },
+  );
+
+  await page.mouse.up();
+
+  const thirdGrid = editorModel.appCanvas.getByRole('grid').nth(2);
+
+  await clickCenter(page, thirdGrid);
+
+  const thirdGridBoundingBox = await waitForBoundingBox(thirdGrid);
+
+  await page.mouse.move(
+    thirdGridBoundingBox!.x + thirdGridBoundingBox!.width / 2,
+    thirdGridBoundingBox!.y + thirdGridBoundingBox!.height - 4,
+    { steps: 10 },
+  );
+
+  await page.mouse.down();
+
+  await page.mouse.move(
+    thirdGridBoundingBox!.x + thirdGridBoundingBox!.width / 2,
+    thirdGridBoundingBox!.y + thirdGridBoundingBox!.height + 100,
+    { steps: 10 },
+  );
+
+  await page.mouse.up();
+
+  // Wait for resizing to happen
+  await waitForBoundingBox(thirdGrid);
+
+  await clickCenter(page, firstGrid);
+  await argosScreenshot('vertical-resize-after', screenshotConfig);
+});
+
 test('showing drag-and-drop previews', async ({ page, argosScreenshot }) => {
   const editorModel = new ToolpadEditor(page);
   await editorModel.goToPageById('8ixPqyI');