Migrate room/* from Cypress to Playwright (#11985)
* Remove old percy media query CSS Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Stabilise soft_logout.spec.ts Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update screenshots using `toMatchScreenshot` assertion with CSS overrides Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Fix accidentally commented test Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Migrate room/* from Cypress to Playwright Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * delint Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Add screenshots Signed-off-by: Michael Telatynski <7t3chguy@gmail.com> * Update labs.ts --------- Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
GitHub
parent
eb6101cc1b
commit
b02ff16a21
14 changed files with 409 additions and 373 deletions
280
playwright/e2e/room/room-header.spec.ts
Normal file
280
playwright/e2e/room/room-header.spec.ts
Normal file
|
|
@ -0,0 +1,280 @@
|
|||
/*
|
||||
Copyright 2023 Suguru Hirahara
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import { Page } from "@playwright/test";
|
||||
|
||||
import { test, expect } from "../../element-web-test";
|
||||
import { ElementAppPage } from "../../pages/ElementAppPage";
|
||||
|
||||
test.describe("Room Header", () => {
|
||||
test.use({
|
||||
displayName: "Sakura",
|
||||
});
|
||||
|
||||
test.describe("with feature_notifications enabled", () => {
|
||||
test.beforeEach(async ({ app }) => {
|
||||
await app.labs.enableLabsFeature("feature_notifications");
|
||||
});
|
||||
|
||||
test("should render default buttons properly", async ({ page, app, user }) => {
|
||||
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",
|
||||
];
|
||||
|
||||
// Assert they are found and visible
|
||||
for (const name of expectedButtonNames) {
|
||||
await expect(header.getByRole("button", { name })).toBeVisible();
|
||||
}
|
||||
|
||||
// Assert that just those seven buttons exist on mx_LegacyRoomHeader by default
|
||||
await expect(header.getByRole("button")).toHaveCount(7);
|
||||
|
||||
await expect(header).toMatchScreenshot("room-header.png");
|
||||
});
|
||||
|
||||
test("should render a very long room name without collapsing the buttons", async ({ page, app, user }) => {
|
||||
const LONG_ROOM_NAME =
|
||||
"Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore " +
|
||||
"et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut " +
|
||||
"aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum " +
|
||||
"dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui " +
|
||||
"officia deserunt mollit anim id est laborum.";
|
||||
|
||||
await app.client.createRoom({ name: LONG_ROOM_NAME });
|
||||
await app.viewRoomByName(LONG_ROOM_NAME);
|
||||
|
||||
const header = page.locator(".mx_LegacyRoomHeader");
|
||||
// Wait until the room name is set
|
||||
await expect(page.locator(".mx_LegacyRoomHeader_nametext").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);
|
||||
for (const button of await buttons.all()) {
|
||||
await expect(button).toBeVisible();
|
||||
await expect(button).toHaveCSS("height", "32px");
|
||||
await expect(button).toHaveCSS("width", "32px");
|
||||
}
|
||||
|
||||
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.beforeEach(async ({ app }) => {
|
||||
await app.labs.enableLabsFeature("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.beforeEach(async ({ app }) => {
|
||||
await app.labs.enableLabsFeature("feature_video_rooms");
|
||||
});
|
||||
|
||||
const createVideoRoom = async (page: Page, app: ElementAppPage) => {
|
||||
await page.locator(".mx_LeftPanel_roomListContainer").getByRole("button", { name: "Add room" }).click();
|
||||
|
||||
await page.getByRole("menuitem", { name: "New video room" }).click();
|
||||
|
||||
await page.getByRole("textbox", { name: "Name" }).type("Test video room");
|
||||
|
||||
await page.getByRole("button", { name: "Create video room" }).click();
|
||||
|
||||
await app.viewRoomByName("Test video room");
|
||||
};
|
||||
|
||||
test("should render buttons for room options, beta pill, invite, chat, and room info", async ({
|
||||
page,
|
||||
app,
|
||||
user,
|
||||
}) => {
|
||||
await app.labs.enableLabsFeature("feature_notifications");
|
||||
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",
|
||||
];
|
||||
|
||||
// Assert they are found and visible
|
||||
for (const name of expectedButtonNames) {
|
||||
await expect(header.getByRole("button", { name })).toBeVisible();
|
||||
}
|
||||
|
||||
// Assert that there is not a button except those buttons
|
||||
await expect(header.getByRole("button")).toHaveCount(7);
|
||||
|
||||
await expect(header).toMatchScreenshot("room-header-video-room.png");
|
||||
});
|
||||
|
||||
test("should render a working chat button which opens the timeline on a right panel", async ({
|
||||
page,
|
||||
app,
|
||||
user,
|
||||
}) => {
|
||||
await createVideoRoom(page, app);
|
||||
|
||||
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Chat" }).click();
|
||||
|
||||
// Assert that the video is rendered
|
||||
await expect(page.locator(".mx_CallView video")).toBeVisible();
|
||||
|
||||
// Assert that GELS is visible
|
||||
await expect(
|
||||
page.locator(".mx_RightPanel .mx_TimelineCard").getByText("Sakura created and configured the room."),
|
||||
).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",
|
||||
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");
|
||||
});
|
||||
});
|
||||
});
|
||||
63
playwright/e2e/room/room.spec.ts
Normal file
63
playwright/e2e/room/room.spec.ts
Normal file
|
|
@ -0,0 +1,63 @@
|
|||
/*
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
Licensed under the Apache License, Version 2.0 (the "License");
|
||||
you may not use this file except in compliance with the License.
|
||||
You may obtain a copy of the License at
|
||||
|
||||
http://www.apache.org/licenses/LICENSE-2.0
|
||||
|
||||
Unless required by applicable law or agreed to in writing, software
|
||||
distributed under the License is distributed on an "AS IS" BASIS,
|
||||
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
See the License for the specific language governing permissions and
|
||||
limitations under the License.
|
||||
*/
|
||||
|
||||
import type { EventType } from "matrix-js-sdk/src/matrix";
|
||||
import { test, expect } from "../../element-web-test";
|
||||
import { Bot } from "../../pages/bot";
|
||||
|
||||
test.describe("Room Directory", () => {
|
||||
test.use({
|
||||
displayName: "Alice",
|
||||
});
|
||||
|
||||
test("should switch between existing dm rooms without a loader", async ({ page, homeserver, app, user }) => {
|
||||
const bob = new Bot(page, homeserver, { displayName: "Bob" });
|
||||
await bob.prepareClient();
|
||||
const charlie = new Bot(page, homeserver, { displayName: "Charlie" });
|
||||
await charlie.prepareClient();
|
||||
|
||||
// create dms with bob and charlie
|
||||
await app.client.evaluate(
|
||||
async (cli, { bob, charlie }) => {
|
||||
const bobRoom = await cli.createRoom({ is_direct: true });
|
||||
const charlieRoom = await cli.createRoom({ is_direct: true });
|
||||
await cli.invite(bobRoom.room_id, bob);
|
||||
await cli.invite(charlieRoom.room_id, charlie);
|
||||
await cli.setAccountData("m.direct" as EventType, {
|
||||
[bob]: [bobRoom.room_id],
|
||||
[charlie]: [charlieRoom.room_id],
|
||||
});
|
||||
},
|
||||
{
|
||||
bob: bob.credentials.userId,
|
||||
charlie: charlie.credentials.userId,
|
||||
},
|
||||
);
|
||||
|
||||
await app.viewRoomByName("Bob");
|
||||
|
||||
// short timeout because loader is only visible for short period
|
||||
// we want to make sure it is never displayed when switching these rooms
|
||||
await expect(page.locator(".mx_RoomPreviewBar_spinnerTitle")).not.toBeVisible({ timeout: 1 });
|
||||
// confirm the room was loaded
|
||||
await expect(page.getByText("Bob joined the room")).toBeVisible();
|
||||
|
||||
await app.viewRoomByName("Charlie");
|
||||
await expect(page.locator(".mx_RoomPreviewBar_spinnerTitle")).not.toBeVisible({ timeout: 1 });
|
||||
// confirm the room was loaded
|
||||
await expect(page.getByText("Charlie joined the room")).toBeVisible();
|
||||
});
|
||||
});
|
||||
Loading…
Add table
Add a link
Reference in a new issue