Skip to content
This repository was archived by the owner on Sep 11, 2024. It is now read-only.

Commit caee365

Browse files
MidhunSureshRMidhunSureshR
committed
Update room header tests to make sense with the new header
1 parent 2602471 commit caee365

File tree

1 file changed

+44
-191
lines changed

1 file changed

+44
-191
lines changed

‎playwright/e2e/room/room-header.spec.ts‎

Lines changed: 44 additions & 191 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,6 @@ import { Page } from "@playwright/test";
1818

1919
import { test, expect } from "../../element-web-test";
2020
import { ElementAppPage } from "../../pages/ElementAppPage";
21-
import type { Container } from "../../../src/stores/widgets/types";
2221

2322
test.describe("Room Header", () => {
2423
test.use({
@@ -33,24 +32,28 @@ test.describe("Room Header", () => {
3332
await app.client.createRoom({ name: "Test Room" });
3433
await app.viewRoomByName("Test Room");
3534

36-
const header = page.locator(".mx_LegacyRoomHeader");
37-
// Names (aria-label) of every button rendered on mx_LegacyRoomHeader by default
38-
const expectedButtonNames = [
39-
"Room options", // The room name button next to the room avatar, which renders dropdown menu on click
40-
"Voice call",
41-
"Video call",
42-
"Search",
43-
"Threads",
44-
"Notifications",
45-
"Room info",
46-
];
47-
48-
// Assert they are found and visible
49-
for (const name of expectedButtonNames) {
50-
await expect(header.getByRole("button", { name })).toBeVisible();
51-
}
35+
const header = page.locator(".mx_RoomHeader");
36+
37+
// There's two room info button - the header itself and the i button
38+
const infoButtons = header.getByRole("button", { name: "Room info" });
39+
await expect(infoButtons).toHaveCount(2);
40+
await expect(infoButtons.first()).toBeVisible();
41+
await expect(infoButtons.last()).toBeVisible();
42+
43+
// Memberlist button
44+
await expect(header.locator(".mx_FacePile")).toBeVisible();
5245

53-
// Assert that just those seven buttons exist on mx_LegacyRoomHeader by default
46+
// There should be both a voice and a video call button
47+
// but they'll be disabled
48+
const callButtons = header.getByRole("button", { name: "There's no one here to call" });
49+
await expect(callButtons).toHaveCount(2);
50+
await expect(callButtons.first()).toBeVisible();
51+
await expect(callButtons.last()).toBeVisible();
52+
53+
await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
54+
await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
55+
56+
// Assert that there are six buttons in total
5457
await expect(header.getByRole("button")).toHaveCount(7);
5558

5659
await expect(header).toMatchScreenshot("room-header.png");
@@ -67,14 +70,15 @@ test.describe("Room Header", () => {
6770
await app.client.createRoom({ name: LONG_ROOM_NAME });
6871
await app.viewRoomByName(LONG_ROOM_NAME);
6972

70-
const header = page.locator(".mx_LegacyRoomHeader");
73+
const header = page.locator(".mx_RoomHeader");
7174
// Wait until the room name is set
72-
await expect(page.locator(".mx_LegacyRoomHeader_nametext").getByText(LONG_ROOM_NAME)).toBeVisible();
75+
await expect(page.locator(".mx_RoomHeader_heading").getByText(LONG_ROOM_NAME)).toBeVisible();
7376

7477
// Assert the size of buttons on RoomHeader are specified and the buttons are not compressed
7578
// Note these assertions do not check the size of mx_LegacyRoomHeader_name button
76-
const buttons = page.locator(".mx_LegacyRoomHeader_button");
77-
await expect(buttons).toHaveCount(6);
79+
const buttons = header.locator(".mx_Flex").getByRole("button");
80+
await expect(buttons).toHaveCount(5);
81+
7882
for (const button of await buttons.all()) {
7983
await expect(button).toBeVisible();
8084
await expect(button).toHaveCSS("height", "32px");
@@ -83,44 +87,6 @@ test.describe("Room Header", () => {
8387

8488
await expect(header).toMatchScreenshot("room-header-long-name.png");
8589
});
86-
87-
test("should have buttons highlighted by being clicked", async ({ page, app, user }) => {
88-
await app.client.createRoom({ name: "Test Room" });
89-
await app.viewRoomByName("Test Room");
90-
91-
const header = page.locator(".mx_LegacyRoomHeader");
92-
// Check these buttons
93-
const buttonsHighlighted = ["Threads", "Notifications", "Room info"];
94-
95-
for (const name of buttonsHighlighted) {
96-
await header.getByRole("button", { name: name }).click(); // Highlight the button
97-
}
98-
99-
await expect(header).toMatchScreenshot("room-header-highlighted.png");
100-
});
101-
});
102-
103-
test.describe("with feature_pinning enabled", () => {
104-
test.use({ labsFlags: ["feature_pinning"] });
105-
106-
test("should render the pin button for pinned messages card", async ({ page, app, user }) => {
107-
await app.client.createRoom({ name: "Test Room" });
108-
await app.viewRoomByName("Test Room");
109-
110-
const composer = app.getComposer().locator("[contenteditable]");
111-
await composer.fill("Test message");
112-
await composer.press("Enter");
113-
114-
const lastTile = page.locator(".mx_EventTile_last");
115-
await lastTile.hover();
116-
await lastTile.getByRole("button", { name: "Options" }).click();
117-
118-
await page.getByRole("menuitem", { name: "Pin" }).click();
119-
120-
await expect(
121-
page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Pinned messages" }),
122-
).toBeVisible();
123-
});
12490
});
12591

12692
test.describe("with a video room", () => {
@@ -141,30 +107,27 @@ test.describe("Room Header", () => {
141107
test.describe("and with feature_notifications enabled", () => {
142108
test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });
143109

144-
test("should render buttons for room options, beta pill, invite, chat, and room info", async ({
145-
page,
146-
app,
147-
user,
148-
}) => {
110+
test("should render buttons for chat, room info, threads and facepile", async ({ page, app, user }) => {
149111
await createVideoRoom(page, app);
150112

151-
const header = page.locator(".mx_LegacyRoomHeader");
152-
// Names (aria-label) of the buttons on the video room header
153-
const expectedButtonNames = [
154-
"Room options",
155-
"Video rooms are a beta feature Click for more info", // Beta pill
156-
"Invite",
157-
"Chat",
158-
"Room info",
159-
];
160-
161-
// Assert they are found and visible
162-
for (const name of expectedButtonNames) {
163-
await expect(header.getByRole("button", { name })).toBeVisible();
164-
}
113+
const header = page.locator(".mx_RoomHeader");
114+
115+
// There's two room info button - the header itself and the i button
116+
const infoButtons = header.getByRole("button", { name: "Room info" });
117+
await expect(infoButtons).toHaveCount(2);
118+
await expect(infoButtons.first()).toBeVisible();
119+
await expect(infoButtons.last()).toBeVisible();
120+
121+
// Facepile
122+
await expect(header.locator(".mx_FacePile")).toBeVisible();
123+
124+
// Chat, Threads and Notification buttons
125+
await expect(header.getByRole("button", { name: "Chat" })).toBeVisible();
126+
await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
127+
await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
165128

166129
// Assert that there is not a button except those buttons
167-
await expect(header.getByRole("button")).toHaveCount(7);
130+
await expect(header.getByRole("button")).toHaveCount(6);
168131

169132
await expect(header).toMatchScreenshot("room-header-video-room.png");
170133
});
@@ -177,7 +140,7 @@ test.describe("Room Header", () => {
177140
}) => {
178141
await createVideoRoom(page, app);
179142

180-
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Chat" }).click();
143+
await page.locator(".mx_RoomHeader").getByRole("button", { name: "Chat" }).click();
181144

182145
// Assert that the call view is still visible
183146
await expect(page.locator(".mx_CallView")).toBeVisible();
@@ -188,114 +151,4 @@ test.describe("Room Header", () => {
188151
).toBeVisible();
189152
});
190153
});
191-
192-
test.describe("with a widget", () => {
193-
const ROOM_NAME = "Test Room with a widget";
194-
const WIDGET_ID = "fake-widget";
195-
const WIDGET_HTML = `
196-
<html lang="en">
197-
<head>
198-
<title>Fake Widget</title>
199-
</head>
200-
<body>
201-
Hello World
202-
</body>
203-
</html>
204-
`;
205-
206-
test.beforeEach(async ({ page, app, user, webserver }) => {
207-
const widgetUrl = webserver.start(WIDGET_HTML);
208-
const roomId = await app.client.createRoom({ name: ROOM_NAME });
209-
210-
// setup widget via state event
211-
await app.client.evaluate(
212-
async (matrixClient, { roomId, widgetUrl, id }) => {
213-
await matrixClient.sendStateEvent(
214-
roomId,
215-
"im.vector.modular.widgets",
216-
{
217-
id,
218-
creatorUserId: "somebody",
219-
type: "widget",
220-
name: "widget",
221-
url: widgetUrl,
222-
},
223-
id,
224-
);
225-
await matrixClient.sendStateEvent(
226-
roomId,
227-
"io.element.widgets.layout",
228-
{
229-
widgets: {
230-
[id]: {
231-
container: "top" as Container,
232-
index: 1,
233-
width: 100,
234-
height: 0,
235-
},
236-
},
237-
},
238-
"",
239-
);
240-
},
241-
{
242-
roomId,
243-
widgetUrl,
244-
id: WIDGET_ID,
245-
},
246-
);
247-
248-
// open the room
249-
await app.viewRoomByName(ROOM_NAME);
250-
});
251-
252-
test("should highlight the apps button", async ({ page, app, user }) => {
253-
// Assert that AppsDrawer is rendered
254-
await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
255-
256-
const header = page.locator(".mx_LegacyRoomHeader");
257-
// Assert that "Hide Widgets" button is rendered and aria-checked is set to true
258-
await expect(header.getByRole("button", { name: "Hide Widgets" })).toHaveAttribute("aria-checked", "true");
259-
260-
await expect(header).toMatchScreenshot("room-header-with-apps-button-highlighted.png");
261-
});
262-
263-
test("should support hiding a widget", async ({ page, app, user }) => {
264-
await expect(page.locator(".mx_AppsDrawer")).toBeVisible();
265-
266-
const header = page.locator(".mx_LegacyRoomHeader");
267-
// Click the apps button to hide AppsDrawer
268-
await header.getByRole("button", { name: "Hide Widgets" }).click();
269-
270-
// Assert that "Show widgets" button is rendered and aria-checked is set to false
271-
await expect(header.getByRole("button", { name: "Show Widgets" })).toHaveAttribute("aria-checked", "false");
272-
273-
// Assert that AppsDrawer is not rendered
274-
await expect(page.locator(".mx_AppsDrawer")).not.toBeVisible();
275-
276-
await expect(header).toMatchScreenshot("room-header-with-apps-button-not-highlighted.png");
277-
});
278-
});
279-
280-
test.describe("with encryption", () => {
281-
test("should render the E2E icon and the buttons", async ({ page, app, user }) => {
282-
// Create an encrypted room
283-
await app.client.createRoom({
284-
name: "Test Encrypted Room",
285-
initial_state: [
286-
{
287-
type: "m.room.encryption",
288-
state_key: "",
289-
content: {
290-
algorithm: "m.megolm.v1.aes-sha2",
291-
},
292-
},
293-
],
294-
});
295-
await app.viewRoomByName("Test Encrypted Room");
296-
297-
const header = page.locator(".mx_LegacyRoomHeader");
298-
await expect(header).toMatchScreenshot("encrypted-room-header.png");
299-
});
300-
});
301154
});

0 commit comments

Comments
 (0)