diff --git a/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts b/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts index b91dc7ac..e014b858 100644 --- a/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts +++ b/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts @@ -6,7 +6,94 @@ import { getRowItem } from "./utils-embedded-grid"; import { uploadFile } from "./utils/upload-utils"; import { grantClipboardPermissions } from "./utils/various-utils"; -test("Copy and paste works in wopi editor", async ({ page, context, browserName }) => { +const IMAGE_FILE_PATH = path.join(__dirname, "/assets/test-image.png"); +const DOCX_FILE_PATH = path.join(__dirname, "/assets/empty_doc.docx"); + +test("Double-clicking a WOPI file opens the editor in a new tab", async ({ + page, + context, + browserName, +}) => { + test.skip(browserName !== "chromium", "Only runs on chromium"); + await clearDb(); + await login(page, "drive@example.com"); + await page.goto("/"); + await clickToMyFiles(page); + await expect(page.getByText("This tab is empty")).toBeVisible(); + + await uploadFile(page, DOCX_FILE_PATH); + await expect(page.getByText("Drop your files here")).not.toBeVisible(); + + const row = await getRowItem(page, "empty_doc"); + const [wopiPage] = await Promise.all([ + context.waitForEvent("page"), + row.dblclick(), + ]); + await wopiPage.waitForLoadState("domcontentloaded"); + + // The preview modal must not open in the main tab. + await expect(page.getByTestId("file-preview")).not.toBeVisible(); + + const wopiIframe = wopiPage.locator('iframe[name="office_frame"]'); + await expect(wopiIframe).toBeVisible(); +}); + +test("Navigating the previewer onto a WOPI file shows the Open in editor placeholder", async ({ + page, + context, + browserName, +}) => { + test.skip(browserName !== "chromium", "Only runs on chromium"); + await clearDb(); + await login(page, "drive@example.com"); + await page.goto("/"); + await clickToMyFiles(page); + await expect(page.getByText("This tab is empty")).toBeVisible(); + + await uploadFile(page, [IMAGE_FILE_PATH, DOCX_FILE_PATH]); + await expect( + page.getByRole("cell", { name: "test-image", exact: true }), + ).toBeVisible({ timeout: 10000 }); + await expect( + page.getByRole("cell", { name: "empty_doc", exact: true }), + ).toBeVisible({ timeout: 10000 }); + + // Open a non-WOPI file first so the previewer mounts normally. + await page + .getByRole("cell", { name: "test-image", exact: true }) + .dblclick(); + const filePreview = page.getByTestId("file-preview"); + await expect(filePreview).toBeVisible({ timeout: 10000 }); + + // Default ordering is "-type,title": empty_doc.docx sorts before + // test-image.png, so ArrowLeft navigates from the image to the docx. + await page.keyboard.press("ArrowLeft"); + + const unsupported = filePreview.locator(".file-preview-unsupported"); + await expect(unsupported).toBeVisible(); + await expect( + unsupported.locator(".file-preview-unsupported__title"), + ).toHaveText("empty_doc.docx"); + + const openButton = unsupported.getByRole("button", { + name: "Open in editor", + }); + await expect(openButton).toBeVisible(); + + const [wopiPage] = await Promise.all([ + context.waitForEvent("page"), + openButton.click(), + ]); + await wopiPage.waitForLoadState("domcontentloaded"); + + await expect(wopiPage.locator('iframe[name="office_frame"]')).toBeVisible(); +}); + +test("Copy and paste works in wopi editor", async ({ + page, + context, + browserName, +}) => { test.skip(browserName !== "chromium", "Only runs on chromium"); grantClipboardPermissions(browserName, context); await clearDb(); @@ -16,32 +103,32 @@ test("Copy and paste works in wopi editor", async ({ page, context, browserName await expect(page.getByText("This tab is empty")).toBeVisible(); // Start waiting for file chooser before clicking. Note no await. - await uploadFile(page, path.join(__dirname, "/assets/empty_doc.docx")); + await uploadFile(page, DOCX_FILE_PATH); // Wait for the file to be uploaded and visible in the list await expect(page.getByText("Drop your files here")).not.toBeVisible(); - // Click on the file to open the preview + // Double-click opens the editor in a new tab. const row = await getRowItem(page, "empty_doc"); - await row.dblclick(); + const [wopiPage] = await Promise.all([ + context.waitForEvent("page"), + row.dblclick(), + ]); + await wopiPage.waitForLoadState("domcontentloaded"); - // Check that the file preview is visible - const filePreview = page.getByTestId("file-preview"); - await expect(filePreview).toBeVisible(); - - const wopiIframe = filePreview.locator('iframe[name="office_frame"]'); + const wopiIframe = wopiPage.locator('iframe[name="office_frame"]'); await expect(wopiIframe).toBeVisible(); await expect( - page + wopiPage .locator('iframe[name="office_frame"]') .contentFrame() .locator('iframe[name="iframe-welcome-form"]') .contentFrame() .getByRole("heading", { name: "Explore The New" }), - ).toBeVisible(); + ).toBeVisible({ timeout: 30000 }); - await page + await wopiPage .locator('iframe[name="office_frame"]') .contentFrame() .locator('iframe[name="iframe-welcome-form"]') @@ -49,7 +136,7 @@ test("Copy and paste works in wopi editor", async ({ page, context, browserName .getByRole("button", { name: "Close" }) .click(); - const canvas = page + const canvas = wopiPage .locator('iframe[name="office_frame"]') .contentFrame() .locator('canvas[id="document-canvas"]'); @@ -59,28 +146,28 @@ test("Copy and paste works in wopi editor", async ({ page, context, browserName await expect(canvas).toHaveScreenshot("empty-doc-canvas.png", { maxDiffPixelRatio: 0.01, }); - await page + await wopiPage .locator('iframe[name="office_frame"]') .contentFrame() .locator(".leaflet-layer") .click({ force: true }); - await page.waitForTimeout(1000); - await page + await wopiPage.waitForTimeout(1000); + await wopiPage .locator('iframe[name="office_frame"]') .contentFrame() .locator("#clipboard-area") .press("ControlOrMeta+a"); - await page.waitForTimeout(1000); - await page.keyboard.press(`ControlOrMeta+KeyC`); - await page.waitForTimeout(1000); - await page + await wopiPage.waitForTimeout(1000); + await wopiPage.keyboard.press(`ControlOrMeta+KeyC`); + await wopiPage.waitForTimeout(1000); + await wopiPage .locator('iframe[name="office_frame"]') .contentFrame() .locator("#clipboard-area") .press("ArrowRight"); - await page.waitForTimeout(1000); - await page.keyboard.press(`ControlOrMeta+KeyV`); - await page.waitForTimeout(1000); + await wopiPage.waitForTimeout(1000); + await wopiPage.keyboard.press(`ControlOrMeta+KeyV`); + await wopiPage.waitForTimeout(1000); await expect(canvas).toHaveScreenshot("empty-doc-canvas-after-paste.png", { maxDiffPixelRatio: 0.01, }); diff --git a/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts-snapshots/empty-doc-canvas-after-paste-chromium.png b/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts-snapshots/empty-doc-canvas-after-paste-chromium.png deleted file mode 100644 index 1eb78d3d..00000000 Binary files a/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts-snapshots/empty-doc-canvas-after-paste-chromium.png and /dev/null differ diff --git a/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts-snapshots/empty-doc-canvas-chromium.png b/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts-snapshots/empty-doc-canvas-chromium.png deleted file mode 100644 index c476b101..00000000 Binary files a/src/frontend/apps/e2e/__tests__/app-drive/wopi.spec.ts-snapshots/empty-doc-canvas-chromium.png and /dev/null differ diff --git a/src/frontend/apps/e2e/__tests__/empty-doc-canvas-after-paste-chromium.png b/src/frontend/apps/e2e/__tests__/empty-doc-canvas-after-paste-chromium.png index c092eddd..833c8616 100644 Binary files a/src/frontend/apps/e2e/__tests__/empty-doc-canvas-after-paste-chromium.png and b/src/frontend/apps/e2e/__tests__/empty-doc-canvas-after-paste-chromium.png differ diff --git a/src/frontend/apps/e2e/__tests__/empty-doc-canvas-chromium.png b/src/frontend/apps/e2e/__tests__/empty-doc-canvas-chromium.png index 2246e4f7..572aa915 100644 Binary files a/src/frontend/apps/e2e/__tests__/empty-doc-canvas-chromium.png and b/src/frontend/apps/e2e/__tests__/empty-doc-canvas-chromium.png differ