From 4339dfcbe072aff6920bd9401c8ec879884b2014 Mon Sep 17 00:00:00 2001 From: Half-Shot Date: Tue, 12 May 2026 12:53:30 +0100 Subject: [PATCH] Add tests to cover narrow viewports --- apps/web/playwright/e2e/composer/CIDER.spec.ts | 8 +++++++- apps/web/playwright/e2e/composer/RTE.spec.ts | 6 ++++++ .../composer/CIDER.spec.ts/narrow-linux.png | Bin 0 -> 2724 bytes .../composer/RTE.spec.ts/narrow-linux.png | Bin 0 -> 7368 bytes 4 files changed, 13 insertions(+), 1 deletion(-) create mode 100644 apps/web/playwright/snapshots/composer/CIDER.spec.ts/narrow-linux.png create mode 100644 apps/web/playwright/snapshots/composer/RTE.spec.ts/narrow-linux.png diff --git a/apps/web/playwright/e2e/composer/CIDER.spec.ts b/apps/web/playwright/e2e/composer/CIDER.spec.ts index 89f4cad276..4640692fd5 100644 --- a/apps/web/playwright/e2e/composer/CIDER.spec.ts +++ b/apps/web/playwright/e2e/composer/CIDER.spec.ts @@ -77,6 +77,12 @@ test.describe("Composer", () => { await expect(page.locator(".mx_EventTile_body", { hasText: "😇" })).toBeVisible(); }); + test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => { + // Shrink the viewport + await page.setViewportSize({ width: 500, height: 1080 }); + await expect(app.getComposer()).toMatchScreenshot("narrow.png"); + }); + test.describe("render emoji picker with larger viewport height", async () => { test.use({ viewport: { width: 1280, height: 720 } }); test("render emoji picker", { tag: "@screenshot" }, async ({ page, app }) => { @@ -186,7 +192,7 @@ test.describe("Composer", () => { await expect(page.locator(".mx_EventTile_body", { hasText: "Bob" })).toBeVisible(); }); - test("renders emoji autocomplete", { tag: "@screenshot" }, async ({ page }) => { + test("renders emoji autocomplete", async ({ page }) => { const composer = page.getByRole("textbox", { name: "Send an unencrypted message…" }); // Type ":+1" to trigger emoji autocomplete diff --git a/apps/web/playwright/e2e/composer/RTE.spec.ts b/apps/web/playwright/e2e/composer/RTE.spec.ts index 2c5f8071ec..170a900ec0 100644 --- a/apps/web/playwright/e2e/composer/RTE.spec.ts +++ b/apps/web/playwright/e2e/composer/RTE.spec.ts @@ -216,6 +216,12 @@ test.describe("Composer", () => { await expect(page.locator(".mx_MImageBody")).toBeVisible(); }); + test("renders in narrow viewports", { tag: "@screenshot" }, async ({ page, bot, app }) => { + // Shrink the viewport + await page.setViewportSize({ width: 750, height: 1080 }); + await expect(page.locator(".mx_MessageComposer_wrapper")).toMatchScreenshot("narrow.png"); + }); + test.describe("when Control+Enter is required to send", () => { test.beforeEach(async ({ app }) => { await app.settings.setValue("MessageComposerInput.ctrlEnterToSend", null, SettingLevel.ACCOUNT, true); diff --git a/apps/web/playwright/snapshots/composer/CIDER.spec.ts/narrow-linux.png b/apps/web/playwright/snapshots/composer/CIDER.spec.ts/narrow-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..366271b095c50f73b02aa5236faec7e46fbfb397 GIT binary patch literal 2724 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 literal 0 HcmV?d00001 diff --git a/apps/web/playwright/snapshots/composer/RTE.spec.ts/narrow-linux.png b/apps/web/playwright/snapshots/composer/RTE.spec.ts/narrow-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..c0f8d16a16939dbf9eed14beae1b3ac6a2ab7066 GIT binary patch literal 7368 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