feat: show call participants in room list (Discord-style)

apps/web/playwright/e2e/room/create-room.spec.ts

@@ -0,0 +1,241 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Page } from "@playwright/test";
+
+import { SettingLevel } from "../../../src/settings/SettingLevel";
+import { UIFeature } from "../../../src/settings/UIFeature";
+import { test, expect } from "../../element-web-test";
+
+const name = "Test room";
+const topic = "A decently explanatory topic for a test room.";
+
+test.describe("Create Room", () => {
+    test.use({ displayName: "Jim" });
+
+    test(
+        "should create a public room with name, topic & address set",
+        { tag: "@screenshot" },
+        async ({ page, user, app, axe }) => {
+            await app.closeVerifyToast();
+            const dialog = await app.openCreateRoomDialog();
+            // Fill name & topic
+            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+            // Change room to public
+            await dialog.getByRole("button", { name: "Room visibility" }).click();
+            await dialog.getByRole("option", { name: "Public room" }).click();
+            // Fill room address
+            await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-standard");
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            // Snapshot it
+            // Mask topic to avoid flakiness with top border
+            await expect(dialog).toMatchScreenshot("create-room.png", {
+                mask: [dialog.locator(".mx_CreateRoomDialog_topic")],
+            });
+
+            // Submit
+            await dialog.getByRole("button", { name: "Create room" }).click();
+
+            await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`));
+            const header = page.locator(".mx_RoomHeader");
+            await expect(header).toContainText(name);
+        },
+    );
+
+    test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
+        await app.closeVerifyToast();
+
+        await page.getByRole("button", { name: "New conversation", exact: true }).click();
+        await page.getByRole("menuitem", { name: "Start chat" }).click();
+
+        await page.getByTestId("invite-dialog-input").fill(user.userId);
+
+        await page.getByRole("button", { name: "Go" }).click();
+
+        await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+        await page.getByRole("button", { name: "Continue" }).click();
+
+        await expect(page.getByText("Encryption enabled")).toBeVisible();
+        await expect(page.getByText("Send your first message to")).toBeVisible();
+
+        const composer = page.getByRole("region", { name: "Message composer" });
+        await expect(composer.getByRole("textbox", { name: "Send a message…" })).toBeVisible();
+    });
+
+    test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
+        await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
+        await app.closeVerifyToast();
+
+        const dialog = await app.openCreateRoomDialog("New video room");
+        // Fill name & topic
+        await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+        await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+        // Change room to public
+        await dialog.getByRole("button", { name: "Room visibility" }).click();
+        await dialog.getByRole("option", { name: "Public room" }).click();
+        // Fill room address
+        await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-video");
+        // Snapshot it
+        // Mask topic to avoid flakiness with top border
+        await expect(dialog).toMatchScreenshot("create-video-room.png", {
+            mask: [dialog.locator(".mx_CreateRoomDialog_topic")],
+        });
+
+        // Submit
+        await dialog.getByRole("button", { name: "Create video room" }).click();
+
+        await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`));
+        const header = page.locator(".mx_RoomHeader");
+        await expect(header).toContainText(name);
+    });
+
+    test.describe("Should hide public room option if not allowed", () => {
+        test.use({
+            config: {
+                setting_defaults: {
+                    [UIFeature.AllowCreatingPublicRooms]: false,
+                },
+            },
+        });
+
+        test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
+            await app.closeVerifyToast();
+            const dialog = await app.openCreateRoomDialog();
+            // Fill name & topic
+            await dialog.getByRole("textbox", { name: "Name" }).fill(name);
+            await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
+
+            axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
+            await expect(axe).toHaveNoViolations();
+            // Snapshot it
+            // Mask topic to avoid flakiness with top border
+            await expect(dialog).toMatchScreenshot("create-room-no-public.png", {
+                mask: [dialog.locator(".mx_CreateRoomDialog_topic")],
+            });
+
+            // Submit
+            await dialog.getByRole("button", { name: "Create room" }).click();
+
+            await expect(page).toHaveURL(new RegExp(`/#/room/!.+`));
+            const header = page.locator(".mx_RoomHeader");
+            await expect(header).toContainText(name);
+        });
+    });
+
+    test.describe("when the encrypted state labs flag is turned off", () => {
+        test.use({ labsFlags: [] });
+
+        test("creates a room without encrypted state", { tag: "@screenshot" }, async ({ page, user: _user, app }) => {
+            await app.closeVerifyToast();
+
+            // When we start to create a room
+            await page.getByRole("button", { name: "New conversation", exact: true }).click();
+            await page.getByRole("menuitem", { name: "New room" }).click();
+            await page.getByRole("textbox", { name: "Name" }).fill(name);
+
+            // Then there is no Encrypt state events button
+            await expect(page.getByRole("checkbox", { name: "Encrypt state events" })).not.toBeVisible();
+
+            // And when we create the room
+            await page.getByRole("button", { name: "Create room" }).click();
+
+            // Then we created a normal encrypted room, without encrypted state
+            await expect(page.getByText("Encryption enabled")).toBeVisible();
+            await expect(page.getByText("State encryption enabled")).not.toBeVisible();
+
+            // And the room name state event is not encrypted
+            await viewSourceOnRoomNameEvent(page);
+            await expect(page.getByText("Original event source")).toBeVisible();
+            await expect(page.getByText("Decrypted event source")).not.toBeVisible();
+        });
+    });
+
+    test.describe("when the encrypted state labs flag is turned on", () => {
+        test.use({ labsFlags: ["feature_msc4362_encrypted_state_events"] });
+
+        test(
+            "creates a room with encrypted state if we check the box",
+            { tag: "@screenshot" },
+            async ({ page, user: _user, app }) => {
+                await app.closeVerifyToast();
+
+                // Given we check the Encrypted State checkbox
+                await page.getByRole("button", { name: "New conversation", exact: true }).click();
+                await page.getByRole("menuitem", { name: "New room" }).click();
+                await expect(page.getByRole("switch", { name: "Enable end-to-end encryption" })).toBeChecked();
+                await page.getByRole("switch", { name: "Encrypt state events" }).click();
+                await expect(page.getByRole("switch", { name: "Encrypt state events" })).toBeChecked();
+
+                // When we create a room
+                await page.getByRole("textbox", { name: "Name" }).fill(name);
+                await page.getByRole("button", { name: "Create room" }).click();
+
+                // Then we created an encrypted state room
+                await expect(page.getByText("State encryption enabled")).toBeVisible();
+
+                // And it has the correct name
+                await expect(page.getByTestId("timeline").getByRole("heading", { name })).toBeVisible();
+
+                // And the room name state event is encrypted
+                await viewSourceOnRoomNameEvent(page);
+                await expect(page.getByText("Decrypted event source")).toBeVisible();
+            },
+        );
+
+        test(
+            "creates a room without encrypted state if we don't check the box",
+            { tag: "@screenshot" },
+            async ({ page, user: _user, app }) => {
+                await app.closeVerifyToast();
+
+                // Given we did not check the Encrypted State checkbox
+                await page.getByRole("button", { name: "New conversation", exact: true }).click();
+                await page.getByRole("menuitem", { name: "New room" }).click();
+                await expect(page.getByRole("switch", { name: "Enable end-to-end encryption" })).toBeChecked();
+
+                // And it is off by default
+                await expect(page.getByRole("switch", { name: "Encrypt state events" })).not.toBeChecked();
+
+                // When we create a room
+                await page.getByRole("textbox", { name: "Name" }).fill(name);
+                await page.getByRole("button", { name: "Create room" }).click();
+
+                // Then we created a normal encrypted room, without encrypted state
+                await expect(page.getByText("Encryption enabled")).toBeVisible();
+                await expect(page.getByText("State encryption enabled")).not.toBeVisible();
+
+                // And it has the correct name
+                await expect(page.getByTestId("timeline").getByRole("heading", { name })).toBeVisible();
+
+                // And the room name state event is not encrypted
+                await viewSourceOnRoomNameEvent(page);
+                await expect(page.getByText("Original event source")).toBeVisible();
+                await expect(page.getByText("Decrypted event source")).not.toBeVisible();
+            },
+        );
+    });
+});
+
+async function viewSourceOnRoomNameEvent(page: Page) {
+    await page
+        .getByRole("listitem")
+        .filter({ hasText: "created and configured the room" })
+        .getByRole("button", { name: "expand" })
+        .click();
+
+    await page
+        .getByRole("listitem")
+        .filter({ hasText: "changed the room name to" })
+        .getByRole("button", { name: "Options" })
+        .click();
+
+    await page.getByRole("menuitem", { name: "View source" }).click();
+}

