Use worker scoped fixtures for integration tests (mui#1813)

Signed-off-by: Jan Potoms <[email protected]>

.gitignore

@@ -57,4 +57,5 @@ packages/toolpad-app/public/typings.json
 
 examples/*/yarn.lock
 
+test-results
 .toolpad-generated

test/integration/components/basic.spec.ts

@@ -0,0 +1,66 @@
+import * as path from 'path';
+import { ToolpadEditor } from '../../models/ToolpadEditor';
+import { ToolpadRuntime } from '../../models/ToolpadRuntime';
+import { FrameLocator, Page, test, expect } from '../../playwright/localTest';
+import clickCenter from '../../utils/clickCenter';
+
+async function waitForComponents(page: Page, frame: Page | FrameLocator = page) {
+  const button = frame.locator('text="foo button"');
+  await button.waitFor({ state: 'visible' });
+
+  const image = frame.locator('img[alt="foo image"]');
+  await image.waitFor({ state: 'attached' });
+
+  const datagrid = frame.locator('text="foo datagrid column"');
+  await datagrid.waitFor({ state: 'visible' });
+
+  const customComponent = frame.locator('text="custom component 1"');
+  await customComponent.waitFor({ state: 'visible' });
+
+  const textField = frame.locator('label:has-text("foo textfield")');
+  await textField.waitFor({ state: 'visible' });
+
+  const text = frame.locator('text="foo typography"');
+  await text.waitFor({ state: 'visible' });
+
+  const select = frame.locator('label:has-text("foo select")');
+  await select.waitFor({ state: 'visible' });
+
+  const list = frame.locator('text="List Button 3"');
+  await list.waitFor({ state: 'visible' });
+}
+
+test.use({
+  localAppConfig: {
+    template: path.resolve(__dirname, './fixture-basic'),
+    cmd: 'dev',
+  },
+});
+
+test('rendering components in the app runtime', async ({ page }) => {
+  const runtimeModel = new ToolpadRuntime(page);
+  await runtimeModel.gotoPage('components');
+
+  await waitForComponents(page);
+});
+
+test('rendering components in the app editor', async ({ page }) => {
+  const editorModel = new ToolpadEditor(page);
+  editorModel.goto();
+
+  await waitForComponents(page, editorModel.appCanvas);
+});
+
+test('select component behavior', async ({ page }) => {
+  const runtimeModel = new ToolpadRuntime(page);
+  await runtimeModel.gotoPage('select');
+
+  const optionsSelect = page.getByRole('button', { name: /select with options/ });
+  await optionsSelect.scrollIntoViewIfNeeded();
+  await clickCenter(page, optionsSelect);
+  await expect(page.getByRole('option', { name: 'one' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '2' })).toBeVisible();
+  await expect(page.getByRole('option', { name: 'three' })).toBeVisible();
+  await expect(page.getByRole('option', { name: '4' })).toBeVisible();
+  await expect(page.getByRole('option', { name: 'undefined' })).toBeVisible();
+});

test/integration/components/list.spec.ts

@@ -0,0 +1,26 @@
+import * as path from 'path';
+import { ToolpadRuntime } from '../../models/ToolpadRuntime';
+import { test, expect } from '../../playwright/localTest';
+
+test.use({
+  localAppConfig: {
+    template: path.resolve(__dirname, './fixture-list'),
+    cmd: 'dev',
+  },
+});
+
+test('list component behavior', async ({ page }) => {
+  const runtimeModel = new ToolpadRuntime(page);
+  await runtimeModel.gotoPage('list');
+
+  const firstInput = page.getByLabel('textField0');
+  const secondInput = page.getByLabel('textField1');
+
+  await firstInput.type('one');
+  await secondInput.type('two');
+
+  await expect(page.locator('p:text("one")')).toBeVisible();
+  await expect(page.locator('p:text("two")')).toBeVisible();
+
+  await expect(page.locator('button:text("one")')).toBeVisible();
+});

test/integration/data-grid/basic.spec.ts

@@ -0,0 +1,53 @@
+import * as path from 'path';
+import { ToolpadEditor } from '../../models/ToolpadEditor';
+import { test, expect } from '../../playwright/localTest';
+import clickCenter from '../../utils/clickCenter';
+
+test.use({
+  localAppConfig: {
+    template: path.resolve(__dirname, './fixture-basic'),
+    cmd: 'dev',
+  },
+});
+
+test('Column prop updates are not lost on drag interactions', async ({ page }) => {
+  const editorModel = new ToolpadEditor(page);
+  editorModel.goto();
+
+  await editorModel.pageRoot.waitFor({ state: 'visible' });
+
+  const canvasGridLocator = editorModel.appCanvas.getByRole('grid');
+
+  // Change the "Avatar" column type from "link" to "boolean"
+
+  const firstGridLocator = canvasGridLocator.first();
+
+  await clickCenter(page, firstGridLocator);
+
+  await editorModel.componentEditor.locator('button:has-text("columns")').click();
+
+  await editorModel.page.getByRole('button', { name: 'Avatar' }).click();
+
+  await editorModel.page.getByRole('button', { name: 'link' }).click();
+
+  await editorModel.page.getByRole('option', { name: 'boolean' }).click();
+
+  await page.keyboard.press('Escape');
+
+  // Drag the "Avatar" column to the end of the grid
+
+  const avatarColumn = editorModel.pageRoot.getByText('Avatar', { exact: true });
+  const profileColumn = editorModel.pageRoot.getByText('Profile', { exact: true });
+
+  await avatarColumn.dragTo(profileColumn);
+
+  // Expect the "Avatar" column to continue to be of type "boolean" instead of "link"
+
+  await expect(
+    editorModel.pageRoot
+      .getByRole('row', {
+        name: '1 Todd Breitenberg International http://spotless-octopus.name',
+      })
+      .getByTestId('CheckIcon'),
+  ).toBeVisible();
+});

test/integration/data-grid/custom.spec.ts

@@ -0,0 +1,25 @@
+import * as path from 'path';
+import { ToolpadEditor } from '../../models/ToolpadEditor';
+import { test, expect } from '../../playwright/localTest';
+
+test.use({
+  localAppConfig: {
+    template: path.resolve(__dirname, './fixture-custom'),
+    cmd: 'dev',
+  },
+});
+
+test('Code component cell', async ({ page }) => {
+  const editorModel = new ToolpadEditor(page);
+  editorModel.goto();
+
+  await editorModel.waitForOverlay();
+
+  await expect(editorModel.pageRoot.getByText('value: {"test":"value"}')).toBeVisible();
+  await expect(
+    editorModel.pageRoot.getByText(
+      'row: {"hiddenField":true,"customField":{"test":"value"},"id":0}',
+    ),
+  ).toBeVisible();
+  await expect(editorModel.pageRoot.getByText('field: "customField"')).toBeVisible();
+});