From 7b4241585bd5f09e4533bed779d0f9295722b66b Mon Sep 17 00:00:00 2001 From: Will Hunt Date: Mon, 2 Dec 2024 13:23:18 +0000 Subject: [PATCH] finish up tests --- src/room/CallEventAudioRenderer.test.tsx | 120 +++++++++++++++++------ src/room/CallEventAudioRenderer.tsx | 4 +- src/utils/test.ts | 20 ++-- 3 files changed, 104 insertions(+), 40 deletions(-) diff --git a/src/room/CallEventAudioRenderer.test.tsx b/src/room/CallEventAudioRenderer.test.tsx index 8e9209e8..9014e60b 100644 --- a/src/room/CallEventAudioRenderer.test.tsx +++ b/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(); - // 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([ + [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 as MatrixClient, + getMember: (userId) => members.get(userId) ?? null, + }), + liveKitRoom as unknown as Room, + { + kind: E2eeType.PER_PARTICIPANT, + }, + of(ConnectionState.Connected), + ); + render(); + expect(audioIsPlaying).toEqual([]); + // When the count drops + act(() => { + liveKitRoom.removeParticipant(aliceParticipant); + }); + expect(audioIsPlaying).toEqual([leaveSound]); +}); diff --git a/src/room/CallEventAudioRenderer.tsx b/src/room/CallEventAudioRenderer.tsx index f08e63c0..41c1f9c7 100644 --- a/src/room/CallEventAudioRenderer.tsx +++ b/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(); } diff --git a/src/utils/test.ts b/src/utils/test.ts index 4ffcc3ba..99a9264b 100644 --- a/src/utils/test.ts +++ b/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 { return { ...mockEmitter(), ...room } as Partial 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; - constructor(room: {localParticipant?: LocalParticipant, remoteParticipants: Map}) { + public constructor(room: { + localParticipant?: LocalParticipant; + remoteParticipants: Map; + }) { 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 = {}): void { }); } -export function mockMediaPlay() { +export function mockMediaPlay(): string[] { const audioIsPlaying: string[] = []; window.HTMLMediaElement.prototype.play = async function (): Promise { audioIsPlaying.push((this.children[0] as HTMLSourceElement).src); return Promise.resolve(); }; return audioIsPlaying; -} \ No newline at end of file +}