Add tests for PinnedMessageBanner.tsx

Author: florianduros

src/components/views/rooms/PinnedMessageBanner.tsx

@@ -108,7 +108,7 @@ export function PinnedMessageBanner({ room, permalinkCreator }: PinnedMessageBan
                     {!isSinglePinnedEvent && <Indicators count={eventCount} currentIndex={currentEventIndex} />}
                     <PinIcon width="20" className="mx_PinnedMessageBanner_PinIcon" />
                     {!isSinglePinnedEvent && (
-                        <div className="mx_PinnedMessageBanner_title">
+                        <div className="mx_PinnedMessageBanner_title" data-testid="banner-counter">
                             {_t(
                                 "room|pinned_message_banner|title",
                                 {
@@ -203,6 +203,7 @@ interface IndicatorProps {
 function Indicator({ active, hided }: IndicatorProps): JSX.Element {
     return (
         <div
+            data-testid="banner-indicator"
             className={classNames("mx_PinnedMessageBanner_Indicator", {
                 "mx_PinnedMessageBanner_Indicator--active": active,
                 "mx_PinnedMessageBanner_Indicator--hided": hided,

test/components/views/rooms/PinnedMessageBanner-test.tsx

@@ -0,0 +1,233 @@
+/*
+ * Copyright 2024 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 { act, screen, render } from "@testing-library/react";
+import React from "react";
+import { EventType, IEvent, MatrixClient, MatrixEvent, Room } from "matrix-js-sdk/src/matrix";
+
+import * as pinnedEventHooks from "../../../../src/hooks/usePinnedEvents";
+import { PinnedMessageBanner } from "../../../../src/components/views/rooms/PinnedMessageBanner";
+import { RoomPermalinkCreator } from "../../../../src/utils/permalinks/Permalinks";
+import { stubClient } from "../../../test-utils";
+import dis from "../../../../src/dispatcher/dispatcher";
+import RightPanelStore from "../../../../src/stores/right-panel/RightPanelStore";
+import { RightPanelPhases } from "../../../../src/stores/right-panel/RightPanelStorePhases";
+import { UPDATE_EVENT } from "../../../../src/stores/AsyncStore";
+import { Action } from "../../../../src/dispatcher/actions";
+
+describe("<PinnedMessageBanner />", () => {
+    const userId = "@alice:server.org";
+    const roomId = "!room:server.org";
+
+    let mockClient: MatrixClient;
+    let room: Room;
+    let permalinkCreator: RoomPermalinkCreator;
+    beforeEach(() => {
+        mockClient = stubClient();
+        room = new Room(roomId, mockClient, userId);
+        permalinkCreator = new RoomPermalinkCreator(room);
+        jest.spyOn(dis, "dispatch").mockReturnValue(undefined);
+    });
+
+    /**
+     * Create a pinned event with the given content.
+     * @param content
+     */
+    function makePinEvent(content?: Partial<IEvent>) {
+        return new MatrixEvent({
+            type: EventType.RoomMessage,
+            sender: userId,
+            content: {
+                body: "First pinned message",
+                msgtype: "m.text",
+            },
+            room_id: roomId,
+            origin_server_ts: 0,
+            event_id: "$eventId",
+            ...content,
+        });
+    }
+
+    const event1 = makePinEvent();
+    const event2 = makePinEvent({
+        event_id: "$eventId2",
+        content: { body: "Second pinned message" },
+    });
+    const event3 = makePinEvent({
+        event_id: "$eventId3",
+        content: { body: "Third pinned message" },
+    });
+    const event4 = makePinEvent({
+        event_id: "$eventId4",
+        content: { body: "Fourth pinned message" },
+    });
+
+    /**
+     * Render the banner
+     */
+    function renderBanner() {
+        return render(<PinnedMessageBanner permalinkCreator={permalinkCreator} room={room} />);
+    }
+
+    it("should render nothing when there are no pinned events", async () => {
+        jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([]);
+        const { container } = renderBanner();
+        expect(container).toBeEmptyDOMElement();
+    });
+
+    it("should render a single pinned event", async () => {
+        jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!]);
+        jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1]);
+
+        const { asFragment } = renderBanner();
+
+        expect(screen.getByText("First pinned message")).toBeVisible();
+        expect(screen.queryByRole("button", { name: "View all" })).toBeNull();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should render 2 pinned event", async () => {
+        jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
+        jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
+
+        const { asFragment } = renderBanner();
+
+        expect(screen.getByText("Second pinned message")).toBeVisible();
+        expect(screen.getByTestId("banner-counter")).toHaveTextContent("2 of 2 Pinned messages");
+        expect(screen.getAllByTestId("banner-indicator")).toHaveLength(2);
+        expect(screen.queryByRole("button", { name: "View all" })).toBeVisible();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should render 4 pinned event", async () => {
+        jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([
+            event1.getId()!,
+            event2.getId()!,
+            event3.getId()!,
+            event4.getId()!,
+        ]);
+        jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2, event3, event4]);
+
+        const { asFragment } = renderBanner();
+
+        expect(screen.getByText("Fourth pinned message")).toBeVisible();
+        expect(screen.getByTestId("banner-counter")).toHaveTextContent("4 of 4 Pinned messages");
+        expect(screen.getAllByTestId("banner-indicator")).toHaveLength(3);
+        expect(screen.queryByRole("button", { name: "View all" })).toBeVisible();
+        expect(asFragment()).toMatchSnapshot();
+    });
+
+    it("should rotate the pinned events when the banner is clicked", async () => {
+        jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
+        jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
+
+        renderBanner();
+        expect(screen.getByText("Second pinned message")).toBeVisible();
+
+        act(() => {
+            screen.getByRole("button", { name: "View the pinned message in the timeline." }).click();
+        });
+        expect(screen.getByText("First pinned message")).toBeVisible();
+        expect(screen.getByTestId("banner-counter")).toHaveTextContent("1 of 2 Pinned messages");
+        expect(dis.dispatch).toHaveBeenCalledWith({
+            action: Action.ViewRoom,
+            event_id: event2.getId(),
+            highlighted: true,
+            room_id: room.roomId,
+            metricsTrigger: undefined, // room doesn't change
+        });
+
+        act(() => {
+            screen.getByRole("button", { name: "View the pinned message in the timeline." }).click();
+        });
+        expect(screen.getByText("Second pinned message")).toBeVisible();
+        expect(screen.getByTestId("banner-counter")).toHaveTextContent("2 of 2 Pinned messages");
+        expect(dis.dispatch).toHaveBeenCalledWith({
+            action: Action.ViewRoom,
+            event_id: event1.getId(),
+            highlighted: true,
+            room_id: room.roomId,
+            metricsTrigger: undefined, // room doesn't change
+        });
+    });
+
+    describe("Right button", () => {
+        beforeEach(() => {
+            jest.spyOn(pinnedEventHooks, "usePinnedEvents").mockReturnValue([event1.getId()!, event2.getId()!]);
+            jest.spyOn(pinnedEventHooks, "useSortedFetchedPinnedEvents").mockReturnValue([event1, event2]);
+        });
+
+        it("should display View all button if the right panel is closed", async () => {
+            // The Right panel is closed
+            jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(false);
+
+            renderBanner();
+            expect(screen.getByRole("button", { name: "View all" })).toBeVisible();
+        });
+
+        it("should display View all button if the right panel is not opened on the pinned message list", async () => {
+            // The Right panel is opened on another card
+            jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
+            jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
+                phase: RightPanelPhases.RoomMemberList,
+            });
+
+            renderBanner();
+            expect(screen.getByRole("button", { name: "View all" })).toBeVisible();
+        });
+
+        it("should display Close list button if the message pinning list is displayed", async () => {
+            // The Right panel is closed
+            jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
+            jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
+                phase: RightPanelPhases.PinnedMessages,
+            });
+
+            renderBanner();
+            expect(screen.getByRole("button", { name: "Close list" })).toBeVisible();
+        });
+
+        it("should open or close the message pinning list", async () => {
+            // The Right panel is closed
+            jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
+            jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
+                phase: RightPanelPhases.PinnedMessages,
+            });
+            jest.spyOn(RightPanelStore.instance, "showOrHidePhase").mockReturnValue();
+
+            renderBanner();
+            act(() => screen.getByRole("button", { name: "Close list" }).click());
+            expect(RightPanelStore.instance.showOrHidePhase).toHaveBeenCalledWith(RightPanelPhases.PinnedMessages);
+        });
+
+        it("should listen to the right panel", async () => {
+            // The Right panel is closed
+            jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(true);
+            jest.spyOn(RightPanelStore.instance, "currentCard", "get").mockReturnValue({
+                phase: RightPanelPhases.PinnedMessages,
+            });
+
+            renderBanner();
+            expect(screen.getByRole("button", { name: "Close list" })).toBeVisible();
+
+            jest.spyOn(RightPanelStore.instance, "isOpenForRoom").mockReturnValue(false);
+            act(() => {
+                RightPanelStore.instance.emit(UPDATE_EVENT);
+            });
+            expect(screen.getByRole("button", { name: "View all" })).toBeVisible();
+        });
+    });
+});