finish up tests

src/room/CallEventAudioRenderer.test.tsx

@@ -6,27 +6,29 @@ Please see LICENSE in the repository root for full details.
 */
 
 import { render } from "@testing-library/react";
-import { afterAll, beforeEach, expect, test } from "vitest";
-
-
-import {
-  playReactionsSound,
-  soundEffectVolumeSetting,
-} from "../settings/settings";
-import { MockLivekitRoom, mockLivekitRoom, mockLocalParticipant, mockMatrixRoom, mockMatrixRoomMember, mockMediaPlay, mockRemoteParticipant } from "../utils/test";
+import { beforeEach, expect, test } from "vitest";
 import { MatrixClient } from "matrix-js-sdk/src/client";
-import { E2eeType } from "../e2ee/e2eeType";
-import { CallViewModel } from "../state/CallViewModel";
-import { ConnectionState, Room } from "livekit-client";
+import { ConnectionState, RemoteParticipant, Room } from "livekit-client";
 import { of } from "rxjs";
-import { CallEventAudioRenderer } from "./CallEventAudioRenderer";
-
-import enterCallSoundOgg from "../sound/join_call.ogg";
-import leftCallSoundOgg from "../sound/left_call.ogg";
 import { afterEach } from "node:test";
 import { act } from "react";
-import { LazyEventEmitter } from "../LazyEventEmitter";
-import EventEmitter from "events";
+
+import { soundEffectVolumeSetting } from "../settings/settings";
+import {
+  EmittableMockLivekitRoom,
+  mockLivekitRoom,
+  mockLocalParticipant,
+  mockMatrixRoom,
+  mockMatrixRoomMember,
+  mockMediaPlay,
+  mockRemoteParticipant,
+} from "../utils/test";
+import { E2eeType } from "../e2ee/e2eeType";
+import { CallViewModel } from "../state/CallViewModel";
+import {
+  CallEventAudioRenderer,
+  MAX_PARTICIPANT_COUNT_FOR_SOUND,
+} from "./CallEventAudioRenderer";
 
 const alice = mockMatrixRoomMember({ userId: "@alice:example.org" });
 const bob = mockMatrixRoomMember({ userId: "@bob:example.org" });
@@ -38,6 +40,9 @@ const bobParticipant = mockRemoteParticipant({ identity: bobId });
 
 const originalPlayFn = window.HTMLMediaElement.prototype.play;
 
+const enterSound = "http://localhost:3000/src/sound/join_call.ogg";
+const leaveSound = "http://localhost:3000/src/sound/left_call.ogg";
+
 beforeEach(() => {
   soundEffectVolumeSetting.setValue(soundEffectVolumeSetting.defaultValue);
 });
