@tribe-nest/media-client 0.1.0

package/src/react/_tests/hooks.spec.tsx

@@ -0,0 +1,509 @@
+// @vitest-environment jsdom
+import { act, cleanup, render, waitFor } from "@testing-library/react";
+import { useEffect, useRef } from "react";
+import { afterEach, beforeAll, describe, expect, it, vi } from "vitest";
+
+import { FakeSignalServer } from "../../core/_tests/fakeSignalServer";
+import type { MediaDevice, MediaTransport } from "../../room/device";
+import {
+  MediaRoomProvider,
+  useLocalMedia,
+  useParticipants,
+  useRemoteTrack,
+  useRoomState,
+  useVisibleProducers,
+} from "../index";
+
+/**
+ * The hooks, rendered.
+ *
+ * ## The bug this file exists for
+ *
+ * `useSyncExternalStore` compares snapshots with `Object.is`. A selector that
+ * builds a new array on every call therefore reports a change on every check,
+ * and React re-renders for ever - "The result of getSnapshot should be cached
+ * to avoid an infinite loop". `useRemoteTrack` and `useLocalMedia` both did
+ * exactly that, because `room.tracks` and `room.localPublications` were getters
+ * that spread a Map.
+ *
+ * It is not a subtle degradation: the hooks were unusable, and nothing in the
+ * type system or the unit tests could see it, because the loop only exists once
+ * React is actually driving them.
+ *
+ * So every test here counts RENDERS. A hook that settles is the property; a
+ * hook that returns the right value while looping is not passing.
+ */
+
+// Not configured globally in this package, so a render from one test would
+// otherwise still be mounted during the next and every query would find two.
+afterEach(cleanup);
+
+beforeAll(() => {
+  // jsdom has neither, and `attach` builds a `MediaStream` to put on an
+  // element. Stand-ins are enough: what is asserted is WHICH tracks reach the
+  // element and when, not what the browser does with them afterwards.
+  if (!("MediaStream" in globalThis)) {
+    (globalThis as { MediaStream?: unknown }).MediaStream = class {
+      constructor(readonly tracks: unknown[] = []) {}
+    };
+  }
+});
+
+const fakeDevice = (): MediaDevice => ({
+  async load() {},
+  loaded: true,
+  rtpCapabilities: { codecs: [] } as never,
+  canProduce: () => true,
+  createSendTransport: () => fakeTransport(),
+  createRecvTransport: () => fakeTransport(),
+});
+
+const fakeTransport = (): MediaTransport => ({
+  id: "t-1",
+  async produce() {
+    return { id: "p-1", kind: "audio", closed: false, pause: vi.fn(), resume: vi.fn(), close: vi.fn() };
+  },
+  async consume(input) {
+    return {
+      id: "c-1",
+      producerId: input.producerId,
+      kind: input.kind,
+      track: { kind: input.kind, stop: vi.fn() } as unknown as MediaStreamTrack,
+      pause: vi.fn(),
+      resume: vi.fn(),
+      close: vi.fn(),
+    };
+  },
+  close: vi.fn(),
+});
+
+function nodeWith(producers: { producerId: string; identity: string; kind: "audio" | "video" }[] = []) {
+  const server: FakeSignalServer = new FakeSignalServer({
+    joined: {
+      identity: "me",
+      room: "matter-1",
+      routerRtpCapabilities: { codecs: [] },
+      producers,
+      grants: { canPublish: true, canSubscribe: true, canPublishData: false },
+    },
+    onRequest: (frame, socket) => {
+      if (frame.method === "join") return;
+      if (frame.method === "createTransport") {
+        return server.reply(frame.id, { transportId: "t-1", iceParameters: {}, iceCandidates: [], dtlsParameters: {} }, socket);
+      }
+      if (frame.method === "consume") {
+        return server.reply(frame.id, { consumerId: "c-1", producerId: frame.producerId, kind: "audio", rtpParameters: {} }, socket);
+      }
+      return server.reply(frame.id, {}, socket);
+    },
+  });
+  return server;
+}
+
+/** Counts every render of the component it is used in. */
+function useRenderCount(): { current: number } {
+  const count = useRef(0);
+  count.current++;
+  return count;
+}
+
+const wrap = (server: FakeSignalServer, children: React.ReactNode) => (
+  <MediaRoomProvider
+    getCredentials={() => ({ mediaUrl: "wss://media.example", token: "t" })}
+    device={fakeDevice}
+    webSocket={server.factory}
+    autoSubscribe={false}
+  >
+    {children}
+  </MediaRoomProvider>
+);
+
+describe("hooks settle instead of looping", () => {
+  it("useRemoteTrack does not re-render for ever", async () => {
+    const renders: number[] = [];
+    function Probe() {
+      const count = useRenderCount();
+      const { track } = useRemoteTrack("p-a");
+      useEffect(() => {
+        renders.push(count.current);
+      });
+      return <div data-testid="track">{track ? "yes" : "no"}</div>;
+    }
+
+    const server = nodeWith([{ producerId: "p-a", identity: "a", kind: "audio" }]);
+    render(wrap(server, <Probe />));
+
+    // Settled, not merely correct. A looping hook also renders "no".
+    await new Promise((r) => setTimeout(r, 150));
+    const settled = renders.at(-1) ?? 0;
+    expect(settled).toBeLessThan(15);
+
+    await new Promise((r) => setTimeout(r, 150));
+    expect(renders.at(-1)).toBe(settled);
+  });
+
+  it("useLocalMedia does not re-render for ever", async () => {
+    const renders: number[] = [];
+    function Probe() {
+      const count = useRenderCount();
+      const { isCameraEnabled } = useLocalMedia();
+      useEffect(() => {
+        renders.push(count.current);
+      });
+      return <div>{String(isCameraEnabled)}</div>;
+    }
+
+    render(wrap(nodeWith(), <Probe />));
+
+    await new Promise((r) => setTimeout(r, 150));
+    const settled = renders.at(-1) ?? 0;
+    expect(settled).toBeLessThan(15);
+
+    await new Promise((r) => setTimeout(r, 150));
+    expect(renders.at(-1)).toBe(settled);
+  });
+
+  it("useRoomState and useParticipants settle too", async () => {
+    const renders: number[] = [];
+    function Probe() {
+      const count = useRenderCount();
+      const state = useRoomState();
+      const peers = useParticipants();
+      useEffect(() => {
+        renders.push(count.current);
+      });
+      return <div>{`${state.phase}:${peers.length}`}</div>;
+    }
+
+    render(wrap(nodeWith(), <Probe />));
+    await new Promise((r) => setTimeout(r, 150));
+    const settled = renders.at(-1) ?? 0;
+    expect(settled).toBeLessThan(15);
+  });
+});
+
+describe("the room reaches the hooks", () => {
+  it("reports the joined state", async () => {
+    function Probe() {
+      const state = useRoomState();
+      return <div data-testid="phase">{state.phase}</div>;
+    }
+
+    const { getByTestId } = render(wrap(nodeWith(), <Probe />));
+    await waitFor(() => expect(getByTestId("phase").textContent).toBe("joined"));
+  });
+
+  it("exposes a track once it has been subscribed", async () => {
+    function Probe() {
+      const { track } = useRemoteTrack("p-a");
+      return <div data-testid="track">{track?.identity ?? "none"}</div>;
+    }
+
+    const server = nodeWith([{ producerId: "p-a", identity: "anwalt", kind: "audio" }]);
+    const { getByTestId } = render(
+      <MediaRoomProvider
+        getCredentials={() => ({ mediaUrl: "wss://media.example", token: "t" })}
+        device={fakeDevice}
+        webSocket={server.factory}
+      >
+        <Probe />
+      </MediaRoomProvider>,
+    );
+
+    // The socket exists only once the provider's effect has run, so the event
+    // has to wait for the join rather than racing it.
+    await waitFor(() => expect(server.sockets.length).toBeGreaterThan(0));
+    await waitFor(() => expect(server.received.some((f) => f.method === "join")).toBe(true));
+
+    // autoSubscribe on, and the node has said the producer is in the set.
+    server.event({ event: "activeSpeakers", producerIds: ["p-a"] });
+    await waitFor(() => expect(getByTestId("track").textContent).toBe("anwalt"));
+  });
+
+  /**
+   * The element is mounted BEFORE the track exists, which is the ordinary case.
+   *
+   * A producer reaches room state the moment the node announces it; the consume
+   * round trip that yields a track finishes some milliseconds later. An element
+   * rendered unconditionally - which is what remote audio has to be, since a
+   * participant with the camera off still has a voice - therefore takes its ref
+   * callback while `tracks` is still empty. Keyed on `[room, producerId]`, both
+   * stable, that callback set `srcObject` to `null` once and was never invoked
+   * again: the whole call was silent, in both directions, on a screen that
+   * looked completely correct.
+   */
+  it("attaches a track that arrives AFTER the element mounted", async () => {
+    function Probe() {
+      const { attach } = useRemoteTrack("p-a");
+      return <audio ref={attach} data-testid="audio" />;
+    }
+
+    const server = nodeWith([{ producerId: "p-a", identity: "anwalt", kind: "audio" }]);
+    const { getByTestId } = render(
+      <MediaRoomProvider
+        getCredentials={() => ({ mediaUrl: "wss://media.example", token: "t" })}
+        device={fakeDevice}
+        webSocket={server.factory}
+      >
+        <Probe />
+      </MediaRoomProvider>,
+    );
+
+    await waitFor(() => expect(server.received.some((f) => f.method === "join")).toBe(true));
+    const element = getByTestId("audio") as HTMLAudioElement;
+    // Nothing yet, and this is the state the bug froze the element in.
+    expect(element.srcObject).toBeNull();
+
+    server.event({ event: "activeSpeakers", producerIds: ["p-a"] });
+
+    await waitFor(() => expect(getByTestId("audio").srcObject).not.toBeNull());
+    // The SAME element. A test that re-queried and found a freshly mounted one
+    // would prove nothing about the element that was already on the page.
+    expect(getByTestId("audio")).toBe(element);
+  });
+});
+
+/**
+ * A capture the room never took is still a live camera.
+ *
+ * `getUserMedia` turns the light on. If the publish that follows fails, no
+ * publication is recorded, so the UI still reads "Start camera" and
+ * `unpublish("camera")` has nothing to close: the light stays on with no
+ * control that turns it off, and every retry opens another capture.
+ */
+describe("a publish that fails does not leave the device running", () => {
+  const captureWith = (tracks: MediaStreamTrack[]) => {
+    const getUserMedia = vi.fn(async () => ({ getTracks: () => tracks }) as unknown as MediaStream);
+    const getDisplayMedia = vi.fn(async () => ({ getTracks: () => tracks }) as unknown as MediaStream);
+    Object.defineProperty(navigator, "mediaDevices", {
+      configurable: true,
+      value: { getUserMedia, getDisplayMedia },
+    });
+    return { getUserMedia, getDisplayMedia };
+  };
+
+  const fakeTrack = (kind: "audio" | "video") =>
+    ({ kind, stop: vi.fn(), enabled: true }) as unknown as MediaStreamTrack & { stop: ReturnType<typeof vi.fn> };
+
+  afterEach(() => {
+    delete (navigator as { mediaDevices?: unknown }).mediaDevices;
+  });
+
+  /** A device whose transport refuses to produce, as the node refusing a grant. */
+  const refusingDevice = (): MediaDevice => ({
+    ...fakeDevice(),
+    createSendTransport: () => ({
+      ...fakeTransport(),
+      async produce() {
+        throw new Error("this token may not publish camera");
+      },
+    }),
+  });
+
+  it("stops the camera when the produce is refused", async () => {
+    const track = fakeTrack("video");
+    captureWith([track]);
+
+    let controls: ReturnType<typeof useLocalMedia> | undefined;
+    function Probe() {
+      controls = useLocalMedia();
+      return <div>{String(controls.isCameraEnabled)}</div>;
+    }
+
+    render(
+      <MediaRoomProvider
+        getCredentials={() => ({ mediaUrl: "wss://media.example", token: "t" })}
+        device={refusingDevice}
+        webSocket={nodeWith().factory}
+        autoSubscribe={false}
+      >
+        <Probe />
+      </MediaRoomProvider>,
+    );
+
+    await waitFor(() => expect(controls).toBeDefined());
+    await act(async () => {
+      await controls?.publishCamera();
+    });
+
+    // The refusal is shown, AND the light is out. Only the first of those was
+    // true, and the second is the one the person sitting in front of it sees.
+    await waitFor(() => expect(controls?.error?.message).toContain("may not publish"));
+    expect(track.stop).toHaveBeenCalledTimes(1);
+    expect(controls?.isCameraEnabled).toBe(false);
+  });
+
+  it("stops the extra tracks a capture carries but a publish never takes", async () => {
+    // Chrome adds a system-audio track to a screen share when the person ticks
+    // "share audio". One track is published; the other is ours to close.
+    const video = fakeTrack("video");
+    const audio = fakeTrack("audio");
+    captureWith([video, audio]);
+
+    let controls: ReturnType<typeof useLocalMedia> | undefined;
+    function Probe() {
+      controls = useLocalMedia();
+      return <div>{String(controls.screenSharing)}</div>;
+    }
+
+    render(
+      <MediaRoomProvider
+        getCredentials={() => ({ mediaUrl: "wss://media.example", token: "t" })}
+        device={fakeDevice}
+        webSocket={nodeWith().factory}
+        autoSubscribe={false}
+      >
+        <Probe />
+      </MediaRoomProvider>,
+    );
+
+    await waitFor(() => expect(controls).toBeDefined());
+    await act(async () => {
+      await controls?.publishScreen();
+    });
+
+    await waitFor(() => expect(controls?.screenSharing).toBe(true));
+    // The published one belongs to the room now, and the room's teardown stops
+    // it on every path out of a call, not only a deliberate leave.
+    expect(video.stop).not.toHaveBeenCalled();
+    expect(audio.stop).toHaveBeenCalledTimes(1);
+  });
+});
+
+/**
+ * The second press, which is the ordinary one.
+ *
+ * Every control over this hook is a read-then-write: it reads
+ * `isMicrophoneEnabled` and publishes or unpublishes accordingly. That flag
+ * comes from `publications`, which does not move until the publish RESOLVES,
+ * and a publish opens with a `getUserMedia` permission prompt that sits on
+ * screen for seconds. So a person who presses Unmute, sees nothing change, and
+ * presses it again used to put two captures through two `room.publish` calls:
+ * two audio producers under one identity, everyone else mounting two `<audio>`
+ * elements and hearing them doubled, and unpublishing both afterwards does not
+ * give back the seconds of garbled audio. For a screen share it opens a second
+ * picker.
+ */
+describe("one press, one publish", () => {
+  /** A capture that hangs, as a permission prompt does. Released by hand. */
+  const promptThatHangs = () => {
+    let release!: () => void;
+    const answered = new Promise<void>((resolve) => {
+      release = resolve;
+    });
+    const track = { kind: "audio", stop: vi.fn(), enabled: true } as unknown as MediaStreamTrack;
+    const getUserMedia = vi.fn(async () => {
+      await answered;
+      return { getTracks: () => [track] } as unknown as MediaStream;
+    });
+    Object.defineProperty(navigator, "mediaDevices", {
+      configurable: true,
+      value: { getUserMedia, getDisplayMedia: getUserMedia },
+    });
+    return { getUserMedia, release };
+  };
+
+  const countingDevice = (produced: string[]): MediaDevice => ({
+    ...fakeDevice(),
+    createSendTransport: () => ({
+      ...fakeTransport(),
+      async produce(input: { appData?: Record<string, unknown> }) {
+        produced.push(String(input.appData?.source));
+        return { id: `p-${produced.length}`, kind: "audio" as const, closed: false, pause: vi.fn(), resume: vi.fn(), close: vi.fn() };
+      },
+    }),
+  });
+
+  afterEach(() => {
+    delete (navigator as { mediaDevices?: unknown }).mediaDevices;
+  });
+
+  it("captures and produces ONCE when the control is pressed twice in a tick", async () => {
+    const { getUserMedia, release } = promptThatHangs();
+    const produced: string[] = [];
+
+    let controls: ReturnType<typeof useLocalMedia> | undefined;
+    function Probe() {
+      controls = useLocalMedia();
+      return <div data-testid="pending">{String(controls.pending.microphone)}</div>;
+    }
+
+    const { getByTestId } = render(
+      <MediaRoomProvider
+        getCredentials={() => ({ mediaUrl: "wss://media.example", token: "t" })}
+        device={() => countingDevice(produced)}
+        webSocket={nodeWith().factory}
+        autoSubscribe={false}
+      >
+        <Probe />
+      </MediaRoomProvider>,
+    );
+
+    await waitFor(() => expect(controls).toBeDefined());
+
+    // Both in ONE tick, before React has re-rendered anything. That is why the
+    // guard has to be a ref: a state flag reads `false` in both handlers.
+    let both: Promise<unknown> | undefined;
+    await act(async () => {
+      both = Promise.all([controls?.publishMicrophone(), controls?.publishMicrophone()]);
+    });
+
+    // And the control says it is working, rather than looking untouched.
+    expect(getByTestId("pending").textContent).toBe("true");
+
+    await act(async () => {
+      release();
+      await both;
+    });
+
+    expect(getUserMedia).toHaveBeenCalledTimes(1);
+    expect(produced).toEqual(["microphone"]);
+    expect(controls?.isMicrophoneEnabled).toBe(true);
+    expect(getByTestId("pending").textContent).toBe("false");
+  });
+});
+
+/**
+ * The subscribe barrier, applied where it is rendered.
+ *
+ * `useRoomState().producers` is every producer the node has ever announced,
+ * kept deliberately so that a rule which narrows mid-call can later widen -
+ * there is no `producerAppeared` replay to bring back what a prune deleted. The
+ * price is that the raw list holds people this seat has been barred from, and
+ * the node does not clean up for us: `revokeNewlyForbidden` closes only
+ * producers this session had a LIVE consumer for, so one that was announced and
+ * never consumed stays in the list for the rest of the call. On a sealed room
+ * the other party's presence is most of what the barrier was hiding.
+ */
+describe("useVisibleProducers applies the barrier the raw list deliberately does not", () => {
+  it("drops a producer the node has barred, without pruning the room's own record", async () => {
+    const seen: string[][] = [];
+    function Probe() {
+      const visible = useVisibleProducers();
+      const state = useRoomState();
+      seen.push(visible.map((p) => p.producerId));
+      return <div data-testid="visible">{`${visible.length}/${state.producers.length}`}</div>;
+    }
+
+    const server = nodeWith([
+      { producerId: "p-client", identity: "client", kind: "audio" },
+      { producerId: "p-third-party", identity: "third-party", kind: "audio" },
+    ]);
+    const { getByTestId } = render(wrap(server, <Probe />));
+
+    await waitFor(() => expect(getByTestId("visible").textContent).toBe("2/2"));
+
+    server.event({ event: "subscribeRuleChanged", subscribe: { mode: "allow", identities: ["client"] } });
+
+    // One rendered, two remembered. Pruning the record instead would make a
+    // barrier that later widens unrecoverable.
+    await waitFor(() => expect(getByTestId("visible").textContent).toBe("1/2"));
+    expect(seen.at(-1)).toEqual(["p-client"]);
+
+    // And it settles: the filter builds a new array per call, so a version of
+    // this read through `useSyncExternalStore` would re-render for ever.
+    const settled = seen.length;
+    await new Promise((r) => setTimeout(r, 150));
+    expect(seen.length).toBe(settled);
+  });
+});