From 6f0d288c1dba449c4b3371849f9fdd3113987bb1 Mon Sep 17 00:00:00 2001 From: David Baker Date: Thu, 12 Jun 2025 16:42:30 +0100 Subject: [PATCH] Use nav for new room list and label sections (#30134) * Use nav for new room list and label sections The old room list had a nav element but it was missed in the new one, so add it and albel the sections. Also remove the test ID and use this instead. * Update snapshots * Use the function we define above --- .../left-panel/room-list-panel/room-list-filter-sort.spec.ts | 4 +++- .../e2e/left-panel/room-list-panel/room-list-panel.spec.ts | 4 ++-- playwright/e2e/left-panel/room-list-panel/room-list.spec.ts | 2 +- src/components/structures/RoomView.tsx | 2 +- src/components/views/rooms/RoomListPanel/RoomListPanel.tsx | 5 +++-- src/i18n/strings/en_EN.json | 1 + .../structures/__snapshots__/RoomView-test.tsx.snap | 3 +++ 7 files changed, 14 insertions(+), 7 deletions(-) diff --git a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts index 7f87f3f43c..26d27cc01c 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list-filter-sort.spec.ts @@ -326,7 +326,9 @@ test.describe("Room list filters and sort", () => { async ({ page, app, user }) => { const emptyRoomList = getEmptyRoomList(page); await expect(emptyRoomList).toMatchScreenshot("default-empty-room-list.png"); - await expect(page.getByTestId("room-list-panel")).toMatchScreenshot("room-panel-empty-room-list.png"); + await expect(page.getByRole("navigation", { name: "Room list" })).toMatchScreenshot( + "room-panel-empty-room-list.png", + ); }, ); diff --git a/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts index 8ca138a707..d0503e2caf 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list-panel.spec.ts @@ -19,7 +19,7 @@ test.describe("Room list panel", () => { * @param page */ function getRoomListView(page: Page) { - return page.getByTestId("room-list-panel"); + return page.getByRole("navigation", { name: "Room list" }); } test.beforeEach(async ({ page, app, user }) => { @@ -44,7 +44,7 @@ test.describe("Room list panel", () => { test("should respond to small screen sizes", { tag: "@screenshot" }, async ({ page }) => { await page.setViewportSize({ width: 575, height: 600 }); - const roomListPanel = page.getByTestId("room-list-panel"); + const roomListPanel = getRoomListView(page); await expect(roomListPanel).toMatchScreenshot("room-list-panel-smallscreen.png"); }); }); diff --git a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts index 73eb98512b..0567b8a162 100644 --- a/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts +++ b/playwright/e2e/left-panel/room-list-panel/room-list.spec.ts @@ -278,7 +278,7 @@ test.describe("Room list", () => { }); test("should be a video room", { tag: "@screenshot" }, async ({ page, app, user }) => { - await page.getByTestId("room-list-panel").getByRole("button", { name: "Add" }).click(); + await page.getByRole("navigation", { name: "Room list" }).getByRole("button", { name: "Add" }).click(); await page.getByRole("menuitem", { name: "New video room" }).click(); await page.getByRole("textbox", { name: "Name" }).fill("video room"); await page.getByRole("button", { name: "Create video room" }).click(); diff --git a/src/components/structures/RoomView.tsx b/src/components/structures/RoomView.tsx index d64f4b7a36..b6f8bc06b3 100644 --- a/src/components/structures/RoomView.tsx +++ b/src/components/structures/RoomView.tsx @@ -315,7 +315,7 @@ function LocalRoomView(props: LocalRoomViewProps): ReactElement {
-
+
diff --git a/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx b/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx index 291794399f..f5c0620a66 100644 --- a/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx +++ b/src/components/views/rooms/RoomListPanel/RoomListPanel.tsx @@ -13,6 +13,7 @@ import { RoomListSearch } from "./RoomListSearch"; import { RoomListHeaderView } from "./RoomListHeaderView"; import { RoomListView } from "./RoomListView"; import { Flex } from "../../../utils/Flex"; +import { _t } from "../../../../languageHandler"; type RoomListPanelProps = { /** @@ -30,11 +31,11 @@ export const RoomListPanel: React.FC = ({ activeSpace }) => return ( {displayRoomSearch && } diff --git a/src/i18n/strings/en_EN.json b/src/i18n/strings/en_EN.json index 5763e0a781..56f22dc6d7 100644 --- a/src/i18n/strings/en_EN.json +++ b/src/i18n/strings/en_EN.json @@ -2066,6 +2066,7 @@ "read_topic": "Click to read topic", "rejecting": "Rejecting invite…", "rejoin_button": "Re-join", + "room_content": "Room content", "room_is_low_priority": "This is a low priority room", "search": { "all_rooms_button": "Search all rooms", diff --git a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap index 8d909a6797..f194d0bb33 100644 --- a/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap +++ b/test/unit-tests/components/structures/__snapshots__/RoomView-test.tsx.snap @@ -403,6 +403,7 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]