diff --git a/playwright/e2e/pinned-messages/index.ts b/playwright/e2e/pinned-messages/index.ts index 5e61b11e857a..bb7705ba9880 100644 --- a/playwright/e2e/pinned-messages/index.ts +++ b/playwright/e2e/pinned-messages/index.ts @@ -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 }; diff --git a/playwright/e2e/pinned-messages/pinned-messages.spec.ts b/playwright/e2e/pinned-messages/pinned-messages.spec.ts index 53f657ea7fa8..339c3b1f0ec2 100644 --- a/playwright/e2e/pinned-messages/pinned-messages.spec.ts +++ b/playwright/e2e/pinned-messages/pinned-messages.spec.ts @@ -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(); + }); }); diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png new file mode 100644 index 000000000000..d6892c5bbff2 Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-1-Msg1-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png new file mode 100644 index 000000000000..153ad2d07f0b Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg1-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png new file mode 100644 index 000000000000..98396be1f829 Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-Msg2-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-linux.png new file mode 100644 index 000000000000..e3b7ecad4389 Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-2-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg1-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg1-linux.png new file mode 100644 index 000000000000..8169ca9cfd14 Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg1-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg2-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg2-linux.png new file mode 100644 index 000000000000..7b6c9948212d Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg2-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg3-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg3-linux.png new file mode 100644 index 000000000000..dfec23cb5909 Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg3-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg4-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg4-linux.png new file mode 100644 index 000000000000..72abbbb2606c Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-message-banner-4-Msg4-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-messages-2-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-messages-2-linux.png deleted file mode 100644 index 82666b0d95ff..000000000000 Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-messages-2-linux.png and /dev/null differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-messages-3-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-messages-3-linux.png deleted file mode 100644 index 98e804d897d1..000000000000 Binary files a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-messages-3-linux.png and /dev/null differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-pin-3-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-pin-3-linux.png new file mode 100644 index 000000000000..b3176cc698a0 Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-pin-3-linux.png differ diff --git a/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-unpin-2-linux.png b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-unpin-2-linux.png new file mode 100644 index 000000000000..4eede005d886 Binary files /dev/null and b/playwright/snapshots/pinned-messages/pinned-messages.spec.ts/pinned-messages-list-unpin-2-linux.png differ diff --git a/src/components/views/rooms/PinnedMessageBanner.tsx b/src/components/views/rooms/PinnedMessageBanner.tsx index 77dfad17282a..babfbc253d28 100644 --- a/src/components/views/rooms/PinnedMessageBanner.tsx +++ b/src/components/views/rooms/PinnedMessageBanner.tsx @@ -82,6 +82,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan className="mx_PinnedMessageBanner" data-single-message={isSinglePinnedEvent} aria-label={_t("room|pinned_message_banner|description")} + data-testid="pinned-message-banner" >