Move mediaDevices mock out of setupManualMocks (#11413)

* Move `mediaDevices` mock out of `setupManualMocks`

This doesn't work well in test suites with multiple tests, because the
`mockReturnValue` is reset for subsequent tests.

In any case, having it mocked out automagically is *magical*. Let's make it
opt-in.

* clarify ts-ignore

test/audio/VoiceRecording-test.ts

@@ -21,6 +21,7 @@ import Recorder from "opus-recorder/dist/recorder.min.js";
 import { VoiceRecording, voiceRecorderOptions, highQualityRecorderOptions } from "../../src/audio/VoiceRecording";
 import { createAudioContext } from "../..//src/audio/compat";
 import MediaDeviceHandler from "../../src/MediaDeviceHandler";
+import { useMockMediaDevices } from "../test-utils";
 
 jest.mock("opus-recorder/dist/recorder.min.js");
 const RecorderMock = mocked(Recorder);
@@ -56,6 +57,7 @@ describe("VoiceRecording", () => {
     };
 
     beforeEach(() => {
+        useMockMediaDevices();
         recording = new VoiceRecording();
         // @ts-ignore
         recording.observable = {

test/components/structures/PipContainer-test.tsx

@@ -35,6 +35,7 @@ import {
     mkRoomCreateEvent,
     mockPlatformPeg,
     flushPromises,
+    useMockMediaDevices,
 } from "../../test-utils";
 import { MatrixClientPeg } from "../../../src/MatrixClientPeg";
 import { CallStore } from "../../../src/stores/CallStore";
@@ -84,6 +85,8 @@ describe("PipContainer", () => {
     };
 
     beforeEach(async () => {
+        useMockMediaDevices();
+
         user = userEvent.setup();
 
         stubClient();

test/components/views/messages/CallEvent-test.tsx

@@ -29,6 +29,7 @@ import {
     setupAsyncStoreWithClient,
     resetAsyncStoreWithClient,
     wrapInMatrixClientContext,
+    useMockMediaDevices,
 } from "../../../test-utils";
 import defaultDispatcher from "../../../../src/dispatcher/dispatcher";
 import { Action } from "../../../../src/dispatcher/actions";
@@ -41,9 +42,6 @@ import { ConnectionState } from "../../../../src/models/Call";
 const CallEvent = wrapInMatrixClientContext(UnwrappedCallEvent);
 
 describe("CallEvent", () => {
-    useMockedCalls();
-    jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
-
     let client: Mocked<MatrixClient>;
     let room: Room;
     let alice: RoomMember;
@@ -55,6 +53,10 @@ describe("CallEvent", () => {
         jest.useFakeTimers();
         jest.setSystemTime(0);
 
+        useMockMediaDevices();
+        useMockedCalls();
+        jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
+
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
         client.getUserId.mockReturnValue("@alice:example.org");

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

@@ -38,6 +38,7 @@ import {
     filterConsole,
     flushPromises,
     mkMessage,
+    useMockMediaDevices,
 } from "../../../test-utils";
 import { CallStore } from "../../../../src/stores/CallStore";
 import RoomTile from "../../../../src/components/views/rooms/RoomTile";
@@ -134,6 +135,7 @@ describe("RoomTile", () => {
     };
 
     beforeEach(() => {
+        useMockMediaDevices();
         sdkContext = new TestSdkContext();
 
         client = mocked(stubClient());

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

@@ -30,6 +30,7 @@ import {
     useMockedCalls,
     MockedCall,
     setupAsyncStoreWithClient,
+    useMockMediaDevices,
 } from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import { CallView as _CallView } from "../../../../src/components/views/voip/CallView";
@@ -41,7 +42,7 @@ import MediaDeviceHandler from "../../../../src/MediaDeviceHandler";
 
 const CallView = wrapInMatrixClientContext(_CallView);
 
-describe("CallLobby", () => {
+describe("CallView", () => {
     useMockedCalls();
     jest.spyOn(HTMLMediaElement.prototype, "play").mockImplementation(async () => {});
 
@@ -50,7 +51,7 @@ describe("CallLobby", () => {
     let alice: RoomMember;
 
     beforeEach(() => {
-        mocked(navigator.mediaDevices.enumerateDevices).mockResolvedValue([]);
+        useMockMediaDevices();
 
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());

test/setup/setupManualMocks.ts

@@ -91,11 +91,3 @@ window.fetch = fetchMock.sandbox();
 
 // @ts-ignore
 window.Response = Response;
-
-// set up mediaDevices mock
-Object.defineProperty(navigator, "mediaDevices", {
-    value: {
-        enumerateDevices: jest.fn().mockResolvedValue([]),
-        getUserMedia: jest.fn(),
-    },
-});

test/stores/room-list/algorithms/Algorithm-test.ts

@@ -20,7 +20,13 @@ import { Widget } from "matrix-widget-api";
 
 import type { MatrixClient } from "matrix-js-sdk/src/matrix";
 import type { ClientWidgetApi } from "matrix-widget-api";
-import { stubClient, setupAsyncStoreWithClient, useMockedCalls, MockedCall } from "../../../test-utils";
+import {
+    stubClient,
+    setupAsyncStoreWithClient,
+    useMockedCalls,
+    MockedCall,
+    useMockMediaDevices,
+} from "../../../test-utils";
 import { MatrixClientPeg } from "../../../../src/MatrixClientPeg";
 import DMRoomMap from "../../../../src/utils/DMRoomMap";
 import { DefaultTagID } from "../../../../src/stores/room-list/models";
@@ -37,6 +43,7 @@ describe("Algorithm", () => {
     let algorithm: Algorithm;
 
     beforeEach(() => {
+        useMockMediaDevices();
         stubClient();
         client = mocked(MatrixClientPeg.safeGet());
         DMRoomMap.makeShared(client);

test/test-utils/utilities.ts

@@ -225,3 +225,12 @@ export const clearAllModals = async (): Promise<void> => {
         }
     }
 };
+
+/** Install a stub object at `navigator.mediaDevices` */
+export function useMockMediaDevices(): void {
+    // @ts-ignore assignment of a thing that isn't a `MediaDevices` to read-only property
+    navigator["mediaDevices"] = {
+        enumerateDevices: jest.fn().mockResolvedValue([]),
+        getUserMedia: jest.fn(),
+    };
+}

test/utils/media/requestMediaPermissions-test.tsx

@@ -19,7 +19,7 @@ import { logger } from "matrix-js-sdk/src/logger";
 import { screen } from "@testing-library/react";
 
 import { requestMediaPermissions } from "../../../src/utils/media/requestMediaPermissions";
-import { flushPromises } from "../../test-utils";
+import { flushPromises, useMockMediaDevices } from "../../test-utils";
 
 describe("requestMediaPermissions", () => {
     let error: Error;
@@ -34,6 +34,7 @@ describe("requestMediaPermissions", () => {
     };
 
     beforeEach(() => {
+        useMockMediaDevices();
         error = new Error();
         jest.spyOn(logger, "log");
     });