1import { EnvironmentId, ThreadId, type DiscoveredLocalServer } from "@t3tools/contracts";
2import { expect, it, vi } from "vite-plus/test";
3import { page } from "vite-plus/test/browser";
4
5vi.mock(import("../../portDiscoveryState"), async (importOriginal) => ({
6 ...(await importOriginal()),
7 useThreadDiscoveredPorts: () =>
8 Array.from(
9 { length: 10 },
10 (_, index) =>
11 ({
12 pid: index,
13 port: 3000 + index,
14 url: `http://localhost:${3000 + index}`,
15 terminal: null,
16 processName: "node",
17 }) as DiscoveredLocalServer,
18 ),
19}));
20
21import { render } from "../../../test/render";
22import { ThreadServersPanel } from "./ThreadServersPanel";
23
24const panel = (threadId: string) => (
25 <ThreadServersPanel
26 environmentId={EnvironmentId.make("env")}
27 threadId={ThreadId.make(threadId)}
28 />
29);
30
31it("pages servers four at a time, collapses back, and resets on thread switch", async () => {
32 await using screen = await render(panel("a"));
33 const count = (selector: string) => screen.container.querySelectorAll(selector).length;
34 const expectRows = (rows: number) => vi.waitFor(() => expect(count("li")).toBe(rows));
35
36 await expectRows(4);
37 await page.getByRole("button", { name: "Show 4 more" }).click();
38 await expectRows(8);
39 expect(count("[data-thread-details-server-overflow]")).toBe(4);
40 await page.getByRole("button", { name: "Show 2 more" }).click();
41 await expectRows(10);
42 await page.getByRole("button", { name: "Show less" }).click();
43 await expectRows(4);
44
45 await page.getByRole("button", { name: "Show 4 more" }).click();
46 await expectRows(8);
47 await screen.rerender(panel("b"));
48 await expectRows(4);
49 await screen.rerender(panel("a"));
50 await expectRows(4);
51});