Use new room list in room header spec (#34046)

* test: use new room list in room header spec

* test: update room header screenshot

* test: remove uncessary features declaration

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

@@ -8,6 +8,7 @@ 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 { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
 
 import { test, expect } from "../../element-web-test";
 import { type ElementAppPage } from "../../pages/ElementAppPage";
@@ -15,11 +16,15 @@ import { type ElementAppPage } from "../../pages/ElementAppPage";
 test.describe("Room Header", () => {
     test.use({
         displayName: "Sakura",
-        config: {
-            features: {
-                feature_new_room_list: false,
-            },
-        },
+    });
+
+    test.beforeEach(async ({ page, app, user }) => {
+        // The toasts are displayed above the search section
+        await rejectToast(page, "Verify this device");
+        await rejectToast(page, "Notifications");
+
+        // Close the release announcement about the new room list sections
+        await closeReleaseAnnouncement(page, "Introducing Sections");
     });
 
     test.describe("with feature_notifications enabled", () => {
@@ -28,7 +33,7 @@ test.describe("Room Header", () => {
         });
         test("should render default buttons properly", { tag: "@screenshot" }, async ({ page, app, user }) => {
             await app.client.createRoom({ name: "Test Room" });
-            await app.viewRoomByNameOnOldRoomList("Test Room");
+            await app.viewRoomByName("Test Room");
 
             const header = page.locator(".mx_RoomHeader");
 
@@ -66,7 +71,7 @@ test.describe("Room Header", () => {
                     "officia deserunt mollit anim id est laborum.";
 
                 await app.client.createRoom({ name: LONG_ROOM_NAME });
-                await app.viewRoomByNameOnOldRoomList(LONG_ROOM_NAME);
+                await app.viewRoomByName(LONG_ROOM_NAME);
 
                 const header = page.locator(".mx_RoomHeader");
                 // Wait until the room name is set
@@ -91,7 +96,7 @@ test.describe("Room Header", () => {
 
         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");
+            await app.viewRoomByName("Test Room");
 
             const header = page.locator(".mx_RoomHeader");
 
@@ -103,15 +108,15 @@ test.describe("Room Header", () => {
         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();
-
+            const roomListHeader = page.getByTestId("room-list-header");
+            await roomListHeader.getByRole("button", { name: "New conversation" }).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");
+            await app.viewRoomByName("Test video room");
         };
 
         test.describe("and with feature_notifications enabled", () => {
@@ -122,11 +127,6 @@ test.describe("Room Header", () => {
                 { 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

apps/web/playwright/pages/ElementAppPage.ts

@@ -127,34 +127,6 @@ export class ElementAppPage {
         }
     }
 
-    /**
-     * Opens the given room on the old room list by name. The room must be visible in the
-     * room list, but the room list may be folded horizontally, and the
-     * room may contain unread messages.
-     *
-     * @param name The exact room name to find and click on/open.
-     */
-    public async viewRoomByNameOnOldRoomList(name: string): Promise<void> {
-        // We look for the room inside the room list, which is a tree called Rooms.
-        //
-        // There are 3 cases:
-        // - the room list is folded:
-        //     then the aria-label on the room tile is the name (with nothing extra)
-        // - the room list is unfolder and the room has messages:
-        //     then the aria-label contains the unread count, but the title of the
-        //     div inside the titleContainer equals the room name
-        // - the room list is unfolded and the room has no messages:
-        //     then the aria-label is the name and so is the title of a div
-        //
-        // So by matching EITHER title=name OR aria-label=name we find this exact
-        // room in all three cases.
-        return this.page
-            .getByRole("tree", { name: "Rooms" })
-            .locator(`[title="${name}"],[aria-label="${name}"]`)
-            .first()
-            .click();
-    }
-
     public async viewRoomById(roomId: string): Promise<void> {
         await this.page.goto(`/#/room/${roomId}`);
     }