Default the room header to on (#12803)

* Default the room header to on

* Refactor code into helper method

Add a method to open/close the room info panel and use it everywhere.

* Fix broken tests, update snapshots and screenshots

* Update room header tests to make sense with the new header
This commit is contained in:
R Midhun Suresh 2024-07-23 16:26:25 +05:30 committed by GitHub
parent 25fcd6a65f
commit bb1b7f1fd0
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
59 changed files with 595 additions and 397 deletions

View file

@ -48,7 +48,7 @@ test("Shows the last known page on reload", async ({ pageWithCredentials: page }
// Check that the room reloaded // Check that the room reloaded
await expect(page).toHaveURL(/\/#\/room\//); await expect(page).toHaveURL(/\/#\/room\//);
await expect(page.locator(".mx_LegacyRoomHeader")).toContainText("Test Room"); await expect(page.locator(".mx_RoomHeader")).toContainText("Test Room");
}); });
test("Room link correctly loads a room view", async ({ pageWithCredentials: page }) => { test("Room link correctly loads a room view", async ({ pageWithCredentials: page }) => {

View file

@ -108,7 +108,7 @@ test.describe("HTML Export", () => {
page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"), page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
).toBeVisible(); ).toBeVisible();
await page.getByRole("button", { name: "Room info" }).click(); await app.toggleRoomInfoPanel();
await page.getByRole("menuitem", { name: "Export Chat" }).click(); await page.getByRole("menuitem", { name: "Export Chat" }).click();
const downloadPromise = page.waitForEvent("download"); const downloadPromise = page.waitForEvent("download");

View file

@ -36,7 +36,7 @@ test.describe("Create Room", () => {
await dialog.getByRole("button", { name: "Create room" }).click(); await dialog.getByRole("button", { name: "Create room" }).click();
await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/); await expect(page).toHaveURL(/\/#\/room\/#test-room-1:localhost/);
const header = page.locator(".mx_LegacyRoomHeader"); const header = page.locator(".mx_RoomHeader");
await expect(header).toContainText(name); await expect(header).toContainText(name);
await expect(header).toContainText(topic); await expect(header).toContainText(topic);
}); });

View file

@ -224,7 +224,7 @@ test.describe("Cryptography", function () {
await checkDMRoom(page); await checkDMRoom(page);
const bobRoomId = await bobJoin(page, bob); const bobRoomId = await bobJoin(page, bob);
await testMessages(page, bob, bobRoomId); await testMessages(page, bob, bobRoomId);
await verify(page, bob); await verify(app, bob);
// Assert that verified icon is rendered // Assert that verified icon is rendered
await page.getByTestId("base-card-back-button").click(); await page.getByTestId("base-card-back-button").click();
@ -246,6 +246,6 @@ test.describe("Cryptography", function () {
// we need to have a room with the other user present, so we can open the verification panel // we need to have a room with the other user present, so we can open the verification panel
await createSharedRoomWithUser(app, bob.credentials.userId); await createSharedRoomWithUser(app, bob.credentials.userId);
await verify(page, bob); await verify(app, bob);
}); });
}); });

View file

@ -104,7 +104,7 @@ test.describe("Cryptography", function () {
await expect(lastTileE2eIcon).not.toBeVisible(); await expect(lastTileE2eIcon).not.toBeVisible();
/* Now verify Bob */ /* Now verify Bob */
await verify(page, bob); await verify(app, bob);
/* Existing message should be updated when user is verified. */ /* Existing message should be updated when user is verified. */
await expect(last).toContainText("test encrypted 1"); await expect(last).toContainText("test encrypted 1");
@ -222,7 +222,7 @@ test.describe("Cryptography", function () {
await bobSecondDevice.prepareClient(); await bobSecondDevice.prepareClient();
// verify Bob // verify Bob
await verify(page, bob); await verify(app, bob);
// bob sends a valid event // bob sends a valid event
const testEvent = await bob.sendMessage(testRoomId, "Hoo!"); const testEvent = await bob.sendMessage(testRoomId, "Hoo!");

View file

@ -329,15 +329,6 @@ export async function createRoom(page: Page, roomName: string, isEncrypted: bool
} }
} }
/**
* Open the room info panel and return the panel element
* @param page - the page to use
*/
export const openRoomInfo = async (page: Page) => {
await page.getByRole("button", { name: "Room info" }).click();
return page.locator(".mx_RightPanel");
};
/** /**
* Configure the given MatrixClient to auto-accept any invites * Configure the given MatrixClient to auto-accept any invites
* @param client - the client to configure * @param client - the client to configure
@ -357,10 +348,11 @@ export async function autoJoin(client: Client) {
* @param page - the page to use * @param page - the page to use
* @param bob - the user to verify * @param bob - the user to verify
*/ */
export const verify = async (page: Page, bob: Bot) => { export const verify = async (app: ElementAppPage, bob: Bot) => {
const page = app.page;
const bobsVerificationRequestPromise = waitForVerificationRequest(bob); const bobsVerificationRequestPromise = waitForVerificationRequest(bob);
const roomInfo = await openRoomInfo(page); const roomInfo = await app.toggleRoomInfoPanel();
await page.locator(".mx_RightPanelTabs").getByText("People").click(); await page.locator(".mx_RightPanelTabs").getByText("People").click();
await roomInfo.getByText("Bob").click(); await roomInfo.getByText("Bob").click();
await roomInfo.getByRole("button", { name: "Verify" }).click(); await roomInfo.getByRole("button", { name: "Verify" }).click();

View file

@ -38,8 +38,8 @@ test.describe("Image Upload", () => {
.locator(".mx_MessageComposer_actions input[type='file']") .locator(".mx_MessageComposer_actions input[type='file']")
.setInputFiles("playwright/sample-files/riot.png"); .setInputFiles("playwright/sample-files/riot.png");
expect(page.getByRole("button", { name: "Upload" })).toBeEnabled(); await expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled(); await expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
expect(page).toMatchScreenshot("image-upload-preview.png"); await expect(page).toMatchScreenshot("image-upload-preview.png");
}); });
}); });

