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
GitHub
parent
25fcd6a65f
commit
bb1b7f1fd0
59 changed files with 595 additions and 397 deletions
|
|
@ -48,7 +48,7 @@ test("Shows the last known page on reload", async ({ pageWithCredentials: page }
|
|||
|
||||
// Check that the room reloaded
|
||||
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 }) => {
|
||||
|
|
|
|||
|
|
@ -108,7 +108,7 @@ test.describe("HTML Export", () => {
|
|||
page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("Testing 9"),
|
||||
).toBeVisible();
|
||||
|
||||
await page.getByRole("button", { name: "Room info" }).click();
|
||||
await app.toggleRoomInfoPanel();
|
||||
await page.getByRole("menuitem", { name: "Export Chat" }).click();
|
||||
|
||||
const downloadPromise = page.waitForEvent("download");
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ test.describe("Create Room", () => {
|
|||
await dialog.getByRole("button", { name: "Create room" }).click();
|
||||
|
||||
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(topic);
|
||||
});
|
||||
|
|
|
|||
|
|
@ -224,7 +224,7 @@ test.describe("Cryptography", function () {
|
|||
await checkDMRoom(page);
|
||||
const bobRoomId = await bobJoin(page, bob);
|
||||
await testMessages(page, bob, bobRoomId);
|
||||
await verify(page, bob);
|
||||
await verify(app, bob);
|
||||
|
||||
// Assert that verified icon is rendered
|
||||
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
|
||||
await createSharedRoomWithUser(app, bob.credentials.userId);
|
||||
await verify(page, bob);
|
||||
await verify(app, bob);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -104,7 +104,7 @@ test.describe("Cryptography", function () {
|
|||
await expect(lastTileE2eIcon).not.toBeVisible();
|
||||
|
||||
/* Now verify Bob */
|
||||
await verify(page, bob);
|
||||
await verify(app, bob);
|
||||
|
||||
/* Existing message should be updated when user is verified. */
|
||||
await expect(last).toContainText("test encrypted 1");
|
||||
|
|
@ -222,7 +222,7 @@ test.describe("Cryptography", function () {
|
|||
await bobSecondDevice.prepareClient();
|
||||
|
||||
// verify Bob
|
||||
await verify(page, bob);
|
||||
await verify(app, bob);
|
||||
|
||||
// bob sends a valid event
|
||||
const testEvent = await bob.sendMessage(testRoomId, "Hoo!");
|
||||
|
|
|
|||
|
|
@ -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
|
||||
* @param client - the client to configure
|
||||
|
|
@ -357,10 +348,11 @@ export async function autoJoin(client: Client) {
|
|||
* @param page - the page to use
|
||||
* @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 roomInfo = await openRoomInfo(page);
|
||||
const roomInfo = await app.toggleRoomInfoPanel();
|
||||
await page.locator(".mx_RightPanelTabs").getByText("People").click();
|
||||
await roomInfo.getByText("Bob").click();
|
||||
await roomInfo.getByRole("button", { name: "Verify" }).click();
|
||||
|
|
|
|||
|
|
@ -38,8 +38,8 @@ test.describe("Image Upload", () => {
|
|||
.locator(".mx_MessageComposer_actions input[type='file']")
|
||||
.setInputFiles("playwright/sample-files/riot.png");
|
||||
|
||||
expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
|
||||
expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
|
||||
expect(page).toMatchScreenshot("image-upload-preview.png");
|
||||
await expect(page.getByRole("button", { name: "Upload" })).toBeEnabled();
|
||||
await expect(page.getByRole("button", { name: "Close dialog" })).toBeEnabled();
|
||||
await expect(page).toMatchScreenshot("image-upload-preview.png");
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -118,8 +118,8 @@ test.describe("Integration Manager: Get OpenID Token", () => {
|
|||
await app.viewRoomByName(ROOM_NAME);
|
||||
});
|
||||
|
||||
test("should successfully obtain an openID token", async ({ page }) => {
|
||||
await openIntegrationManager(page);
|
||||
test("should successfully obtain an openID token", async ({ page, app }) => {
|
||||
await openIntegrationManager(app);
|
||||
await sendActionFromIntegrationManager(page, integrationManagerUrl);
|
||||
|
||||
const iframe = page.frameLocator(`iframe[src*="${integrationManagerUrl}"]`);
|
||||
|
|
|
|||
|
|
@ -167,7 +167,7 @@ test.describe("Integration Manager: Kick", () => {
|
|||
await app.client.inviteUser(room.roomId, targetUser.credentials.userId);
|
||||
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 closeIntegrationManager(page, integrationManagerUrl);
|
||||
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 closeIntegrationManager(page, integrationManagerUrl);
|
||||
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 targetUser.leave(room.roomId);
|
||||
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
|
||||
await closeIntegrationManager(page, integrationManagerUrl);
|
||||
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 app.client.ban(room.roomId, targetUser.credentials.userId);
|
||||
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
|
||||
await closeIntegrationManager(page, integrationManagerUrl);
|
||||
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 }) => {
|
||||
await app.viewRoomByName(ROOM_NAME);
|
||||
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, targetUser.credentials.userId);
|
||||
await closeIntegrationManager(page, integrationManagerUrl);
|
||||
await expectKickedMessage(page, false);
|
||||
|
|
|
|||
|
|
@ -142,7 +142,7 @@ test.describe("Integration Manager: Read Events", () => {
|
|||
|
||||
// Send a state event
|
||||
const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
|
||||
// Read state events
|
||||
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
|
||||
|
|
@ -162,7 +162,7 @@ test.describe("Integration Manager: Read Events", () => {
|
|||
|
||||
// Send a state event
|
||||
const sendEventResponse = await app.client.sendStateEvent(room.roomId, eventType, eventContent, stateKey);
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
|
||||
// Read state events
|
||||
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),
|
||||
]);
|
||||
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
|
||||
// Read state events
|
||||
await sendActionFromIntegrationManager(
|
||||
|
|
@ -217,11 +217,11 @@ test.describe("Integration Manager: Read Events", () => {
|
|||
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 stateKey = "";
|
||||
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
|
||||
// Read state events
|
||||
await sendActionFromIntegrationManager(page, integrationManagerUrl, room.roomId, eventType, stateKey);
|
||||
|
|
|
|||
|
|
@ -137,7 +137,7 @@ test.describe("Integration Manager: Send Event", () => {
|
|||
);
|
||||
|
||||
await app.viewRoomByName(ROOM_NAME);
|
||||
await openIntegrationManager(page);
|
||||
await openIntegrationManager(app);
|
||||
});
|
||||
|
||||
test("should send a state event", async ({ page, app, room }) => {
|
||||
|
|
|
|||
|
|
@ -14,10 +14,11 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
|
||||
import type { Page } from "@playwright/test";
|
||||
import type { ElementAppPage } from "../../pages/ElementAppPage";
|
||||
|
||||
export async function openIntegrationManager(page: Page) {
|
||||
await page.getByRole("button", { name: "Room info" }).click();
|
||||
export async function openIntegrationManager(app: ElementAppPage) {
|
||||
const { page } = app;
|
||||
await app.toggleRoomInfoPanel();
|
||||
await page
|
||||
.locator(".mx_RoomSummaryCard_appsGroup")
|
||||
.getByRole("button", { name: "Add widgets, bridges & bots" })
|
||||
|
|
|
|||
|
|
@ -36,7 +36,7 @@ test.describe("Invite dialog", function () {
|
|||
await expect(page.getByText("Hanako created and configured the room.")).toBeVisible();
|
||||
|
||||
// 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();
|
||||
|
||||
|
|
@ -114,12 +114,9 @@ test.describe("Invite dialog", function () {
|
|||
|
||||
// Assert that the hovered user name on invitation UI does not have background color
|
||||
// TODO: implement the test on room-header.spec.ts
|
||||
const roomHeader = page.locator(".mx_LegacyRoomHeader");
|
||||
await roomHeader.locator(".mx_LegacyRoomHeader_name--textonly").hover();
|
||||
await expect(roomHeader.locator(".mx_LegacyRoomHeader_name--textonly")).toHaveCSS(
|
||||
"background-color",
|
||||
"rgba(0, 0, 0, 0)",
|
||||
);
|
||||
const roomHeader = page.locator(".mx_RoomHeader");
|
||||
await roomHeader.locator(".mx_RoomHeader_heading").hover();
|
||||
await expect(roomHeader.locator(".mx_RoomHeader_heading")).toHaveCSS("background-color", "rgba(0, 0, 0, 0)");
|
||||
|
||||
// Send a message to invite the bots
|
||||
const composer = app.getComposer().locator("[contenteditable]");
|
||||
|
|
|
|||
|
|
@ -31,7 +31,7 @@ test.describe("Create Knock Room", () => {
|
|||
await dialog.getByRole("option", { name: "Ask to join" }).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 roomId = urlHash.replace("#/room/", "");
|
||||
|
|
@ -48,7 +48,7 @@ test.describe("Create Knock Room", () => {
|
|||
await dialog.getByRole("textbox", { name: "Name" }).fill("Cybersecurity");
|
||||
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 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.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 roomId = urlHash.replace("#/room/", "");
|
||||
|
|
|
|||
|
|
@ -78,8 +78,9 @@ test.describe("Lazy Loading", () => {
|
|||
}
|
||||
}
|
||||
|
||||
async function openMemberlist(page: Page): Promise<void> {
|
||||
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Room info" }).click();
|
||||
async function openMemberlist(app: ElementAppPage): Promise<void> {
|
||||
await app.toggleRoomInfoPanel();
|
||||
const { page } = app;
|
||||
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
|
||||
await checkPaginatedDisplayNames(app, charly1to5);
|
||||
|
||||
await openMemberlist(page);
|
||||
await openMemberlist(app);
|
||||
await checkMemberList(page, charly1to5);
|
||||
await joinCharliesWhileAliceIsOffline(page, app, charly6to10);
|
||||
await checkMemberList(page, charly6to10);
|
||||
|
|
|
|||
|
|
@ -35,10 +35,10 @@ test.describe("1:1 chat room", () => {
|
|||
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
|
||||
await page.locator(".mx_LegacyRoomHeader_nametext").getByText(user2.displayName).click();
|
||||
await page.getByRole("menuitem", { name: "Leave" }).click();
|
||||
await app.toggleRoomInfoPanel();
|
||||
await page.getByRole("menuitem", { name: "Leave room" }).click();
|
||||
await page.getByRole("button", { name: "Leave" }).click();
|
||||
|
||||
// wait till the room was left
|
||||
|
|
@ -49,6 +49,6 @@ test.describe("1:1 chat room", () => {
|
|||
|
||||
// open new 1:1 chat room
|
||||
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();
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -14,9 +14,9 @@ See the License for the specific language governing permissions and
|
|||
limitations under the License.
|
||||
*/
|
||||
import { test, expect } from "../../element-web-test";
|
||||
import type { Page } from "@playwright/test";
|
||||
import type { Bot } from "../../pages/bot";
|
||||
import type { Client } from "../../pages/client";
|
||||
import { ElementAppPage } from "../../pages/ElementAppPage";
|
||||
|
||||
test.describe("Poll history", () => {
|
||||
type CreatePollOptions = {
|
||||
|
|
@ -66,8 +66,9 @@ test.describe("Poll history", () => {
|
|||
});
|
||||
};
|
||||
|
||||
async function openPollHistory(page: Page): Promise<void> {
|
||||
await page.getByRole("button", { name: "Room info" }).click();
|
||||
async function openPollHistory(app: ElementAppPage): Promise<void> {
|
||||
const { page } = app;
|
||||
await app.toggleRoomInfoPanel();
|
||||
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 endPoll(bot, roomId, pollId2);
|
||||
|
||||
await openPollHistory(page);
|
||||
await openPollHistory(app);
|
||||
|
||||
// these polls are also in the timeline
|
||||
// focus on the poll history dialog
|
||||
|
|
|
|||
|
|
@ -59,7 +59,7 @@ test.describe("Presence tests", () => {
|
|||
);
|
||||
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 expect(page.locator(".mx_EntityTile_unreachable")).toContainText("Bob");
|
||||
await expect(page.locator(".mx_EntityTile_unreachable")).toContainText("User's server unreachable");
|
||||
|
|
|
|||
|
|
@ -402,7 +402,7 @@ class Helpers {
|
|||
* Close the threads panel.
|
||||
*/
|
||||
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();
|
||||
}
|
||||
|
||||
|
|
@ -410,7 +410,7 @@ class Helpers {
|
|||
* Return to the list of threads, given we are viewing a single thread.
|
||||
*/
|
||||
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.
|
||||
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 isThreadPanelOpen = (await threadPanel.count()) !== 0;
|
||||
if (!isThreadPanelOpen) {
|
||||
await this.page.locator(".mx_RoomHeader").getByLabel("Threads").click();
|
||||
}
|
||||
await expect(threadPanel).toBeVisible();
|
||||
await threadPanel.evaluate(($panel) => {
|
||||
const $button = $panel.querySelector<HTMLElement>('[data-testid="base-card-back-button"]');
|
||||
|
|
|
|||
|
|
@ -63,9 +63,9 @@ test.describe("RightPanel", () => {
|
|||
await app.closeDialog();
|
||||
|
||||
// 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 page.getByRole("button", { name: "Room info" }).click();
|
||||
await app.toggleRoomInfoPanel();
|
||||
|
||||
await expect(page.locator(".mx_RightPanel")).toMatchScreenshot("with-name-and-address.png");
|
||||
});
|
||||
|
|
|
|||
|
|
@ -20,7 +20,7 @@ import { ElementAppPage } from "../../pages/ElementAppPage";
|
|||
|
||||
export async function viewRoomSummaryByName(page: Page, app: ElementAppPage, name: string): Promise<void> {
|
||||
await app.viewRoomByName(name);
|
||||
await page.getByRole("button", { name: "Room info" }).click();
|
||||
await app.toggleRoomInfoPanel();
|
||||
return checkRoomSummaryCard(page, name);
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -18,7 +18,6 @@ import { Page } from "@playwright/test";
|
|||
|
||||
import { test, expect } from "../../element-web-test";
|
||||
import { ElementAppPage } from "../../pages/ElementAppPage";
|
||||
import type { Container } from "../../../src/stores/widgets/types";
|
||||
|
||||
test.describe("Room Header", () => {
|
||||
test.use({
|
||||
|
|
@ -33,24 +32,28 @@ test.describe("Room Header", () => {
|
|||
await app.client.createRoom({ name: "Test Room" });
|
||||
await app.viewRoomByName("Test Room");
|
||||
|
||||
const header = page.locator(".mx_LegacyRoomHeader");
|
||||
// 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",
|
||||
];
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
|
||||
// Assert they are found and visible
|
||||
for (const name of expectedButtonNames) {
|
||||
await expect(header.getByRole("button", { name })).toBeVisible();
|
||||
}
|
||||
// There's two room info button - the header itself and the i button
|
||||
const infoButtons = header.getByRole("button", { name: "Room info" });
|
||||
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).toMatchScreenshot("room-header.png");
|
||||
|
|
@ -67,14 +70,15 @@ test.describe("Room Header", () => {
|
|||
await app.client.createRoom({ name: 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
|
||||
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
|
||||
// Note these assertions do not check the size of mx_LegacyRoomHeader_name button
|
||||
const buttons = page.locator(".mx_LegacyRoomHeader_button");
|
||||
await expect(buttons).toHaveCount(6);
|
||||
const buttons = header.locator(".mx_Flex").getByRole("button");
|
||||
await expect(buttons).toHaveCount(5);
|
||||
|
||||
for (const button of await buttons.all()) {
|
||||
await expect(button).toBeVisible();
|
||||
await expect(button).toHaveCSS("height", "32px");
|
||||
|
|
@ -83,44 +87,6 @@ test.describe("Room Header", () => {
|
|||
|
||||
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", () => {
|
||||
|
|
@ -141,30 +107,27 @@ test.describe("Room Header", () => {
|
|||
test.describe("and with feature_notifications enabled", () => {
|
||||
test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });
|
||||
|
||||
test("should render buttons for room options, beta pill, invite, chat, and room info", async ({
|
||||
page,
|
||||
app,
|
||||
user,
|
||||
}) => {
|
||||
test("should render buttons for chat, room info, threads and facepile", async ({ page, app, user }) => {
|
||||
await createVideoRoom(page, app);
|
||||
|
||||
const header = page.locator(".mx_LegacyRoomHeader");
|
||||
// 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",
|
||||
];
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
|
||||
// Assert they are found and visible
|
||||
for (const name of expectedButtonNames) {
|
||||
await expect(header.getByRole("button", { name })).toBeVisible();
|
||||
}
|
||||
// There's two room info button - the header itself and the i button
|
||||
const infoButtons = header.getByRole("button", { name: "Room info" });
|
||||
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
|
||||
await expect(header.getByRole("button")).toHaveCount(7);
|
||||
await expect(header.getByRole("button")).toHaveCount(6);
|
||||
|
||||
await expect(header).toMatchScreenshot("room-header-video-room.png");
|
||||
});
|
||||
|
|
@ -177,7 +140,7 @@ test.describe("Room Header", () => {
|
|||
}) => {
|
||||
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
|
||||
await expect(page.locator(".mx_CallView")).toBeVisible();
|
||||
|
|
@ -188,114 +151,4 @@ test.describe("Room Header", () => {
|
|||
).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");
|
||||
});
|
||||
});
|
||||
});
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@ import type { Locator, Page } from "@playwright/test";
|
|||
import type { ElementAppPage } from "../../pages/ElementAppPage";
|
||||
|
||||
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> {
|
||||
|
|
|
|||
|
|
@ -252,7 +252,8 @@ test.describe("Threads", () => {
|
|||
await expect(locator.locator(".mx_ThreadSummary_content").getByText("How are things?")).toBeAttached();
|
||||
|
||||
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
|
||||
|
||||
// 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");
|
||||
|
||||
// Open thread panel
|
||||
await page.getByTestId("threadsButton").click();
|
||||
await page.locator(".mx_RoomHeader").getByRole("button", { name: "Threads" }).click();
|
||||
const threadPanel = page.locator(".mx_ThreadPanel");
|
||||
await expect(
|
||||
threadPanel.locator(".mx_EventTile_last").getByText("Hello again Mr. User in a thread"),
|
||||
).toBeVisible();
|
||||
|
||||
// Open threads list
|
||||
await page.getByTestId("base-card-back-button").click();
|
||||
const rightPanel = page.locator(".mx_RightPanel");
|
||||
// Check that the threads are listed
|
||||
await expect(rightPanel.locator(".mx_EventTile").getByText("Hello Mr. User in a thread")).toBeVisible();
|
||||
|
|
|
|||
|
|
@ -784,7 +784,7 @@ test.describe("Timeline", () => {
|
|||
await sendEvent(app.client, room.roomId, true);
|
||||
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").press("Enter");
|
||||
|
|
@ -809,7 +809,7 @@ test.describe("Timeline", () => {
|
|||
await page.goto(`/#/room/${room.roomId}`);
|
||||
|
||||
// Open a room setting dialog
|
||||
await page.getByRole("button", { name: "Room options" }).click();
|
||||
await app.toggleRoomInfoPanel();
|
||||
await page.getByRole("menuitem", { name: "Settings" }).click();
|
||||
|
||||
// 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}.".`),
|
||||
).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
|
||||
await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").fill(stringToSearch);
|
||||
await page.locator(".mx_RoomSummaryCard_search").getByRole("searchbox").press("Enter");
|
||||
|
|
|
|||
|
|
@ -171,4 +171,13 @@ export class ElementAppPage {
|
|||
await spotlight.open();
|
||||
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");
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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.
|
||||
*/
|
||||
public async openRoomSettings(tab?: string): Promise<Locator> {
|
||||
await this.page.getByRole("banner").getByRole("button", { name: "Room options", exact: true }).click();
|
||||
await this.page.locator(".mx_RoomTile_contextMenu").getByRole("menuitem", { name: "Settings" }).click();
|
||||
// Open right panel if not open
|
||||
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);
|
||||
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: 6.7 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 |
|
|
@ -587,7 +587,7 @@ export const SETTINGS: { [setting: string]: ISetting } = {
|
|||
labsGroup: LabGroup.Rooms,
|
||||
displayName: _td("labs|new_room_decoration_ui"),
|
||||
supportedLevels: LEVELS_DEVICE_ONLY_SETTINGS_WITH_CONFIG,
|
||||
default: false,
|
||||
default: true,
|
||||
controller: new ReloadOnChangeController(),
|
||||
betaInfo: {
|
||||
title: _td("labs|new_room_decoration_ui_beta_title"),
|
||||
|
|
|
|||
|
|
@ -524,35 +524,6 @@ describe("RoomView", () => {
|
|||
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", () => {
|
||||
const client = createTestClient();
|
||||
|
||||
|
|
|
|||
|
|
@ -6,16 +6,13 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
|
|||
class="mx_RoomView mx_RoomView--local"
|
||||
>
|
||||
<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
|
||||
class="mx_LegacyRoomHeader_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_LegacyRoomHeader_avatar"
|
||||
>
|
||||
<div
|
||||
class="mx_DecoratedRoomAvatar"
|
||||
<button
|
||||
aria-label="Room info"
|
||||
class="mx_RoomHeader_infoWrapper"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
||||
|
|
@ -23,28 +20,126 @@ exports[`RoomView for a local room in state CREATING should match the snapshot 1
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
style="--cpd-avatar-size: 40px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||||
style="--mx-box-flex: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
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: 20px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
</div>
|
||||
2
|
||||
</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>
|
||||
</header>
|
||||
<div
|
||||
|
|
@ -81,16 +176,13 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
|
|||
class="mx_RoomView mx_RoomView--local"
|
||||
>
|
||||
<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
|
||||
class="mx_LegacyRoomHeader_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_LegacyRoomHeader_avatar"
|
||||
>
|
||||
<div
|
||||
class="mx_DecoratedRoomAvatar"
|
||||
<button
|
||||
aria-label="Room info"
|
||||
class="mx_RoomHeader_infoWrapper"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
||||
|
|
@ -98,28 +190,126 @@ exports[`RoomView for a local room in state ERROR should match the snapshot 1`]
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
style="--cpd-avatar-size: 40px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||||
style="--mx-box-flex: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
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: 20px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
</div>
|
||||
2
|
||||
</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>
|
||||
</header>
|
||||
<main
|
||||
|
|
@ -241,16 +431,13 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
|
|||
class="mx_RoomView mx_RoomView--local"
|
||||
>
|
||||
<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
|
||||
class="mx_LegacyRoomHeader_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_LegacyRoomHeader_avatar"
|
||||
>
|
||||
<div
|
||||
class="mx_DecoratedRoomAvatar"
|
||||
<button
|
||||
aria-label="Room info"
|
||||
class="mx_RoomHeader_infoWrapper"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
||||
|
|
@ -258,28 +445,126 @@ exports[`RoomView for a local room in state NEW should match the snapshot 1`] =
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
style="--cpd-avatar-size: 40px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||||
style="--mx-box-flex: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
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: 20px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
</div>
|
||||
2
|
||||
</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>
|
||||
</header>
|
||||
<main
|
||||
|
|
@ -478,16 +763,13 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
class="mx_RoomView mx_RoomView--local"
|
||||
>
|
||||
<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
|
||||
class="mx_LegacyRoomHeader_wrapper"
|
||||
>
|
||||
<div
|
||||
class="mx_LegacyRoomHeader_avatar"
|
||||
>
|
||||
<div
|
||||
class="mx_DecoratedRoomAvatar"
|
||||
<button
|
||||
aria-label="Room info"
|
||||
class="mx_RoomHeader_infoWrapper"
|
||||
tabindex="0"
|
||||
>
|
||||
<span
|
||||
class="_avatar_mcap2_17 mx_BaseAvatar _avatar-imageless_mcap2_61"
|
||||
|
|
@ -495,35 +777,126 @@ exports[`RoomView for a local room in state NEW that is encrypted should match t
|
|||
data-testid="avatar-img"
|
||||
data-type="round"
|
||||
role="presentation"
|
||||
style="--cpd-avatar-size: 24px;"
|
||||
style="--cpd-avatar-size: 40px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
<div
|
||||
class="mx_Box mx_RoomHeader_info mx_Box--flex"
|
||||
style="--mx-box-flex: 1;"
|
||||
>
|
||||
<div
|
||||
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
|
||||
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: 20px;"
|
||||
>
|
||||
u
|
||||
</span>
|
||||
</div>
|
||||
2
|
||||
</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>
|
||||
</header>
|
||||
<main
|
||||
|
|
@ -715,7 +1088,7 @@ exports[`RoomView should show error view if failed to look up room alias 1`] = `
|
|||
<DocumentFragment>
|
||||
<div
|
||||
class="mx_RoomView"
|
||||
data-room-header="legacy"
|
||||
data-room-header="new"
|
||||
>
|
||||
<div
|
||||
class="mx_RoomPreviewBar mx_RoomPreviewBar_RoomNotFound mx_RoomPreviewBar_dialog"
|
||||
|
|
|
|||
Loading…
Reference in a new issue