mv element.io @types __mocks__/ debian docker module_system/ playwright res src test webapp Dockerfile .dockerignore .eslintignore .stylelintrc.cjs babel.config.cjs recorder-worklet-loader.cjs .modernizr.json components.json config.json config.sample.json package.json project.json tsconfig.json tsconfig.module_system.json jest.config.ts playwright.config.ts webpack.config.ts build_config.sample.yaml apps/web/
mkdir apps/web/scripts
mv scripts/{cleanup.sh,ci_package.sh,copy-res.ts,deploy.py,package.sh} apps/web/scripts
And a couple of gitignore tweaks
Signed-off-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
Michael Telatynski
@@ -0,0 +1,227 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022, 2023 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { type Page } from "@playwright/test";
|
||||
|
||||
import { SettingLevel } from "../../../src/settings/SettingLevel";
|
||||
import { UIFeature } from "../../../src/settings/UIFeature";
|
||||
import { test, expect } from "../../element-web-test";
|
||||
|
||||
const name = "Test room";
|
||||
const topic = "A decently explanatory topic for a test room.";
|
||||
|
||||
test.describe("Create Room", () => {
|
||||
test.use({ displayName: "Jim" });
|
||||
|
||||
test(
|
||||
"should create a public room with name, topic & address set",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, user, app, axe }) => {
|
||||
const dialog = await app.openCreateRoomDialog();
|
||||
// Fill name & topic
|
||||
await dialog.getByRole("textbox", { name: "Name" }).fill(name);
|
||||
await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
|
||||
// Change room to public
|
||||
await dialog.getByRole("button", { name: "Room visibility" }).click();
|
||||
await dialog.getByRole("option", { name: "Public room" }).click();
|
||||
// Fill room address
|
||||
await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-standard");
|
||||
|
||||
axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
|
||||
await expect(axe).toHaveNoViolations();
|
||||
// Snapshot it
|
||||
// Mask topic to avoid flakiness with top border
|
||||
await expect(dialog).toMatchScreenshot("create-room.png", {
|
||||
mask: [dialog.locator(".mx_CreateRoomDialog_topic")],
|
||||
});
|
||||
|
||||
// Submit
|
||||
await dialog.getByRole("button", { name: "Create room" }).click();
|
||||
|
||||
await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-standard:${user.homeServer}`));
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
await expect(header).toContainText(name);
|
||||
},
|
||||
);
|
||||
|
||||
test("should allow us to start a chat and show encryption state", async ({ page, user, app }) => {
|
||||
await page.getByRole("button", { name: "New conversation", exact: true }).click();
|
||||
await page.getByRole("menuitem", { name: "Start chat" }).click();
|
||||
|
||||
await page.getByTestId("invite-dialog-input").fill(user.userId);
|
||||
|
||||
await page.getByRole("button", { name: "Go" }).click();
|
||||
|
||||
await expect(page.getByText("Encryption enabled")).toBeVisible();
|
||||
await expect(page.getByText("Send your first message to")).toBeVisible();
|
||||
|
||||
const composer = page.getByRole("region", { name: "Message composer" });
|
||||
await expect(composer.getByRole("textbox", { name: "Send a message…" })).toBeVisible();
|
||||
});
|
||||
|
||||
test("should create a video room", { tag: "@screenshot" }, async ({ page, user, app }) => {
|
||||
await app.settings.setValue("feature_video_rooms", null, SettingLevel.DEVICE, true);
|
||||
|
||||
const dialog = await app.openCreateRoomDialog("New video room");
|
||||
// Fill name & topic
|
||||
await dialog.getByRole("textbox", { name: "Name" }).fill(name);
|
||||
await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
|
||||
// Change room to public
|
||||
await dialog.getByRole("button", { name: "Room visibility" }).click();
|
||||
await dialog.getByRole("option", { name: "Public room" }).click();
|
||||
// Fill room address
|
||||
await dialog.getByRole("textbox", { name: "Room address" }).fill("test-create-room-video");
|
||||
// Snapshot it
|
||||
// Mask topic to avoid flakiness with top border
|
||||
await expect(dialog).toMatchScreenshot("create-video-room.png", {
|
||||
mask: [dialog.locator(".mx_CreateRoomDialog_topic")],
|
||||
});
|
||||
|
||||
// Submit
|
||||
await dialog.getByRole("button", { name: "Create video room" }).click();
|
||||
|
||||
await expect(page).toHaveURL(new RegExp(`/#/room/#test-create-room-video:${user.homeServer}`));
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
await expect(header).toContainText(name);
|
||||
});
|
||||
|
||||
test.describe("Should hide public room option if not allowed", () => {
|
||||
test.use({
|
||||
config: {
|
||||
setting_defaults: {
|
||||
[UIFeature.AllowCreatingPublicRooms]: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
test("should disallow creating public rooms", { tag: "@screenshot" }, async ({ page, user, app, axe }) => {
|
||||
const dialog = await app.openCreateRoomDialog();
|
||||
// Fill name & topic
|
||||
await dialog.getByRole("textbox", { name: "Name" }).fill(name);
|
||||
await dialog.getByRole("textbox", { name: "Topic" }).fill(topic);
|
||||
|
||||
axe.disableRules("color-contrast"); // XXX: Inheriting colour contrast issues from room view.
|
||||
await expect(axe).toHaveNoViolations();
|
||||
// Snapshot it
|
||||
// Mask topic to avoid flakiness with top border
|
||||
await expect(dialog).toMatchScreenshot("create-room-no-public.png", {
|
||||
mask: [dialog.locator(".mx_CreateRoomDialog_topic")],
|
||||
});
|
||||
|
||||
// Submit
|
||||
await dialog.getByRole("button", { name: "Create room" }).click();
|
||||
|
||||
await expect(page).toHaveURL(new RegExp(`/#/room/!.+`));
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
await expect(header).toContainText(name);
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("when the encrypted state labs flag is turned off", () => {
|
||||
test.use({ labsFlags: [] });
|
||||
|
||||
test("creates a room without encrypted state", { tag: "@screenshot" }, async ({ page, user: _user }) => {
|
||||
// When we start to create a room
|
||||
await page.getByRole("button", { name: "New conversation", exact: true }).click();
|
||||
await page.getByRole("menuitem", { name: "New room" }).click();
|
||||
await page.getByRole("textbox", { name: "Name" }).fill(name);
|
||||
|
||||
// Then there is no Encrypt state events button
|
||||
await expect(page.getByRole("checkbox", { name: "Encrypt state events" })).not.toBeVisible();
|
||||
|
||||
// And when we create the room
|
||||
await page.getByRole("button", { name: "Create room" }).click();
|
||||
|
||||
// Then we created a normal encrypted room, without encrypted state
|
||||
await expect(page.getByText("Encryption enabled")).toBeVisible();
|
||||
await expect(page.getByText("State encryption enabled")).not.toBeVisible();
|
||||
|
||||
// And the room name state event is not encrypted
|
||||
await viewSourceOnRoomNameEvent(page);
|
||||
await expect(page.getByText("Original event source")).toBeVisible();
|
||||
await expect(page.getByText("Decrypted event source")).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("when the encrypted state labs flag is turned on", () => {
|
||||
test.use({ labsFlags: ["feature_msc4362_encrypted_state_events"] });
|
||||
|
||||
test(
|
||||
"creates a room with encrypted state if we check the box",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, user: _user }) => {
|
||||
// Given we check the Encrypted State checkbox
|
||||
await page.getByRole("button", { name: "New conversation", exact: true }).click();
|
||||
await page.getByRole("menuitem", { name: "New room" }).click();
|
||||
await expect(page.getByRole("switch", { name: "Enable end-to-end encryption" })).toBeChecked();
|
||||
await page.getByRole("switch", { name: "Encrypt state events" }).click();
|
||||
await expect(page.getByRole("switch", { name: "Encrypt state events" })).toBeChecked();
|
||||
|
||||
// When we create a room
|
||||
await page.getByRole("textbox", { name: "Name" }).fill(name);
|
||||
await page.getByRole("button", { name: "Create room" }).click();
|
||||
|
||||
// Then we created an encrypted state room
|
||||
await expect(page.getByText("State encryption enabled")).toBeVisible();
|
||||
|
||||
// And it has the correct name
|
||||
await expect(page.getByTestId("timeline").getByRole("heading", { name })).toBeVisible();
|
||||
|
||||
// And the room name state event is encrypted
|
||||
await viewSourceOnRoomNameEvent(page);
|
||||
await expect(page.getByText("Decrypted event source")).toBeVisible();
|
||||
},
|
||||
);
|
||||
|
||||
test(
|
||||
"creates a room without encrypted state if we don't check the box",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, user: _user }) => {
|
||||
// Given we did not check the Encrypted State checkbox
|
||||
await page.getByRole("button", { name: "New conversation", exact: true }).click();
|
||||
await page.getByRole("menuitem", { name: "New room" }).click();
|
||||
await expect(page.getByRole("switch", { name: "Enable end-to-end encryption" })).toBeChecked();
|
||||
|
||||
// And it is off by default
|
||||
await expect(page.getByRole("switch", { name: "Encrypt state events" })).not.toBeChecked();
|
||||
|
||||
// When we create a room
|
||||
await page.getByRole("textbox", { name: "Name" }).fill(name);
|
||||
await page.getByRole("button", { name: "Create room" }).click();
|
||||
|
||||
// Then we created a normal encrypted room, without encrypted state
|
||||
await expect(page.getByText("Encryption enabled")).toBeVisible();
|
||||
await expect(page.getByText("State encryption enabled")).not.toBeVisible();
|
||||
|
||||
// And it has the correct name
|
||||
await expect(page.getByTestId("timeline").getByRole("heading", { name })).toBeVisible();
|
||||
|
||||
// And the room name state event is not encrypted
|
||||
await viewSourceOnRoomNameEvent(page);
|
||||
await expect(page.getByText("Original event source")).toBeVisible();
|
||||
await expect(page.getByText("Decrypted event source")).not.toBeVisible();
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
async function viewSourceOnRoomNameEvent(page: Page) {
|
||||
await page
|
||||
.getByRole("listitem")
|
||||
.filter({ hasText: "created and configured the room" })
|
||||
.getByRole("button", { name: "expand" })
|
||||
.click();
|
||||
|
||||
await page
|
||||
.getByRole("listitem")
|
||||
.filter({ hasText: "changed the room name to" })
|
||||
.getByRole("button", { name: "Options" })
|
||||
.click();
|
||||
|
||||
await page.getByRole("menuitem", { name: "View source" }).click();
|
||||
}
|
||||
@@ -0,0 +1,74 @@
|
||||
/*
|
||||
Copyright 2025 New Vector Ltd.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { test, expect } from "../../element-web-test";
|
||||
|
||||
test.describe("Invites", () => {
|
||||
test.use({
|
||||
displayName: "Alice",
|
||||
botCreateOpts: {
|
||||
displayName: "Bob",
|
||||
},
|
||||
});
|
||||
|
||||
test("should render an invite view", { tag: "@screenshot" }, async ({ page, homeserver, user, bot, app }) => {
|
||||
const roomId = await bot.createRoom({ is_direct: true });
|
||||
await bot.inviteUser(roomId, user.userId);
|
||||
await app.viewRoomByName("Bob");
|
||||
await expect(page.locator(".mx_RoomView")).toMatchScreenshot("Invites_room_view.png", {
|
||||
// Hide the mxid, which is not stable.
|
||||
css: `
|
||||
.mx_RoomPreviewBar_inviter_mxid {
|
||||
display: none !important;
|
||||
}
|
||||
`,
|
||||
});
|
||||
});
|
||||
|
||||
test("should be able to decline an invite", async ({ page, homeserver, user, bot, app }) => {
|
||||
const roomId = await bot.createRoom({ is_direct: true });
|
||||
await bot.inviteUser(roomId, user.userId);
|
||||
await app.viewRoomByName("Bob");
|
||||
await page.getByRole("button", { name: "Decline", exact: true }).click();
|
||||
await expect(page.getByRole("heading", { name: "Welcome Alice", exact: true })).toBeVisible();
|
||||
await expect(
|
||||
page.getByRole("tree", { name: "Rooms" }).getByRole("treeitem", { name: "Bob", exact: true }),
|
||||
).not.toBeVisible();
|
||||
});
|
||||
|
||||
test(
|
||||
"should be able to decline an invite, report the room and ignore the user",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, homeserver, user, bot, app }) => {
|
||||
const roomId = await bot.createRoom({ is_direct: true });
|
||||
await bot.inviteUser(roomId, user.userId);
|
||||
await app.viewRoomByName("Bob");
|
||||
await page.getByRole("button", { name: "Decline and block" }).click();
|
||||
await page.getByLabel("Ignore user").click();
|
||||
await page.getByLabel("Report room").click();
|
||||
await page.getByLabel("Reason").fill("Do not want the room");
|
||||
const roomReported = page.waitForRequest(
|
||||
(req) =>
|
||||
req.url().endsWith(`/_matrix/client/v3/rooms/${encodeURIComponent(roomId)}/report`) &&
|
||||
req.method() === "POST",
|
||||
);
|
||||
await expect(page.getByRole("dialog", { name: "Decline invitation" })).toMatchScreenshot(
|
||||
"Invites_reject_dialog.png",
|
||||
);
|
||||
await page.getByRole("button", { name: "Decline invite" }).click();
|
||||
|
||||
// Check room was reported.
|
||||
await roomReported;
|
||||
|
||||
// Check user is ignored.
|
||||
await app.settings.openUserSettings("Security & Privacy");
|
||||
const ignoredUsersList = page.getByRole("list", { name: "Ignored users" });
|
||||
await ignoredUsersList.scrollIntoViewIfNeeded();
|
||||
await expect(ignoredUsersList.getByRole("listitem", { name: bot.credentials.userId })).toBeVisible();
|
||||
},
|
||||
);
|
||||
});
|
||||
@@ -0,0 +1,172 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2023 Suguru Hirahara
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { type Page } from "@playwright/test";
|
||||
import { type Visibility } from "matrix-js-sdk/src/matrix";
|
||||
|
||||
import { test, expect } from "../../element-web-test";
|
||||
import { type ElementAppPage } from "../../pages/ElementAppPage";
|
||||
|
||||
test.describe("Room Header", () => {
|
||||
test.use({
|
||||
displayName: "Sakura",
|
||||
config: {
|
||||
features: {
|
||||
feature_new_room_list: false,
|
||||
},
|
||||
},
|
||||
});
|
||||
|
||||
test.describe("with feature_notifications enabled", () => {
|
||||
test.use({
|
||||
labsFlags: ["feature_notifications"],
|
||||
});
|
||||
test("should render default buttons properly", { tag: "@screenshot" }, async ({ page, app, user }) => {
|
||||
await app.client.createRoom({ name: "Test Room" });
|
||||
await app.viewRoomByNameOnOldRoomList("Test Room");
|
||||
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
|
||||
// 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();
|
||||
|
||||
// Memberlist button
|
||||
await expect(header.locator(".mx_FacePile")).toBeVisible();
|
||||
|
||||
// There should be both a voice and a video call button
|
||||
await expect(header.getByRole("button", { name: "Video call" })).toBeVisible();
|
||||
await expect(header.getByRole("button", { name: "Voice call" })).toBeVisible();
|
||||
|
||||
await expect(header.getByRole("button", { name: "Threads" })).toBeVisible();
|
||||
await expect(header.getByRole("button", { name: "Notifications" })).toBeVisible();
|
||||
|
||||
// Assert that there are eight buttons in total
|
||||
await expect(header.getByRole("button")).toHaveCount(8);
|
||||
|
||||
await expect(header).toMatchScreenshot("room-header.png");
|
||||
});
|
||||
|
||||
test(
|
||||
"should render a very long room name without collapsing the buttons",
|
||||
{ tag: "@screenshot" },
|
||||
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.viewRoomByNameOnOldRoomList(LONG_ROOM_NAME);
|
||||
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
// Wait until the room name is set
|
||||
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 = header.getByRole("button").filter({
|
||||
has: page.locator("svg"),
|
||||
});
|
||||
await expect(buttons).toHaveCount(5);
|
||||
|
||||
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 render room header icon correctly", { tag: "@screenshot" }, async ({ page, app, user }) => {
|
||||
await app.client.createRoom({ name: "Test Room", visibility: "public" as Visibility });
|
||||
await app.viewRoomByNameOnOldRoomList("Test Room");
|
||||
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
|
||||
await expect(header).toMatchScreenshot("room-header-with-icon.png");
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("with a video room", () => {
|
||||
test.use({ labsFlags: ["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.viewRoomByNameOnOldRoomList("Test video room");
|
||||
};
|
||||
|
||||
test.describe("and with feature_notifications enabled", () => {
|
||||
test.use({ labsFlags: ["feature_video_rooms", "feature_notifications"] });
|
||||
|
||||
test(
|
||||
"should render buttons for chat, room info, threads and facepile",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, user }) => {
|
||||
await createVideoRoom(page, app);
|
||||
|
||||
// Dismiss a toast that is otherwise in the way (it's the other
|
||||
// side but there's no need to have it in the screenshot)
|
||||
await page.getByRole("button", { name: "Later" }).click();
|
||||
|
||||
const header = page.locator(".mx_RoomHeader");
|
||||
|
||||
// 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).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_RoomHeader").getByRole("button", { name: "Chat" }).click();
|
||||
|
||||
// Assert that the call view is still visible
|
||||
await expect(page.locator(".mx_CallView")).toBeVisible();
|
||||
|
||||
// Assert that GELS is visible
|
||||
await expect(
|
||||
page.locator(".mx_RightPanel .mx_TimelineCard").getByText("Sakura created and configured the room."),
|
||||
).toBeVisible();
|
||||
});
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,181 @@
|
||||
/*
|
||||
Copyright 2025 Element Creations Ltd.
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import { test, expect } from "../../element-web-test";
|
||||
|
||||
test.describe("Room Status Bar", () => {
|
||||
test.use({
|
||||
displayName: "Jim",
|
||||
page: async ({ page }, use) => {
|
||||
// Increase width as these components look horrible at lower
|
||||
// widths.
|
||||
await page.setViewportSize({ width: 1400, height: 768 });
|
||||
await use(page);
|
||||
},
|
||||
room: async ({ app, user }, use) => {
|
||||
const roomId = await app.client.createRoom({
|
||||
name: "A room",
|
||||
});
|
||||
await app.closeNotificationToast();
|
||||
await app.viewRoomById(roomId);
|
||||
await use({ roomId });
|
||||
},
|
||||
});
|
||||
|
||||
test("should show an error when sync stops", { tag: "@screenshot" }, async ({ page, user, app, room, axe }) => {
|
||||
await page.route("**/_matrix/client/*/sync*", async (route, req) => {
|
||||
await route.fulfill({
|
||||
status: 500,
|
||||
contentType: "application/json",
|
||||
body: '{"error": "Test fail", "errcode": "M_UNKNOWN"}',
|
||||
});
|
||||
});
|
||||
await app.client.sendMessage(room.roomId, "forcing sync to run");
|
||||
const banner = page.getByRole("region", { name: "Room status bar" });
|
||||
await expect(banner).toBeVisible({ timeout: 15000 });
|
||||
await expect(banner).toMatchScreenshot("connectivity_lost.png");
|
||||
});
|
||||
test("should NOT an error when a resource limit is hit", async ({ page, user, app, room, axe, toasts }) => {
|
||||
await app.viewRoomById(room.roomId);
|
||||
await page.route("**/_matrix/client/*/sync*", async (route, req) => {
|
||||
await route.fulfill({
|
||||
status: 400,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
error: "Test fail",
|
||||
errcode: "M_RESOURCE_LIMIT_EXCEEDED",
|
||||
limit_type: "monthly_active_user",
|
||||
admin_contact: "https://example.org",
|
||||
}),
|
||||
});
|
||||
});
|
||||
await app.client.sendMessage(room.roomId, "forcing sync to run");
|
||||
// Wait for the MAU warning toast to appear so we know this status bar would have appeared.
|
||||
await toasts.getToast("Warning", 15000);
|
||||
await expect(page.getByRole("region", { name: "Room status bar" })).not.toBeVisible();
|
||||
});
|
||||
test(
|
||||
"should show an error when the user needs to consent",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, user, app, room, axe }) => {
|
||||
await app.viewRoomById(room.roomId);
|
||||
await page.route("**/_matrix/client/**/send**", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 400,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
error: "Test fail",
|
||||
errcode: "M_CONSENT_NOT_GIVEN",
|
||||
consent_uri: "https://example.org",
|
||||
}),
|
||||
});
|
||||
});
|
||||
const composer = app.getComposerField();
|
||||
await composer.fill("Hello!");
|
||||
await composer.press("Enter");
|
||||
await page
|
||||
.getByRole("dialog", { name: "Terms and Conditions" })
|
||||
.getByRole("button", { name: "Dismiss" })
|
||||
.click();
|
||||
const banner = page.getByRole("region", { name: "Room status bar" });
|
||||
await expect(banner).toBeVisible({ timeout: 15000 });
|
||||
await expect(banner).toMatchScreenshot("consent.png");
|
||||
|
||||
// Click consent
|
||||
await banner.getByRole("link", { name: "View Terms and Conditions" }).click();
|
||||
await page.unroute("**/_matrix/client/**/send**");
|
||||
// Should now be allowed to retry.
|
||||
await banner.getByRole("button", { name: "Retry all" }).click();
|
||||
await expect(banner).not.toBeVisible();
|
||||
},
|
||||
);
|
||||
test.describe("Message fails to send", () => {
|
||||
test.beforeEach(async ({ page, user, app, room, axe }) => {
|
||||
await app.viewRoomById(room.roomId);
|
||||
await page.route("**/_matrix/client/**/send**", async (route) => {
|
||||
await route.fulfill({
|
||||
status: 400,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({ error: "Test fail", errcode: "M_UNKNOWN" }),
|
||||
});
|
||||
});
|
||||
const composer = app.getComposerField();
|
||||
await composer.fill("Hello!");
|
||||
await composer.press("Enter");
|
||||
const banner = page.getByRole("region", { name: "Room status bar" });
|
||||
await expect(banner).toBeVisible();
|
||||
});
|
||||
test(
|
||||
"should show an error when a message fails to send",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, user, app, room, axe }) => {
|
||||
const banner = page.getByRole("region", { name: "Room status bar" });
|
||||
await expect(banner).toMatchScreenshot("message_failed.png");
|
||||
},
|
||||
);
|
||||
test("should be able to 'Delete all' messages", async ({ page, user, app, room, axe }) => {
|
||||
const banner = page.getByRole("region", { name: "Room status bar" });
|
||||
await banner.getByRole("button", { name: "Delete all" }).click();
|
||||
await expect(banner).not.toBeVisible();
|
||||
});
|
||||
test("should be able to 'Retry all' messages", async ({ page, user, app, room, axe }) => {
|
||||
const banner = page.getByRole("region", { name: "Room status bar" });
|
||||
await page.unroute("**/_matrix/client/**/send**");
|
||||
await banner.getByRole("button", { name: "Retry all" }).click();
|
||||
await expect(banner).not.toBeVisible();
|
||||
});
|
||||
});
|
||||
|
||||
test.describe("Local rooms", () => {
|
||||
test.use({
|
||||
botCreateOpts: {
|
||||
displayName: "Alice",
|
||||
},
|
||||
});
|
||||
test(
|
||||
"should show an error when creating a local room fails",
|
||||
{ tag: "@screenshot" },
|
||||
async ({ page, app, user, bot }) => {
|
||||
await page
|
||||
.getByRole("navigation", { name: "Room list" })
|
||||
.getByRole("button", { name: "New conversation" })
|
||||
.click();
|
||||
await page.getByRole("menuitem", { name: "Start chat" }).click();
|
||||
|
||||
await page.route("**/_matrix/client/*/createRoom*", async (route, req) => {
|
||||
await route.fulfill({
|
||||
status: 400,
|
||||
contentType: "application/json",
|
||||
body: JSON.stringify({
|
||||
error: "Test fail",
|
||||
errcode: "M_UNKNOWN",
|
||||
}),
|
||||
});
|
||||
});
|
||||
|
||||
const other = page.locator(".mx_InviteDialog_other");
|
||||
await other.getByTestId("invite-dialog-input").fill(bot.credentials.userId);
|
||||
await expect(
|
||||
other.getByRole("option", { name: "Alice" }).getByText(bot.credentials.userId),
|
||||
).toBeVisible();
|
||||
await other.getByRole("option", { name: "Alice" }).click();
|
||||
await other.getByRole("button", { name: "Go" }).click();
|
||||
// Send a message to invite the bots
|
||||
const composer = app.getComposerField();
|
||||
await composer.fill("Hello");
|
||||
await composer.press("Enter");
|
||||
|
||||
const banner = page.getByRole("status", { name: "Could not start a chat with this user" });
|
||||
await expect(banner).toBeVisible();
|
||||
await expect(banner).toMatchScreenshot("local_room_create_failed.png");
|
||||
|
||||
await page.unroute("**/_matrix/client/*/createRoom*");
|
||||
await banner.getByRole("button", { name: "Retry" }).click();
|
||||
await expect(banner).not.toBeVisible();
|
||||
},
|
||||
);
|
||||
});
|
||||
});
|
||||
@@ -0,0 +1,98 @@
|
||||
/*
|
||||
Copyright 2024 New Vector Ltd.
|
||||
Copyright 2022 The Matrix.org Foundation C.I.C.
|
||||
|
||||
SPDX-License-Identifier: AGPL-3.0-only OR GPL-3.0-only OR LicenseRef-Element-Commercial
|
||||
Please see LICENSE files in the repository root for full details.
|
||||
*/
|
||||
|
||||
import type { AccountDataEvents } 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 keyof AccountDataEvents, {
|
||||
[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();
|
||||
});
|
||||
|
||||
test("should memorize the timeline position when switch Room A -> Room B -> Room A", async ({
|
||||
page,
|
||||
app,
|
||||
user,
|
||||
}) => {
|
||||
// Create the two rooms
|
||||
const roomAId = await app.client.createRoom({ name: "Room A" });
|
||||
const roomBId = await app.client.createRoom({ name: "Room B" });
|
||||
// Display Room A
|
||||
await app.viewRoomById(roomAId);
|
||||
|
||||
// Send the first message and get the event ID
|
||||
const { event_id: eventId } = await app.client.sendMessage(roomAId, { body: "test0", msgtype: "m.text" });
|
||||
// Send 49 more messages
|
||||
for (let i = 1; i < 50; i++) {
|
||||
await app.client.sendMessage(roomAId, { body: `test${i}`, msgtype: "m.text" });
|
||||
}
|
||||
|
||||
// Wait for all the messages to be displayed
|
||||
await expect(
|
||||
page.locator(".mx_EventTile_last .mx_MTextBody .mx_EventTile_body").getByText("test49"),
|
||||
).toBeVisible();
|
||||
|
||||
// Display the first message
|
||||
await page.goto(`/#/room/${roomAId}/${eventId}`);
|
||||
|
||||
// Wait for the first message to be displayed
|
||||
await expect(page.locator(".mx_MTextBody .mx_EventTile_body").getByText("test0")).toBeInViewport();
|
||||
|
||||
// Display Room B
|
||||
await app.viewRoomById(roomBId);
|
||||
|
||||
// Let the app settle to avoid flakiness
|
||||
await page.waitForTimeout(500);
|
||||
|
||||
// Display Room A
|
||||
await app.viewRoomById(roomAId);
|
||||
|
||||
// The timeline should display the first message
|
||||
// The previous position before switching to Room B should be remembered
|
||||
await expect(page.locator(".mx_MTextBody .mx_EventTile_body").getByText("test0")).toBeInViewport();
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user