feat: add frontend test infrastructure and fix CI workflow

dearlordylord · dearlordylord · commit c9bd667b1431 · 2026-02-05T18:55:15.000-05:00
- Fix pnpm version mismatch in test_next_server.yml (8 → auto-detect 10)
- Add concurrency group to cancel stale CI runs
- Remove redundant setup-node step
- Update jest.config.js for jsdom + tsx support
- Add meetingStatusBatcher integration test (3 tests)
- Extract createMeetingStatusBatcher factory for testability
diff --git a/.github/workflows/test_next_server.yml b/.github/workflows/test_next_server.yml
@@ -13,6 +13,9 @@ on:
 jobs:
   test-next-server:
     runs-on: ubuntu-latest
+    concurrency:
+      group: test-next-server-${{ github.ref }}
+      cancel-in-progress: true
 
     defaults:
       run:
@@ -21,17 +24,10 @@ jobs:
     steps:
     - uses: actions/checkout@v4
 
-    - name: Setup Node.js
-      uses: actions/setup-node@v4
-      with:
-        node-version: '20'
-
     - name: Install pnpm
       uses: pnpm/action-setup@v4
-      with:
-        version: 8
 
-    - name: Setup Node.js cache
+    - name: Setup Node.js
       uses: actions/setup-node@v4
       with:
         node-version: '20'
