imterah/element-portable
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Display pinned messages on a banner at the top of a room (#12917)

Browse source 
* Move pinned message hooks to a dedicated file

* Add a banner at the top of a room to display the pinned messages

* Put the pinning banner behind labs pinning labs flag

* Add redacted event support

* Handle UTD in pinning message banner

* Add tests for redaction

* Make all the banner clickable

* Add tests for PinnedMessageBanner.tsx

* Add e2e tests for the pinned message banner

* Review changes
This commit is contained in:
Florian Duros 2024-08-29 16:26:10 +02:00 • committed by GitHub
parent 8b2ded8a0e
commit d16ab09866
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
29 changed files with 1130 additions and 180 deletions
Download patch file Download diff file Expand all files Collapse all files

34
playwright/e2e/pinned-messages/index.ts
View file

@ -168,9 +168,8 @@ export class Helpers {
/**
* Return the right panel
* @private
*/
private getRightPanel() {
public getRightPanel() {
return this.page.locator("#mx_RightPanel");
}
@ -183,7 +182,6 @@ export class Helpers {
await expect(rightPanel.getByRole("heading", { name: "Pinned messages" })).toHaveText(
`${messages.length} Pinned messages`,
);
await expect(rightPanel).toMatchScreenshot(`pinned-messages-list-messages-${messages.length}.png`);
const list = rightPanel.getByRole("list");
await expect(list.getByRole("listitem")).toHaveCount(messages.length);
@ -243,6 +241,36 @@ export class Helpers {
await item.getByRole("button").click();
await this.page.getByRole("menu", { name: "Open menu" }).getByRole("menuitem", { name: "Unpin" }).click();
}
/**
* Return the banner
* @private
*/
public getBanner() {
return this.page.getByTestId("pinned-message-banner");
}
/**
* Assert that the banner contains the given message
* @param msg
*/
async assertMessageInBanner(msg: string) {
await expect(this.getBanner().getByText(msg)).toBeVisible();
}
/**
* Return the view all button
*/
public getViewAllButton() {
return this.page.getByRole("button", { name: "View all" });
}
/**
* Return the close list button
*/
public getCloseListButton() {
return this.page.getByRole("button", { name: "Close list" });
}
}
export { expect };

63
playwright/e2e/pinned-messages/pinned-messages.spec.ts
View file

@ -48,6 +48,7 @@ test.describe("Pinned messages", () => {
await util.openRoomInfo();
await util.openPinnedMessagesList();
await util.assertPinnedMessagesList(["Msg1", "Msg2", "Msg4"]);
await expect(util.getRightPanel()).toMatchScreenshot(`pinned-messages-list-pin-3.png`);
});
test("should unpin one message", async ({ page, app, room1, util }) => {
@ -59,6 +60,7 @@ test.describe("Pinned messages", () => {
await util.openPinnedMessagesList();
await util.unpinMessageFromMessageList("Msg2");
await util.assertPinnedMessagesList(["Msg1", "Msg4"]);
await expect(util.getRightPanel()).toMatchScreenshot(`pinned-messages-list-unpin-2.png`);
await util.backPinnedMessagesList();
await util.assertPinnedCountInRoomInfo(2);
});
@ -87,4 +89,65 @@ test.describe("Pinned messages", () => {
await util.pinMessagesFromQuickActions(["Msg1"], true);
await util.assertPinnedCountInRoomInfo(0);
});
test("should display one message in the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1"]);
await util.pinMessages(["Msg1"]);
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-1-Msg1.png");
});
test("should display 2 messages in the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2"]);
await util.pinMessages(["Msg1", "Msg2"]);
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
await util.getBanner().click();
await util.assertMessageInBanner("Msg2");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg2.png");
await util.getBanner().click();
await util.assertMessageInBanner("Msg1");
await expect(util.getBanner()).toMatchScreenshot("pinned-message-banner-2-Msg1.png");
});
test("should display 4 messages in the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2", "Msg3", "Msg4"]);
await util.pinMessages(["Msg1", "Msg2", "Msg3", "Msg4"]);
for (const msg of ["Msg1", "Msg4", "Msg3", "Msg2"]) {
await util.assertMessageInBanner(msg);
await expect(util.getBanner()).toMatchScreenshot(`pinned-message-banner-4-${msg}.png`);
await util.getBanner().click();
}
});
test("should open the pinned messages list from the banner", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2"]);
await util.pinMessages(["Msg1", "Msg2"]);
await util.getViewAllButton().click();
await util.assertPinnedMessagesList(["Msg1", "Msg2"]);
await expect(util.getRightPanel()).toMatchScreenshot("pinned-message-banner-2.png");
await expect(util.getCloseListButton()).toBeVisible();
});
test("banner should listen to pinned message list", async ({ page, app, room1, util }) => {
await util.goTo(room1);
await util.receiveMessages(room1, ["Msg1", "Msg2"]);
await util.pinMessages(["Msg1", "Msg2"]);
await expect(util.getViewAllButton()).toBeVisible();
await util.openRoomInfo();
await util.openPinnedMessagesList();
await expect(util.getCloseListButton()).toBeVisible();
});
});