apps/web/playwright/e2e/room/invites.spec.ts

@@ -0,0 +1,74 @@
+/*
+Copyright 2025 New Vector Ltd.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Invites", () => {
+    test.use({
+        displayName: "Alice",
+        botCreateOpts: {
+            displayName: "Bob",
+        },
+    });
+
+    test("should render an invite view", { tag: "@screenshot" }, async ({ page, homeserver, user, bot, app }) => {
+        const roomId = await bot.createRoom({ is_direct: true });
+        await bot.inviteUser(roomId, user.userId);
+        await app.viewRoomByName("Bob");
+        await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png", {
+            // Hide the mxid, which is not stable.
+            css: `
+                .mx_RoomPreviewBar_inviter_mxid {
+                    display: none !important;
+                }
+            `,
+        });
+    });
+
+    test("should be able to decline an invite", async ({ page, homeserver, user, bot, app }) => {
+        const roomId = await bot.createRoom({ is_direct: true });
+        await bot.inviteUser(roomId, user.userId);
+        await app.viewRoomByName("Bob");
+        await page.getByRole("button", { name: "Decline", exact: true }).click();
+        await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
+        await expect(
+            page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Bob", exact: true }),
+        ).not.toBeVisible();
+    });
+
+    test(
+        "should be able to decline an invite, report the room and ignore the user",
+        { tag: "@screenshot" },
+        async ({ page, homeserver, user, bot, app }) => {
+            const roomId = await bot.createRoom({ is_direct: true });
+            await bot.inviteUser(roomId, user.userId);
+            await app.viewRoomByName("Bob");
+            await page.getByRole("button", { name: "Decline and block" }).click();
+            await page.getByLabel("Ignore user").click();
+            await page.getByLabel("Report room").click();
+            await page.getByLabel("Reason").fill("Do not want the room");
+            const roomReported = page.waitForRequest(
+                (req) =>
+                    req.url().endsWith(`/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/report`) &&
+                    req.method() === "POST",
+            );
+            await expect(page.getByRole("dialog", { name: "Decline invitation" })).toMatchScreenshot(
+                "Invites_reject_dialog.png",
+            );
+            await page.getByRole("button", { name: "Decline invite" }).click();
+
+            // Check room was reported.
+            await roomReported;
+
+            // Check user is ignored.
+            await app.settings.openUserSettings("Security & Privacy");
+            const ignoredUsersList = page.getByRole("list", { name: "Ignored users" });
+            await ignoredUsersList.scrollIntoViewIfNeeded();
+            await expect(ignoredUsersList.getByRole("listitem", { name: bot.credentials.userId })).toBeVisible();
+        },
+    );
+});

apps/web/playwright/e2e/room/room-header.spec.ts

@@ -0,0 +1,172 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2023 Suguru Hirahara
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { type Page } from "@playwright/test";
+import { type Visibility } from "matrix-js-sdk/src/matrix";
+
+import { test, expect } from "../../element-web-test";
+import { type ElementAppPage } from "../../pages/ElementAppPage";
+
+test.describe("Room Header", () => {
+    test.use({
+        displayName: "Sakura",
+        config: {
+            features: {
+                feature_new_room_list: false,
+            },
+        },
+    });
+
+    test.describe("with feature_notifications enabled", () => {
+        test.use({
+            labsFlags: ["feature_notifications"],
+        });
+        test("should render default buttons properly", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room" });
+            await app.viewRoomByNameOnOldRoomList("Test Room");
+
+            const header = page.locator(".mx_RoomHeader");
+
+            // There's two room info button - the header itself and the i button
+            const infoButtons = header.getByRole("button", { name: "Room info" });
+            await expect(infoButtons).toHaveCount(2);
+            await expect(infoButtons.first()).toBeVisible();
+            await expect(infoButtons.last()).toBeVisible();
+
+            // Memberlist button
+            await expect(header.locator(".mx_FacePile")).toBeVisible();
+
+            // There should be both a voice and a video call button
+            await expect(header.getByRole("button", { name: "Video call" })).toBeVisible();
+            await expect(header.getByRole("button", { name: "Voice call" })).toBeVisible();
+
+            await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
+            await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
+
+            // Assert that there are eight buttons in total
+            await expect(header.getByRole("button")).toHaveCount(8);
+
+            await expect(header).toMatchScreenshot("room-header.png");
+        });
+
+        test(
+            "should render a very long room name without collapsing the buttons",
+            { tag: "@screenshot" },
+            async ({ page, app, user }) => {
+                const LONG_ROOM_NAME =
+                    "Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
+                    "et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
+                    "aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
+                    "dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
+                    "officia deserunt mollit anim id est laborum.";
+
+                await app.client.createRoom({ name: LONG_ROOM_NAME });
+                await app.viewRoomByNameOnOldRoomList(LONG_ROOM_NAME);
+
+                const header = page.locator(".mx_RoomHeader");
+                // Wait until the room name is set
+                await expect(page.locator(".mx_RoomHeader_heading").getByText(LONG_ROOM_NAME)).toBeVisible();
+
+                // Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
+                // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
+                const buttons = header.getByRole("button").filter({
+                    has: page.locator("svg"),
+                });
+                await expect(buttons).toHaveCount(5);
+
+                for (const button of await buttons.all()) {
+                    await expect(button).toBeVisible();
+                    await expect(button).toHaveCSS("height", "32px");
+                    await expect(button).toHaveCSS("width", "32px");
+                }
+
+                await expect(header).toMatchScreenshot("room-header-long-name.png");
+            },
+        );
+
+        test("should render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
+            await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
+            await app.viewRoomByNameOnOldRoomList("Test Room");
+
+            const header = page.locator(".mx_RoomHeader");
+
+            await expect(header).toMatchScreenshot("room-header-with-icon.png");
+        });
+    });
+
+    test.describe("with a video room", () => {
+        test.use({ labsFlags: ["feature_video_rooms"] });
+
+        const createVideoRoom = async (page: Page, app: ElementAppPage) => {
+            await page.locator(".mx_LeftPanel_roomListContainer").getByRole("button", { name: "Add room" }).click();
+
+            await page.getByRole("menuitem", { name: "New video room" }).click();
+
+            await page.getByRole("textbox", { name: "Name" }).type("Test video room");
+
+            await page.getByRole("button", { name: "Create video room" }).click();
+
+            await app.viewRoomByNameOnOldRoomList("Test video room");
+        };
+
+        test.describe("and with feature_notifications enabled", () => {
+            test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });
+
+            test(
+                "should render buttons for chat, room info, threads and facepile",
+                { tag: "@screenshot" },
+                async ({ page, app, user }) => {
+                    await createVideoRoom(page, app);
+
+                    // Dismiss a toast that is otherwise in the way (it's the other
+                    // side but there's no need to have it in the screenshot)
+                    await page.getByRole("button", { name: "Later" }).click();
+
+                    const header = page.locator(".mx_RoomHeader");
+
+                    // There's two room info button - the header itself and the i button
+                    const infoButtons = header.getByRole("button", { name: "Room info" });
+                    await expect(infoButtons).toHaveCount(2);
+                    await expect(infoButtons.first()).toBeVisible();
+                    await expect(infoButtons.last()).toBeVisible();
+
+                    // Facepile
+                    await expect(header.locator(".mx_FacePile")).toBeVisible();
+
+                    // Chat, Threads and Notification buttons
+                    await expect(header.getByRole("button", { name: "Chat" })).toBeVisible();
+                    await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
+                    await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
+
+                    // Assert that there is not a button except those buttons
+                    await expect(header.getByRole("button")).toHaveCount(7);
+
+                    await expect(header).toMatchScreenshot("room-header-video-room.png");
+                },
+            );
+        });
+
+        test("should render a working chat button which opens the timeline on a right panel", async ({
+            page,
+            app,
+            user,
+        }) => {
+            await createVideoRoom(page, app);
+
+            await page.locator(".mx_RoomHeader").getByRole("button", { name: "Chat" }).click();
+
+            // Assert that the call view is still visible
+            await expect(page.locator(".mx_CallView")).toBeVisible();
+
+            // Assert that GELS is visible
+            await expect(
+                page.locator(".mx_RightPanel .mx_TimelineCard").getByText("Sakura created and configured the room."),
+            ).toBeVisible();
+        });
+    });
+});

apps/web/playwright/e2e/room/room-status-bar.spec.ts

@@ -0,0 +1,187 @@
+/*
+Copyright 2025 Element Creations Ltd.
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import { test, expect } from "../../element-web-test";
+
+test.describe("Room Status Bar", () => {
+    test.use({
+        displayName: "Jim",
+        page: async ({ page }, use) => {
+            // Increase width as these components look horrible at lower
+            // widths.
+            await page.setViewportSize({ width: 1400, height: 768 });
+            await use(page);
+        },
+        room: async ({ app, user }, use) => {
+            const roomId = await app.client.createRoom({
+                name: "A room",
+            });
+            await app.closeVerifyToast();
+            await app.closeNotificationToast();
+            await app.viewRoomById(roomId);
+            await use({ roomId });
+        },
+    });
+
+    test("should show an error when sync stops", { tag: "@screenshot" }, async ({ page, user, app, room, axe }) => {
+        await page.route("**/_matrix/client/*/sync*", async (route, req) => {
+            await route.fulfill({
+                status: 500,
+                contentType: "application/json",
+                body: '{"error": "Test fail", "errcode": "M_UNKNOWN"}',
+            });
+        });
+        await app.client.sendMessage(room.roomId, "forcing sync to run");
+        const banner = page.getByRole("region", { name: "Room status bar" });
+        await expect(banner).toBeVisible({ timeout: 15000 });
+        await expect(banner).toMatchScreenshot("connectivity_lost.png");
+    });
+    test("should NOT an error when a resource limit is hit", async ({ page, user, app, room, axe, toasts }) => {
+        await app.viewRoomById(room.roomId);
+        await page.route("**/_matrix/client/*/sync*", async (route, req) => {
+            await route.fulfill({
+                status: 400,
+                contentType: "application/json",
+                body: JSON.stringify({
+                    error: "Test fail",
+                    errcode: "M_RESOURCE_LIMIT_EXCEEDED",
+                    limit_type: "monthly_active_user",
+                    admin_contact: "https://example.org",
+                }),
+            });
+        });
+        await app.client.sendMessage(room.roomId, "forcing sync to run");
+        // Wait for the MAU warning toast to appear so we know this status bar would have appeared.
+        await toasts.getToast("Warning", 15000);
+        await expect(page.getByRole("region", { name: "Room status bar" })).not.toBeVisible();
+    });
+    test(
+        "should show an error when the user needs to consent",
+        { tag: "@screenshot" },
+        async ({ page, user, app, room, axe }) => {
+            await app.viewRoomById(room.roomId);
+            await page.route("**/_matrix/client/**/send**", async (route) => {
+                await route.fulfill({
+                    status: 400,
+                    contentType: "application/json",
+                    body: JSON.stringify({
+                        error: "Test fail",
+                        errcode: "M_CONSENT_NOT_GIVEN",
+                        consent_uri: "https://example.org",
+                    }),
+                });
+            });
+            const composer = app.getComposerField();
+            await composer.fill("Hello!");
+            await composer.press("Enter");
+            await page
+                .getByRole("dialog", { name: "Terms and Conditions" })
+                .getByRole("button", { name: "Dismiss" })
+                .click();
+            const banner = page.getByRole("region", { name: "Room status bar" });
+            await expect(banner).toBeVisible({ timeout: 15000 });
+            await expect(banner).toMatchScreenshot("consent.png");
+
+            // Click consent
+            await banner.getByRole("link", { name: "View Terms and Conditions" }).click();
+            await page.unroute("**/_matrix/client/**/send**");
+            // Should now be allowed to retry.
+            await banner.getByRole("button", { name: "Retry all" }).click();
+            await expect(banner).not.toBeVisible();
+        },
+    );
+    test.describe("Message fails to send", () => {
+        test.beforeEach(async ({ page, user, app, room, axe }) => {
+            await app.viewRoomById(room.roomId);
+            await page.route("**/_matrix/client/**/send**", async (route) => {
+                await route.fulfill({
+                    status: 400,
+                    contentType: "application/json",
+                    body: JSON.stringify({ error: "Test fail", errcode: "M_UNKNOWN" }),
+                });
+            });
+            const composer = app.getComposerField();
+            await composer.fill("Hello!");
+            await composer.press("Enter");
+            const banner = page.getByRole("region", { name: "Room status bar" });
+            await expect(banner).toBeVisible();
+        });
+        test(
+            "should show an error when a message fails to send",
+            { tag: "@screenshot" },
+            async ({ page, user, app, room, axe }) => {
+                const banner = page.getByRole("region", { name: "Room status bar" });
+                await expect(banner).toMatchScreenshot("message_failed.png");
+            },
+        );
+        test("should be able to 'Delete all' messages", async ({ page, user, app, room, axe }) => {
+            const banner = page.getByRole("region", { name: "Room status bar" });
+            await banner.getByRole("button", { name: "Delete all" }).click();
+            await expect(banner).not.toBeVisible();
+        });
+        test("should be able to 'Retry all' messages", async ({ page, user, app, room, axe }) => {
+            const banner = page.getByRole("region", { name: "Room status bar" });
+            await page.unroute("**/_matrix/client/**/send**");
+            await banner.getByRole("button", { name: "Retry all" }).click();
+            await expect(banner).not.toBeVisible();
+        });
+    });
+
+    test.describe("Local rooms", () => {
+        test.use({
+            botCreateOpts: {
+                displayName: "Alice",
+            },
+        });
+        test(
+            "should show an error when creating a local room fails",
+            { tag: "@screenshot" },
+            async ({ page, app, user, bot }) => {
+                await app.closeVerifyToast();
+                await page
+                    .getByRole("navigation", { name: "Room list" })
+                    .getByRole("button", { name: "New conversation" })
+                    .click();
+                await page.getByRole("menuitem", { name: "Start chat" }).click();
+
+                await page.route("**/_matrix/client/*/createRoom*", async (route, req) => {
+                    await route.fulfill({
+                        status: 400,
+                        contentType: "application/json",
+                        body: JSON.stringify({
+                            error: "Test fail",
+                            errcode: "M_UNKNOWN",
+                        }),
+                    });
+                });
+
+                const other = page.locator(".mx_InviteDialog_other");
+                await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
+                await expect(
+                    other.getByRole("option", { name: "Alice" }).getByText(bot.credentials.userId),
+                ).toBeVisible();
+                await other.getByRole("option", { name: "Alice" }).click();
+                await other.getByRole("button", { name: "Go" }).click();
+
+                await expect(page.getByRole("heading", { name: "Start a chat with this new contact?" })).toBeVisible();
+                await page.getByRole("button", { name: "Continue" }).click();
+
+                // Send a message to invite the bots
+                const composer = app.getComposerField();
+                await composer.fill("Hello");
+                await composer.press("Enter");
+
+                const banner = page.getByRole("status", { name: "Could not start a chat with this user" });
+                await expect(banner).toBeVisible();
+                await expect(banner).toMatchScreenshot("local_room_create_failed.png");
+
+                await page.unroute("**/_matrix/client/*/createRoom*");
+                await banner.getByRole("button", { name: "Retry" }).click();
+                await expect(banner).not.toBeVisible();
+            },
+        );
+    });
+});

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

