Initial Commit

packages/ui/react/react-audio-stream/src/components/stream-room/stream-room.test.tsx

@@ -0,0 +1,96 @@
+import { describe, expect, it } from "@suaveplan/testing/runner";
+import { act, render, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { StreamProvider } from "../../provider/stream-provider.js";
+import { FakeSession } from "../../test-utils.js";
+import { StreamRoom } from "./stream-room.js";
+
+describe("<StreamRoom>", () => {
+    it("invokes the render-prop with the live snapshot", {
+        timeout: 5000,
+    }, () => {
+        const session = new FakeSession({
+            state: "joined",
+            roomId: "lobby",
+            peers: [
+                {
+                    id: "a",
+                    displayName: "A",
+                    connectionState: "connected",
+                    rttMs: 5,
+                },
+            ],
+        });
+        render(
+            <StreamProvider sessionFactory={() => session}>
+                <StreamRoom>
+                    {({ roomId, participants, isJoined }) => (
+                        <div>
+                            <span data-testid="room">{roomId}</span>
+                            <span data-testid="joined">{String(isJoined)}</span>
+                            <span data-testid="count">
+                                {participants.length}
+                            </span>
+                        </div>
+                    )}
+                </StreamRoom>
+            </StreamProvider>
+        );
+        expect(screen.getByTestId("room")).toHaveTextContent("lobby");
+        expect(screen.getByTestId("joined")).toHaveTextContent("true");
+        expect(screen.getByTestId("count")).toHaveTextContent("1");
+    });
+
+    it("wires join/leave callbacks through to the session", {
+        timeout: 5000,
+    }, async () => {
+        const user = userEvent.setup();
+        const session = new FakeSession({
+            state: "connected",
+            roomId: "x",
+        });
+        render(
+            <StreamProvider sessionFactory={() => session}>
+                <StreamRoom>
+                    {({ join, leave, isJoined }) => (
+                        <button
+                            type="button"
+                            onClick={() => (isJoined ? leave() : join())}
+                        >
+                            {isJoined ? "leave" : "join"}
+                        </button>
+                    )}
+                </StreamRoom>
+            </StreamProvider>
+        );
+        const btn = screen.getByRole("button");
+        expect(btn).toHaveTextContent("join");
+        await act(async () => {
+            await user.click(btn);
+        });
+        expect(session.state).toBe("joined");
+    });
+
+    it("re-renders when peers change", { timeout: 5000 }, () => {
+        const session = new FakeSession({ state: "joined" });
+        render(
+            <StreamProvider sessionFactory={() => session}>
+                <StreamRoom>
+                    {({ participants }) => (
+                        <span data-testid="n">{participants.length}</span>
+                    )}
+                </StreamRoom>
+            </StreamProvider>
+        );
+        expect(screen.getByTestId("n")).toHaveTextContent("0");
+        act(() => {
+            session.pushPeer({
+                id: "z",
+                displayName: "Z",
+                connectionState: "connected",
+                rttMs: 9,
+            });
+        });
+        expect(screen.getByTestId("n")).toHaveTextContent("1");
+    });
+});