eliott/drive
1
0
Fork 0
mirror of https://github.com/suitenumerique/drive.git synced 2026-04-25 17:15:19 +02:00
Code Issues Packages Projects Releases Wiki Activity

✅(frontend) add e2e tests for preview backdrop close

Browse Source 
Cover the backdrop-click-to-close behavior for both image
and PDF viewers: clicking the backdrop closes the preview,
clicking the content does not, and dragging across the image
viewer does not trigger a close.
This commit is contained in:
Nathan Vasse
2026-04-17 16:49:01 +02:00
parent afb4d2862d
commit 788cdba513
2 changed files with 78 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

45
src/frontend/apps/e2e/__tests__/app-drive/file-preview/image-preview.spec.ts
View File

@@ -175,4 +175,49 @@ test.describe("Image Preview", () => {
expect(s).toBeCloseTo(initialScale, 2);
}).toPass({ timeout: 5000 });
});
test("Clicking the blurry backdrop closes the preview", async ({ page }) => {
const container = page.locator(".image-viewer__container");
await expect(container).toBeVisible({ timeout: 5000 });
// Top-left corner of the container sits in the 20% margin flex-space
// around the centered image — i.e. the blurry backdrop.
await container.click({ position: { x: 5, y: 5 } });
await expect(page.getByTestId("file-preview")).toBeHidden({
timeout: 5000,
});
});
test("Clicking the image itself does not close the preview", async ({
page,
}) => {
const wrapper = page.locator(".image-viewer__image-wrapper");
await expect(wrapper).toBeVisible({ timeout: 5000 });
await wrapper.click();
// Preview must still be on screen — the click landed on a non-backdrop.
await expect(page.getByTestId("file-preview")).toBeVisible();
});
test("Dragging across the image viewer does not close the preview", async ({
page,
}) => {
const container = page.locator(".image-viewer__container");
await expect(container).toBeVisible({ timeout: 5000 });
const box = await container.boundingBox();
if (!box) throw new Error("image-viewer__container has no bounding box");
// Drive a pan-like gesture on the backdrop area. The ImageViewer's
// click-capture guard must swallow the resulting click so it never
// reaches the FilePreview backdrop handler.
await page.mouse.move(box.x + 5, box.y + 5);
await page.mouse.down();
await page.mouse.move(box.x + 80, box.y + 80, { steps: 5 });
await page.mouse.up();
await expect(page.getByTestId("file-preview")).toBeVisible();
});
});

33
src/frontend/apps/e2e/__tests__/app-drive/file-preview/pdf-preview.spec.ts
View File

@@ -386,6 +386,39 @@ test.describe("PDF Preview", () => {
expect(value).not.toBe("1");
}).toPass({ timeout: 10000 });
});
// Section 5 — Backdrop click to close
test("Clicking the blurry area beside a page closes the preview", async ({
page,
}) => {
await waitForPdfReadyAndDismissToast(page);
const pdfPage = page.locator(".react-pdf__Page").first();
const box = await pdfPage.boundingBox();
if (!box) throw new Error(".react-pdf__Page has no bounding box");
// Click 10 px left of the page, at its vertical midpoint — this falls
// in the row div's flex margin (the blurry area).
await page.mouse.click(
Math.max(1, box.x - 10),
box.y + box.height / 2,
);
await expect(page.getByTestId("file-preview")).toBeHidden({
timeout: 5000,
});
});
test("Clicking on a PDF page does not close the preview", async ({ page }) => {
await waitForPdfReadyAndDismissToast(page);
const pdfPage = page.locator(".react-pdf__Page").first();
// Click somewhere comfortably inside the page, away from its edges.
await pdfPage.click({ position: { x: 200, y: 50 } });
await expect(page.getByTestId("file-preview")).toBeVisible();
});
});
test.describe("PDF Links", () => {