Add notifications and toasts for Element Call calls (#9337)

test/Notifier-test.ts

@@ -14,28 +14,21 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
+import { MockedObject } from "jest-mock";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { MatrixEvent } from "matrix-js-sdk/src/models/event";
 
+import BasePlatform from "../src/BasePlatform";
+import { ElementCall } from "../src/models/Call";
 import Notifier from "../src/Notifier";
+import SettingsStore from "../src/settings/SettingsStore";
+import ToastStore from "../src/stores/ToastStore";
 import { getLocalNotificationAccountDataEventType } from "../src/utils/notifications";
 import { getMockClientWithEventEmitter, mkEvent, mkRoom, mockPlatformPeg } from "./test-utils";
+import { IncomingCallToast } from "../src/toasts/IncomingCallToast";
 
 describe("Notifier", () => {
-    let MockPlatform;
-    let accountDataStore = {};
-
-    const mockClient = getMockClientWithEventEmitter({
-        getUserId: jest.fn().mockReturnValue("@bob:example.org"),
-        isGuest: jest.fn().mockReturnValue(false),
-        getAccountData: jest.fn().mockImplementation(eventType => accountDataStore[eventType]),
-        setAccountData: jest.fn().mockImplementation((eventType, content) => {
-            accountDataStore[eventType] = new MatrixEvent({
-                type: eventType,
-                content,
-            });
-        }),
-    });
-    const accountDataEventKey = getLocalNotificationAccountDataEventType(mockClient.deviceId);
     const roomId = "!room1:server";
     const testEvent = mkEvent({
         event: true,
@@ -44,10 +37,33 @@ describe("Notifier", () => {
         room: roomId,
         content: {},
     });
-    const testRoom = mkRoom(mockClient, roomId);
+
+    let MockPlatform: MockedObject<BasePlatform>;
+    let mockClient: MockedObject<MatrixClient>;
+    let testRoom: MockedObject<Room>;
+    let accountDataEventKey: string;
+    let accountDataStore = {};
 
     beforeEach(() => {
         accountDataStore = {};
+        mockClient = getMockClientWithEventEmitter({
+            getUserId: jest.fn().mockReturnValue("@bob:example.org"),
+            isGuest: jest.fn().mockReturnValue(false),
+            getAccountData: jest.fn().mockImplementation(eventType => accountDataStore[eventType]),
+            setAccountData: jest.fn().mockImplementation((eventType, content) => {
+                accountDataStore[eventType] = new MatrixEvent({
+                    type: eventType,
+                    content,
+                });
+            }),
+            decryptEventIfNeeded: jest.fn(),
+            getRoom: jest.fn(),
+            getPushActionsForEvent: jest.fn(),
+        });
+        accountDataEventKey = getLocalNotificationAccountDataEventType(mockClient.deviceId);
+
+        testRoom = mkRoom(mockClient, roomId);
+
         MockPlatform = mockPlatformPeg({
             supportsNotifications: jest.fn().mockReturnValue(true),
             maySendNotifications: jest.fn().mockReturnValue(true),
@@ -55,6 +71,8 @@ describe("Notifier", () => {
         });
 
         Notifier.isBodyEnabled = jest.fn().mockReturnValue(true);
+
+        mockClient.getRoom.mockReturnValue(testRoom);
     });
 
     describe("_displayPopupNotification", () => {
@@ -82,4 +100,73 @@ describe("Notifier", () => {
             expect(Notifier.getSoundForRoom).toHaveBeenCalledTimes(count);
         });
     });
+
+    describe("group call notifications", () => {
+        beforeEach(() => {
+            jest.spyOn(SettingsStore, "getValue").mockReturnValue(true);
+            jest.spyOn(ToastStore.sharedInstance(), "addOrReplaceToast");
+
+            mockClient.getPushActionsForEvent.mockReturnValue({
+                notify: true,
+                tweaks: {},
+            });
+
+            Notifier.onSyncStateChange("SYNCING");
+        });
+
+        afterEach(() => {
+            jest.resetAllMocks();
+        });
+
+        const callOnEvent = (type?: string) => {
+            const callEvent = {
+                getContent: () => { },
+                getRoomId: () => roomId,
+                isBeingDecrypted: () => false,
+                isDecryptionFailure: () => false,
+                getSender: () => "@alice:foo",
+                getType: () => type ?? ElementCall.CALL_EVENT_TYPE.name,
+                getStateKey: () => "state_key",
+            } as unknown as MatrixEvent;
+
+            Notifier.onEvent(callEvent);
+            return callEvent;
+        };
+
+        const setGroupCallsEnabled = (val: boolean) => {
+            jest.spyOn(SettingsStore, "getValue").mockImplementation((name: string) => {
+                if (name === "feature_group_calls") return val;
+            });
+        };
+
+        it("should show toast when group calls are supported", () => {
+            setGroupCallsEnabled(true);
+
+            const callEvent = callOnEvent();
+
+            expect(ToastStore.sharedInstance().addOrReplaceToast).toHaveBeenCalledWith(expect.objectContaining({
+                key: `call_${callEvent.getStateKey()}`,
+                priority: 100,
+                component: IncomingCallToast,
+                bodyClassName: "mx_IncomingCallToast",
+                props: { callEvent },
+            }));
+        });
+
+        it("should not show toast when group calls are not supported", () => {
+            setGroupCallsEnabled(false);
+
+            callOnEvent();
+
+            expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
+        });
+
+        it("should not show toast when calling with non-group call event", () => {
+            setGroupCallsEnabled(true);
+
+            callOnEvent("event_type");
+
+            expect(ToastStore.sharedInstance().addOrReplaceToast).not.toHaveBeenCalled();
+        });
+    });
 });

test/TextForEvent-test.ts

@@ -14,15 +14,17 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-import { EventType, MatrixEvent, RoomMember } from "matrix-js-sdk/src/matrix";
+import { EventType, MatrixClient, MatrixEvent, Room, RoomMember } from "matrix-js-sdk/src/matrix";
 import TestRenderer from 'react-test-renderer';
 import { ReactElement } from "react";
+import { mocked } from "jest-mock";
 
 import { getSenderName, textForEvent } from "../src/TextForEvent";
 import SettingsStore from "../src/settings/SettingsStore";
-import { createTestClient } from './test-utils';
+import { createTestClient, stubClient } from './test-utils';
 import { MatrixClientPeg } from '../src/MatrixClientPeg';
 import UserIdentifierCustomisations from '../src/customisations/UserIdentifier';
+import { ElementCall } from "../src/models/Call";
 
 jest.mock("../src/settings/SettingsStore");
 jest.mock('../src/customisations/UserIdentifier', () => ({
@@ -444,4 +446,42 @@ describe('TextForEvent', () => {
             expect(textForEvent(messageEvent)).toEqual('@a: test message');
         });
     });
+
+    describe("textForCallEvent()", () => {
+        let mockClient: MatrixClient;
+        let callEvent: MatrixEvent;
+
+        beforeEach(() => {
+            stubClient();
+            mockClient = MatrixClientPeg.get();
+
+            mocked(mockClient.getRoom).mockReturnValue({
+                name: "Test room",
+            } as unknown as Room);
+
+            callEvent = {
+                getRoomId: jest.fn(),
+                getType: jest.fn(),
+                isState: jest.fn().mockReturnValue(true),
+            } as unknown as MatrixEvent;
+        });
+
+        describe.each(ElementCall.CALL_EVENT_TYPE.names)("eventType=%s", (eventType: string) => {
+            beforeEach(() => {
+                mocked(callEvent).getType.mockReturnValue(eventType);
+            });
+
+            it("returns correct message for call event when supported", () => {
+                expect(textForEvent(callEvent)).toEqual('Video call started in Test room.');
+            });
+
+            it("returns correct message for call event when supported", () => {
+                mocked(mockClient).supportsVoip.mockReturnValue(false);
+
+                expect(textForEvent(callEvent)).toEqual(
+                    'Video call started in Test room. (not supported by this browser)',
+                );
+            });
+        });
+    });
 });

test/toasts/IncomingCallToast-test.tsx

@@ -0,0 +1,158 @@
+/*
+Copyright 2022 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 React from "react";
+import { render, screen, cleanup, fireEvent, waitFor } from "@testing-library/react";
+import "@testing-library/jest-dom";
+import { mocked, Mocked } from "jest-mock";
+import { Room } from "matrix-js-sdk/src/models/room";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { RoomStateEvent } from "matrix-js-sdk/src/models/room-state";
+import { ClientWidgetApi, Widget } from "matrix-widget-api";
+
+import type { RoomMember } from "matrix-js-sdk/src/models/room-member";
+import {
+    useMockedCalls,
+    MockedCall,
+    stubClient,
+    mkRoomMember,
+    setupAsyncStoreWithClient,
+    resetAsyncStoreWithClient,
+} from "../test-utils";
+import defaultDispatcher from "../../src/dispatcher/dispatcher";
+import { Action } from "../../src/dispatcher/actions";
+import { MatrixClientPeg } from "../../src/MatrixClientPeg";
+import { CallStore } from "../../src/stores/CallStore";
+import { WidgetMessagingStore } from "../../src/stores/widgets/WidgetMessagingStore";
+import DMRoomMap from "../../src/utils/DMRoomMap";
+import ToastStore from "../../src/stores/ToastStore";
+import { getIncomingCallToastKey, IncomingCallToast } from "../../src/toasts/IncomingCallToast";
+
+describe("IncomingCallEvent", () => {
+    useMockedCalls();
+    Object.defineProperty(navigator, "mediaDevices", { value: { enumerateDevices: () => [] } });
+    jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => { });
+
+    let client: Mocked<MatrixClient>;
+    let room: Room;
+    let alice: RoomMember;
+    let bob: RoomMember;
+    let call: MockedCall;
+    let widget: Widget;
+    const dmRoomMap = {
+        getUserIdForRoomId: jest.fn(),
+    } as unknown as DMRoomMap;
+    const toastStore = {
+        dismissToast: jest.fn(),
+    } as unknown as ToastStore;
+
+    beforeEach(async () => {
+        stubClient();
+        client = mocked(MatrixClientPeg.get());
+
+        room = new Room("!1:example.org", client, "@alice:example.org");
+
+        alice = mkRoomMember(room.roomId, "@alice:example.org");
+        bob = mkRoomMember(room.roomId, "@bob:example.org");
+
+        client.getRoom.mockImplementation(roomId => roomId === room.roomId ? room : null);
+        client.getRooms.mockReturnValue([room]);
+        client.reEmitter.reEmit(room, [RoomStateEvent.Events]);
+
+        await Promise.all([CallStore.instance, WidgetMessagingStore.instance].map(
+            store => setupAsyncStoreWithClient(store, client),
+        ));
+
+        MockedCall.create(room, "1");
+        const maybeCall = CallStore.instance.get(room.roomId);
+        if (!(maybeCall instanceof MockedCall)) throw new Error("Failed to create call");
+        call = maybeCall;
+
+        widget = new Widget(call.widget);
+        WidgetMessagingStore.instance.storeMessaging(widget, room.roomId, {
+            stop: () => { },
+        } as unknown as ClientWidgetApi);
+
+        jest.spyOn(DMRoomMap, "shared").mockReturnValue(dmRoomMap);
+        jest.spyOn(ToastStore, "sharedInstance").mockReturnValue(toastStore);
+    });
+
+    afterEach(async () => {
+        cleanup(); // Unmount before we do any cleanup that might update the component
+        call.destroy();
+        WidgetMessagingStore.instance.stopMessaging(widget, room.roomId);
+        await Promise.all([CallStore.instance, WidgetMessagingStore.instance].map(resetAsyncStoreWithClient));
+        jest.restoreAllMocks();
+    });
+
+    const renderToast = () => { render(<IncomingCallToast callEvent={call.event} />); };
+
+    it("correctly shows all the information", () => {
+        call.participants = new Set([alice, bob]);
+        renderToast();
+
+        screen.getByText("Video call started");
+        screen.getByText("Video");
+        screen.getByLabelText("2 participants");
+
+        screen.getByRole("button", { name: "Join" });
+        screen.getByRole("button", { name: "Close" });
+    });
+
+    it("correctly renders toast without a call", () => {
+        call.destroy();
+        renderToast();
+
+        screen.getByText("Video call started");
+        screen.getByText("Video");
+
+        screen.getByRole("button", { name: "Join" });
+        screen.getByRole("button", { name: "Close" });
+    });
+
+    it("joins the call and closes the toast", async () => {
+        renderToast();
+
+        const dispatcherSpy = jest.fn();
+        const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
+
+        fireEvent.click(screen.getByRole("button", { name: "Join" }));
+        await waitFor(() => expect(dispatcherSpy).toHaveBeenCalledWith({
+            action: Action.ViewRoom,
+            room_id: room.roomId,
+            view_call: true,
+        }));
+        await waitFor(() => expect(toastStore.dismissToast).toHaveBeenCalledWith(
+            getIncomingCallToastKey(call.event.getStateKey()!),
+        ));
+
+        defaultDispatcher.unregister(dispatcherRef);
+    });
+
+    it("closes the toast", async () => {
+        renderToast();
+
+        const dispatcherSpy = jest.fn();
+        const dispatcherRef = defaultDispatcher.register(dispatcherSpy);
+
+        fireEvent.click(screen.getByRole("button", { name: "Close" }));
+        await waitFor(() => expect(toastStore.dismissToast).toHaveBeenCalledWith(
+            getIncomingCallToastKey(call.event.getStateKey()!),
+        ));
+
+        defaultDispatcher.unregister(dispatcherRef);
+    });
+});