View file

@ -118,8 +118,8 @@ test.describe("Integration Manager: Get OpenID Token", () => {
await app.viewRoomByName(ROOM_NAME); await app.viewRoomByName(ROOM_NAME);
}); });
test("should successfully obtain an openID token", async ({ page }) => { test("should successfully obtain an openID token", async ({ page, app }) => {
await openIntegrationManager(page); await openIntegrationManager(app);
await sendActionFromIntegrationManager(page, integrationManagerUrl); await sendActionFromIntegrationManager(page, integrationManagerUrl);
const iframe = page.frameLocator(`iframe[src*="${integrationManagerUrl}"]`); const iframe = page.frameLocator(`iframe[src*="${integrationManagerUrl}"]`);

View file

@ -167,7 +167,7 @@ test.describe("Integration Manager: Kick", () => {
await app.client.inviteUser(room.roomId, targetUser.credentials.userId); await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible(); await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
await openIntegrationManager(page); await openIntegrationManager(app);
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
await closeIntegrationManager(page, integrationManagerUrl); await closeIntegrationManager(page, integrationManagerUrl);
await expectKickedMessage(page, true); await expectKickedMessage(page, true);
@ -185,7 +185,7 @@ test.describe("Integration Manager: Kick", () => {
}, },
}); });
await openIntegrationManager(page); await openIntegrationManager(app);
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
await closeIntegrationManager(page, integrationManagerUrl); await closeIntegrationManager(page, integrationManagerUrl);
await expectKickedMessage(page, false); await expectKickedMessage(page, false);
@ -197,7 +197,7 @@ test.describe("Integration Manager: Kick", () => {
await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible(); await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
await targetUser.leave(room.roomId); await targetUser.leave(room.roomId);
await openIntegrationManager(page); await openIntegrationManager(app);
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
await closeIntegrationManager(page, integrationManagerUrl); await closeIntegrationManager(page, integrationManagerUrl);
await expectKickedMessage(page, false); await expectKickedMessage(page, false);
@ -209,7 +209,7 @@ test.describe("Integration Manager: Kick", () => {
await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible(); await expect(page.getByText(`${BOT_DISPLAY_NAME} joined the room`)).toBeVisible();
await app.client.ban(room.roomId, targetUser.credentials.userId); await app.client.ban(room.roomId, targetUser.credentials.userId);
await openIntegrationManager(page); await openIntegrationManager(app);
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
await closeIntegrationManager(page, integrationManagerUrl); await closeIntegrationManager(page, integrationManagerUrl);
await expectKickedMessage(page, false); await expectKickedMessage(page, false);
@ -218,7 +218,7 @@ test.describe("Integration Manager: Kick", () => {
test("should no-op if the target was never a room member", async ({ page, app, bot: targetUser, room }) => { test("should no-op if the target was never a room member", async ({ page, app, bot: targetUser, room }) => {
await app.viewRoomByName(ROOM_NAME); await app.viewRoomByName(ROOM_NAME);
await openIntegrationManager(page); await openIntegrationManager(app);
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
await closeIntegrationManager(page, integrationManagerUrl); await closeIntegrationManager(page, integrationManagerUrl);
await expectKickedMessage(page, false); await expectKickedMessage(page, false);

View file

@ -142,7 +142,7 @@ test.describe("Integration Manager: Read Events", () => {
// Send a state event // Send a state event
const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey); const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
await openIntegrationManager(page); await openIntegrationManager(app);
// Read state events // Read state events
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@ -162,7 +162,7 @@ test.describe("Integration Manager: Read Events", () => {
// Send a state event // Send a state event
const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey); const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
await openIntegrationManager(page); await openIntegrationManager(app);
// Read state events // Read state events
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
@ -196,7 +196,7 @@ test.describe("Integration Manager: Read Events", () => {
app.client.sendStateEvent(room.roomId, eventType, eventContent3, stateKey3), app.client.sendStateEvent(room.roomId, eventType, eventContent3, stateKey3),
]); ]);
await openIntegrationManager(page); await openIntegrationManager(app);
// Read state events // Read state events
await sendActionFromIntegrationManager( await sendActionFromIntegrationManager(
@ -217,11 +217,11 @@ test.describe("Integration Manager: Read Events", () => {
await expect(iframe.locator("#message-response")).toContainText(`"content":${JSON.stringify(eventContent3)}`); await expect(iframe.locator("#message-response")).toContainText(`"content":${JSON.stringify(eventContent3)}`);
}); });
test("should fail to read an event type which is not allowed", async ({ page, room }) => { test("should fail to read an event type which is not allowed", async ({ page, app, room }) => {
const eventType = "com.example.event"; const eventType = "com.example.event";
const stateKey = ""; const stateKey = "";
await openIntegrationManager(page); await openIntegrationManager(app);
// Read state events // Read state events
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey); await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);

View file

@ -137,7 +137,7 @@ test.describe("Integration Manager: Send Event", () => {
); );
await app.viewRoomByName(ROOM_NAME); await app.viewRoomByName(ROOM_NAME);
await openIntegrationManager(page); await openIntegrationManager(app);
}); });
test("should send a state event", async ({ page, app, room }) => { test("should send a state event", async ({ page, app, room }) => {

View file

@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import type { Page } from "@playwright/test"; import type { ElementAppPage } from "../../pages/ElementAppPage";
export async function openIntegrationManager(page: Page) { export async function openIntegrationManager(app: ElementAppPage) {
await page.getByRole("button", { name: "Room info" }).click(); const { page } = app;
await app.toggleRoomInfoPanel();
await page await page
.locator(".mx_RoomSummaryCard_appsGroup") .locator(".mx_RoomSummaryCard_appsGroup")
.getByRole("button", { name: "Add widgets, bridges & bots" }) .getByRole("button", { name: "Add widgets, bridges & bots" })

View file

@ -36,7 +36,7 @@ test.describe("Invite dialog", function () {
await expect(page.getByText("Hanako created and configured the room.")).toBeVisible(); await expect(page.getByText("Hanako created and configured the room.")).toBeVisible();
// Open the room info panel // Open the room info panel
await page.getByRole("button", { name: "Room info" }).click(); await app.toggleRoomInfoPanel();
await page.locator(".mx_BaseCard").getByRole("menuitem", { name: "Invite" }).click(); await page.locator(".mx_BaseCard").getByRole("menuitem", { name: "Invite" }).click();
@ -114,12 +114,9 @@ test.describe("Invite dialog", function () {
// Assert that the hovered user name on invitation UI does not have background color // Assert that the hovered user name on invitation UI does not have background color
// TODO: implement the test on room-header.spec.ts // TODO: implement the test on room-header.spec.ts
const roomHeader = page.locator(".mx_LegacyRoomHeader"); const roomHeader = page.locator(".mx_RoomHeader");
await roomHeader.locator(".mx_LegacyRoomHeader_name--textonly").hover(); await roomHeader.locator(".mx_RoomHeader_heading").hover();
await expect(roomHeader.locator(".mx_LegacyRoomHeader_name--textonly")).toHaveCSS( await expect(roomHeader.locator(".mx_RoomHeader_heading")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
"background-color",
"rgba(0, 0, 0, 0)",
);
// Send a message to invite the bots // Send a message to invite the bots
const composer = app.getComposer().locator("[contenteditable]"); const composer = app.getComposer().locator("[contenteditable]");

View file

@ -31,7 +31,7 @@ test.describe("Create Knock Room", () => {
await dialog.getByRole("option", { name: "Ask to join" }).click(); await dialog.getByRole("option", { name: "Ask to join" }).click();
await dialog.getByRole("button", { name: "Create room" }).click(); await dialog.getByRole("button", { name: "Create room" }).click();
await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible(); await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
const urlHash = await page.evaluate(() => window.location.hash); const urlHash = await page.evaluate(() => window.location.hash);
const roomId = urlHash.replace("#/room/", ""); const roomId = urlHash.replace("#/room/", "");
@ -48,7 +48,7 @@ test.describe("Create Knock Room", () => {
await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity"); await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
await dialog.getByRole("button", { name: "Create room" }).click(); await dialog.getByRole("button", { name: "Create room" }).click();
await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible(); await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
const urlHash = await page.evaluate(() => window.location.hash); const urlHash = await page.evaluate(() => window.location.hash);
const roomId = urlHash.replace("#/room/", ""); const roomId = urlHash.replace("#/room/", "");
@ -74,7 +74,7 @@ test.describe("Create Knock Room", () => {
await dialog.getByText("Make this room visible in the public room directory.").click(); await dialog.getByText("Make this room visible in the public room directory.").click();
await dialog.getByRole("button", { name: "Create room" }).click(); await dialog.getByRole("button", { name: "Create room" }).click();
await expect(page.locator(".mx_LegacyRoomHeader").getByText("Cybersecurity")).toBeVisible(); await expect(page.locator(".mx_RoomHeader").getByText("Cybersecurity")).toBeVisible();
const urlHash = await page.evaluate(() => window.location.hash); const urlHash = await page.evaluate(() => window.location.hash);
const roomId = urlHash.replace("#/room/", ""); const roomId = urlHash.replace("#/room/", "");

View file

@ -78,8 +78,9 @@ test.describe("Lazy Loading", () => {
} }
} }
async function openMemberlist(page: Page): Promise<void> { async function openMemberlist(app: ElementAppPage): Promise<void> {
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Room info" }).click(); await app.toggleRoomInfoPanel();
const { page } = app;
await page.locator(".mx_RightPanelTabs").getByText("People").click(); await page.locator(".mx_RightPanelTabs").getByText("People").click();
} }
@ -123,7 +124,7 @@ test.describe("Lazy Loading", () => {
// Alice should see 2 messages from every charly with the correct display name // Alice should see 2 messages from every charly with the correct display name
await checkPaginatedDisplayNames(app, charly1to5); await checkPaginatedDisplayNames(app, charly1to5);
await openMemberlist(page); await openMemberlist(app);
await checkMemberList(page, charly1to5); await checkMemberList(page, charly1to5);
await joinCharliesWhileAliceIsOffline(page, app, charly6to10); await joinCharliesWhileAliceIsOffline(page, app, charly6to10);
await checkMemberList(page, charly6to10); await checkMemberList(page, charly6to10);

View file

@ -35,10 +35,10 @@ test.describe("1:1 chat room", () => {
await page.goto(`/#/user/${user2.userId}?action=chat`); await page.goto(`/#/user/${user2.userId}?action=chat`);
}); });
test("should open new 1:1 chat room after leaving the old one", async ({ page, user2 }) => { test("should open new 1:1 chat room after leaving the old one", async ({ page, app, user2 }) => {
// leave 1:1 chat room // leave 1:1 chat room
await page.locator(".mx_LegacyRoomHeader_nametext").getByText(user2.displayName).click(); await app.toggleRoomInfoPanel();
await page.getByRole("menuitem", { name: "Leave" }).click(); await page.getByRole("menuitem", { name: "Leave room" }).click();
await page.getByRole("button", { name: "Leave" }).click(); await page.getByRole("button", { name: "Leave" }).click();
// wait till the room was left // wait till the room was left
@ -49,6 +49,6 @@ test.describe("1:1 chat room", () => {
// open new 1:1 chat room // open new 1:1 chat room
await page.goto(`/#/user/${user2.userId}?action=chat`); await page.goto(`/#/user/${user2.userId}?action=chat`);
await expect(page.locator(".mx_LegacyRoomHeader_nametext").getByText(user2.displayName)).toBeVisible(); await expect(page.locator(".mx_RoomHeader_heading").getByText(user2.displayName)).toBeVisible();
}); });
}); });

View file

@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
limitations under the License. limitations under the License.
*/ */
import { test, expect } from "../../element-web-test"; import { test, expect } from "../../element-web-test";
import type { Page } from "@playwright/test";
import type { Bot } from "../../pages/bot"; import type { Bot } from "../../pages/bot";
import type { Client } from "../../pages/client"; import type { Client } from "../../pages/client";
import { ElementAppPage } from "../../pages/ElementAppPage";
test.describe("Poll history", () => { test.describe("Poll history", () => {
type CreatePollOptions = { type CreatePollOptions = {
@ -66,8 +66,9 @@ test.describe("Poll history", () => {
}); });
}; };
async function openPollHistory(page: Page): Promise<void> { async function openPollHistory(app: ElementAppPage): Promise<void> {
await page.getByRole("button", { name: "Room info" }).click(); const { page } = app;
await app.toggleRoomInfoPanel();
await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Poll history" }).click(); await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "Poll history" }).click();
} }
@ -116,7 +117,7 @@ test.describe("Poll history", () => {
await botVoteForOption(bot, roomId, pollId2, pollParams1.options[1].id); await botVoteForOption(bot, roomId, pollId2, pollParams1.options[1].id);
await endPoll(bot, roomId, pollId2); await endPoll(bot, roomId, pollId2);
await openPollHistory(page); await openPollHistory(app);
// these polls are also in the timeline // these polls are also in the timeline
// focus on the poll history dialog // focus on the poll history dialog

View file

@ -59,7 +59,7 @@ test.describe("Presence tests", () => {
); );
await app.client.createRoom({}); // trigger sync await app.client.createRoom({}); // trigger sync
await page.getByRole("button", { name: "Room info" }).click(); await app.toggleRoomInfoPanel();
await page.locator(".mx_RightPanel").getByText("People").click(); await page.locator(".mx_RightPanel").getByText("People").click();
await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("Bob"); await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("Bob");
await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("User's server unreachable"); await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("User's server unreachable");

View file

@ -402,7 +402,7 @@ class Helpers {
* Close the threads panel. * Close the threads panel.
*/ */
async closeThreadsPanel() { async closeThreadsPanel() {
await this.page.locator(".mx_LegacyRoomHeader").getByLabel("Threads").click(); await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible(); await expect(this.page.locator(".mx_RightPanel")).not.toBeVisible();
} }
@ -410,7 +410,7 @@ class Helpers {
* Return to the list of threads, given we are viewing a single thread. * Return to the list of threads, given we are viewing a single thread.
*/ */
async backToThreadsList() { async backToThreadsList() {
await this.page.locator(".mx_LegacyRoomHeader").getByLabel("Threads").click(); await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
} }
/** /**
@ -530,12 +530,11 @@ class Helpers {
// whether it's open or not - wait here to give it a chance to settle. // whether it's open or not - wait here to give it a chance to settle.
await this.page.waitForTimeout(200); await this.page.waitForTimeout(200);
const ariaCurrent = await this.page.getByTestId("threadsButton").getAttribute("aria-current");
if (ariaCurrent !== "true") {
await this.page.getByTestId("threadsButton").click();
}
const threadPanel = this.page.locator(".mx_ThreadPanel"); const threadPanel = this.page.locator(".mx_ThreadPanel");
const isThreadPanelOpen = (await threadPanel.count()) !== 0;
if (!isThreadPanelOpen) {
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
}
await expect(threadPanel).toBeVisible(); await expect(threadPanel).toBeVisible();
await threadPanel.evaluate(($panel) => { await threadPanel.evaluate(($panel) => {
const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]'); const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');

View file

@ -63,9 +63,9 @@ test.describe("RightPanel", () => {
await app.closeDialog(); await app.closeDialog();
// Close and reopen the right panel to render the room address // Close and reopen the right panel to render the room address
await page.getByRole("button", { name: "Room info" }).click(); await app.toggleRoomInfoPanel();
await expect(page.locator(".mx_RightPanel")).not.toBeVisible(); await expect(page.locator(".mx_RightPanel")).not.toBeVisible();
await page.getByRole("button", { name: "Room info" }).click(); await app.toggleRoomInfoPanel();
await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-name-and-address.png"); await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-name-and-address.png");
}); });

View file

@ -20,7 +20,7 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
export async function viewRoomSummaryByName(page: Page, app: ElementAppPage, name: string): Promise<void> { export async function viewRoomSummaryByName(page: Page, app: ElementAppPage, name: string): Promise<void> {
await app.viewRoomByName(name); await app.viewRoomByName(name);
await page.getByRole("button", { name: "Room info" }).click(); await app.toggleRoomInfoPanel();
return checkRoomSummaryCard(page, name); return checkRoomSummaryCard(page, name);
} }

View file

@ -18,7 +18,6 @@ import { Page } from "@playwright/test";
import { test, expect } from "../../element-web-test"; import { test, expect } from "../../element-web-test";
import { ElementAppPage } from "../../pages/ElementAppPage"; import { ElementAppPage } from "../../pages/ElementAppPage";
import type { Container } from "../../../src/stores/widgets/types";
test.describe("Room Header", () => { test.describe("Room Header", () => {
test.use({ test.use({
@ -33,24 +32,28 @@ test.describe("Room Header", () => {
await app.client.createRoom({ name: "Test Room" }); await app.client.createRoom({ name: "Test Room" });
await app.viewRoomByName("Test Room"); await app.viewRoomByName("Test Room");
const header = page.locator(".mx_LegacyRoomHeader"); const header = page.locator(".mx_RoomHeader");
// Names (aria-label) of every button rendered on mx_LegacyRoomHeader by default
const expectedButtonNames = [
"Room options", // The room name button next to the room avatar, which renders dropdown menu on click
"Voice call",
"Video call",
"Search",
"Threads",
"Notifications",
"Room info",
];
// Assert they are found and visible // There's two room info button - the header itself and the i button
for (const name of expectedButtonNames) { const infoButtons = header.getByRole("button", { name: "Room info" });
await expect(header.getByRole("button", { name })).toBeVisible(); await expect(infoButtons).toHaveCount(2);
} await expect(infoButtons.first()).toBeVisible();
await expect(infoButtons.last()).toBeVisible();
// Assert that just those seven buttons exist on mx_LegacyRoomHeader by default // Memberlist button
await expect(header.locator(".mx_FacePile")).toBeVisible();
// There should be both a voice and a video call button
// but they'll be disabled
const callButtons = header.getByRole("button", { name: "There's no one here to call" });
await expect(callButtons).toHaveCount(2);
await expect(callButtons.first()).toBeVisible();
await expect(callButtons.last()).toBeVisible();
await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
// Assert that there are six buttons in total
await expect(header.getByRole("button")).toHaveCount(7); await expect(header.getByRole("button")).toHaveCount(7);
await expect(header).toMatchScreenshot("room-header.png"); await expect(header).toMatchScreenshot("room-header.png");
@ -67,14 +70,15 @@ test.describe("Room Header", () => {
await app.client.createRoom({ name: LONG_ROOM_NAME }); await app.client.createRoom({ name: LONG_ROOM_NAME });
await app.viewRoomByName(LONG_ROOM_NAME); await app.viewRoomByName(LONG_ROOM_NAME);
const header = page.locator(".mx_LegacyRoomHeader"); const header = page.locator(".mx_RoomHeader");
// Wait until the room name is set // Wait until the room name is set
await expect(page.locator(".mx_LegacyRoomHeader_nametext").getByText(LONG_ROOM_NAME)).toBeVisible(); 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 // 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 // Note these assertions do not check the size of mx_LegacyRoomHeader_name button
const buttons = page.locator(".mx_LegacyRoomHeader_button"); const buttons = header.locator(".mx_Flex").getByRole("button");
await expect(buttons).toHaveCount(6); await expect(buttons).toHaveCount(5);
for (const button of await buttons.all()) { for (const button of await buttons.all()) {
await expect(button).toBeVisible(); await expect(button).toBeVisible();
await expect(button).toHaveCSS("height", "32px"); await expect(button).toHaveCSS("height", "32px");
@ -83,44 +87,6 @@ test.describe("Room Header", () => {
await expect(header).toMatchScreenshot("room-header-long-name.png"); await expect(header).toMatchScreenshot("room-header-long-name.png");
}); });
test("should have buttons highlighted by being clicked", async ({ page, app, user }) => {
await app.client.createRoom({ name: "Test Room" });
await app.viewRoomByName("Test Room");
const header = page.locator(".mx_LegacyRoomHeader");
// Check these buttons
const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
for (const name of buttonsHighlighted) {
await header.getByRole("button", { name: name }).click(); // Highlight the button
}
await expect(header).toMatchScreenshot("room-header-highlighted.png");
});
});
test.describe("with feature_pinning enabled", () => {
test.use({ labsFlags: ["feature_pinning"] });
test("should render the pin button for pinned messages card", async ({ page, app, user }) => {
await app.client.createRoom({ name: "Test Room" });
await app.viewRoomByName("Test Room");
const composer = app.getComposer().locator("[contenteditable]");
await composer.fill("Test message");
await composer.press("Enter");
const lastTile = page.locator(".mx_EventTile_last");
await lastTile.hover();
await lastTile.getByRole("button", { name: "Options" }).click();
await page.getByRole("menuitem", { name: "Pin" }).click();
await expect(
page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Pinned messages" }),
).toBeVisible();
});
}); });
test.describe("with a video room", () => { test.describe("with a video room", () => {
@ -141,30 +107,27 @@ test.describe("Room Header", () => {
test.describe("and with feature_notifications enabled", () => { test.describe("and with feature_notifications enabled", () => {
test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] }); test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });
test("should render buttons for room options, beta pill, invite, chat, and room info", async ({ test("should render buttons for chat, room info, threads and facepile", async ({ page, app, user }) => {
page,
app,
user,
}) => {
await createVideoRoom(page, app); await createVideoRoom(page, app);
const header = page.locator(".mx_LegacyRoomHeader"); const header = page.locator(".mx_RoomHeader");
// Names (aria-label) of the buttons on the video room header
const expectedButtonNames = [
"Room options",
"Video rooms are a beta feature Click for more info", // Beta pill
"Invite",
"Chat",
"Room info",
];
// Assert they are found and visible // There's two room info button - the header itself and the i button
for (const name of expectedButtonNames) { const infoButtons = header.getByRole("button", { name: "Room info" });
await expect(header.getByRole("button", { name })).toBeVisible(); 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 // Assert that there is not a button except those buttons
await expect(header.getByRole("button")).toHaveCount(7); await expect(header.getByRole("button")).toHaveCount(6);
await expect(header).toMatchScreenshot("room-header-video-room.png"); await expect(header).toMatchScreenshot("room-header-video-room.png");
}); });
@ -177,7 +140,7 @@ test.describe("Room Header", () => {
}) => { }) => {
await createVideoRoom(page, app); await createVideoRoom(page, app);
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Chat" }).click(); await page.locator(".mx_RoomHeader").getByRole("button", { name: "Chat" }).click();
// Assert that the call view is still visible // Assert that the call view is still visible
await expect(page.locator(".mx_CallView")).toBeVisible(); await expect(page.locator(".mx_CallView")).toBeVisible();
@ -188,114 +151,4 @@ test.describe("Room Header", () => {
).toBeVisible(); ).toBeVisible();
}); });
}); });
test.describe("with a widget", () => {
const ROOM_NAME = "Test Room with a widget";
const WIDGET_ID = "fake-widget";
const WIDGET_HTML = `
<html lang="en">
<head>
<title>Fake Widget</title>
</head>
<body>
Hello World
</body>
</html>
`;
test.beforeEach(async ({ page, app, user, webserver }) => {
const widgetUrl = webserver.start(WIDGET_HTML);
const roomId = await app.client.createRoom({ name: ROOM_NAME });
// setup widget via state event
await app.client.evaluate(
async (matrixClient, { roomId, widgetUrl, id }) => {
await matrixClient.sendStateEvent(
roomId,
"im.vector.modular.widgets",
{
id,
creatorUserId: "somebody",
type: "widget",
name: "widget",
url: widgetUrl,
},
id,
);
await matrixClient.sendStateEvent(
roomId,
"io.element.widgets.layout",
{
widgets: {
[id]: {
container: "top" as Container,
index: 1,
width: 100,
height: 0,
},
},
},
"",
);
},
{
roomId,
widgetUrl,
id: WIDGET_ID,
},
);
// open the room
await app.viewRoomByName(ROOM_NAME);
});
test("should highlight the apps button", async ({ page, app, user }) => {
// Assert that AppsDrawer is rendered
await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
const header = page.locator(".mx_LegacyRoomHeader");
// Assert that "Hide Widgets" button is rendered and aria-checked is set to true
await expect(header.getByRole("button", { name: "Hide Widgets" })).toHaveAttribute("aria-checked", "true");
await expect(header).toMatchScreenshot("room-header-with-apps-button-highlighted.png");
});
test("should support hiding a widget", async ({ page, app, user }) => {
await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
const header = page.locator(".mx_LegacyRoomHeader");
// Click the apps button to hide AppsDrawer
await header.getByRole("button", { name: "Hide Widgets" }).click();
// Assert that "Show widgets" button is rendered and aria-checked is set to false
await expect(header.getByRole("button", { name: "Show Widgets" })).toHaveAttribute("aria-checked", "false");
// Assert that AppsDrawer is not rendered
await expect(page.locator(".mx_AppsDrawer")).not.toBeVisible();
await expect(header).toMatchScreenshot("room-header-with-apps-button-not-highlighted.png");
});
});
test.describe("with encryption", () => {
test("should render the E2E icon and the buttons", async ({ page, app, user }) => {
// Create an encrypted room
await app.client.createRoom({
name: "Test Encrypted Room",
initial_state: [
{
type: "m.room.encryption",
state_key: "",
content: {
algorithm: "m.megolm.v1.aes-sha2",
},
},
],
});
await app.viewRoomByName("Test Encrypted Room");
const header = page.locator(".mx_LegacyRoomHeader");
await expect(header).toMatchScreenshot("encrypted-room-header.png");
});
});
}); });

View file

@ -21,7 +21,7 @@ import type { Locator, Page } from "@playwright/test";
import type { ElementAppPage } from "../../pages/ElementAppPage"; import type { ElementAppPage } from "../../pages/ElementAppPage";
function roomHeaderName(page: Page): Locator { function roomHeaderName(page: Page): Locator {
return page.locator(".mx_LegacyRoomHeader_nametext"); return page.locator(".mx_RoomHeader_heading");
} }
async function startDM(app: ElementAppPage, page: Page, name: string): Promise<void> { async function startDM(app: ElementAppPage, page: Page, name: string): Promise<void> {

View file

@ -252,7 +252,8 @@ test.describe("Threads", () => {
await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached(); await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();
locator = page.getByRole("button", { name: "Threads" }); locator = page.getByRole("button", { name: "Threads" });
await expect(locator).toHaveClass(/mx_LegacyRoomHeader_button--unread/); // User asserts thread list unread indicator await expect(locator).toHaveAttribute("data-indicator", "default"); // User asserts thread list unread indicator
// await expect(locator).toHaveClass(/mx_LegacyRoomHeader_button--unread/);
await locator.click(); // User opens thread list await locator.click(); // User opens thread list
// User asserts thread with correct root & latest events & unread dot // User asserts thread with correct root & latest events & unread dot
@ -495,14 +496,12 @@ test.describe("Threads", () => {
await createThread("Hello again Mr. Bot", "Hello again Mr. User in a thread"); await createThread("Hello again Mr. Bot", "Hello again Mr. User in a thread");
// Open thread panel // Open thread panel
await page.getByTestId("threadsButton").click(); await page.locator(".mx_RoomHeader").getByRole("button", { name: "Threads" }).click();
const threadPanel = page.locator(".mx_ThreadPanel"); const threadPanel = page.locator(".mx_ThreadPanel");
await expect( await expect(
threadPanel.locator(".mx_EventTile_last").getByText("Hello again Mr. User in a thread"), threadPanel.locator(".mx_EventTile_last").getByText("Hello again Mr. User in a thread"),
).toBeVisible(); ).toBeVisible();
// Open threads list
await page.getByTestId("base-card-back-button").click();
const rightPanel = page.locator(".mx_RightPanel"); const rightPanel = page.locator(".mx_RightPanel");
// Check that the threads are listed // Check that the threads are listed
await expect(rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread")).toBeVisible(); await expect(rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread")).toBeVisible();

View file

@ -784,7 +784,7 @@ test.describe("Timeline", () => {
await sendEvent(app.client, room.roomId, true); await sendEvent(app.client, room.roomId, true);
await page.goto(`/#/room/${room.roomId}`); await page.goto(`/#/room/${room.roomId}`);
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Search" }).click(); await app.toggleRoomInfoPanel();
await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill("Message"); await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill("Message");
await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter"); await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter");
@ -809,7 +809,7 @@ test.describe("Timeline", () => {
await page.goto(`/#/room/${room.roomId}`); await page.goto(`/#/room/${room.roomId}`);
// Open a room setting dialog // Open a room setting dialog
await page.getByRole("button", { name: "Room options" }).click(); await app.toggleRoomInfoPanel();
await page.getByRole("menuitem", { name: "Settings" }).click(); await page.getByRole("menuitem", { name: "Settings" }).click();
// Set a room topic to render a TextualEvent // Set a room topic to render a TextualEvent
@ -823,9 +823,6 @@ test.describe("Timeline", () => {
page.getByText(`${OLD_NAME} changed the topic to "This is a room for ${stringToSearch}.".`), page.getByText(`${OLD_NAME} changed the topic to "This is a room for ${stringToSearch}.".`),
).toHaveClass(/mx_TextualEvent/); ).toHaveClass(/mx_TextualEvent/);
// Display the room search bar
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Search" }).click();
// Search the string to display both the message and TextualEvent on search results panel // Search the string to display both the message and TextualEvent on search results panel
await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill(stringToSearch); await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill(stringToSearch);
await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter"); await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter");

View file

@ -171,4 +171,13 @@ export class ElementAppPage {
await spotlight.open(); await spotlight.open();
return spotlight; return spotlight;
} }
/**
* Opens/closes the room info panel
* @returns locator to the right panel
*/
public async toggleRoomInfoPanel(): Promise<Locator> {
await this.page.getByRole("button", { name: "Room info" }).first().click();
return this.page.locator(".mx_RightPanel");
}
} }

View file

@ -91,12 +91,17 @@ export class Settings {
} }
/** /**
* Open room settings (via room header menu), returns a locator to the dialog * Open room settings (via room info panel), returns a locator to the dialog
* @param tab the name of the tab to switch to after opening, optional. * @param tab the name of the tab to switch to after opening, optional.
*/ */
public async openRoomSettings(tab?: string): Promise<Locator> { public async openRoomSettings(tab?: string): Promise<Locator> {
await this.page.getByRole("banner").getByRole("button", { name: "Room options", exact: true }).click(); // Open right panel if not open
await this.page.locator(".mx_RoomTile_contextMenu").getByRole("menuitem", { name: "Settings" }).click(); const rightPanel = this.page.locator(".mx_RightPanel");
if ((await rightPanel.count()) === 0) {
await this.page.getByRole("button", { name: "Room info" }).first().click();
}
await rightPanel.getByRole("menuitem", { name: "Settings" }).click();
if (tab) await this.switchTab(tab); if (tab) await this.switchTab(tab);
return this.page.locator(".mx_Dialog").filter({ has: this.page.locator(".mx_RoomSettingsDialog") }); return this.page.locator(".mx_Dialog").filter({ has: this.page.locator(".mx_RoomSettingsDialog") });
} }

Binary file not shown.

Before

Width:  |  Height:  |  Size: 67 KiB

After

Width:  |  Height:  |  Size: 68 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 63 KiB

After

Width:  |  Height:  |  Size: 57 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.4 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.6 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 4.8 KiB

After

Width:  |  Height:  |  Size: 4.7 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6.7 KiB

After

Width:  |  Height:  |  Size: 6.5 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 6 KiB

After

Width:  |  Height:  |  Size: 4.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 5.8 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 47 KiB

After

Width:  |  Height:  |  Size: 43 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 41 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 42 KiB

After

Width:  |  Height:  |  Size: 38 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 50 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 40 KiB

After

Width:  |  Height:  |  Size: 37 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 57 KiB

After

Width:  |  Height:  |  Size: 52 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 51 KiB

After

Width:  |  Height:  |  Size: 46 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 58 KiB

After

Width:  |  Height:  |  Size: 53 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 52 KiB

After

Width:  |  Height:  |  Size: 47 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 56 KiB

After

Width:  |  Height:  |  Size: 50 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 17 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 37 KiB

After

Width:  |  Height:  |  Size: 34 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 103 KiB

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 102 KiB

After

Width:  |  Height:  |  Size: 93 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 110 KiB

After

Width:  |  Height:  |  Size: 101 KiB

Binary file not shown.

Before

Width:  |  Height:  |  Size: 19 KiB

After

Width:  |  Height:  |  Size: 19 KiB

View file

@ -587,7 +587,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
labsGroup: LabGroup.Rooms, labsGroup: LabGroup.Rooms,
displayName: _td("labs|new_room_decoration_ui"), displayName: _td("labs|new_room_decoration_ui"),
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG, supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
default: false, default: true,
controller: new ReloadOnChangeController(), controller: new ReloadOnChangeController(),
betaInfo: { betaInfo: {
title: _td("labs|new_room_decoration_ui_beta_title"), title: _td("labs|new_room_decoration_ui_beta_title"),

View file

@ -524,35 +524,6 @@ describe("RoomView", () => {
expect(asFragment()).toMatchSnapshot(); expect(asFragment()).toMatchSnapshot();
}); });
describe("Peeking", () => {
beforeEach(() => {
// Make room peekable
room.currentState.setStateEvents([
new MatrixEvent({
type: "m.room.history_visibility",
state_key: "",
content: {
history_visibility: "world_readable",
},
room_id: room.roomId,
}),
]);
});
it("should show forget room button for non-guests", async () => {
mocked(cli.isGuest).mockReturnValue(false);
await mountRoomView();
expect(screen.getByLabelText("Forget room")).toBeInTheDocument();
});
it("should not show forget room button for guests", async () => {
mocked(cli.isGuest).mockReturnValue(true);
await mountRoomView();
expect(screen.queryByLabelText("Forget room")).not.toBeInTheDocument();
});
});
describe("knock rooms", () => { describe("knock rooms", () => {
const client = createTestClient(); const client = createTestClient();

View file

@ -6,45 +6,140 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
class="mx_RoomView mx_RoomView--local" class="mx_RoomView mx_RoomView--local"
> >
<header <header
class="mx_LegacyRoomHeader light-panel" class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
> >
<div <button
class="mx_LegacyRoomHeader_wrapper" aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
> >
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
u
</span>
<div <div
class="mx_LegacyRoomHeader_avatar" class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
> >
<div <div
class="mx_DecoratedRoomAvatar" aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
> >
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
<div
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_mcap2_111"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
<span <span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61" class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3" data-color="3"
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 20px;"
> >
u u
</span> </span>
</div> </div>
2
</div> </div>
<div
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_LegacyRoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
/>
</div> </div>
</header> </header>
<div <div
@ -81,45 +176,140 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
class="mx_RoomView mx_RoomView--local" class="mx_RoomView mx_RoomView--local"
> >
<header <header
class="mx_LegacyRoomHeader light-panel" class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
> >
<div <button
class="mx_LegacyRoomHeader_wrapper" aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
> >
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
u
</span>
<div <div
class="mx_LegacyRoomHeader_avatar" class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
> >
<div <div
class="mx_DecoratedRoomAvatar" aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
> >
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
<div
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_mcap2_111"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
<span <span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61" class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3" data-color="3"
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 20px;"
> >
u u
</span> </span>
</div> </div>
2
</div> </div>
<div
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_LegacyRoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
/>
</div> </div>
</header> </header>
<main <main
@ -241,45 +431,140 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
class="mx_RoomView mx_RoomView--local" class="mx_RoomView mx_RoomView--local"
> >
<header <header
class="mx_LegacyRoomHeader light-panel" class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
> >
<div <button
class="mx_LegacyRoomHeader_wrapper" aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
> >
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
u
</span>
<div <div
class="mx_LegacyRoomHeader_avatar" class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
> >
<div <div
class="mx_DecoratedRoomAvatar" aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
> >
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
<div
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_mcap2_111"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
<span <span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61" class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3" data-color="3"
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 20px;"
> >
u u
</span> </span>
</div> </div>
2
</div> </div>
<div
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_LegacyRoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
/>
</div> </div>
</header> </header>
<main <main
@ -478,52 +763,140 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
class="mx_RoomView mx_RoomView--local" class="mx_RoomView mx_RoomView--local"
> >
<header <header
class="mx_LegacyRoomHeader light-panel" class="mx_Flex mx_RoomHeader light-panel"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-3x);"
> >
<div <button
class="mx_LegacyRoomHeader_wrapper" aria-label="Room info"
class="mx_RoomHeader_infoWrapper"
tabindex="0"
> >
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 40px;"
>
u
</span>
<div <div
class="mx_LegacyRoomHeader_avatar" class="mx_Box mx_RoomHeader_info mx_Box--flex"
style="--mx-box-flex: 1;"
> >
<div <div
class="mx_DecoratedRoomAvatar" aria-level="1"
class="_typography_yh5dq_162 _font-body-lg-semibold_yh5dq_83 mx_RoomHeader_heading"
dir="auto"
role="heading"
> >
<span
class="mx_RoomHeader_truncated mx_lineClamp"
>
@user:example.com
</span>
</div>
</div>
</button>
<div
class="mx_Flex"
style="--mx-flex-display: flex; --mx-flex-direction: row; --mx-flex-align: center; --mx-flex-justify: start; --mx-flex-gap: var(--cpd-space-2x);"
>
<button
aria-disabled="false"
aria-label="Video call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-disabled="false"
aria-label="Voice call"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Room info"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
<button
aria-label="Threads"
class="_icon-button_bh2qc_17"
role="button"
style="--cpd-icon-button-size: 32px;"
tabindex="0"
>
<div
class="_indicator-icon_133tf_26"
style="--cpd-icon-button-size: 100%;"
>
<div />
</div>
</button>
</div>
<div
class="_typography_yh5dq_162 _font-body-sm-medium_yh5dq_50"
>
<div
aria-label="2 members"
class="mx_AccessibleButton mx_FacePile"
role="button"
tabindex="0"
>
<div
class="_stacked-avatars_mcap2_111"
>
<span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="2"
data-testid="avatar-img"
data-type="round"
role="presentation"
style="--cpd-avatar-size: 20px;"
>
u
</span>
<span <span
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61" class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
data-color="3" data-color="3"
data-testid="avatar-img" data-testid="avatar-img"
data-type="round" data-type="round"
role="presentation" role="presentation"
style="--cpd-avatar-size: 24px;" style="--cpd-avatar-size: 20px;"
> >
u u
</span> </span>
</div> </div>
2
</div> </div>
<span
tabindex="0"
>
<div
class="mx_E2EIcon mx_E2EIcon_normal mx_LegacyRoomHeader_icon"
/>
</span>
<div
class="mx_LegacyRoomHeader_name mx_LegacyRoomHeader_name--textonly"
>
<div
aria-level="1"
class="mx_LegacyRoomHeader_nametext"
dir="auto"
role="heading"
title="@user:example.com"
>
@user:example.com
</div>
</div>
<div
class="mx_LegacyRoomHeader_topic mx_RoomTopic"
/>
</div> </div>
</header> </header>
<main <main
@ -715,7 +1088,7 @@ exports[`RoomView should show error view if failed to look up room alias 1`] = `
<DocumentFragment> <DocumentFragment>
<div <div
class="mx_RoomView" class="mx_RoomView"
data-room-header="legacy" data-room-header="new"
> >
<div <div
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog" class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"