diff --git a/www/app/lib/__tests__/meetingStatusBatcher.test.tsx b/www/app/lib/__tests__/meetingStatusBatcher.test.tsx
@@ -0,0 +1,220 @@
+import "@testing-library/jest-dom";
+
+// --- Module mocks (hoisted before imports) ---
+
+jest.mock("../apiClient", () => ({
+  client: {
+    GET: jest.fn(),
+    POST: jest.fn(),
+    PUT: jest.fn(),
+    PATCH: jest.fn(),
+    DELETE: jest.fn(),
+    use: jest.fn(),
+  },
+  $api: {
+    useQuery: jest.fn(),
+    useMutation: jest.fn(),
+  },
+  API_URL: "http://test",
+  WEBSOCKET_URL: "ws://test",
+  configureApiAuth: jest.fn(),
+}));
+
+jest.mock("../AuthProvider", () => ({
+  useAuth: () => ({
+    status: "authenticated" as const,
+    accessToken: "test-token",
+    accessTokenExpires: Date.now() + 3600000,
+    user: { id: "user1", name: "Test User" },
+    update: jest.fn(),
+    signIn: jest.fn(),
+    signOut: jest.fn(),
+    lastUserId: "user1",
+  }),
+}));
+
+// Recreate the batcher with a 0ms window. setTimeout(fn, 0) defers to the next
+// macrotask boundary — after all synchronous React rendering completes. All
+// useQuery queryFns fire within the same macrotask, so they all queue into one
+// batch before the timer fires. This is deterministic and avoids fake timers.
+jest.mock("../meetingStatusBatcher", () => {
+  const actual = jest.requireActual("../meetingStatusBatcher");
+  return {
+    ...actual,
+    meetingStatusBatcher: actual.createMeetingStatusBatcher(0),
+  };
+});
+
+// --- Imports (after mocks) ---
+
+import React from "react";
+import { render, waitFor, screen } from "@testing-library/react";
+import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
+import { useRoomActiveMeetings, useRoomUpcomingMeetings } from "../apiHooks";
+import { client } from "../apiClient";
+import { ErrorProvider } from "../../(errors)/errorContext";
+
+const mockClient = client as { POST: jest.Mock };
+
+// --- Helpers ---
+
+function mockBulkStatusEndpoint(
+  roomData?: Record<
+    string,
+    { active_meetings: unknown[]; upcoming_events: unknown[] }
+  >,
+) {
+  mockClient.POST.mockImplementation(
+    async (_path: string, options: { body: { room_names: string[] } }) => {
+      const roomNames: string[] = options.body.room_names;
+      const data = roomData
+        ? Object.fromEntries(
+            roomNames.map((name) => [
+              name,
+              roomData[name] ?? { active_meetings: [], upcoming_events: [] },
+            ]),
+          )
+        : Object.fromEntries(
+            roomNames.map((name) => [
+              name,
+              { active_meetings: [], upcoming_events: [] },
+            ]),
+          );
+      return { data, error: undefined, response: {} };
+    },
+  );
+}
+
+// --- Test component: renders N room cards, each using both hooks ---
+
+function RoomCard({ roomName }: { roomName: string }) {
+  const active = useRoomActiveMeetings(roomName);
+  const upcoming = useRoomUpcomingMeetings(roomName);
+
+  if (active.isLoading || upcoming.isLoading) {
+    return <div data-testid={`room-${roomName}`}>loading</div>;
+  }
+
+  return (
+    <div data-testid={`room-${roomName}`}>
+      {active.data?.length ?? 0} active, {upcoming.data?.length ?? 0} upcoming
+    </div>
+  );
+}
+
+function RoomList({ roomNames }: { roomNames: string[] }) {
+  return (
+    <>
+      {roomNames.map((name) => (
+        <RoomCard key={name} roomName={name} />
+      ))}
+    </>
+  );
+}
+
+function createWrapper() {
+  const queryClient = new QueryClient({
+    defaultOptions: {
+      queries: { retry: false },
+    },
+  });
+  return function Wrapper({ children }: { children: React.ReactNode }) {
+    return (
+      <QueryClientProvider client={queryClient}>
+        <ErrorProvider>{children}</ErrorProvider>
+      </QueryClientProvider>
+    );
+  };
+}
+
+// --- Tests ---
+
+describe("meeting status batcher integration", () => {
+  afterEach(() => jest.clearAllMocks());
+
+  it("batches multiple room queries into a single POST request", async () => {
+    const rooms = Array.from({ length: 10 }, (_, i) => `room-${i}`);
+
+    mockBulkStatusEndpoint();
+
+    render(<RoomList roomNames={rooms} />, { wrapper: createWrapper() });
+
+    await waitFor(() => {
+      for (const name of rooms) {
+        expect(screen.getByTestId(`room-${name}`)).toHaveTextContent(
+          "0 active, 0 upcoming",
+        );
+      }
+    });
+
+    const postCalls = mockClient.POST.mock.calls.filter(
+      ([path]: [string]) => path === "/v1/rooms/meetings/bulk-status",
+    );
+
+    // Without batching this would be 20 calls (2 hooks x 10 rooms).
+    // With the 200ms test window, all queries land in one batch → exactly 1 POST.
+    expect(postCalls).toHaveLength(1);
+
+    // The single call should contain all 10 rooms (deduplicated)
+    const requestedRooms: string[] = postCalls[0][1].body.room_names;
+    for (const name of rooms) {
+      expect(requestedRooms).toContain(name);
+    }
+  });
+
+  it("batcher fetcher returns room-specific data", async () => {
+    const {
+      meetingStatusBatcher: batcher,
+    } = require("../meetingStatusBatcher");
+
+    mockBulkStatusEndpoint({
+      "room-a": {
+        active_meetings: [{ id: "m1", room_name: "room-a" }],
+        upcoming_events: [],
+      },
+      "room-b": {
+        active_meetings: [],
+        upcoming_events: [{ id: "e1", title: "Standup" }],
+      },
+    });
+
+    const [resultA, resultB] = await Promise.all([
+      batcher.fetch("room-a"),
+      batcher.fetch("room-b"),
+    ]);
+
+    expect(mockClient.POST).toHaveBeenCalledTimes(1);
+    expect(resultA.active_meetings).toEqual([
+      { id: "m1", room_name: "room-a" },
+    ]);
+    expect(resultA.upcoming_events).toEqual([]);
+    expect(resultB.active_meetings).toEqual([]);
+    expect(resultB.upcoming_events).toEqual([{ id: "e1", title: "Standup" }]);
+  });
+
+  it("renders room-specific meeting data through hooks", async () => {
+    mockBulkStatusEndpoint({
+      "room-a": {
+        active_meetings: [{ id: "m1", room_name: "room-a" }],
+        upcoming_events: [],
+      },
+      "room-b": {
+        active_meetings: [],
+        upcoming_events: [{ id: "e1", title: "Standup" }],
+      },
+    });
+
+    render(<RoomList roomNames={["room-a", "room-b"]} />, {
+      wrapper: createWrapper(),
+    });
+
+    await waitFor(() => {
+      expect(screen.getByTestId("room-room-a")).toHaveTextContent(
+        "1 active, 0 upcoming",
+      );
+      expect(screen.getByTestId("room-room-b")).toHaveTextContent(
+        "0 active, 1 upcoming",
+      );
+    });
+  });
+});
diff --git a/www/app/lib/meetingStatusBatcher.ts b/www/app/lib/meetingStatusBatcher.ts
@@ -8,18 +8,24 @@ type MeetingStatusResult = {
   upcoming_events: components["schemas"]["CalendarEventResponse"][];
 };
 
