use the matrixRtcSdk

src/room/InCallView.test.tsx

@@ -15,22 +15,20 @@ import {
   vi,
 } from "vitest";
 import { act, render, type RenderResult } from "@testing-library/react";
-import { type LocalParticipant } from "livekit-client";
-import { BehaviorSubject, of } from "rxjs";
+import { BehaviorSubject } from "rxjs";
 import { BrowserRouter } from "react-router-dom";
 import { TooltipProvider } from "@vector-im/compound-web";
-import { RoomContext, useLocalParticipant } from "@livekit/components-react";
 import userEvent from "@testing-library/user-event";
 
 import { ActiveCall, InCallView } from "./InCallView";
 import {
-  mockLivekitRoom,
-  mockLocalParticipant,
   mockMediaDevices,
   mockMuteStates,
-  mockRemoteParticipant,
   mockRtcMembership,
   type MockRTCSession,
+  mockMatrixRTCClient,
+  mockMemberMedia,
+  mockRTCMember,
 } from "../utils/test";
 import { E2eeType } from "../e2ee/e2eeType";
 import {
@@ -41,15 +39,17 @@ import {
   type CallViewModel,
   type CallViewModelOptions,
 } from "../state/CallViewModel/CallViewModel";
-import { alice, local } from "../utils/test-fixtures";
+import { alice, local, aliceRtcMember } from "../utils/test-fixtures";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import { useRoomEncryptionSystem } from "../e2ee/sharedKeyManagement";
-import { LivekitRoomAudioRenderer } from "../livekit/MatrixAudioRenderer";
+import { MemberAudioRenderer } from "../tracks/MemberAudioRenderer";
+import type * as MatrixRTCSdk from "@element-hq/matrixrtc-sdk";
+import { constant, type ObservableScope } from "@element-hq/matrixrtc-sdk";
 import { MediaDevicesContext } from "../MediaDevicesContext";
 import { type MediaDevices as ECMediaDevices } from "../state/MediaDevices";
 import { AppBar } from "../AppBar";
 import { type MatrixInfo } from "./VideoPreview";
-import { ProcessorProvider } from "../livekit/TrackProcessorContext";
+import { ProcessorProvider } from "../tracks/TrackProcessorContext";
 import { initializeWidget } from "../widget";
 import { RootElementProvider } from "../RootElementContext";
 
@@ -68,21 +68,19 @@ vi.mock("../soundUtils");
 vi.mock("../useAudioContext");
 vi.mock("../tile/GridTile");
 vi.mock("../tile/SpotlightTile");
-vi.mock("@livekit/components-react");
-vi.mock("livekit-client/e2ee-worker?worker");
 vi.mock("../e2ee/sharedKeyManagement");
-vi.mock("../livekit/MatrixAudioRenderer");
+vi.mock("../tracks/MemberAudioRenderer");
+// ActiveCall builds the client itself; the view is what these tests are about
+const createMatrixRTCClientMock = vi.hoisted(() => vi.fn());
+vi.mock("@element-hq/matrixrtc-sdk", async (importOriginal) => ({
+  ...(await importOriginal<typeof MatrixRTCSdk>()),
+  createMatrixRTCClient: createMatrixRTCClientMock,
+}));
 vi.mock("react-use-measure", () => ({
   default: (): [() => void, object] => [(): void => {}, {}],
 }));
 
 const localRtcMember = mockRtcMembership("@carol:example.org", "CCCC");
-const localParticipant = mockLocalParticipant({
-  identity: "@local:example.org:AAAAAA",
-});
-const remoteParticipant = mockRemoteParticipant({
-  identity: "@alice:example.org:AAAAAA",
-});
 
 const matrixInfo = {
   userId: "",
@@ -100,21 +98,26 @@ let useRoomEncryptionSystemMock: MockedFunction<typeof useRoomEncryptionSystem>;
 beforeEach(() => {
   vi.clearAllMocks();
 
-  // MatrixAudioRenderer is tested separately.
-  (
-    LivekitRoomAudioRenderer as MockedFunction<typeof LivekitRoomAudioRenderer>
-  ).mockImplementation((_props) => {
-    return <div>mocked: MatrixAudioRenderer</div>;
-  });
-  (
-    useLocalParticipant as MockedFunction<typeof useLocalParticipant>
-  ).mockImplementation(
-    () =>
-      ({
-        isScreenShareEnabled: false,
-        localParticipant: localRtcMember as unknown as LocalParticipant,
-      }) as unknown as ReturnType<typeof useLocalParticipant>,
+  createMatrixRTCClientMock.mockImplementation((scope: ObservableScope) =>
+    mockMatrixRTCClient(scope, {
+      localMember$: constant(
+        mockRTCMember(true, {
+          membership: localRtcMember,
+          media$: constant(mockMemberMedia({ local: true })),
+        }),
+      ),
+      remoteMembers$: constant([
+        mockRTCMember(false, {
+          membership: aliceRtcMember,
+          media$: constant(mockMemberMedia()),
+        }),
+      ]),
+    }),
   );
+  // MemberAudioRenderer is tested separately.
+  (
+    MemberAudioRenderer as MockedFunction<typeof MemberAudioRenderer>
+  ).mockImplementation(() => <div>mocked: MemberAudioRenderer</div>);
   useRoomEncryptionSystemMock =
     useRoomEncryptionSystem as typeof useRoomEncryptionSystemMock;
   useRoomEncryptionSystemMock.mockReturnValue({ kind: E2eeType.NONE });
@@ -131,14 +134,6 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
 } {
   const mediaDevices = args.mediaDevices ?? mockMediaDevices({});
   const muteState = mockMuteStates();
-  const livekitRoom = mockLivekitRoom(
-    {
-      localParticipant,
-    },
-    {
-      remoteParticipants$: of([remoteParticipant]),
-    },
-  );
   const { vm, footerVm, developerSettingsVm, rtcSession } =
     getBasicCallViewModelEnvironment(
       [local, alice],
@@ -174,9 +169,7 @@ function createInCallView(args: CreateInCallViewArgs = {}): RenderResult & {
           vm={vm}
           rtcSession={rtcSession.asMockedSession()}
         >
-          <TooltipProvider>
-            <RoomContext value={livekitRoom}>{content}</RoomContext>
-          </TooltipProvider>
+          <TooltipProvider>{content}</TooltipProvider>
         </ReactionsSenderProvider>
       </MediaDevicesContext>
     </BrowserRouter>,
@@ -244,18 +237,16 @@ describe("ActiveCall", () => {
         <MediaDevicesContext value={mediaDevices}>
           <ProcessorProvider>
             <TooltipProvider>
-              <RoomContext value={mockLivekitRoom({ localParticipant })}>
-                <ActiveCall
-                  client={matrixRoom.client}
-                  rtcSession={rtcSession.asMockedSession()}
-                  matrixRoom={matrixRoom}
-                  muteStates={mockMuteStates()}
-                  matrixInfo={matrixInfo}
-                  onShareClick={null}
-                  e2eeSystem={{ kind: E2eeType.NONE }}
-                  onLeft={(): void => {}}
-                />
-              </RoomContext>
+              <ActiveCall
+                client={matrixRoom.client}
+                rtcSession={rtcSession.asMockedSession()}
+                matrixRoom={matrixRoom}
+                muteStates={mockMuteStates()}
+                matrixInfo={matrixInfo}
+                onShareClick={null}
+                e2eeSystem={{ kind: E2eeType.NONE }}
+                onLeft={(): void => {}}
+              />
             </TooltipProvider>
           </ProcessorProvider>
         </MediaDevicesContext>
@@ -294,18 +285,16 @@ describe("ActiveCall", () => {
             <MediaDevicesContext value={mediaDevices}>
               <ProcessorProvider>
                 <TooltipProvider>
-                  <RoomContext value={mockLivekitRoom({ localParticipant })}>
-                    <ActiveCall
-                      client={matrixRoom.client}
-                      rtcSession={rtcSession.asMockedSession()}
-                      matrixRoom={matrixRoom}
-                      muteStates={mockMuteStates()}
-                      matrixInfo={matrixInfo}
-                      onShareClick={null}
-                      e2eeSystem={{ kind: E2eeType.NONE }}
-                      onLeft={(): void => {}}
-                    />
-                  </RoomContext>
+                  <ActiveCall
+                    client={matrixRoom.client}
+                    rtcSession={rtcSession.asMockedSession()}
+                    matrixRoom={matrixRoom}
+                    muteStates={mockMuteStates()}
+                    matrixInfo={matrixInfo}
+                    onShareClick={null}
+                    e2eeSystem={{ kind: E2eeType.NONE }}
+                    onLeft={(): void => {}}
+                  />
                 </TooltipProvider>
               </ProcessorProvider>
             </MediaDevicesContext>