test(web): run isolated web suite directly (#1848)

* test(web): batch interim test runner

* test(web): isolate direct bun suite

* test(web): fix useGridLayout test stability in CI

- Override getBoundingClientRect on BOTH HTMLElement.prototype and
  window.HTMLElement.prototype since JSDOM may use a different
  HTMLElement internally than globalThis
- Use hardcoded test rects based on testid for consistent values
- Remove intermediate ref callbacks, use hook refs directly
- Move ResizeObserver mock setup to beforeEach for consistent timing
- Replace waitFor with direct assertions after explicit timeout
- Reset motion state in beforeEach/afterEach

The tests were failing in CI because:
1. JSDOM creates its own HTMLElement class assigned to window.HTMLElement
2. Elements created by JSDOM use window.HTMLElement.prototype
3. Only overriding globalThis.HTMLElement.prototype wasn't sufficient
4. Must override both prototypes to ensure the mock is used

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* test(web): use renderHook for useGridLayout tests

Use the canonical test pattern with renderHook and mock elements rather
than rendering full components with prototype-level getBoundingClientRect
overrides. This approach is consistent with useCalendarGridLayout tests
and avoids CI-specific prototype override issues.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* test(web): remove redundant useGridLayout test

The useGridLayout hook is a thin wrapper around useCalendarGridLayout
that passes DAYS_IN_VIEW=7 and isWeekInteractionMotionActive. All
functionality is already covered by useCalendarGridLayout.test.tsx
which tests the same 7-day layout measurements.

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

* chore: replace run.ts with native bun cmds

* fix(backend): address base api network scenario

* chore(web): re-add PlannerSidebar tests

* fix(web): restore planner sidebar shortcuts overlay

The createPlannerSidebar refactor imported the fixed-position shortcut
hint overlay instead of the sidebar modal, which blocked sidebar clicks
in e2e tests and ignored isShortcutsOpen.

Co-authored-by: Cursor <cursoragent@cursor.com>

---------

Co-authored-by: Claude Opus 4.5 <noreply@anthropic.com>
Co-authored-by: Cursor <cursoragent@cursor.com>

Author: 3 people

docs/development/testing-playbook.md

@@ -45,8 +45,8 @@ E2E workflow (`test-e2e.yml`) is separate and runs on pull requests to `main` vi
 ## Current Test Strategy
 
 - `bun run test:core` uses `bun test` with a small compatibility preload for the core BSON mock setup.
-- `bun run test:web`, `bun run test:backend`, and `bun run test:scripts` intentionally retain the existing Jest harness while their hoist-heavy module-mocking patterns are migrated.
-- `bun run test:<project>` is the stable CI-facing entrypoint for every package; the root dispatcher chooses the correct runner per project.
+- `bun run test:web` runs `bun test --cwd packages/web` directly. Web tests should be isolated enough to run in one Bun process without batching.
+- `bun run test:backend` and `bun run test:scripts` intentionally retain the existing Jest harness while their hoist-heavy module-mocking patterns are migrated.
 
 ## Retained Jest Layout
 
@@ -116,6 +116,14 @@ Avoid:
 - implementation-detail assertions
 - unnecessary module-wide mocks
 
+Isolation rules:
+
+- Do not use top-level `mock.module` for shared production modules unless the test imports the subject through a local factory and the mock cannot affect later files. Prefer provider wrappers, real stores, explicit dependency factories, or `spyOn` with teardown.
+- Avoid mocking shared UI primitives such as `TooltipWrapper`, `@floating-ui/react`, or session hooks in broad component tests. A mock that only helps one file can change unrelated tests later in the same Bun process.
+- If a test replaces globals (`fetch`, `document.getElementById`, storage, timers, console methods), restore the original value in teardown.
+- Prefer `renderWithStore`, `createStoreWrapper`, or a focused provider harness over mocking `@web/store` or `store.hooks`.
+- `bun test --cwd packages/web` is the acceptance check for web test isolation. A focused test can pass while still leaking into the direct suite.
+
 ### Web Jest Harness Defaults (MSW + Globals)
 
 Primary setup files:

package.json

@@ -26,12 +26,12 @@
     "lint:fix": "biome check --write .",
     "format": "biome format --write .",
     "format:check": "biome format .",
-    "test": "bun packages/scripts/src/testing/run.ts",
+    "test": "bun test:core && bun test:web && bun test:backend && bun test:scripts",
     "test:e2e": "bunx playwright test",
-    "test:backend": "bun packages/scripts/src/testing/run.ts backend",
-    "test:core": "bun packages/scripts/src/testing/run.ts core",
-    "test:web": "bun packages/scripts/src/testing/run.ts web",
-    "test:scripts": "bun packages/scripts/src/testing/run.ts scripts",
+    "test:backend": "./node_modules/.bin/jest --selectProjects backend",
+    "test:core": "bun test packages/core/src --preload packages/scripts/src/testing/core.preload.ts",
+    "test:web": "bun test --cwd packages/web",
+    "test:scripts": "./node_modules/.bin/jest scripts",
     "type-check": "bunx typescript@6.0.3 --noEmit && bunx typescript@6.0.3 -p packages/web/tsconfig.app.json --noEmit && bun run type-check:web-tests",
     "type-check:web-tests": "bunx typescript@6.0.3 -p packages/web/tsconfig.test.json --noEmit",
     "verify": "bun packages/scripts/src/testing/verify.ts",

packages/scripts/src/testing/run.ts

@@ -5,7 +5,7 @@ import { execSync } from "node:child_process";
  * Detects which packages changed via git diff and runs the minimum
  * necessary test suites plus type-check.
  *
- * All test execution is delegated to run.ts — no commands are duplicated here.
+ * Test execution is delegated to the root `test:<project>` package.json scripts.
  *
  * Usage:
  *   bun run verify              — auto-detect from git diff
@@ -79,7 +79,7 @@ function mapFilesToPackages(files: string[]): Package[] {
 function runPackage(pkg: Package): boolean {
   console.log(`\n→ test:${pkg}`);
   const result = bunRuntime.spawnSync({
-    cmd: ["bun", "packages/scripts/src/testing/run.ts", pkg],
+    cmd: ["bun", "run", `test:${pkg}`],
     cwd: process.cwd(),
     env: {
       ...process.env,

packages/scripts/src/testing/verify.ts

@@ -0,0 +1,59 @@
+import { configureStore, type PreloadedState } from "@reduxjs/toolkit";
+import {
+  type RenderHookOptions,
+  render,
+  renderHook,
+} from "@testing-library/react";
+import { type PropsWithChildren, type ReactElement } from "react";
+import { Provider } from "react-redux";
+import { sagaMiddleware } from "@web/common/store/middlewares";
+import { type RootState } from "@web/store";
+import { reducers } from "@web/store/reducers";
+
+export function createTestStore(preloadedState?: PreloadedState<RootState>) {
+  return configureStore({
+    reducer: reducers,
+    preloadedState,
+    middleware: (getDefaultMiddleware) =>
+      getDefaultMiddleware({
+        thunk: false,
+        serializableCheck: false,
+        immutableCheck: false,
+      }).concat(sagaMiddleware),
+  });
+}
+
+export function createStoreWrapper(preloadedState?: PreloadedState<RootState>) {
+  const store = createTestStore(preloadedState);
+
+  function StoreWrapper({ children }: PropsWithChildren) {
+    return <Provider store={store}>{children}</Provider>;
+  }
+
+  return { store, wrapper: StoreWrapper };
+}
+
+export function renderWithStore(
+  ui: ReactElement,
+  preloadedState?: PreloadedState<RootState>,
+) {
+  const { store, wrapper } = createStoreWrapper(preloadedState);
+
+  return {
+    store,
+    ...render(ui, { wrapper }),
+  };
+}
+
+export function renderHookWithStore<Result, Props>(
+  hook: (initialProps: Props) => Result,
+  preloadedState?: PreloadedState<RootState>,
+  options?: Omit<RenderHookOptions<Props>, "wrapper">,
+) {
+  const { store, wrapper } = createStoreWrapper(preloadedState);
+
+  return {
+    store,
+    ...renderHook(hook, { ...options, wrapper }),
+  };
+}

packages/web/src/__tests__/render-with-store.tsx

@@ -274,6 +274,32 @@ 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");
+  for (const style of document.head.querySelectorAll("style")) {
+    if (
+      !style.textContent?.includes(":has(.react-datepicker__day--selected)")
+    ) {
+      continue;
+    }
+
+    style.textContent = style.textContent.replaceAll(
+      /[^{}]+:has\(\.react-datepicker__day--selected\)[^{]*\{[^{}]*\}/g,
+      "",
+    );
+  }
+}
+
+function resetBrowserState() {
+  dom.reconfigure({ url: "http://localhost/" });
+  localStorage.clear();
+  sessionStorage.clear();
+}
+
 beforeEach(() => {
   sessionModule.doesSessionExist?.mockResolvedValue(true);
 });
@@ -282,6 +308,8 @@ beforeAll(() => server.listen({ onUnhandledRequest: "error" }));
 afterEach(async () => {
   await Promise.resolve();
   cleanup();
+  resetDocument();
+  resetBrowserState();
   server.resetHandlers();
 });
 afterAll(() => server.close());

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

@@ -0,0 +1,43 @@
+type Dispatch = (action: unknown) => unknown;
+
+export type CompleteAuthenticationDependencies = {
+  authSuccess: () => unknown;
+  clearAnonymousCalendarChangeSignUpPrompt: () => void;
+  markUserAsAuthenticated: (email?: string) => void;
+  refreshUserMetadata: () => Promise<unknown> | unknown;
+  syncPendingLocalEvents: () => Promise<unknown>;
+  triggerFetch: () => unknown;
+  useAppDispatch: () => Dispatch;
+  useSession: () => {
+    setAuthenticated: (isAuthenticated: boolean) => void;
+  };
+};
+
+export function createUseCompleteAuthentication(
+  dependencies: CompleteAuthenticationDependencies,
+) {
+  return function useCompleteAuthenticationWithDependencies() {
+    const dispatch = dependencies.useAppDispatch();
+    const { setAuthenticated } = dependencies.useSession();
+
+    return async ({
+      email,
+      onComplete,
+    }: {
+      email?: string;
+      onComplete?: () => void;
+    }) => {
+      dependencies.clearAnonymousCalendarChangeSignUpPrompt();
+      dependencies.markUserAsAuthenticated(email);
+      setAuthenticated(true);
+      dispatch(dependencies.authSuccess());
+
+      void dependencies.refreshUserMetadata();
+
+      await dependencies.syncPendingLocalEvents();
+
+      dispatch(dependencies.triggerFetch());
+      onComplete?.();
+    };
+  };
+}