Add some visual regression tests

.dockerignore

@@ -0,0 +1,5 @@
+node_modules
+**/node_modules
+**/.next
+.git
+.yarn-playwright-cache

.eslintignore

@@ -9,3 +9,4 @@
 /examples/*/toolpad.yml
 
 /test/integration/*/fixture*/
+/test/visual/*/fixture*/

.gitignore

@@ -59,3 +59,5 @@ examples/*/yarn.lock
 
 test-results
 .toolpad-generated
+
+.yarn-playwright-cache

CONTRIBUTING.md

@@ -200,6 +200,20 @@ yarn install
 
 - Use the `--ui` flag to run the tests interactively
 
+## Visual regression tests
+
+- You can find debugging information and diffs in the `test-results` folder. These are also stored in CI in the circleci artifacts.
+
+- You can update the screenshots if necessary. You must have [docker](https://www.docker.com/products/docker-desktop/) installed.
+
+  ```sh
+  docker compose run --rm playwright
+  yarn && yarn release:build
+  yarn test:integration --project visual --update-snapshots
+  ```
+
+  _Tip: Configure docker for mac to use VirtioFS for improved performance (Docker desktop settings > General > Choose file sharing implementation for your containers)_
+
 ## Sending a pull request
 
 Please have a look at our general [guidelines](https://github.com/mui/material-ui/blob/master/CONTRIBUTING.md#sending-a-pull-request) for sending pull requests.

docker-compose.yml

@@ -0,0 +1,11 @@
+services:
+  playwright:
+    build:
+      context: .
+      dockerfile: ./playwright.Dockerfile
+    volumes:
+      - ./:/work/
+      - ./.yarn-playwright-cache:/.yarn-cache
+    working_dir: /work/
+    environment:
+      YARN_CACHE_FOLDER: /.yarn-cache

playwright.Dockerfile

@@ -0,0 +1,6 @@
+FROM mcr.microsoft.com/playwright:v1.33.0-focal
+
+RUN apt-get update && apt-get install -y build-essential
+
+CMD [ "bash" ]
+

test/visual/components/fixture/toolpad/.gitignore

@@ -0,0 +1 @@
+.generated

test/visual/components/fixture/toolpad/components/MyComponent.tsx

@@ -0,0 +1,20 @@
+import * as React from 'react';
+import { Typography } from '@mui/material';
+import { createComponent } from '@mui/toolpad/browser';
+
+export interface MyComponentProps {
+  msg: string;
+}
+
+function myComponent({ msg }: MyComponentProps) {
+  return <Typography>custom component {msg}</Typography>;
+}
+
+export default createComponent(myComponent, {
+  argTypes: {
+    msg: {
+      typeDef: { type: 'string' },
+      defaultValue: '',
+    },
+  },
+});

test/visual/components/fixture/toolpad/pages/components/page.yml

@@ -0,0 +1,79 @@
+apiVersion: v1
+kind: page
+spec:
+  id: f703ps3
+  title: components
+  content:
+    - component: PageRow
+      name: pageRow3
+      children:
+        - component: Button
+          name: button
+          props:
+            content: foo button
+    - component: PageRow
+      name: pageRow4
+      children:
+        - component: Image
+          name: image
+          props:
+            alt: foo image
+    - component: PageRow
+      name: pageRow
+      children:
+        - component: codeComponent.MyComponent
+          name: codeComponent_eb03t9a
+          props:
+            msg: "1"
+    - component: PageRow
+      name: pageRow5
+      children:
+        - component: DataGrid
+          name: dataGrid
+          props:
+            rows:
+              - id: 1
+                foo datagrid column: bar
+            columns:
+              - type: number
+                field: id
+              - type: string
+                field: foo datagrid column
+    - component: PageRow
+      name: pageRow6
+      children:
+        - component: TextField
+          name: textField
+          props:
+            label: foo textfield
+    - component: PageRow
+      name: pageRow7
+      children:
+        - component: Text
+          name: typography1
+          props:
+            value: foo typography
+    - component: PageRow
+      name: pageRow8
+      children:
+        - component: Select
+          name: select
+          props:
+            label: foo select
+    - component: PageRow
+      name: pageRow9
+      children:
+        - component: List
+          name: list
+          props:
+            renderItem:
+              $$template:
+                - component: PageRow
+                  name: pageRow2
+                  children:
+                    - component: Button
+                      name: button1
+                      props:
+                        content:
+                          $$jsExpression: |
+                            `List Button ${i + 1}`

test/visual/components/index.spec.ts

@@ -0,0 +1,33 @@
+import * as path from 'path';
+import { ToolpadEditor } from '../../models/ToolpadEditor';
+import { ToolpadRuntime } from '../../models/ToolpadRuntime';
+import { test, expect } from '../../playwright/localTest';
+import clickCenter from '../../utils/clickCenter';
+
+test.use({
+  localAppConfig: {
+    template: path.resolve(__dirname, './fixture'),
+    cmd: 'dev',
+  },
+});
+
+test('rendering components in the app runtime', async ({ page }) => {
+  const runtimeModel = new ToolpadRuntime(page);
+  await runtimeModel.gotoPage('components');
+
+  await expect(page).toHaveScreenshot({ fullPage: true });
+});
+
+test('rendering components in the app editor', async ({ page }) => {
+  const editorModel = new ToolpadEditor(page);
+  await editorModel.goto();
+
+  await editorModel.waitForOverlay();
+
+  await expect(page).toHaveScreenshot('no-selection.png');
+
+  const image = editorModel.appCanvas.locator('img').first();
+
+  await clickCenter(page, image);
+  await expect(page).toHaveScreenshot('with-selection.png');
+});