Simplify some test helpers that no longer need continuations

src/tile/GridTile.test.tsx

@@ -12,7 +12,7 @@ import { axe } from "vitest-axe";
 import { type MatrixRTCSession } from "matrix-js-sdk/lib/matrixrtc";
 
 import { GridTile } from "./GridTile";
-import { mockRtcMembership, withRemoteMedia } from "../utils/test";
+import { mockRtcMembership, createRemoteMedia } from "../utils/test";
 import { GridTileViewModel } from "../state/TileViewModel";
 import { ReactionsSenderProvider } from "../reactions/useReactionsSender";
 import type { CallViewModel } from "../state/CallViewModel";
@@ -25,7 +25,7 @@ global.IntersectionObserver = class MockIntersectionObserver {
 } as unknown as typeof IntersectionObserver;
 
 test("GridTile is accessible", async () => {
-  await withRemoteMedia(
+  const vm = createRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
       rawDisplayName: "Alice",
@@ -36,41 +36,40 @@ test("GridTile is accessible", async () => {
       getTrackPublication: () =>
         ({}) as Partial<RemoteTrackPublication> as RemoteTrackPublication,
     },
-    async (vm) => {
-      const fakeRtcSession = {
+  );
+
+  const fakeRtcSession = {
+    on: () => {},
+    off: () => {},
+    room: {
+      on: () => {},
+      off: () => {},
+      client: {
+        getUserId: () => null,
+        getDeviceId: () => null,
         on: () => {},
         off: () => {},
-        room: {
-          on: () => {},
-          off: () => {},
-          client: {
-            getUserId: () => null,
-            getDeviceId: () => null,
-            on: () => {},
-            off: () => {},
-          },
-        },
-        memberships: [],
-      } as unknown as MatrixRTCSession;
-      const cVm = {
-        reactions$: constant({}),
-        handsRaised$: constant({}),
-      } as Partial<CallViewModel> as CallViewModel;
-      const { container } = render(
-        <ReactionsSenderProvider vm={cVm} rtcSession={fakeRtcSession}>
-          <GridTile
-            vm={new GridTileViewModel(constant(vm))}
-            onOpenProfile={() => {}}
-            targetWidth={300}
-            targetHeight={200}
-            showSpeakingIndicators
-            focusable={true}
-          />
-        </ReactionsSenderProvider>,
-      );
-      expect(await axe(container)).toHaveNoViolations();
-      // Name should be visible
-      screen.getByText("Alice");
+      },
     },
+    memberships: [],
+  } as unknown as MatrixRTCSession;
+  const cVm = {
+    reactions$: constant({}),
+    handsRaised$: constant({}),
+  } as Partial<CallViewModel> as CallViewModel;
+  const { container } = render(
+    <ReactionsSenderProvider vm={cVm} rtcSession={fakeRtcSession}>
+      <GridTile
+        vm={new GridTileViewModel(constant(vm))}
+        onOpenProfile={() => {}}
+        targetWidth={300}
+        targetHeight={200}
+        showSpeakingIndicators
+        focusable={true}
+      />
+    </ReactionsSenderProvider>,
   );
+  expect(await axe(container)).toHaveNoViolations();
+  // Name should be visible
+  screen.getByText("Alice");
 });

src/tile/SpotlightTile.test.tsx

@@ -15,8 +15,8 @@ import {
   mockLocalParticipant,
   mockMediaDevices,
   mockRtcMembership,
-  withLocalMedia,
-  withRemoteMedia,
+  createLocalMedia,
+  createRemoteMedia,
 } from "../utils/test";
 import { SpotlightTileViewModel } from "../state/TileViewModel";
 import { constant } from "../state/Behavior";
@@ -27,62 +27,53 @@ global.IntersectionObserver = class MockIntersectionObserver {
 } as unknown as typeof IntersectionObserver;
 
 test("SpotlightTile is accessible", async () => {
-  await withRemoteMedia(
+  const vm1 = createRemoteMedia(
     mockRtcMembership("@alice:example.org", "AAAA"),
     {
       rawDisplayName: "Alice",
       getMxcAvatarUrl: () => "mxc://adfsg",
     },
     {},
-    async (vm1) => {
-      await withLocalMedia(
-        mockRtcMembership("@bob:example.org", "BBBB"),
-        {
-          rawDisplayName: "Bob",
-          getMxcAvatarUrl: () => "mxc://dlskf",
-        },
-        mockLocalParticipant({}),
-        mockMediaDevices({}),
-        async (vm2) => {
-          const user = userEvent.setup();
-          const toggleExpanded = vi.fn();
-          const { container } = render(
-            <SpotlightTile
-              vm={
-                new SpotlightTileViewModel(
-                  constant([vm1, vm2]),
-                  constant(false),
-                )
-              }
-              targetWidth={300}
-              targetHeight={200}
-              expanded={false}
-              onToggleExpanded={toggleExpanded}
-              showIndicators
-              focusable={true}
-            />,
-          );
-
-          expect(await axe(container)).toHaveNoViolations();
-          // Alice should be in the spotlight, with her name and avatar on the
-          // first page
-          screen.getByText("Alice");
-          const aliceAvatar = screen.getByRole("img");
-          expect(screen.queryByRole("button", { name: "common.back" })).toBe(
-            null,
-          );
-          // Bob should be out of the spotlight, and therefore invisible
-          expect(isInaccessible(screen.getByText("Bob"))).toBe(true);
-          // Now navigate to Bob
-          await user.click(screen.getByRole("button", { name: "Next" }));
-          screen.getByText("Bob");
-          expect(screen.getByRole("img")).not.toBe(aliceAvatar);
-          expect(isInaccessible(screen.getByText("Alice"))).toBe(true);
-          // Can toggle whether the tile is expanded
-          await user.click(screen.getByRole("button", { name: "Expand" }));
-          expect(toggleExpanded).toHaveBeenCalled();
-        },
-      );
-    },
   );
+
+  const vm2 = createLocalMedia(
+    mockRtcMembership("@bob:example.org", "BBBB"),
+    {
+      rawDisplayName: "Bob",
+      getMxcAvatarUrl: () => "mxc://dlskf",
+    },
+    mockLocalParticipant({}),
+    mockMediaDevices({}),
+  );
+
+  const user = userEvent.setup();
+  const toggleExpanded = vi.fn();
+  const { container } = render(
+    <SpotlightTile
+      vm={new SpotlightTileViewModel(constant([vm1, vm2]), constant(false))}
+      targetWidth={300}
+      targetHeight={200}
+      expanded={false}
+      onToggleExpanded={toggleExpanded}
+      showIndicators
+      focusable={true}
+    />,
+  );
+
+  expect(await axe(container)).toHaveNoViolations();
+  // Alice should be in the spotlight, with her name and avatar on the
+  // first page
+  screen.getByText("Alice");
+  const aliceAvatar = screen.getByRole("img");
+  expect(screen.queryByRole("button", { name: "common.back" })).toBe(null);
+  // Bob should be out of the spotlight, and therefore invisible
+  expect(isInaccessible(screen.getByText("Bob"))).toBe(true);
+  // Now navigate to Bob
+  await user.click(screen.getByRole("button", { name: "Next" }));
+  screen.getByText("Bob");
+  expect(screen.getByRole("img")).not.toBe(aliceAvatar);
+  expect(isInaccessible(screen.getByText("Alice"))).toBe(true);
+  // Can toggle whether the tile is expanded
+  await user.click(screen.getByRole("button", { name: "Expand" }));
+  expect(toggleExpanded).toHaveBeenCalled();
 });