nikrozman/element-web
1
0
Fork 0
Code Issues Actions 3 Packages Projects Releases Wiki Activity

Playwright: Convert lazy-loading test to playwright (#11988)

Browse Source 
* Implement method to wait for next sync

* Add timeline coded to app page

* Convert network plugin

* Add createBot fixture

* Convert lazy-loading test

* Remove cypress test

* Remove converted files

* Remove imports

* Fix date in copyright header

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Fix date in copyright header

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>

* Use proper method to send messages

* Fix sliding-sync test

* Address comments

* Move code to timeline

---------

Co-authored-by: Michael Telatynski <7t3chguy@gmail.com>
This commit is contained in:
R Midhun Suresh
2023-12-19 14:06:54 +05:30
committed by GitHub
parent 24cda5fc59
commit 4c2efc3637
11 changed files with 279 additions and 358 deletions
Download Patch File Download Diff File Expand all files Collapse all files

137
playwright/e2e/lazy-loading/lazy-loading.spec.ts Normal file
View File

@@ -0,0 +1,137 @@
/*
Copyright 2023 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 { Bot } from "../../pages/bot";
import type { Locator, Page } from "@playwright/test";
import type { ElementAppPage } from "../../pages/ElementAppPage";
import { test, expect } from "../../element-web-test";
test.describe("Lazy Loading", () => {
const charlies: Bot[] = [];
test.use({
displayName: "Alice",
botCreateOpts: { displayName: "Bob" },
});
test.beforeEach(async ({ page }) => {
await page.addInitScript(() => {
window.localStorage.setItem("mx_lhs_size", "0"); // Collapse left panel for these tests
});
});
test.beforeEach(async ({ page, homeserver, user, bot }) => {
for (let i = 1; i <= 10; i++) {
const displayName = `Charly #${i}`;
const bot = new Bot(page, homeserver, { displayName, startClient: false, autoAcceptInvites: false });
charlies.push(bot);
}
});
const name = "Lazy Loading Test";
const alias = "#lltest:localhost";
const charlyMsg1 = "hi bob!";
const charlyMsg2 = "how's it going??";
let roomId: string;
async function setupRoomWithBobAliceAndCharlies(page: Page, app: ElementAppPage, bob: Bot, charlies: Bot[]) {
const visibility = await page.evaluate(() => (window as any).matrixcs.Visibility.Public);
roomId = await bob.createRoom({
name,
room_alias_name: "lltest",
visibility,
});
await Promise.all(charlies.map((bot) => bot.joinRoom(alias)));
for (const charly of charlies) {
await charly.sendMessage(roomId, charlyMsg1);
}
for (const charly of charlies) {
await charly.sendMessage(roomId, charlyMsg2);
}
for (let i = 20; i >= 1; --i) {
await bob.sendMessage(roomId, `I will only say this ${i} time(s)!`);
}
await app.client.joinRoom(alias);
await app.viewRoomByName(name);
}
async function checkPaginatedDisplayNames(app: ElementAppPage, charlies: Bot[]) {
await app.timeline.scrollToTop();
for (const charly of charlies) {
await expect(await app.timeline.findEventTile(charly.credentials.displayName, charlyMsg1)).toBeAttached();
await expect(await app.timeline.findEventTile(charly.credentials.displayName, charlyMsg2)).toBeAttached();
}
}
async function openMemberlist(page: Page): Promise<void> {
await page.locator(".mx_LegacyRoomHeader").getByRole("button", { name: "Room info" }).click();
await page.locator(".mx_RoomSummaryCard").getByRole("menuitem", { name: "People" }).click(); // \d represents the number of the room members
}
function getMemberInMemberlist(page: Page, name: string): Locator {
return page.locator(".mx_MemberList .mx_EntityTile_name").filter({ hasText: name });
}
async function checkMemberList(page: Page, charlies: Bot[]) {
await expect(getMemberInMemberlist(page, "Alice")).toBeAttached();
await expect(getMemberInMemberlist(page, "Bob")).toBeAttached();
for (const charly of charlies) {
await expect(getMemberInMemberlist(page, charly.credentials.displayName)).toBeAttached();
}
}
async function checkMemberListLacksCharlies(page: Page, charlies: Bot[]) {
for (const charly of charlies) {
await expect(getMemberInMemberlist(page, charly.credentials.displayName)).not.toBeAttached();
}
}
async function joinCharliesWhileAliceIsOffline(page: Page, app: ElementAppPage, charlies: Bot[]) {
await app.client.network.goOffline();
for (const charly of charlies) {
await charly.joinRoom(alias);
}
for (let i = 20; i >= 1; --i) {
await charlies[0].sendMessage(roomId, "where is charly?");
}
await app.client.network.goOnline();
await app.client.waitForNextSync();
}
test("should handle lazy loading properly even when offline", async ({ page, app, bot }) => {
test.slow();
const charly1to5 = charlies.slice(0, 5);
const charly6to10 = charlies.slice(5);
// Set up room with alice, bob & charlies 1-5
await setupRoomWithBobAliceAndCharlies(page, app, bot, charly1to5);
// Alice should see 2 messages from every charly with the correct display name
await checkPaginatedDisplayNames(app, charly1to5);
await openMemberlist(page);
await checkMemberList(page, charly1to5);
await joinCharliesWhileAliceIsOffline(page, app, charly6to10);
await checkMemberList(page, charly6to10);
for (const charly of charlies) {
await charly.evaluate((client, roomId) => client.leave(roomId), roomId);
}
await checkMemberListLacksCharlies(page, charlies);
});
});

14
playwright/e2e/sliding-sync/sliding-sync.spec.ts
View File

@@ -134,7 +134,7 @@ test.describe("Sliding Sync", () => {
const bob = await createAndJoinBot(app, bot);
// send a message in the test room: unread notification count should increment
await bob.sendTextMessage(roomId, "Hello World");
await bob.sendMessage(roomId, "Hello World");
const treeItemLocator1 = page.getByRole("treeitem", { name: "Test Room 1 unread message." });
await expect(treeItemLocator1.locator(".mx_NotificationBadge_count")).toHaveText("1");
@@ -144,7 +144,7 @@ test.describe("Sliding Sync", () => {
);
// send an @mention: highlight count (red) should be 2.
await bob.sendTextMessage(roomId, `Hello ${user.displayName}`);
await bob.sendMessage(roomId, `Hello ${user.displayName}`);
const treeItemLocator2 = page.getByRole("treeitem", {
name: "Test Room 2 unread messages including mentions.",
});
@@ -173,7 +173,7 @@ test.describe("Sliding Sync", () => {
await checkOrder(["Dummy", "Test Room"], page);
await bot.sendTextMessage(roomId, "Do you read me?");
await bot.sendMessage(roomId, "Do you read me?");
// wait for this message to arrive, tell by the room list resorting
await checkOrder(["Test Room", "Dummy"], page);
@@ -273,7 +273,7 @@ test.describe("Sliding Sync", () => {
test.skip("should clear the reply to field when swapping rooms", async ({ page, app }) => {
await app.client.createRoom({ name: "Other Room" });
await expect(page.getByRole("treeitem", { name: "Other Room" })).toBeVisible();
await app.client.sendTextMessage(roomId, "Hello world");
await app.client.sendMessage(roomId, "Hello world");
// select the room
await page.getByRole("treeitem", { name: "Test Room" }).click();
@@ -304,9 +304,9 @@ test.describe("Sliding Sync", () => {
// Regression test for https://github.com/vector-im/element-web/issues/21462
test.skip("should not cancel replies when permalinks are clicked", async ({ page, app }) => {
// we require a first message as you cannot click the permalink text with the avatar in the way
await app.client.sendTextMessage(roomId, "First message");
await app.client.sendTextMessage(roomId, "Permalink me");
await app.client.sendTextMessage(roomId, "Reply to me");
await app.client.sendMessage(roomId, "First message");
await app.client.sendMessage(roomId, "Permalink me");
await app.client.sendMessage(roomId, "Reply to me");
// select the room
await page.getByRole("treeitem", { name: "Test Room" }).click();

16
playwright/e2e/timeline/timeline.spec.ts
View File

@@ -498,7 +498,7 @@ test.describe("Timeline", () => {
.getByText(`${OLD_NAME} created and configured the room.`),
).toBeVisible();
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@@ -514,7 +514,7 @@ test.describe("Timeline", () => {
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
// Check that the last EventTile is rendered
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@@ -527,7 +527,7 @@ test.describe("Timeline", () => {
await app.settings.setValue("useCompactLayout", null, SettingLevel.DEVICE, true);
// Check that the last EventTile is rendered
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@@ -542,7 +542,7 @@ test.describe("Timeline", () => {
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(
page.locator(".mx_RoomView").getByText("This message has an inline emoji 👒"),
).toBeInViewport();
@@ -741,7 +741,7 @@ test.describe("Timeline", () => {
await checkA11y();
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
await expect(page.locator(".mx_EventTile_last")).toMatchScreenshot("url-preview.png", {
// Exclude timestamp and read marker from snapshot
mask: [page.locator(".mx_MessageTimestamp")],
@@ -1090,7 +1090,7 @@ test.describe("Timeline", () => {
// Make sure the strings do not overflow on IRC layout
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.IRC);
// Scroll to the bottom to have Percy take a snapshot of the whole viewport
await app.scrollToBottom(page);
await app.timeline.scrollToBottom();
// Assert that both avatar in the introduction and the last message are visible at the same time
await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
const lastEventTileIrc = page.locator(".mx_EventTile_last[data-layout='irc']");
@@ -1104,7 +1104,7 @@ test.describe("Timeline", () => {
// Make sure the strings do not overflow on modern layout
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Group);
await app.scrollToBottom(page); // Scroll again in case
await app.timeline.scrollToBottom(); // Scroll again in case
await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
const lastEventTileGroup = page.locator(".mx_EventTile_last[data-layout='group']");
await expect(lastEventTileGroup.locator(".mx_MTextBody").first()).toBeVisible();
@@ -1116,7 +1116,7 @@ test.describe("Timeline", () => {
// Make sure the strings do not overflow on bubble layout
await app.settings.setValue("layout", null, SettingLevel.DEVICE, Layout.Bubble);
await app.scrollToBottom(page); // Scroll again in case
await app.timeline.scrollToBottom(); // Scroll again in case
await expect(page.locator(".mx_NewRoomIntro .mx_BaseAvatar")).toBeVisible();
const lastEventTileBubble = page.locator(".mx_EventTile_last[data-layout='bubble']");
await expect(lastEventTileBubble.locator(".mx_MTextBody").first()).toBeVisible();