Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix: inconsistent drag for webkit #1518

Merged
merged 5 commits into from
Sep 25, 2023
Merged

fix: inconsistent drag for webkit #1518

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
a9e64a7
wip
ethanalvizo Jul 28, 2023
65a1563
Merge branch 'main' into 1360-inconsistent-drag
ethanalvizo Sep 8, 2023
64af281
Merge branch 'main' into 1360-inconsistent-drag
ethanalvizo Sep 13, 2023
cd78c00
fix: inconsistent drag for webkit e2e test
ethanalvizo Sep 14, 2023
8e23b3f
Added comment
ethanalvizo Sep 25, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
71 changes: 31 additions & 40 deletions tests/table-operations.spec.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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');

Expand Down Expand Up @@ -415,49 +414,42 @@ 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');

await saveButton.click();
await waitForLoadingDone(page);

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');

await dragComponent(dragButton, panelAbove, dropIndicator, 0);

await saveButton.click();

await waitForLoadingDone(page);
await expect(page.locator('.iris-grid-column')).toHaveScreenshot();
});
});

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();
Expand Down Expand Up @@ -507,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();
});
Expand Down
9 changes: 9 additions & 0 deletions tests/utils.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -204,6 +204,15 @@ 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(
ethanalvizo marked this conversation as resolved.
Show resolved Hide resolved
destinationPos.x + destinationPos.width / 2,
destinationPos.y + destinationPos.height / 2 + offsetY,
{
steps,
}
);

await expect(targetIndicator).not.toHaveCount(0);
await page.mouse.up();
Expand Down