Add tests

Signed-off-by: Timo K <[email protected]>

Author: toger5

src/toasts/IncomingCallToast.tsx

@@ -13,7 +13,7 @@ import VideoCallIcon from "@vector-im/compound-design-tokens/assets/web/icons/vi
 import CheckIcon from "@vector-im/compound-design-tokens/assets/web/icons/check";
 import CrossIcon from "@vector-im/compound-design-tokens/assets/web/icons/close";
 import { logger } from "matrix-js-sdk/src/logger";
-import { type IRTCDeclineContent, type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
+import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
 
 import { _t } from "../languageHandler";
 import RoomAvatar from "../components/views/avatars/RoomAvatar";
@@ -165,14 +165,12 @@ export function IncomingCallToast({ notificationEvent }: Props): JSX.Element {
     // Dismiss if session got declined remotely.
     const onTimelineChange = useCallback(
         (ev: MatrixEvent) => {
-            const content = ev.getContent() as Partial<IRTCDeclineContent>;
             const userId = room?.client.getUserId();
             if (
                 ev.getType() === EventType.RTCDecline &&
                 userId !== undefined &&
                 ev.getSender() === userId && // It is our decline not someone elses
-                content["m.relates_to"] !== undefined &&
-                content["m.relates_to"].event_id === notificationEvent.getId() // The event declines this ringing toast.
+                ev.relationEventId === notificationEvent.getId() // The event declines this ringing toast.
             ) {
                 dismissToast();
             }

test/unit-tests/Notifier-test.ts

@@ -384,33 +384,49 @@ describe("Notifier", () => {
             jest.resetAllMocks();
         });
 
-        const emitCallNotifyEvent = (type?: string, roomMention = true) => {
-            const callEvent = mkEvent({
-                type: type ?? EventType.CallNotify,
+        const emitCallNotificationEvent = (
+            params: {
+                type?: string;
+                roomMention?: boolean;
+                lifetime?: number;
+                ts?: number;
+            } = {},
+        ) => {
+            const { type, roomMention, lifetime, ts } = {
+                type: EventType.RTCNotification,
+                roomMention: true,
+                lifetime: 30000,
+                ts: Date.now(),
+                ...params,
+            };
+            const notificationEvent = mkEvent({
+                type: type,
                 user: "@alice:foo",
                 room: roomId,
+                ts,
                 content: {
-                    "application": "m.call",
+                    "notification_type": "ring",
+                    "m.relation": { rel_type: "m.reference", event_id: "$memberEventId" },
                     "m.mentions": { user_ids: [], room: roomMention },
-                    "notify_type": "ring",
-                    "call_id": "abc123",
+                    lifetime,
+                    "sender_ts": ts,
                 },
                 event: true,
             });
-            emitLiveEvent(callEvent);
-            return callEvent;
+            emitLiveEvent(notificationEvent);
+            return notificationEvent;
         };
 
         it("shows group call toast", () => {
-            const notifyEvent = emitCallNotifyEvent();
+            const notificationEvent = emitCallNotificationEvent();
 
             expect(ToastStore.sharedInstance().addOrReplaceToast).toHaveBeenCalledWith(
                 expect.objectContaining({
-                    key: getIncomingCallToastKey(notifyEvent.getContent().call_id ?? "", roomId),
+                    key: getIncomingCallToastKey(notificationEvent.getId() ?? "", roomId),
                     priority: 100,
                     component: IncomingCallToast,
                     bodyClassName: "mx_IncomingCallToast",
-                    props: { notifyEvent },
+                    props: { notificationEvent },
                 }),
             );
         });
@@ -438,13 +454,19 @@ describe("Notifier", () => {
             const roomSession = MatrixRTCSession.roomSessionForRoom(mockClient, testRoom);
 
             mockClient.matrixRTC.getRoomSession.mockReturnValue(roomSession);
-            emitCallNotifyEvent();
+            emitCallNotificationEvent();
             expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
             spyCallMemberships.mockRestore();
         });
 
-        it("should not show toast when calling with non-group call event", () => {
-            emitCallNotifyEvent("event_type");
+        it("should not show toast when calling with a different event type to org.matrix.msc4075.rtc.notification", () => {
+            emitCallNotificationEvent({ type: "event_type" });
+
+            expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
+        });
+
+        it("should not show notification event is expired", () => {
+            emitCallNotificationEvent({ ts: Date.now() - 40000 });
 
             expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
         });

test/unit-tests/toasts/IncomingCallToast-test.tsx

@@ -8,17 +8,20 @@ Please see LICENSE files in the repository root for full details.
 
 import React from "react";
 import { render, screen, cleanup, fireEvent, waitFor } from "jest-matrix-react";
-import { mocked, type Mocked } from "jest-mock";
+import { type Mock, mocked, type Mocked } from "jest-mock";
 import {
     Room,
     RoomStateEvent,
     type MatrixEvent,
     MatrixEventEvent,
     type MatrixClient,
     type RoomMember,
+    EventType,
+    RoomEvent,
+    type IRoomTimelineData,
 } from "matrix-js-sdk/src/matrix";
 import { type ClientWidgetApi, Widget } from "matrix-widget-api";
-import { type ICallNotifyContent } from "matrix-js-sdk/src/matrixrtc";
+import { type IRTCNotificationContent } from "matrix-js-sdk/src/matrixrtc";
 
 import {
     useMockedCalls,
@@ -27,6 +30,7 @@ import {
     mkRoomMember,
     setupAsyncStoreWithClient,
     resetAsyncStoreWithClient,
+    mkEvent,
 } from "../../test-utils";
 import defaultDispatcher from "../../../src/dispatcher/dispatcher";
 import { Action } from "../../../src/dispatcher/actions";
@@ -43,7 +47,8 @@ describe("IncomingCallToast", () => {
 
     let client: Mocked<MatrixClient>;
     let room: Room;
-    let notifyContent: ICallNotifyContent;
+    let notificationEvent: MatrixEvent;
+
     let alice: RoomMember;
     let bob: RoomMember;
     let call: MockedCall;
@@ -64,10 +69,23 @@ describe("IncomingCallToast", () => {
         document.body.appendChild(audio);
 
         room = new Room("!1:example.org", client, "@alice:example.org");
-        notifyContent = {
-            call_id: "",
-            getRoomId: () => room.roomId,
-        } as unknown as ICallNotifyContent;
+        const ts = Date.now();
+        const notificationContent = {
+            "notification_type": "notification",
+            "m.relation": { rel_type: "m.reference", event_id: "$memberEventId" },
+            "m.mentions": { user_ids: [], room: true },
+            "lifetime": 3000,
+            "sender_ts": ts,
+        } as unknown as IRTCNotificationContent;
+        notificationEvent = mkEvent({
+            type: EventType.RTCNotification,
+            user: "@userId:matrix.org",
+            content: notificationContent,
+            room: room.roomId,
+            ts,
+            id: "$notificationEventId",
+            event: true,
+        });
         alice = mkRoomMember(room.roomId, "@alice:example.org");
         bob = mkRoomMember(room.roomId, "@bob:example.org");
 
@@ -104,8 +122,12 @@ describe("IncomingCallToast", () => {
     });
 
     const renderToast = () => {
-        call.event.getContent = () => notifyContent as any;
-        render(<IncomingCallToast notificationEvent={call.event} />);
+        call.event.getContent = () =>
+            ({
+                call_id: "",
+                getRoomId: () => room.roomId,
+            }) as any;
+        render(<IncomingCallToast notificationEvent={notificationEvent} />);
     };
 
     it("correctly shows all the information", () => {
@@ -124,14 +146,13 @@ describe("IncomingCallToast", () => {
     });
 
     it("start ringing on ring notify event", () => {
-        call.event.getContent = () =>
-            ({
-                ...notifyContent,
-                notify_type: "ring",
-            }) as any;
+        const oldContent = notificationEvent.getContent() as IRTCNotificationContent;
+        (notificationEvent as unknown as { getContent: () => IRTCNotificationContent }).getContent = () => {
+            return { ...oldContent, notification_type: "ring" } as IRTCNotificationContent;
+        };
 
         const playMock = jest.spyOn(LegacyCallHandler.instance, "play");
-        render(<IncomingCallToast notificationEvent={call.event} />);
+        render(<IncomingCallToast notificationEvent={notificationEvent} />);
         expect(playMock).toHaveBeenCalled();
     });
 
@@ -143,16 +164,18 @@ describe("IncomingCallToast", () => {
         screen.getByText("Video");
 
         screen.getByRole("button", { name: "Join" });
+        screen.getByRole("button", { name: "Decline" });
         screen.getByRole("button", { name: "Close" });
     });
 
-    it("joins the call and closes the toast", async () => {
+    it("opens the lobby and closes the toast when pressing on the toast", async () => {
         renderToast();
 
         const dispatcherSpy = jest.fn();
         const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
 
-        fireEvent.click(screen.getByRole("button", { name: "Join" }));
+        // click on the avatar (which is the example used for pressing on any area other than the buttons)
+        fireEvent.click(screen.getByRole("presentation", { name: "" }));
         await waitFor(() =>
             expect(dispatcherSpy).toHaveBeenCalledWith({
                 action: Action.ViewRoom,
@@ -163,12 +186,38 @@ describe("IncomingCallToast", () => {
         );
         await waitFor(() =>
             expect(toastStore.dismissToast).toHaveBeenCalledWith(
-                getIncomingCallToastKey(notifyContent.call_id, room.roomId),
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
+            ),
+        );
+
+        defaultDispatcher.unregister(dispatcherRef);
+    });
+
+    it("opens the call directly and closes the toast when pressing on the join button", async () => {
+        renderToast();
+
+        const dispatcherSpy = jest.fn();
+        const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
+
+        // click on the avatar (which is the example used for pressing on any area other than the buttons)
+        fireEvent.click(screen.getByRole("button", { name: "Join" }));
+        await waitFor(() =>
+            expect(dispatcherSpy).toHaveBeenCalledWith({
+                action: Action.ViewRoom,
+                room_id: room.roomId,
+                skipLobby: true,
+                view_call: true,
+            }),
+        );
+        await waitFor(() =>
+            expect(toastStore.dismissToast).toHaveBeenCalledWith(
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
             ),
         );
 
         defaultDispatcher.unregister(dispatcherRef);
     });
+
     it("Dismiss toast if user starts call and skips lobby when using shift key click", async () => {
         renderToast();
 
@@ -186,7 +235,7 @@ describe("IncomingCallToast", () => {
         );
         await waitFor(() =>
             expect(toastStore.dismissToast).toHaveBeenCalledWith(
-                getIncomingCallToastKey(notifyContent.call_id, room.roomId),
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
             ),
         );
 
@@ -202,7 +251,7 @@ describe("IncomingCallToast", () => {
         fireEvent.click(screen.getByRole("button", { name: "Close" }));
         await waitFor(() =>
             expect(toastStore.dismissToast).toHaveBeenCalledWith(
-                getIncomingCallToastKey(notifyContent.call_id, room.roomId),
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
             ),
         );
 
@@ -220,7 +269,7 @@ describe("IncomingCallToast", () => {
 
         await waitFor(() =>
             expect(toastStore.dismissToast).toHaveBeenCalledWith(
-                getIncomingCallToastKey(notifyContent.call_id, room.roomId),
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
             ),
         );
     });
@@ -233,7 +282,7 @@ describe("IncomingCallToast", () => {
 
         await waitFor(() =>
             expect(toastStore.dismissToast).toHaveBeenCalledWith(
-                getIncomingCallToastKey(notifyContent.call_id, room.roomId),
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
             ),
         );
     });
@@ -244,7 +293,82 @@ describe("IncomingCallToast", () => {
 
         await waitFor(() =>
             expect(toastStore.dismissToast).toHaveBeenCalledWith(
-                getIncomingCallToastKey(notifyContent.call_id, room.roomId),
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
+            ),
+        );
+    });
+
+    it("closes toast when a decline event was received", async () => {
+        (toastStore.dismissToast as Mock).mockReset();
+        renderToast();
+
+        room.emit(
+            RoomEvent.Timeline,
+            mkEvent({
+                user: "@userId:matrix.org",
+                type: EventType.RTCDecline,
+                content: { "m.relates_to": { event_id: notificationEvent.getId()!, rel_type: "m.reference" } },
+                event: true,
+            }),
+            room,
+            undefined,
+            false,
+            {} as unknown as IRoomTimelineData,
+        );
+
+        await waitFor(() =>
+            expect(toastStore.dismissToast).toHaveBeenCalledWith(
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
+            ),
+        );
+    });
+
+    it("does not close toast when a decline event for another user was received", async () => {
+        (toastStore.dismissToast as Mock).mockReset();
+        renderToast();
+
+        room.emit(
+            RoomEvent.Timeline,
+            mkEvent({
+                user: "@userIdNotMe:matrix.org",
+                type: EventType.RTCDecline,
+                content: { "m.relates_to": { event_id: notificationEvent.getId()!, rel_type: "m.reference" } },
+                event: true,
+            }),
+            room,
+            undefined,
+            false,
+            {} as unknown as IRoomTimelineData,
+        );
+
+        await waitFor(() =>
+            expect(toastStore.dismissToast).not.toHaveBeenCalledWith(
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
+            ),
+        );
+    });
+
+    it("does not close toast when a decline event for another notification Event was received", async () => {
+        (toastStore.dismissToast as Mock).mockReset();
+        renderToast();
+
+        room.emit(
+            RoomEvent.Timeline,
+            mkEvent({
+                user: "@userId:matrix.org",
+                type: EventType.RTCDecline,
+                content: { "m.relates_to": { event_id: "$otherNotificationEventRelation", rel_type: "m.reference" } },
+                event: true,
+            }),
+            room,
+            undefined,
+            false,
+            {} as unknown as IRoomTimelineData,
+        );
+
+        await waitFor(() =>
+            expect(toastStore.dismissToast).not.toHaveBeenCalledWith(
+                getIncomingCallToastKey(notificationEvent.getId()!, room.roomId),
             ),
         );
     });