Add tests about room list order (#12088)

playwright/e2e/read-receipts/high-level.spec.ts

@@ -415,7 +415,43 @@ test.describe("Read receipts", () => {
     });
 
     test.describe("Room list order", () => {
-        test.fixme("Rooms with unread threads appear at the top of room list if 'unread first' is selected", () => {});
+        test("Rooms with unread messages appear at the top of room list if 'unread first' is selected", async ({
+            roomAlpha: room1,
+            roomBeta: room2,
+            util,
+            msg,
+            page,
+        }) => {
+            await util.goTo(room2);
+
+            // Display the unread first room
+            await util.toggleRoomUnreadOrder();
+            await util.receiveMessages(room1, ["Msg1"]);
+            await page.reload();
+
+            // Room 1 has an unread message and should be displayed first
+            await util.assertRoomListOrder([room1, room2]);
+        });
+
+        test("Rooms with unread threads appear at the top of room list if 'unread first' is selected", async ({
+            roomAlpha: room1,
+            roomBeta: room2,
+            util,
+            msg,
+        }) => {
+            await util.goTo(room2);
+            await util.receiveMessages(room1, ["Msg1"]);
+            await util.markAsRead(room1);
+            await util.assertRead(room1);
+
+            // Display the unread first room
+            await util.toggleRoomUnreadOrder();
+            await util.receiveMessages(room1, [msg.threadedOff("Msg1", "Resp1")]);
+            await util.saveAndReload();
+
+            // Room 1 has an unread message and should be displayed first
+            await util.assertRoomListOrder([room1, room2]);
+        });
     });
 
     test.describe("Notifications", () => {

playwright/e2e/read-receipts/index.ts

@@ -590,6 +590,37 @@ class Helpers {
     async receiveMessages(room: string | { name: string }, messages: Message[]) {
         await this.sendMessageAsClient(this.bot, room, messages);
     }
+
+    /**
+     * Open the room list menu
+     */
+    async toggleRoomListMenu() {
+        const tile = this.getRoomListTile("Rooms");
+        await tile.hover();
+        const button = tile.getByLabel("List options");
+        await button.click();
+    }
+
+    /**
+     * Toggle the `Show rooms with unread messages first` option for the room list
+     */
+    async toggleRoomUnreadOrder() {
+        await this.toggleRoomListMenu();
+        await this.page.getByText("Show rooms with unread messages first").click();
+        // Close contextual menu
+        await this.page.locator(".mx_ContextualMenu_background").click();
+    }
+
+    /**
+     * Assert that the room list is ordered as expected
+     * @param rooms
+     */
+    async assertRoomListOrder(rooms: Array<{ name: string }>) {
+        const roomList = this.page.locator(".mx_RoomTile_title");
+        for (const [i, room] of rooms.entries()) {
+            await expect(roomList.nth(i)).toHaveText(room.name);
+        }
+    }
 }
 
 /**