mirror of
https://github.com/snapotter-hq/SnapOtter.git
synced 2026-08-03 07:46:42 +02:00
test: e2e tests for multi-file eraser stroke persistence and Erase All
This commit is contained in:
@@ -86,4 +86,97 @@ test.describe("Erase Object tool", () => {
|
|||||||
await formatSelect.selectOption("png");
|
await formatSelect.selectOption("png");
|
||||||
await expect(qualitySlider).not.toBeVisible();
|
await expect(qualitySlider).not.toBeVisible();
|
||||||
});
|
});
|
||||||
|
|
||||||
|
test("strokes persist when switching between files", async ({ loggedInPage: page }) => {
|
||||||
|
await skipIfFeatureNotInstalled(page);
|
||||||
|
|
||||||
|
// Upload first file
|
||||||
|
await uploadFile(page, fixturePath("test-200x150.png"));
|
||||||
|
|
||||||
|
// Paint a stroke on the first file
|
||||||
|
const canvas = page.locator("canvas");
|
||||||
|
await canvas.waitFor({ state: "visible", timeout: 5_000 });
|
||||||
|
const box = await canvas.boundingBox();
|
||||||
|
if (!box) throw new Error("Canvas not found");
|
||||||
|
|
||||||
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||||
|
await page.mouse.down();
|
||||||
|
await page.mouse.move(box.x + box.width / 2 + 30, box.y + box.height / 2);
|
||||||
|
await page.mouse.up();
|
||||||
|
|
||||||
|
// Undo/Clear buttons should appear
|
||||||
|
await expect(page.getByRole("button", { name: "Undo" })).toBeVisible();
|
||||||
|
|
||||||
|
// Upload second file via the "+ Add more" button
|
||||||
|
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||||
|
await page.getByRole("button", { name: /Add more/i }).click();
|
||||||
|
const fileChooser = await fileChooserPromise;
|
||||||
|
await fileChooser.setFiles(fixturePath("test-200x150.png"));
|
||||||
|
await page.waitForTimeout(500);
|
||||||
|
|
||||||
|
// Switch to second file (click thumbnail or file entry)
|
||||||
|
// The file list shows buttons with the filename - click the second one
|
||||||
|
const fileEntries = page.locator("button").filter({ hasText: "test-200x150.png" });
|
||||||
|
const count = await fileEntries.count();
|
||||||
|
if (count >= 2) {
|
||||||
|
await fileEntries.nth(1).click();
|
||||||
|
await page.waitForTimeout(300);
|
||||||
|
|
||||||
|
// Switch back to first file
|
||||||
|
await fileEntries.first().click();
|
||||||
|
await page.waitForTimeout(300);
|
||||||
|
|
||||||
|
// Undo button should still be visible (strokes were preserved)
|
||||||
|
await expect(page.getByRole("button", { name: "Undo" })).toBeVisible();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
test("shows Erase All button when multiple files have masks", async ({ loggedInPage: page }) => {
|
||||||
|
await skipIfFeatureNotInstalled(page);
|
||||||
|
|
||||||
|
// Upload first file
|
||||||
|
await uploadFile(page, fixturePath("test-200x150.png"));
|
||||||
|
|
||||||
|
// Paint on first file
|
||||||
|
const canvas = page.locator("canvas");
|
||||||
|
await canvas.waitFor({ state: "visible", timeout: 5_000 });
|
||||||
|
let box = await canvas.boundingBox();
|
||||||
|
if (!box) throw new Error("Canvas not found");
|
||||||
|
await page.mouse.move(box.x + box.width / 3, box.y + box.height / 3);
|
||||||
|
await page.mouse.down();
|
||||||
|
await page.mouse.move(box.x + box.width / 3 + 20, box.y + box.height / 3);
|
||||||
|
await page.mouse.up();
|
||||||
|
await page.waitForTimeout(200);
|
||||||
|
|
||||||
|
// Button should say "Erase Object" (only one file has mask)
|
||||||
|
await expect(page.getByTestId("erase-object-submit")).toHaveText("Erase Object");
|
||||||
|
|
||||||
|
// Upload second file
|
||||||
|
const fileChooserPromise = page.waitForEvent("filechooser");
|
||||||
|
await page.getByRole("button", { name: /Add more/i }).click();
|
||||||
|
const fileChooser = await fileChooserPromise;
|
||||||
|
await fileChooser.setFiles(fixturePath("test-200x150.png"));
|
||||||
|
await page.waitForTimeout(500);
|
||||||
|
|
||||||
|
// Switch to second file and paint
|
||||||
|
const fileEntries = page.locator("button").filter({ hasText: "test-200x150.png" });
|
||||||
|
const count = await fileEntries.count();
|
||||||
|
if (count >= 2) {
|
||||||
|
await fileEntries.nth(1).click();
|
||||||
|
await page.waitForTimeout(500);
|
||||||
|
|
||||||
|
const canvas2 = page.locator("canvas");
|
||||||
|
await canvas2.waitFor({ state: "visible", timeout: 5_000 });
|
||||||
|
box = await canvas2.boundingBox();
|
||||||
|
if (!box) throw new Error("Canvas not found");
|
||||||
|
await page.mouse.move(box.x + box.width / 2, box.y + box.height / 2);
|
||||||
|
await page.mouse.down();
|
||||||
|
await page.mouse.move(box.x + box.width / 2 + 20, box.y + box.height / 2);
|
||||||
|
await page.mouse.up();
|
||||||
|
await page.waitForTimeout(200);
|
||||||
|
|
||||||
|
// Now button should say "Erase All (2)"
|
||||||
|
await expect(page.getByTestId("erase-object-submit")).toHaveText("Erase All (2)");
|
||||||
|
}
|
||||||
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user