Room list: move sections out of labs to all the users (#33810)

* feat: remove section labs flag

* test: update tests

* feat: remove favourites and low prioriy filter in SC

* test: update screenshots

* test: update snapshots

* test: update playwright tests

* test: update playright screenshots

* test: update screenshot

* test: close release announcement

* test: fix skeleton screenshot

* test: fix sliding sync

* test: update room list tests

* test: update room list tests after section dnd

* test: update toast screenshot

* test: update again room list tests

* test: update screenshot
This commit is contained in:
Florian Duros
2026-06-29 16:30:27 +00:00
committed by GitHub
parent 219ca4a3e9
commit aed2009b9f
85 changed files with 131 additions and 846 deletions
@@ -22,7 +22,7 @@ import {
test.describe("Room list custom sections", () => {
test.use({
displayName: "Alice",
labsFlags: ["feature_new_room_list", "feature_room_list_sections"],
labsFlags: ["feature_new_room_list"],
botCreateOpts: {
displayName: "BotBob",
autoAcceptInvites: true,
@@ -7,7 +7,7 @@
import { type Visibility } from "matrix-js-sdk/src/matrix";
import { type Page } from "@playwright/test";
import { rejectToast } from "@element-hq/element-web-playwright-common";
import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
import { expect, test } from "../../../element-web-test";
import { SettingLevel } from "../../../../src/settings/SettingLevel";
@@ -35,6 +35,9 @@ test.describe("Room list filters and sort", () => {
// 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("Tombstoned rooms are not shown even when they receive updates", async ({ page, app, bot }) => {
@@ -177,19 +180,19 @@ test.describe("Room list filters and sort", () => {
await expect.poll(() => roomList.locator("role=option").count()).toBe(2);
await primaryFilters.getByRole("option", { name: "Rooms" }).click();
await expect(roomList.getByRole("option", { name: "unread room" })).toBeVisible();
await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
await expect(roomList.getByRole("option", { name: "empty room" })).toBeVisible();
await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
await expect(roomList.getByRole("option", { name: "Low prio room" })).toBeVisible();
await expect.poll(() => roomList.locator("role=option").count()).toBe(5);
// "Open room" prefix disambiguates the room tile from the "Toggle Chats section with
// unread rooms" section header button, which also matches the "unread room" substring.
await expect(roomList.getByRole("button", { name: "Open room unread room" })).toBeVisible();
await expect(roomList.getByRole("button", { name: "favourite room" })).toBeVisible();
await expect(roomList.getByRole("button", { name: "empty room" })).toBeVisible();
await expect(roomList.getByRole("button", { name: "room with mention" })).toBeVisible();
await expect(roomList.getByRole("button", { name: "Low prio room" })).toBeVisible();
// 5 room tiles spread across 3 sections (Favourites, Rooms, Low priority); each section
// header is also a button, so 5 rooms + 3 section headers = 8 buttons.
await expect.poll(() => roomList.locator("role=button").count()).toBe(8);
await getFilterExpandButton(page).click();
await primaryFilters.getByRole("option", { name: "Favourite" }).click();
await expect(roomList.getByRole("option", { name: "favourite room" })).toBeVisible();
await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
await primaryFilters.getByRole("option", { name: "Mentions" }).click();
await expect(roomList.getByRole("option", { name: "room with mention" })).toBeVisible();
await expect.poll(() => roomList.locator("role=option").count()).toBe(1);
@@ -216,7 +219,7 @@ test.describe("Room list filters and sort", () => {
await app.settings.closeDialog();
// Let's open a room other than unread room or unread dm
await roomListView.getByRole("option", { name: "Open room favourite room" }).click();
await roomListView.getByRole("button", { name: "Open room favourite room" }).click();
// Let's make the bot send a new message in both rooms
await bot.sendMessage(unReadDmId, "Hello!");
@@ -239,15 +242,20 @@ test.describe("Room list filters and sort", () => {
await getRoomOptionsMenu(page).click();
await page.getByRole("menuitemradio", { name: "A-Z" }).click();
await expect(roomListView.getByRole("option").first()).toHaveText(/empty room/);
// Favourite + chat section headers are buttons + favourite room
await expect(roomListView.getByRole("button").nth(3)).toHaveText(/empty room/);
});
test("should move room to the top on message when sorting by activity", async ({ page, bot }) => {
test("should move room to the top on message (chat section) when sorting by activity", async ({
page,
bot,
}) => {
const roomListView = getRoomList(page);
await bot.sendMessage(unReadDmId, "Hello!");
await expect(roomListView.getByRole("option").first()).toHaveText(/unread dm/);
// Favourite + chat section headers are buttons + favourite room
await expect(roomListView.getByRole("button").nth(3)).toHaveText(/unread dm/);
});
});
@@ -302,7 +310,7 @@ test.describe("Room list filters and sort", () => {
);
});
["People", "Rooms", "Favourite"].forEach((filter) => {
["People", "Rooms"].forEach((filter) => {
test(
`should render the placeholder for ${filter} filter`,
{ tag: "@screenshot" },
@@ -5,7 +5,7 @@
* Please see LICENSE files in the repository root for full details.
*/
import { rejectToast } from "@element-hq/element-web-playwright-common";
import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
import { test, expect } from "../../../element-web-test";
import { getHeaderSection } from "./utils";
@@ -19,6 +19,9 @@ test.describe("Header section of the room list", () => {
// 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("should render the header section", { tag: "@screenshot" }, async ({ page, app, user }) => {
@@ -13,7 +13,7 @@ import { assertRoomInSection, dragRoomToSection, getPrimaryFilters, getRoomList,
test.describe("Room list sections", () => {
test.use({
displayName: "Alice",
labsFlags: ["feature_new_room_list", "feature_room_list_sections"],
labsFlags: ["feature_new_room_list"],
botCreateOpts: {
displayName: "BotBob",
autoAcceptInvites: true,
@@ -6,7 +6,7 @@
*/
import { type Page } from "@playwright/test";
import { rejectToast } from "@element-hq/element-web-playwright-common";
import { closeReleaseAnnouncement, rejectToast } from "@element-hq/element-web-playwright-common";
import { expect, test } from "../../../element-web-test";
import { type Bot } from "../../../pages/bot";
@@ -27,6 +27,9 @@ test.describe("Room list", () => {
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");
// focus the user menu to avoid to have hover decoration
await page.getByRole("button", { name: "User menu" }).focus();
});
@@ -71,11 +74,11 @@ test.describe("Room list", () => {
test("should open the more options menu", { tag: "@screenshot" }, async ({ page, app, user }) => {
const roomListView = getRoomList(page);
const roomItem = roomListView.getByRole("option", { name: "Open room room29" });
let roomItem = roomListView.getByRole("option", { name: "Open room room29" });
await roomItem.hover();
await expect(roomItem).toMatchScreenshot("room-list-item-hover.png");
const roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
let roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
await roomItemMenu.click();
await expect(page).toMatchScreenshot("room-list-item-open-more-options.png");
@@ -83,7 +86,9 @@ test.describe("Room list", () => {
await page.getByRole("menuitemcheckbox", { name: "Favourited" }).click();
// Check that the room is favourited
roomItem = roomListView.getByRole("gridcell", { name: "Open room room29" });
await roomItem.hover();
roomItemMenu = roomItem.getByRole("button", { name: "More Options" });
await roomItemMenu.click();
await expect(page.getByRole("menuitemcheckbox", { name: "Favourited" })).toBeChecked();
// It should show the invite dialog
@@ -296,13 +301,14 @@ test.describe("Room list", () => {
// @ts-ignore Visibility enum is not accessible
await app.client.createRoom({ name: "low priority room", visibility: "public" });
const roomListView = getRoomList(page);
const publicRoom = roomListView.getByRole("option", { name: "low priority room" });
let publicRoom = roomListView.getByRole("option", { name: "low priority room" });
// Make room low priority
await publicRoom.click({ button: "right" });
await page.getByRole("menuitemcheckbox", { name: "Low priority" }).click();
// Should have low priority decoration
publicRoom = roomListView.getByRole("gridcell", { name: "low priority room" });
await expect(publicRoom.locator(".mx_RoomAvatarView_icon")).toHaveAccessibleName(
"This is a low priority room",
);