From 57a6847f6e1c5185e16ca462a1afe6a726b81b5a Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 1 Feb 2023 11:49:13 +0100 Subject: [PATCH 1/4] Update ToolpadEditor.ts --- test/models/ToolpadEditor.ts | 36 ++---------------------------------- 1 file changed, 2 insertions(+), 34 deletions(-) diff --git a/test/models/ToolpadEditor.ts b/test/models/ToolpadEditor.ts index a176f497683..72ccf34e9d1 100644 --- a/test/models/ToolpadEditor.ts +++ b/test/models/ToolpadEditor.ts @@ -148,43 +148,11 @@ export class ToolpadEditor { const appCanvasFrame = this.page.frame('data-toolpad-canvas'); expect(appCanvasFrame).toBeDefined(); - // Source drag event needs to be dispatched manually in Firefox for tests to work (Playwright bug) - // https://github.com/microsoft/playwright/issues/17441 - const isFirefox = this.browserName === 'firefox'; - if (isFirefox) { - if (isSourceInCanvas) { - const dataTransfer = await appCanvasFrame!.evaluateHandle(() => new DataTransfer()); - await appCanvasFrame!.dispatchEvent(sourceSelector, 'dragstart', { dataTransfer }); - } else { - const dataTransfer = await this.page.evaluateHandle(() => new DataTransfer()); - await this.page.dispatchEvent(sourceSelector, 'dragstart', { dataTransfer }); - } - } else { - await this.page.mouse.down(); - } + await this.page.mouse.down(); await this.page.mouse.move(moveTargetX, moveTargetY, { steps: 10 }); - // Overlay drag events need to be dispatched manually in Firefox for tests to work (Playwright bug) - // https://github.com/microsoft/playwright/issues/17441 - if (isFirefox) { - const pageOverlayBoundingBox = await this.pageOverlay.boundingBox(); - - expect(pageOverlayBoundingBox).toBeDefined(); - - const eventMousePosition = { - clientX: moveTargetX - pageOverlayBoundingBox!.x, - clientY: moveTargetY - pageOverlayBoundingBox!.y, - }; - - const pageOverlaySelector = 'data-testid=page-overlay'; - - await appCanvasFrame!.dispatchEvent(pageOverlaySelector, 'dragover', eventMousePosition); - await appCanvasFrame!.dispatchEvent(pageOverlaySelector, 'drop', eventMousePosition); - await appCanvasFrame!.dispatchEvent(pageOverlaySelector, 'dragend'); - } else { - await this.page.mouse.up(); - } + await this.page.mouse.up(); } async dragNewComponentToAppCanvas(componentName: string) { From 280c3bbdc93c049e34ed373a7031e6a74c3d5e65 Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 1 Feb 2023 12:04:58 +0100 Subject: [PATCH 2/4] clean up --- test/integration/codeComponents/index.spec.ts | 4 ++-- test/integration/components/index.spec.ts | 4 ++-- test/integration/data-grid/index.spec.ts | 4 ++-- test/integration/deploy.spec.ts | 2 +- test/integration/duplication/index.spec.ts | 4 ++-- test/integration/editor/index.spec.ts | 16 ++++++++-------- test/integration/file-picker/index.spec.ts | 4 ++-- test/integration/function-basic/index.spec.ts | 4 ++-- test/integration/pages/index.spec.ts | 4 ++-- test/integration/propControls/index.spec.ts | 6 +++--- test/integration/rest-basic/index.spec.ts | 4 ++-- test/integration/undo-redo/index.spec.ts | 10 +++++----- test/models/ToolpadEditor.ts | 10 +--------- 13 files changed, 34 insertions(+), 42 deletions(-) diff --git a/test/integration/codeComponents/index.spec.ts b/test/integration/codeComponents/index.spec.ts index 4f6ae054939..9a1a1533c4d 100644 --- a/test/integration/codeComponents/index.spec.ts +++ b/test/integration/codeComponents/index.spec.ts @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test'; import { readJsonFile } from '../../utils/fs'; import generateId from '../../utils/generateId'; -test('components', async ({ page, browserName, api }) => { +test('components', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './dom.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); await editorModel.hierarchyItem('components', 'myCOmponent').click(); diff --git a/test/integration/components/index.spec.ts b/test/integration/components/index.spec.ts index 8effcf1228a..df3e2572c0e 100644 --- a/test/integration/components/index.spec.ts +++ b/test/integration/components/index.spec.ts @@ -15,7 +15,7 @@ async function waitForComponents(page: Page | FrameLocator) { await page.locator('label:has-text("foo select")').waitFor({ state: 'visible' }); } -test('components', async ({ page, browserName, api }) => { +test('components', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './componentsDom.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { @@ -27,7 +27,7 @@ test('components', async ({ page, browserName, api }) => { await waitForComponents(page); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); editorModel.goto(app.id); await waitForComponents(editorModel.appCanvas); diff --git a/test/integration/data-grid/index.spec.ts b/test/integration/data-grid/index.spec.ts index c924f6d0e12..69a27775348 100644 --- a/test/integration/data-grid/index.spec.ts +++ b/test/integration/data-grid/index.spec.ts @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test'; import { readJsonFile } from '../../utils/fs'; import generateId from '../../utils/generateId'; -test('Code component cell', async ({ page, browserName, api }) => { +test('Code component cell', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './codeComponentCell.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); editorModel.goto(app.id); await editorModel.waitForOverlay(); diff --git a/test/integration/deploy.spec.ts b/test/integration/deploy.spec.ts index 4a2d87e07fc..33ac6b8a51e 100644 --- a/test/integration/deploy.spec.ts +++ b/test/integration/deploy.spec.ts @@ -3,7 +3,7 @@ import { test, expect } from '../playwright/test'; const userAgent = 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'; -test('can render in an iframe', async ({ baseURL, browserName }) => { +test('can render in an iframe', async ({ baseURL }) => { if (browserName !== 'chromium') { test.skip(true, 'No use, test HTTP statuses'); } diff --git a/test/integration/duplication/index.spec.ts b/test/integration/duplication/index.spec.ts index d32baa123e3..b48f490bc8a 100644 --- a/test/integration/duplication/index.spec.ts +++ b/test/integration/duplication/index.spec.ts @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test'; import { readJsonFile } from '../../utils/fs'; import generateId from '../../utils/generateId'; -test('duplication', async ({ page, browserName, api }) => { +test('duplication', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './dom.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); { diff --git a/test/integration/editor/index.spec.ts b/test/integration/editor/index.spec.ts index 9d3c54457e5..7e23f47340b 100644 --- a/test/integration/editor/index.spec.ts +++ b/test/integration/editor/index.spec.ts @@ -5,10 +5,10 @@ import clickCenter from '../../utils/clickCenter'; import generateId from '../../utils/generateId'; import { readJsonFile } from '../../utils/fs'; -test('can place new components from catalog', async ({ page, browserName, api }) => { +test('can place new components from catalog', async ({ page, api }) => { const app = await api.mutation.createApp(`App ${generateId()}`); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); @@ -34,8 +34,8 @@ test('can place new components from catalog', async ({ page, browserName, api }) await expect(canvasInputLocator).toHaveCount(2); }); -test('can move elements in page', async ({ page, browserName, api }) => { - const editorModel = new ToolpadEditor(page, browserName); +test('can move elements in page', async ({ page, api }) => { + const editorModel = new ToolpadEditor(page); const TEXT_FIELD_COMPONENT_DISPLAY_NAME = 'Text field'; const dom = await readJsonFile(path.resolve(__dirname, './domInput.json')); @@ -90,8 +90,8 @@ test('can move elements in page', async ({ page, browserName, api }) => { await expect(secondTextFieldLocator).toHaveAttribute('value', 'textField1'); }); -test('can delete elements from page', async ({ page, browserName, api }) => { - const editorModel = new ToolpadEditor(page, browserName); +test('can delete elements from page', async ({ page, api }) => { + const editorModel = new ToolpadEditor(page); const dom = await readJsonFile(path.resolve(__dirname, './domInput.json')); @@ -129,10 +129,10 @@ test('can delete elements from page', async ({ page, browserName, api }) => { await expect(canvasInputLocator).toHaveCount(0); }); -test('can create new component', async ({ page, browserName, api }) => { +test('can create new component', async ({ page, api }) => { const app = await api.mutation.createApp(`App ${generateId()}`); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); diff --git a/test/integration/file-picker/index.spec.ts b/test/integration/file-picker/index.spec.ts index 7d5b5023ec5..77ec115bff0 100644 --- a/test/integration/file-picker/index.spec.ts +++ b/test/integration/file-picker/index.spec.ts @@ -4,7 +4,7 @@ import { test, expect } from '../../playwright/test'; import { readJsonFile } from '../../utils/fs'; import generateId from '../../utils/generateId'; -test('File picker component', async ({ page, browserName, api }) => { +test('File picker component', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './dom.json')); const testFilePath = path.resolve(__dirname, './test.txt'); @@ -14,7 +14,7 @@ test('File picker component', async ({ page, browserName, api }) => { await page.pause(); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); editorModel.goto(app.id); await editorModel.waitForOverlay(); diff --git a/test/integration/function-basic/index.spec.ts b/test/integration/function-basic/index.spec.ts index 7b521aa5987..a7db31e88ee 100644 --- a/test/integration/function-basic/index.spec.ts +++ b/test/integration/function-basic/index.spec.ts @@ -33,14 +33,14 @@ test('functions basics', async ({ page, api }) => { await page.locator('text="echo, secret: Some bar secret"').waitFor({ state: 'visible' }); }); -test('function editor save shortcut', async ({ page, api, browserName }) => { +test('function editor save shortcut', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './functionDom.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); await expect(editorModel.appCanvas.getByText('edited hello')).toBeVisible(); diff --git a/test/integration/pages/index.spec.ts b/test/integration/pages/index.spec.ts index 2b94e27e490..ee1d9d27806 100644 --- a/test/integration/pages/index.spec.ts +++ b/test/integration/pages/index.spec.ts @@ -4,14 +4,14 @@ import { test, expect } from '../../playwright/test'; import { readJsonFile } from '../../utils/fs'; import generateId from '../../utils/generateId'; -test('must load page in initial URL without altering URL', async ({ page, browserName, api }) => { +test('must load page in initial URL without altering URL', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './2pages.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await page.goto(`/_toolpad/app/${app.id}/pages/g433ywb?abcd=123`); diff --git a/test/integration/propControls/index.spec.ts b/test/integration/propControls/index.spec.ts index c9bcb01d972..95ab7f752d4 100644 --- a/test/integration/propControls/index.spec.ts +++ b/test/integration/propControls/index.spec.ts @@ -16,7 +16,7 @@ test('can control component prop values in properties control panel', async ({ from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); @@ -57,14 +57,14 @@ test('can control component prop values in properties control panel', async ({ await inputByLabel.waitFor({ state: 'visible' }); }); -test('changing defaultValue resets controlled value', async ({ page, browserName, api }) => { +test('changing defaultValue resets controlled value', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './defaultValueDom.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); await editorModel.waitForOverlay(); diff --git a/test/integration/rest-basic/index.spec.ts b/test/integration/rest-basic/index.spec.ts index 8e9126f92c6..c05feea32f8 100644 --- a/test/integration/rest-basic/index.spec.ts +++ b/test/integration/rest-basic/index.spec.ts @@ -17,7 +17,7 @@ if (customHttbinBaseUrl) { const HTTPBIN_SOURCE_URL = 'https://httpbin.org/'; const HTTPBIN_TARGET_URL = customHttbinBaseUrl || HTTPBIN_SOURCE_URL; -test('rest basics', async ({ page, browserName, api }) => { +test('rest basics', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './restDom.json'), (key, value) => { if (typeof value === 'string') { return value.replaceAll(HTTPBIN_SOURCE_URL, HTTPBIN_TARGET_URL); @@ -38,7 +38,7 @@ test('rest basics', async ({ page, browserName, api }) => { await expect(page.locator('text="browserQuery: browserQuery_value"')).toBeVisible(); await expect(page.locator('text="browserQuery: browserQuery_value"')).toBeVisible(); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); await editorModel.componentEditor.getByRole('button', { name: 'browserQuery' }).click(); diff --git a/test/integration/undo-redo/index.spec.ts b/test/integration/undo-redo/index.spec.ts index b4a94011c65..52242a88666 100644 --- a/test/integration/undo-redo/index.spec.ts +++ b/test/integration/undo-redo/index.spec.ts @@ -5,14 +5,14 @@ import { readJsonFile } from '../../utils/fs'; import clickCenter from '../../utils/clickCenter'; import generateId from '../../utils/generateId'; -test('test basic undo and redo', async ({ page, browserName, api }) => { +test('test basic undo and redo', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './dom.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); await editorModel.waitForOverlay(); @@ -51,7 +51,7 @@ test('test batching text input actions into single undo entry', async ({ from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); await editorModel.waitForOverlay(); @@ -83,14 +83,14 @@ test('test batching text input actions into single undo entry', async ({ await expect(input).toHaveValue('some value'); }); -test('test undo and redo through different pages', async ({ page, browserName, api }) => { +test('test undo and redo through different pages', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './2pages.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { from: { kind: 'dom', dom }, }); - const editorModel = new ToolpadEditor(page, browserName); + const editorModel = new ToolpadEditor(page); await editorModel.goto(app.id); await editorModel.waitForOverlay(); diff --git a/test/models/ToolpadEditor.ts b/test/models/ToolpadEditor.ts index 72ccf34e9d1..617e78fd0cc 100644 --- a/test/models/ToolpadEditor.ts +++ b/test/models/ToolpadEditor.ts @@ -43,13 +43,6 @@ class CreateComponentDialog { export class ToolpadEditor { readonly page: Page; - /** - * @deprecated Do not use, this is a temporary workaround for firefox issues - * See https://github.com/microsoft/playwright/issues/17441 - * TODO: remove this property - */ - readonly browserName: string; - readonly createPageBtn: Locator; readonly createPageDialog: CreatePageDialog; @@ -72,9 +65,8 @@ export class ToolpadEditor { readonly confirmationDialog: Locator; - constructor(page: Page, browserName: string) { + constructor(page: Page) { this.page = page; - this.browserName = browserName; this.createPageBtn = page.locator('[aria-label="Create page"]'); this.createPageDialog = new CreatePageDialog(page); From 334e807ad4f4d58b8813eaf43f97b4996ecab85e Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 1 Feb 2023 12:51:58 +0100 Subject: [PATCH 3/4] fix lint --- test/integration/deploy.spec.ts | 2 +- test/integration/undo-redo/index.spec.ts | 6 +----- 2 files changed, 2 insertions(+), 6 deletions(-) diff --git a/test/integration/deploy.spec.ts b/test/integration/deploy.spec.ts index 33ac6b8a51e..4a2d87e07fc 100644 --- a/test/integration/deploy.spec.ts +++ b/test/integration/deploy.spec.ts @@ -3,7 +3,7 @@ import { test, expect } from '../playwright/test'; const userAgent = 'Mozilla/5.0 (compatible; Googlebot/2.1; +http://www.google.com/bot.html)'; -test('can render in an iframe', async ({ baseURL }) => { +test('can render in an iframe', async ({ baseURL, browserName }) => { if (browserName !== 'chromium') { test.skip(true, 'No use, test HTTP statuses'); } diff --git a/test/integration/undo-redo/index.spec.ts b/test/integration/undo-redo/index.spec.ts index 52242a88666..504d2b4328d 100644 --- a/test/integration/undo-redo/index.spec.ts +++ b/test/integration/undo-redo/index.spec.ts @@ -40,11 +40,7 @@ test('test basic undo and redo', async ({ page, api }) => { await expect(canvasInputLocator).toHaveCount(3); }); -test('test batching text input actions into single undo entry', async ({ - page, - browserName, - api, -}) => { +test('test batching text input actions into single undo entry', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './dom.json')); const app = await api.mutation.createApp(`App ${generateId()}`, { From 85b5d036b5298eddbdee19cd5df9e8683880f9ac Mon Sep 17 00:00:00 2001 From: Jan Potoms <2109932+Janpot@users.noreply.github.com> Date: Wed, 1 Feb 2023 13:10:45 +0100 Subject: [PATCH 4/4] moar lint --- test/integration/propControls/index.spec.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/test/integration/propControls/index.spec.ts b/test/integration/propControls/index.spec.ts index 95ab7f752d4..5b8f6b76362 100644 --- a/test/integration/propControls/index.spec.ts +++ b/test/integration/propControls/index.spec.ts @@ -5,11 +5,7 @@ import clickCenter from '../../utils/clickCenter'; import { readJsonFile } from '../../utils/fs'; import generateId from '../../utils/generateId'; -test('can control component prop values in properties control panel', async ({ - page, - browserName, - api, -}) => { +test('can control component prop values in properties control panel', async ({ page, api }) => { const dom = await readJsonFile(path.resolve(__dirname, './domInput.json')); const app = await api.mutation.createApp(`App ${generateId()}`, {