@@ -0,0 +1,98 @@
+/*
+Copyright 2024 New Vector Ltd.
+Copyright 2022 The Matrix.org Foundation C.I.C.
+
+SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
+Please see LICENSE files in the repository root for full details.
+*/
+
+import type { AccountDataEvents } from "matrix-js-sdk/src/matrix";
+import { test, expect } from "../../element-web-test";
+import { Bot } from "../../pages/bot";
+
+test.describe("Room Directory", () => {
+    test.use({
+        displayName: "Alice",
+    });
+
+    test("should switch between existing dm rooms without a loader", async ({ page, homeserver, app, user }) => {
+        const bob = new Bot(page, homeserver, { displayName: "Bob" });
+        await bob.prepareClient();
+        const charlie = new Bot(page, homeserver, { displayName: "Charlie" });
+        await charlie.prepareClient();
+
+        // create dms with bob and charlie
+        await app.client.evaluate(
+            async (cli, { bob, charlie }) => {
+                const bobRoom = await cli.createRoom({ is_direct: true });
+                const charlieRoom = await cli.createRoom({ is_direct: true });
+                await cli.invite(bobRoom.room_id, bob);
+                await cli.invite(charlieRoom.room_id, charlie);
+                await cli.setAccountData("m.direct" as keyof AccountDataEvents, {
+                    [bob]: [bobRoom.room_id],
+                    [charlie]: [charlieRoom.room_id],
+                });
+            },
+            {
+                bob: bob.credentials.userId,
+                charlie: charlie.credentials.userId,
+            },
+        );
+
+        await app.viewRoomByName("Bob");
+
+        // short timeout because loader is only visible for short period
+        // we want to make sure it is never displayed when switching these rooms
+        await expect(page.locator(".mx_RoomPreviewBar_spinnerTitle")).not.toBeVisible({ timeout: 1 });
+        // confirm the room was loaded
+        await expect(page.getByText("Bob joined the room")).toBeVisible();
+
+        await app.viewRoomByName("Charlie");
+        await expect(page.locator(".mx_RoomPreviewBar_spinnerTitle")).not.toBeVisible({ timeout: 1 });
+        // confirm the room was loaded
+        await expect(page.getByText("Charlie joined the room")).toBeVisible();
+    });
+
+    test("should memorize the timeline position when switch Room A -> Room B -> Room A", async ({
+        page,
+        app,
+        user,
+    }) => {
+        // Create the two rooms
+        const roomAId = await app.client.createRoom({ name: "Room A" });
+        const roomBId = await app.client.createRoom({ name: "Room B" });
+        // Display Room A
+        await app.viewRoomById(roomAId);
+
+        // Send the first message and get the event ID
+        const { event_id: eventId } = await app.client.sendMessage(roomAId, { body: "test0", msgtype: "m.text" });
+        // Send 49 more messages
+        for (let i = 1; i < 50; i++) {
+            await app.client.sendMessage(roomAId, { body: `test${i}`, msgtype: "m.text" });
+        }
+
+        // Wait for all the messages to be displayed
+        await expect(
+            page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("test49"),
+        ).toBeVisible();
+
+        // Display the first message
+        await page.goto(`/#/room/${roomAId}/${eventId}`);
+
+        // Wait for the first message to be displayed
+        await expect(page.locator(".mx_MTextBody .mx_EventTile_body").getByText("test0")).toBeInViewport();
+
+        // Display Room B
+        await app.viewRoomById(roomBId);
+
+        // Let the app settle to avoid flakiness
+        await page.waitForTimeout(500);
+
+        // Display Room A
+        await app.viewRoomById(roomAId);
+
+        // The timeline should display the first message
+        // The previous position before switching to Room B should be remembered
+        await expect(page.locator(".mx_MTextBody .mx_EventTile_body").getByText("test0")).toBeInViewport();
+    });
+});