@@ -49,7 +54,7 @@ afterEach(() => {
 test("plays a sound when entering a call", () => {
   const audioIsPlaying: string[] = mockMediaPlay();
   const members = new Map([alice, bob].map((p) => [p.userId, p]));
-  const remoteParticipants = of([aliceParticipant, bobParticipant]);
+  const remoteParticipants = of([aliceParticipant]);
   const liveKitRoom = mockLivekitRoom(
     { localParticipant },
     { remoteParticipants },
@@ -70,8 +75,10 @@ test("plays a sound when entering a call", () => {
   );
 
   render(<CallEventAudioRenderer vm={vm} />);
-  // Play a sound when joining a call.
-  expect(audioIsPlaying.includes(enterCallSoundOgg));
+  expect(audioIsPlaying).toEqual([
+    // Joining the call
+    enterSound,
+  ]);
 });
 
 test("plays no sound when muted", () => {
@@ -106,8 +113,13 @@ test("plays no sound when muted", () => {
 test("plays a sound when a user joins", () => {
   const audioIsPlaying: string[] = mockMediaPlay();
   const members = new Map([alice].map((p) => [p.userId, p]));
-  const remoteParticipants = new Map([aliceParticipant].map((p) => [p.identity, p]));
-  const liveKitRoom = new MockLivekitRoom({localParticipant, remoteParticipants});
+  const remoteParticipants = new Map(
+    [aliceParticipant].map((p) => [p.identity, p]),
+  );
+  const liveKitRoom = new EmittableMockLivekitRoom({
+    localParticipant,
+    remoteParticipants,
+  });
 
   const vm = new CallViewModel(
     mockMatrixRoom({
@@ -128,16 +140,24 @@ test("plays a sound when a user joins", () => {
     liveKitRoom.addParticipant(bobParticipant);
   });
   // Play a sound when joining a call.
-  expect(audioIsPlaying).toHaveLength(2);
+  expect(audioIsPlaying).toEqual([
+    // Joining the call
+    enterSound,
+    // Bob leaves
+    enterSound,
+  ]);
 });
 
-
-
 test("plays a sound when a user leaves", () => {
   const audioIsPlaying: string[] = mockMediaPlay();
   const members = new Map([alice].map((p) => [p.userId, p]));
-  const remoteParticipants = new Map([aliceParticipant].map((p) => [p.identity, p]));
-  const liveKitRoom = new MockLivekitRoom({localParticipant, remoteParticipants});
+  const remoteParticipants = new Map(
+    [aliceParticipant].map((p) => [p.identity, p]),
+  );
+  const liveKitRoom = new EmittableMockLivekitRoom({
+    localParticipant,
+    remoteParticipants,
+  });
 
   const vm = new CallViewModel(
     mockMatrixRoom({
@@ -157,9 +177,49 @@ test("plays a sound when a user leaves", () => {
   act(() => {
     liveKitRoom.removeParticipant(aliceParticipant);
   });
-  // Play a join sound and a leave sound.
   expect(audioIsPlaying).toEqual([
-    'http://localhost:3000/src/sound/join_call.ogg',
-    'http://localhost:3000/src/sound/left_call.ogg'
+    // Joining the call
+    enterSound,
+    // Alice leaves
+    leaveSound,
   ]);
 });
+
+test("plays no sound when the participant list", () => {
+  const audioIsPlaying: string[] = mockMediaPlay();
+  const members = new Map([alice].map((p) => [p.userId, p]));
+  const remoteParticipants = new Map<string, RemoteParticipant>([
+    [aliceParticipant.identity, aliceParticipant],
+    ...Array.from({ length: MAX_PARTICIPANT_COUNT_FOR_SOUND - 1 }).map<
+      [string, RemoteParticipant]
+    >((_, index) => {
+      const p = mockRemoteParticipant({ identity: `user${index}` });
+      return [p.identity, p];
+    }),
+  ]);
+  const liveKitRoom = new EmittableMockLivekitRoom({
+    localParticipant,
+    remoteParticipants,
+  });
+
+  const vm = new CallViewModel(
+    mockMatrixRoom({
+      client: {
+        getUserId: () => "@carol:example.org",
+      } as Partial<MatrixClient> as MatrixClient,
+      getMember: (userId) => members.get(userId) ?? null,
+    }),
+    liveKitRoom as unknown as Room,
+    {
+      kind: E2eeType.PER_PARTICIPANT,
+    },
+    of(ConnectionState.Connected),
+  );
+  render(<CallEventAudioRenderer vm={vm} />);
+  expect(audioIsPlaying).toEqual([]);
+  // When the count drops
+  act(() => {
+    liveKitRoom.removeParticipant(aliceParticipant);
+  });
+  expect(audioIsPlaying).toEqual([leaveSound]);
+});

src/room/CallEventAudioRenderer.tsx

@@ -9,7 +9,6 @@ import { ReactNode, useEffect, useRef } from "react";
 import { filter } from "rxjs";
 
 import {
-  playReactionsSound,
   soundEffectVolumeSetting as effectSoundVolumeSetting,
   useSetting,
 } from "../settings/settings";
@@ -35,7 +34,7 @@ export function CallEventAudioRenderer({
   useEffect(() => {
     if (effectSoundVolume === 0) {
       return;
-    } 
+    }
     const joinSub = vm.memberChanges
       .pipe(
         filter(
@@ -44,7 +43,6 @@ export function CallEventAudioRenderer({
         ),
       )
       .subscribe(({ joined }) => {
-        console.log("Join", joined);
         if (callEntered.current?.paused) {
           void callEntered.current.play();
         }

src/utils/test.ts

@@ -16,6 +16,7 @@ import {
   Room as LivekitRoom,
   RoomEvent,
 } from "livekit-client";
+import { EventEmitter } from "stream";
 
 import {
   LocalUserMediaViewModel,
@@ -24,7 +25,6 @@ import {
 import { E2eeType } from "../e2ee/e2eeType";
 import { DEFAULT_CONFIG, ResolvedConfigOptions } from "../config/ConfigOptions";
 import { Config } from "../config/Config";
-import { EventEmitter } from "stream";
 
 export function withFakeTimers(continuation: () => void): void {
   vi.useFakeTimers();
@@ -111,22 +111,28 @@ export function mockMatrixRoom(room: Partial<MatrixRoom>): MatrixRoom {
   return { ...mockEmitter(), ...room } as Partial<MatrixRoom> as MatrixRoom;
 }
 
-export class MockLivekitRoom extends EventEmitter {
+/**
+ * A mock of a Livekit Room that can emit events.
+ */
+export class EmittableMockLivekitRoom extends EventEmitter {
   public localParticipant?: LocalParticipant;
   public remoteParticipants: Map<string, RemoteParticipant>;
 
-  constructor(room: {localParticipant?: LocalParticipant, remoteParticipants: Map<string, RemoteParticipant>}) {
+  public constructor(room: {
+    localParticipant?: LocalParticipant;
+    remoteParticipants: Map<string, RemoteParticipant>;
+  }) {
     super();
     this.localParticipant = room.localParticipant;
     this.remoteParticipants = room.remoteParticipants ?? new Map();
   }
 
-  public addParticipant(remoteParticipant: RemoteParticipant) {
+  public addParticipant(remoteParticipant: RemoteParticipant): void {
     this.remoteParticipants.set(remoteParticipant.identity, remoteParticipant);
     this.emit(RoomEvent.ParticipantConnected, remoteParticipant);
   }
 
-  public removeParticipant(remoteParticipant: RemoteParticipant) {
+  public removeParticipant(remoteParticipant: RemoteParticipant): void {
     this.remoteParticipants.delete(remoteParticipant.identity);
     this.emit(RoomEvent.ParticipantDisconnected, remoteParticipant);
   }
@@ -230,11 +236,11 @@ export function mockConfig(config: Partial<ResolvedConfigOptions> = {}): void {
   });
 }
 
-export function mockMediaPlay() {
+export function mockMediaPlay(): string[] {
   const audioIsPlaying: string[] = [];
   window.HTMLMediaElement.prototype.play = async function (): Promise<void> {
     audioIsPlaying.push((this.children[0] as HTMLSourceElement).src);
     return Promise.resolve();
   };
   return audioIsPlaying;
-}
+}