Playwright test for pasting files (#33350)

* Add tests for pasting

* Add tests for pasting files.

* Remove redundant fn

* rm comment

apps/web/playwright/e2e/composer/CIDER.spec.ts

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { test, expect } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { getSampleFilePath } from "../../sample-files";
 
 const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
 
@@ -198,5 +199,16 @@ test.describe("Composer", () => {
             // Take a screenshot of the autocomplete
             await expect(autocomplete).toMatchScreenshot("emoji-autocomplete.png");
         });
+
+        test("can paste a file", async ({ page, bot, app }) => {
+            // Set up a private room so we have another user to mention
+            await app.client.createRoom({
+                is_direct: true,
+                invite: [bot.credentials.userId],
+            });
+            await app.viewRoomByName("Bob");
+            await app.composerDragAndPasteFile("room", getSampleFilePath("riot.png"), "image/png");
+            await expect(page.locator(".mx_MImageBody")).toBeVisible();
+        });
     });
 });

apps/web/playwright/e2e/composer/RTE.spec.ts

@@ -8,6 +8,7 @@ Please see LICENSE files in the repository root for full details.
 
 import { test, expect } from "../../element-web-test";
 import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { getSampleFilePath } from "../../sample-files";
 
 const CtrlOrMeta = process.platform === "darwin" ? "Meta" : "Control";
 
@@ -195,6 +196,26 @@ test.describe("Composer", () => {
             await expect(page.locator(".mx_EventTile_body strong").getByText("bold")).toBeVisible();
         });
 
+        test("can paste a file", async ({ page, bot, app }) => {
+            await app.composerDragAndPasteFile("room", getSampleFilePath("riot.png"), "image/png");
+            await expect(page.locator(".mx_MImageBody")).toBeVisible();
+        });
+
+        test("can paste a file in a thread", async ({ page, app }) => {
+            // Send a message
+            const composer = page.locator("div[contenteditable=true]");
+            await composer.pressSequentially("my first message");
+            await page.getByRole("button", { name: "Send message" }).click();
+
+            // Click reply
+            const tile = page.locator(".mx_EventTile_last");
+            await tile.hover();
+            await tile.getByRole("button", { name: "Reply in thread" }).click();
+
+            await app.composerDragAndPasteFile("thread", getSampleFilePath("riot.png"), "image/png");
+            await expect(page.locator(".mx_MImageBody")).toBeVisible();
+        });
+
         test.describe("when Control+Enter is required to send", () => {
             test.beforeEach(async ({ app }) => {
                 await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true);

apps/web/playwright/e2e/threads/threads.spec.ts

@@ -405,6 +405,28 @@ test.describe("Threads", () => {
             await app.composerDragAndUploadFiles("thread", getSampleFilePath("riot.png"), "image/png");
             await expect(page.locator(".mx_ThreadView .mx_EventTile_image")).toHaveCount(1);
         });
+        test("can send files via paste", async ({ page, app, user }) => {
+            // Increase right-panel size, so that files fit
+            await page.evaluate(() => {
+                window.localStorage.setItem("mx_rhs_size", "600");
+            });
+
+            const roomId = await app.client.createRoom({});
+            await page.goto("/#/room/" + roomId);
+
+            // Send message
+            const locator = page.locator(".mx_RoomView_body");
+            await locator.getByRole("textbox", { name: "Send an unencrypted message…" }).fill("Hello Mr. Bot");
+            await locator.getByRole("textbox", { name: "Send an unencrypted message…" }).press("Enter");
+            // Create thread
+            const locator2 = locator.locator(".mx_EventTile[data-scroll-tokens]").filter({ hasText: "Hello Mr. Bot" });
+            await locator2.hover();
+            await locator2.getByRole("button", { name: "Reply in thread" }).click();
+
+            await expect(page.locator(".mx_ThreadView_timelinePanelWrapper")).toHaveCount(1);
+            await app.composerDragAndPasteFile("thread", getSampleFilePath("riot.png"), "image/png");
+            await expect(page.locator(".mx_ThreadView .mx_EventTile_image")).toHaveCount(1);
+        });
     });
 
     test(