From a9e64a78a27e48a40b379f914a6e0f971e639cb9 Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Thu, 27 Jul 2023 23:16:32 -0400 Subject: [PATCH 1/3] wip --- playwright.config.ts | 2 +- tests/table-operations.spec.ts | 79 +++++++++++++++++++--------------- 2 files changed, 45 insertions(+), 36 deletions(-) diff --git a/playwright.config.ts b/playwright.config.ts index fe811cfd27..ec564f8682 100644 --- a/playwright.config.ts +++ b/playwright.config.ts @@ -110,7 +110,7 @@ const config: PlaywrightTestConfig = { webServer: { // Only start the main code-studio server right now // To test embed-grid and embed-chart, should have an array set for `webServer` and run them all separately as there's a port check - command: 'BASE_URL=/ide/ npm run preview:app -- -- -- --no-open', // Passing flags through npm is fun + command: 'BASE_URL=/ide/ npm run preview:app -- -- -- --no-open', // Passing flags through npm is fun port: 4000, port: 4000, timeout: 60 * 1000, reuseExistingServer: !process.env.CI, diff --git a/tests/table-operations.spec.ts b/tests/table-operations.spec.ts index f9793a8aee..e4f77d365a 100644 --- a/tests/table-operations.spec.ts +++ b/tests/table-operations.spec.ts @@ -406,41 +406,50 @@ test('custom column', async ({ page }) => { await expect(page.locator('.iris-grid-column')).toHaveScreenshot(); }); - // await test.step('Drag', async () => { - // await addColumnButton.click(); - - // const dragColumn = page.getByPlaceholder('Column Name').nth(1); - // await dragColumn.click(); - // await page.keyboard.type('Drag'); - - // const dragColumnFormula = page.locator('.editor-container').nth(1); - // await dragColumnFormula.click(); - // await page.keyboard.type('String'); - - // const dragButton = page - // .getByRole('button', { name: 'Drag column to re-order' }) - // .nth(1); - // const panelAbove = page - // .getByRole('button', { name: 'Drag column to re-order' }) - // .first(); - // const dropIndicator = page - // .locator('.custom-column-builder-container') - // .locator('.dragging'); - - // const browser = dragButton.page().context().browser()?.browserType().name(); - // await dragComponent( - // dragButton, - // panelAbove, - // dropIndicator, - // 0, - // browser === 'webkit' ? 1000 : undefined - // ); - - // await saveButton.click(); - - // await waitForLoadingDone(page); - // await expect(page.locator('.iris-grid-column')).toHaveScreenshot(); - // }); + await test.step('Drag', async () => { + await addColumnButton.click(); + + const dragColumn = page.getByPlaceholder('Column Name').nth(1); + await dragColumn.click(); + await page.keyboard.type('Drag'); + + const dragColumnFormula = page.locator('.editor-container').nth(1); + await dragColumnFormula.click(); + await page.keyboard.type('String'); + + const dragButton = page + .getByRole('button', { name: 'Drag column to re-order' }) + .nth(1); + const panelAbove = page + .getByRole('button', { name: 'Drag column to re-order' }) + .first(); + const dropIndicator = page + .locator('.custom-column-builder-container') + .locator('.dragging'); + + // const browser = dragButton.page().context().browser()?.browserType().name(); + await dragComponent( + dragButton, + panelAbove, + dropIndicator, + 0 + // browser === 'webkit' ? 1000 : undefined + ); + // if (browser === 'webkit') { + // await dragComponent( + // dragButton, + // panelAbove, + // dropIndicator, + // 0 + // // browser === 'webkit' ? 1000 : undefined + // ); + // } + + await saveButton.click(); + + await waitForLoadingDone(page); + await expect(page.locator('.iris-grid-column')).toHaveScreenshot(); + }); }); test('rollup rows and aggregrate columns', async ({ page }) => { From cd78c0041c691397a3d9ae1abb39b45c8c24947c Mon Sep 17 00:00:00 2001 From: Ethan Alvizo Date: Wed, 13 Sep 2023 21:41:08 -0400 Subject: [PATCH 2/3] fix: inconsistent drag for webkit e2e test --- tests/table-operations.spec.ts | 26 ++++---------------------- tests/utils.ts | 7 +++++++ 2 files changed, 11 insertions(+), 22 deletions(-) diff --git a/tests/table-operations.spec.ts b/tests/table-operations.spec.ts index 7b28beb2d1..028b50899d 100644 --- a/tests/table-operations.spec.ts +++ b/tests/table-operations.spec.ts @@ -366,7 +366,6 @@ test('organize columns', async ({ page }) => { }); }); -// TODO: Figure out why webkit drag doesn't work if steps aren't insanely high when generating linux snapshot (#1360) test('custom column', async ({ page }) => { await openTableOption(page, 'Custom Columns'); @@ -426,6 +425,9 @@ test('custom column', async ({ page }) => { await dragColumnFormula.click(); await page.keyboard.type('String'); + await saveButton.click(); + await waitForLoadingDone(page); + const dragButton = page .getByRole('button', { name: 'Drag column to re-order' }) .nth(1); @@ -436,23 +438,7 @@ test('custom column', async ({ page }) => { .locator('.custom-column-builder-container') .locator('.dragging'); - // const browser = dragButton.page().context().browser()?.browserType().name(); - await dragComponent( - dragButton, - panelAbove, - dropIndicator, - 0 - // browser === 'webkit' ? 1000 : undefined - ); - // if (browser === 'webkit') { - // await dragComponent( - // dragButton, - // panelAbove, - // dropIndicator, - // 0 - // // browser === 'webkit' ? 1000 : undefined - // ); - // } + await dragComponent(dragButton, panelAbove, dropIndicator, 0); await saveButton.click(); @@ -464,9 +450,6 @@ test('custom column', async ({ page }) => { test('rollup rows and aggregrate columns', async ({ page }) => { await openTableOption(page, 'Rollup Rows'); - const dropdown = page.locator('.rollup-rows-group-by'); - const dropIndicator = dropdown.locator('.is-dropping'); - const stringColumn = page.getByRole('button', { name: 'String' }); await test.step('Rollup column', async () => { expect(stringColumn).toBeTruthy(); @@ -516,7 +499,6 @@ test('rollup rows and aggregrate columns', async ({ page }) => { .getByRole('button', { name: 'Edit Columns', exact: true }) .click(); await page.getByText('Double', { exact: true }).click(); - await waitForLoadingDone(page); await expect(page.locator('.iris-grid-column')).toHaveScreenshot(); }); diff --git a/tests/utils.ts b/tests/utils.ts index 0664bff32f..c966c4d411 100644 --- a/tests/utils.ts +++ b/tests/utils.ts @@ -204,6 +204,13 @@ export async function dragComponent( steps, } ); + await page.mouse.move( + destinationPos.x + destinationPos.width / 2, + destinationPos.y + destinationPos.height / 2 + offsetY, + { + steps, + } + ); await expect(targetIndicator).not.toHaveCount(0); await page.mouse.up(); From 8e23b3f37de0dfe3989bf7fa8711940c62b3928c Mon Sep 17 00:00:00 2001 From: ethanalvizo <55671206+ethanalvizo@users.noreply.github.com> Date: Mon, 25 Sep 2023 11:27:55 -0400 Subject: [PATCH 3/3] Added comment --- tests/utils.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/tests/utils.ts b/tests/utils.ts index c966c4d411..7b9cf78d90 100644 --- a/tests/utils.ts +++ b/tests/utils.ts @@ -204,6 +204,8 @@ export async function dragComponent( steps, } ); + // repeated this mouse.move because of a comment in Playwright docs about manual drag + // https://playwright.dev/docs/input#dragging-manually await page.mouse.move( destinationPos.x + destinationPos.width / 2, destinationPos.y + destinationPos.height / 2 + offsetY,