Add local echo of connected devices in video rooms (#8368)

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

@@ -18,6 +18,8 @@ import React from "react";
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
 import { mocked } from "jest-mock";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import {
@@ -26,6 +28,7 @@ import {
     mkRoom,
     mkVideoChannelMember,
     stubVideoChannelStore,
+    StubVideoChannelStore,
 } from "../../../test-utils";
 import RoomTile from "../../../../src/components/views/rooms/RoomTile";
 import SettingsStore from "../../../../src/settings/SettingsStore";
@@ -39,9 +42,8 @@ describe("RoomTile", () => {
     jest.spyOn(PlatformPeg, 'get')
         .mockReturnValue({ overrideBrowserShortcuts: () => false } as unknown as BasePlatform);
 
-    let cli;
-    let store;
-
+    let cli: MatrixClient;
+    let store: StubVideoChannelStore;
     beforeEach(() => {
         const realGetValue = SettingsStore.getValue;
         SettingsStore.getValue = <T, >(name: string, roomId?: string): T => {
@@ -52,7 +54,7 @@ describe("RoomTile", () => {
         };
 
         stubClient();
-        cli = mocked(MatrixClientPeg.get());
+        cli = MatrixClientPeg.get();
         store = stubVideoChannelStore();
         DMRoomMap.makeShared();
     });
@@ -60,8 +62,11 @@ describe("RoomTile", () => {
     afterEach(() => jest.clearAllMocks());
 
     describe("video rooms", () => {
-        const room = mkRoom(cli, "!1:example.org");
-        room.isElementVideoRoom.mockReturnValue(true);
+        let room: Room;
+        beforeEach(() => {
+            room = mkRoom(cli, "!1:example.org");
+            mocked(room.isElementVideoRoom).mockReturnValue(true);
+        });
 
         it("tracks connection state", () => {
             const tile = mount(
@@ -97,7 +102,7 @@ describe("RoomTile", () => {
                 mkVideoChannelMember("@chris:example.org", ["device 1"]),
             ]));
 
-            mocked(room.currentState).getMember.mockImplementation(userId => ({
+            mocked(room).getMember.mockImplementation(userId => ({
                 userId,
                 membership: userId === "@chris:example.org" ? "leave" : "join",
                 name: userId,
@@ -117,8 +122,36 @@ describe("RoomTile", () => {
             );
 
             // Only Alice should display as connected
-            const participants = tile.find(".mx_RoomTile_videoParticipants");
-            expect(participants.text()).toEqual("1");
+            expect(tile.find(".mx_RoomTile_videoParticipants").text()).toEqual("1");
+        });
+
+        it("reflects local echo in connected members", () => {
+            mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
+                // Make the remote echo claim that we're connected, while leaving the store disconnected
+                mkVideoChannelMember(cli.getUserId(), [cli.getDeviceId()]),
+            ]));
+
+            mocked(room).getMember.mockImplementation(userId => ({
+                userId,
+                membership: "join",
+                name: userId,
+                rawDisplayName: userId,
+                roomId: "!1:example.org",
+                getAvatarUrl: () => {},
+                getMxcAvatarUrl: () => {},
+            }) as unknown as RoomMember);
+
+            const tile = mount(
+                <RoomTile
+                    room={room}
+                    showMessagePreview={false}
+                    isMinimized={false}
+                    tag={DefaultTagID.Untagged}
+                />,
+            );
+
+            // Because of our local echo, we should still appear as disconnected
+            expect(tile.find(".mx_RoomTile_videoParticipants").exists()).toEqual(false);
         });
     });
 });

test/components/views/voip/VideoLobby-test.tsx

@@ -18,11 +18,14 @@ import React from "react";
 import { mount } from "enzyme";
 import { act } from "react-dom/test-utils";
 import { mocked } from "jest-mock";
+import { MatrixClient } from "matrix-js-sdk/src/client";
+import { Room } from "matrix-js-sdk/src/models/room";
 import { RoomMember } from "matrix-js-sdk/src/models/room-member";
 
 import {
     stubClient,
     stubVideoChannelStore,
+    StubVideoChannelStore,
     mkRoom,
     mkVideoChannelMember,
     mockStateEventImplementation,
@@ -33,7 +36,6 @@ import MemberAvatar from "../../../../src/components/views/avatars/MemberAvatar"
 import VideoLobby from "../../../../src/components/views/voip/VideoLobby";
 
 describe("VideoLobby", () => {
-    stubClient();
     Object.defineProperty(navigator, "mediaDevices", {
         value: {
             enumerateDevices: jest.fn(),
@@ -42,19 +44,17 @@ describe("VideoLobby", () => {
     });
     jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
 
-    const cli = MatrixClientPeg.get();
-    const room = mkRoom(cli, "!1:example.org");
-
-    let store;
+    let cli: MatrixClient;
+    let store: StubVideoChannelStore;
+    let room: Room;
     beforeEach(() => {
+        stubClient();
+        cli = MatrixClientPeg.get();
         store = stubVideoChannelStore();
+        room = mkRoom(cli, "!1:example.org");
         mocked(navigator.mediaDevices.enumerateDevices).mockResolvedValue([]);
     });
 
-    afterEach(() => {
-        jest.clearAllMocks();
-    });
-
     describe("connected members", () => {
         it("hides when no one is connected", async () => {
             const lobby = mount(<VideoLobby room={room} />);
@@ -75,7 +75,7 @@ describe("VideoLobby", () => {
                 mkVideoChannelMember("@chris:example.org", ["device 1"]),
             ]));
 
-            mocked(room.currentState).getMember.mockImplementation(userId => ({
+            mocked(room).getMember.mockImplementation(userId => ({
                 userId,
                 membership: userId === "@chris:example.org" ? "leave" : "join",
                 name: userId,
@@ -95,6 +95,31 @@ describe("VideoLobby", () => {
             expect(memberText).toEqual("1 person connected");
             expect(lobby.find(FacePile).find(MemberAvatar).props().member.userId).toEqual("@alice:example.org");
         });
+
+        it("doesn't include remote echo of this device being connected", async () => {
+            mocked(room.currentState).getStateEvents.mockImplementation(mockStateEventImplementation([
+                // Make the remote echo claim that we're connected, while leaving the store disconnected
+                mkVideoChannelMember(cli.getUserId(), [cli.getDeviceId()]),
+            ]));
+
+            mocked(room).getMember.mockImplementation(userId => ({
+                userId,
+                membership: "join",
+                name: userId,
+                rawDisplayName: userId,
+                roomId: "!1:example.org",
+                getAvatarUrl: () => {},
+                getMxcAvatarUrl: () => {},
+            }) as unknown as RoomMember);
+
+            const lobby = mount(<VideoLobby room={room} />);
+            // Wait for state to settle
+            await act(() => Promise.resolve());
+            lobby.update();
+
+            // Because of our local echo, we should still appear as disconnected
+            expect(lobby.find(".mx_VideoLobby_connectedMembers").exists()).toEqual(false);
+        });
     });
 
     describe("device buttons", () => {

test/test-utils/test-utils.ts

@@ -379,6 +379,7 @@ export function mkStubRoom(roomId: string = null, name: string, client: MatrixCl
         getJoinRule: jest.fn().mockReturnValue("invite"),
         loadMembersIfNeeded: jest.fn(),
         client,
+        myUserId: client?.getUserId(),
         canInvite: jest.fn(),
     } as unknown as Room;
 }

test/test-utils/video.ts

@@ -21,7 +21,7 @@ import { mkEvent } from "./test-utils";
 import { VIDEO_CHANNEL_MEMBER } from "../../src/utils/VideoChannelUtils";
 import VideoChannelStore, { VideoChannelEvent, IJitsiParticipant } from "../../src/stores/VideoChannelStore";
 
-class StubVideoChannelStore extends EventEmitter {
+export class StubVideoChannelStore extends EventEmitter {
     private _roomId: string;
     public get roomId(): string { return this._roomId; }
     private _connected: boolean;