-export const meetingStatusBatcher = create({
-  fetcher: async (roomNames: string[]): Promise<MeetingStatusResult[]> => {
-    const unique = [...new Set(roomNames)];
-    const { data } = await client.POST("/v1/rooms/meetings/bulk-status", {
-      body: { room_names: unique },
-    });
-    return roomNames.map((name) => ({
-      roomName: name,
-      active_meetings: data?.[name]?.active_meetings ?? [],
-      upcoming_events: data?.[name]?.upcoming_events ?? [],
-    }));
-  },
-  resolver: keyResolver("roomName"),
-  scheduler: windowScheduler(10),
-});
+const BATCH_WINDOW_MS = 10;
+
+export function createMeetingStatusBatcher(windowMs: number = BATCH_WINDOW_MS) {
+  return create({
+    fetcher: async (roomNames: string[]): Promise<MeetingStatusResult[]> => {
+      const unique = [...new Set(roomNames)];
+      const { data } = await client.POST("/v1/rooms/meetings/bulk-status", {
+        body: { room_names: unique },
+      });
+      return roomNames.map((name) => ({
+        roomName: name,
+        active_meetings: data?.[name]?.active_meetings ?? [],
+        upcoming_events: data?.[name]?.upcoming_events ?? [],
+      }));
+    },
+    resolver: keyResolver("roomName"),
+    scheduler: windowScheduler(windowMs),
+  });
+}
+
+export const meetingStatusBatcher = createMeetingStatusBatcher();
diff --git a/www/jest.config.js b/www/jest.config.js
@@ -1,8 +1,23 @@
 module.exports = {
-  preset: "ts-jest",
-  testEnvironment: "node",
+  testEnvironment: "jest-environment-jsdom",
   roots: ["<rootDir>/app"],
-  testMatch: ["**/__tests__/**/*.test.ts"],
-  collectCoverage: true,
-  collectCoverageFrom: ["app/**/*.ts", "!app/**/*.d.ts"],
+  testMatch: ["**/__tests__/**/*.test.ts", "**/__tests__/**/*.test.tsx"],
+  collectCoverage: false,
+  transform: {
+    "^.+\\.[jt]sx?$": [
+      "ts-jest",
+      {
+        tsconfig: {
+          jsx: "react-jsx",
+          module: "esnext",
+          moduleResolution: "bundler",
+          esModuleInterop: true,
+          strict: false,
+          strictNullChecks: true,
+          downlevelIteration: true,
+          lib: ["dom", "dom.iterable", "esnext"],
+        },
+      },
+    ],
+  },
 };
diff --git a/www/package.json b/www/package.json
@@ -62,9 +62,13 @@
   "author": "Andreas <andreas@monadical.com>",
   "license": "All Rights Reserved",
   "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.2",
     "@types/jest": "^30.0.0",
     "@types/react": "18.2.20",
     "jest": "^30.1.3",
+    "jest-environment-jsdom": "^30.2.0",
     "openapi-typescript": "^7.9.1",
     "prettier": "^3.0.0",
     "ts-jest": "^29.4.1"
diff --git a/www/pnpm-lock.yaml b/www/pnpm-lock.yaml
