Hide the names of banned users behind a spoiler tag (attempt 2) (#32636)

This commit is contained in:
Andy Balaam
2026-03-18 10:47:16 +00:00
committed by GitHub
parent cb9ff9b92b
commit 2128c1884c
18 changed files with 328 additions and 59 deletions
@@ -40,7 +40,7 @@ test.describe("Event List Summary", () => {
);
test(
"should display a single ban message on its own",
"should display a single ban message on its own, with the user hidden",
{ tag: "@screenshot" },
async ({ app, homeserver, page, user }) => {
const { bot, roomId } = await setupRoom(app, homeserver, page, user);
@@ -59,7 +59,7 @@ test.describe("Event List Summary", () => {
// When we ban the bot
await app.client.ban(roomId, bot.credentials.userId);
// Then we say that
// Then we say that, but the name is hidden
await expect(
page.locator(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='group']", {
hasText: "banned",
@@ -106,7 +106,7 @@ test.describe("Event List Summary", () => {
);
test(
"should display multiple messages as a group",
"should display multiple messages as a group, and hide banned names",
{ tag: "@screenshot" },
async ({ app, homeserver, page, user }) => {
const { bot, roomId } = await setupRoom(app, homeserver, page, user);
@@ -125,7 +125,7 @@ test.describe("Event List Summary", () => {
await app.client.inviteUser(roomId, bot.credentials.userId);
await bot.joinRoom(roomId);
// Then those actions are gathered into a single summary
// Then those actions are gathered into a single summary, with the name hidden
await expect(
page.locator(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='group']", {
hasText: "and joined",
@@ -191,6 +191,9 @@ test.describe("Event List Summary", () => {
// here.
await page.getByRole("button", { name: "expand" }).nth(3).click();
// Make sure the mouse is in a consistent position to avoid flaking
await page.getByRole("textbox").hover();
// Then we see all the individual actions
await expect(
page.locator(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='group']", {
@@ -207,7 +210,7 @@ test.describe("Event List Summary", () => {
);
test(
"should display join/ban messages for multiple people as a group",
"should display join/ban messages for multiple people as a group, with banned names hidden",
{ tag: "@screenshot" },
async ({ app, homeserver, page, user }) => {
const { bot, roomId } = await setupRoom(app, homeserver, page, user);
@@ -237,7 +240,7 @@ test.describe("Event List Summary", () => {
await bot.joinRoom(roomId);
await bot2.joinRoom(roomId);
// Then those actions are gathered into a single summary
// Then those actions are gathered into a single summary, with banned names hidden
await expect(
page.locator(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='group']", {
hasText: "was removed, was invited, and joined",
@@ -258,7 +261,10 @@ test.describe("Event List Summary", () => {
// here.
await page.getByRole("button", { name: "expand" }).nth(3).click();
// Then we see all the individual actions
// Make sure the mouse is in a consistent position to avoid flaking
await page.getByRole("textbox").hover();
// Then we see all the individual actions, with banned names hidden
await expect(
page.locator(".mx_RoomView_body .mx_GenericEventListSummary[data-layout='group']", {
hasText: "removed MyBot2",
@@ -321,9 +327,11 @@ async function replaceBotIds(page: Page, bot: Bot, bot2?: Bot) {
await page.evaluate(
([bot1UserId, bot2UserId]) => {
for (const el of document.querySelectorAll("div.mx_TextualEvent")) {
if ("innerText" in el) {
el.innerText = (el.innerText as any as string).replaceAll(bot1UserId, "<<replaced_bot1_id>>");
el.innerText = (el.innerText as any as string).replaceAll(bot2UserId, "<<replaced_bot2_id>>");
const walker = document.createTreeWalker(el, NodeFilter.SHOW_TEXT);
while (walker.nextNode()) {
const node = walker.currentNode;
node.textContent = node.textContent.replaceAll(bot1UserId, "<<replaced_bot1_id>>");
node.textContent = node.textContent.replaceAll(bot2UserId, "<<replaced_bot2_id>>");
}
}
},
@@ -182,10 +182,10 @@ test.describe("Timeline", () => {
await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-irc-layout.png", {
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
@@ -218,10 +218,10 @@ test.describe("Timeline", () => {
await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-modern-layout.png", {
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
@@ -260,7 +260,7 @@ test.describe("Timeline", () => {
await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("expanded-gels-bubble-layout.png", {
// Exclude timestamp from snapshot
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
`,
@@ -280,7 +280,7 @@ test.describe("Timeline", () => {
// Save snapshot of collapsed generic event list summary on bubble layout
await expect(page.locator(".mx_MainSplit")).toMatchScreenshot("collapsed-gels-bubble-layout.png", {
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
`,
@@ -325,10 +325,10 @@ test.describe("Timeline", () => {
{
// Exclude timestamp and read marker from snapshot
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
@@ -447,7 +447,7 @@ test.describe("Timeline", () => {
{
// Exclude timestamp from snapshot of mx_MainSplit
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
`,
@@ -523,10 +523,10 @@ test.describe("Timeline", () => {
const screenshotOptions = {
// Hide because flaky - See https://github.com/vector-im/element-web/issues/24957
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
@@ -651,10 +651,10 @@ test.describe("Timeline", () => {
// Exclude timestamp and read marker from snapshot
const screenshotOptions = {
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
@@ -1131,10 +1131,10 @@ test.describe("Timeline", () => {
// Exclude timestamp and read marker from snapshot
const screenshotOptions = {
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar,.mx_JumpToBottomButton {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
@@ -1259,10 +1259,10 @@ test.describe("Timeline", () => {
// Exclude timestamp and read marker from snapshot
const screenshotOptions = {
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,
@@ -1325,10 +1325,10 @@ test.describe("Timeline", () => {
// Exclude timestamp and read marker from snapshot
const screenshotOptions = {
css: `
.mx_MessageTimestamp {
.mx_MessageTimestamp,.mx_TopUnreadMessagesBar {
visibility: hidden;
}
.mx_TopUnreadMessagesBar, .mx_MessagePanel_myReadMarker {
.mx_MessagePanel_myReadMarker {
display: none !important;
}
`,