test(web): batch interim test runner

Author: tyler-dane

packages/scripts/src/testing/run.ts

@@ -21,6 +21,7 @@ const bunRuntime = (globalThis as unknown as { Bun: BunRuntime }).Bun;
 const WEB_ROOT = resolve(process.cwd(), "packages/web");
 const WEB_SRC = resolve(WEB_ROOT, "src");
 const WEB_TEST_FILE_PATTERN = /\.(spec|test)\.[tj]sx?$/;
+const DEFAULT_WEB_TEST_BATCH_SIZE = 3;
 
 const TEST_PROJECTS = {
   backend: {
@@ -62,6 +63,26 @@ function findWebTestFiles(dir: string): string[] {
     .sort();
 }
 
+function chunk<T>(items: T[], size: number): T[][] {
+  const chunks: T[][] = [];
+
+  for (let index = 0; index < items.length; index += size) {
+    chunks.push(items.slice(index, index + size));
+  }
+
+  return chunks;
+}
+
+function getWebTestBatchSize() {
+  const configuredBatchSize = Number(process.env["WEB_TEST_BATCH_SIZE"]);
+
+  if (Number.isInteger(configuredBatchSize) && configuredBatchSize > 0) {
+    return configuredBatchSize;
+  }
+
+  return DEFAULT_WEB_TEST_BATCH_SIZE;
+}
+
 function assertBackendConfigFile() {
   const configFilePath = resolve(process.cwd(), "compass.yaml");
 
@@ -91,15 +112,16 @@ function runCommand(cmd: string[], cwd = process.cwd()) {
   }
 }
 
-function runWebProject() {
-  for (const testFile of findWebTestFiles(WEB_SRC)) {
-    runCommand([process.execPath, "test", "--cwd", WEB_ROOT, testFile]);
-  }
-}
-
 function runProject(projectName: keyof typeof TEST_PROJECTS) {
   if (projectName === "web") {
-    runWebProject();
+    const testFileBatches = chunk(
+      findWebTestFiles(WEB_SRC),
+      getWebTestBatchSize(),
+    );
+
+    for (const testFiles of testFileBatches) {
+      runCommand(["bun", "test", "--cwd", WEB_ROOT, ...testFiles]);
+    }
     return;
   }
 

packages/web/src/__tests__/web.preload.ts

@@ -274,6 +274,20 @@ mockNodeModules();
 const sessionModule = await import("supertokens-web-js/recipe/session");
 const { cleanup } = await import("@testing-library/react");
 
+function resetDocument() {
+  document.body.innerHTML = "";
+  document.body.removeAttribute("style");
+  document.body.removeAttribute("class");
+  document.body.removeAttribute("data-app-locked");
+  document.documentElement.removeAttribute("style");
+}
+
+function resetBrowserState() {
+  dom.reconfigure({ url: "http://localhost/" });
+  localStorage.clear();
+  sessionStorage.clear();
+}
+
 beforeEach(() => {
   sessionModule.doesSessionExist?.mockResolvedValue(true);
 });
@@ -282,6 +296,8 @@ beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
 afterEach(async () => {
   await Promise.resolve();
   cleanup();
+  resetDocument();
+  resetBrowserState();
   server.resetHandlers();
 });
 afterAll(() => server.close());

packages/web/src/auth/compass/hooks/useCompleteAuthentication.test.ts

@@ -1,4 +1,4 @@
-import { afterAll, beforeEach, describe, it, mock } from "bun:test";
+import { beforeEach, describe, it, mock } from "bun:test";
 
 // Pre-define mock functions
 const mockSyncPendingLocalEvents = mock();
@@ -72,7 +72,3 @@ describe("useCompleteAuthentication", () => {
     await Promise.resolve(result.current({ email: "test@example.com" }));
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});

packages/web/src/auth/compass/hooks/useLogout.test.ts

@@ -1,13 +1,5 @@
 import { act, renderHook } from "@testing-library/react";
-import {
-  afterAll,
-  beforeEach,
-  describe,
-  expect,
-  it,
-  mock,
-  spyOn,
-} from "bun:test";
+import { beforeEach, describe, expect, it, mock, spyOn } from "bun:test";
 
 const clearAuthenticationState = mock();
 const setAuthenticated = mock();
@@ -89,7 +81,3 @@ describe("useLogout", () => {
     consoleWarn.mockRestore();
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});

packages/web/src/auth/compass/session/SessionProvider.test.tsx

@@ -1,8 +1,9 @@
 import { act, renderHook, waitFor } from "@testing-library/react";
+import { useContext } from "react";
 import { Subject } from "rxjs";
 import { authSlice } from "@web/ducks/auth/slices/auth.slice";
 import { userMetadataSlice } from "@web/ducks/auth/slices/user-metadata.slice";
-import { afterAll, beforeEach, describe, expect, it, mock } from "bun:test";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
 
 // Create mocks at module level
 const refreshUserMetadata = mock().mockResolvedValue(undefined);
@@ -101,9 +102,8 @@ const { session } = require("@web/common/classes/Session") as {
   };
 };
 
-const { SessionProvider, sessionInit } =
+const { SessionContext, SessionProvider, sessionInit } =
   require("./SessionProvider") as typeof import("./SessionProvider");
-const { useSession } = require("./useSession") as typeof import("./useSession");
 
 describe("SessionProvider sessionInit", () => {
   beforeEach(() => {
@@ -170,7 +170,7 @@ describe("SessionProvider sessionInit", () => {
     getStream.mockReturnValue({} as EventSource);
     doesSessionExist.mockResolvedValue(false);
 
-    const { result } = renderHook(() => useSession(), {
+    const { result } = renderHook(() => useContext(SessionContext), {
       wrapper: SessionProvider,
     });
 
@@ -188,7 +188,3 @@ describe("SessionProvider sessionInit", () => {
     expect(result.current.authenticated).toBe(true);
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});

packages/web/src/auth/compass/session/session.util.test.ts

@@ -1,6 +1,6 @@
 import { UNAUTHENTICATED_USER } from "@web/common/constants/auth.constants";
 import { getUserId } from "./session.util";
-import { afterAll, beforeEach, describe, expect, it, mock } from "bun:test";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
 
 const mockDoesSessionExist = mock();
 const mockGetAccessTokenPayloadSecurely = mock();
@@ -44,7 +44,3 @@ describe("session.util", () => {
     });
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});

packages/web/src/auth/google/util/google.auth.util.test.ts

@@ -3,7 +3,6 @@ import {
   isGoogleRevoked,
 } from "@web/auth/google/state/google.auth.state";
 import {
-  afterAll,
   afterEach,
   beforeEach,
   describe,
@@ -192,7 +191,3 @@ describe("google-auth.util", () => {
     });
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});

packages/web/src/common/hooks/useAuthCmdItems.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react";
 import { act, type MouseEvent } from "react";
-import { afterAll, beforeEach, describe, expect, it, mock } from "bun:test";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
 
 const mockOpenModal = mock();
 const mockUseAuthModal = mock();
@@ -90,7 +90,3 @@ describe("useAuthCmdItems", () => {
     expect(mockOpenModal).toHaveBeenNthCalledWith(2, "login");
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});

packages/web/src/common/hooks/useLogoutCmdItems.test.ts

@@ -1,6 +1,6 @@
 import { renderHook } from "@testing-library/react";
 import { act, type MouseEvent } from "react";
-import { afterAll, beforeEach, describe, expect, it, mock } from "bun:test";
+import { beforeEach, describe, expect, it, mock } from "bun:test";
 
 const mockOpenLogoutConfirmation = mock();
 const mockUseLogoutConfirmation = mock();
@@ -55,7 +55,3 @@ describe("useLogoutCmdItems", () => {
     expect(mockOpenLogoutConfirmation).toHaveBeenCalledTimes(1);
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});

packages/web/src/common/hooks/useVersionCheck.test.ts

@@ -1,7 +1,6 @@
 import { renderHook, waitFor } from "@testing-library/react";
 import { act } from "react";
 import {
-  afterAll,
   afterEach,
   beforeEach,
   describe,
@@ -289,7 +288,3 @@ describe("useVersionCheck", () => {
     });
   });
 });
-
-afterAll(() => {
-  mock.restore();
-});