97 lines
3.4 KiB
TypeScript
97 lines
3.4 KiB
TypeScript
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");
|
|
});
|
|
});
|