From 86b265bb851f2f9d4f4e94ebe544a8164e7ceeb8 Mon Sep 17 00:00:00 2001 From: Dotta <34892728+cryppadotta@users.noreply.github.com> Date: Fri, 31 Jul 2026 18:54:53 -0700 Subject: [PATCH] test(ui): isolate Cases routing regression (#10591) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## Thinking Path > - Paperclip is the open source app people use to manage AI agents for work > - The UI test suite protects the board route table > - The Cases routing regression test needs only the route table and sentinel pages > - The test initialized the full cloud access query flow for each route > - That unrelated setup made the two assertions spend several seconds polling > - This pull request isolates the routing dependency and removes the long timeout > - The benefit is faster and more focused route regression coverage ## Linked Issues or Issue Description **What happened?** The Cases routing regression test initialized cloud health, session, and board access queries. Its two route assertions spent about 6.69 seconds in test execution. **Expected behavior** The route regression test must bypass unrelated cloud access checks and resolve the two route assertions synchronously. **Steps to reproduce** 1. Run `pnpm --dir ui exec vitest run src/App.cases-routing.test.tsx` on the base commit. 2. Inspect the Vitest test duration. 3. Observe that the test waits through unrelated query transitions. **Paperclip version or commit** `7301fae942c3d5826974335cb40d6f1e0d95d1e0` **Deployment mode** Built from source. The defect affects the UI unit test suite. Related pull request: #9198 introduced the Cases route regression coverage. ## What Changed - Mock `CloudAccessGate` at the routing boundary. - Import the app after hoisted CSS setup and module mocks. - Remove the query client and three unrelated API mocks. - Replace long polling with a bounded three-turn route wait. - Remove the custom 20-second test timeouts. ## Verification - `pnpm --dir ui exec vitest run src/App.cases-routing.test.tsx` - `pnpm --filter @paperclipai/ui typecheck` - `pnpm check:token-gates` The focused run passed both tests. Test execution changed from about 6.69 seconds on the base commit to 40 milliseconds on this branch. ## Risks Low risk. The production route table is unchanged. The test still renders the real `App` route table and the same sentinel pages. > For core feature work, check [`ROADMAP.md`](ROADMAP.md) first and discuss it in `#dev` before opening the PR. Feature PRs that overlap with planned core work may need to be redirected — check the roadmap first. See `CONTRIBUTING.md`. ## Model Used OpenAI Codex with model ID `gpt-5`. The context-window size is not exposed to this run. The run used reasoning, repository tools, code execution, and GitHub tools. ## Checklist - [x] I have included a thinking path that traces from project context to this change - [x] I have specified the model used (with version and capability details) - [x] I have checked ROADMAP.md and confirmed this PR does not duplicate planned core work - [x] I have searched GitHub for duplicate or related PRs and linked them above - [x] I have either (a) linked existing issues with `Fixes: #` / `Closes #` / `Refs #` OR (b) described the issue in-PR following the relevant issue template - [x] I have not referenced internal/instance-local Paperclip issues or links (only public GitHub `#NNN` / `github.com/paperclipai/paperclip` URLs) - [x] My branch name describes the change (e.g. `docs/...`, `fix/...`) and contains no internal Paperclip ticket id or instance-derived details - [x] I have run tests locally and they pass - [x] I have added or updated tests where applicable - [x] I have updated relevant documentation to reflect my changes - [x] I have considered and documented any risks above - [x] All Paperclip CI gates are green - [x] Greptile is 5/5 with no open P2s, recommendations, or follow-ups - [x] I will address all Greptile and reviewer comments before requesting merge Co-authored-by: Paperclip --- ui/src/App.cases-routing.test.tsx | 82 +++++++++---------------------- 1 file changed, 24 insertions(+), 58 deletions(-) diff --git a/ui/src/App.cases-routing.test.tsx b/ui/src/App.cases-routing.test.tsx index d555a52357..a46b31b371 100644 --- a/ui/src/App.cases-routing.test.tsx +++ b/ui/src/App.cases-routing.test.tsx @@ -11,16 +11,16 @@ import type { ReactNode } from "react"; import { flushSync } from "react-dom"; import { createRoot } from "react-dom/client"; -import { QueryClient, QueryClientProvider } from "@tanstack/react-query"; import { MemoryRouter } from "react-router-dom"; -import { afterEach, beforeAll, beforeEach, describe, expect, it, vi } from "vitest"; +import { afterEach, beforeEach, describe, expect, it, vi } from "vitest"; +import { App } from "./App"; // jsdom's CSS parser rejects the custom-property marker rule stitches inserts // (`--sxs{--sxs:N}`), pulled into 's eager import graph transitively via // @codesandbox/sandpack-react. Substitute a benign, valid rule on parse failure // so stitches' index bookkeeping stays intact and the module graph evaluates. // (sandpack itself is never exercised by the routing under test.) -beforeAll(() => { +vi.hoisted(() => { const sheetProto = window.CSSStyleSheet.prototype as unknown as { insertRule: (rule: string, index?: number) => number; __pap13002Patched?: boolean; @@ -64,16 +64,12 @@ vi.mock("./components/OnboardingWizardVariant", () => ({ vi.mock("./pages/Cases", () => ({ Cases: () =>
CASES_LIST_PAGE
})); vi.mock("./pages/CaseDetail", () => ({ CaseDetail: () =>
CASE_DETAIL_PAGE
})); -// CloudAccessGate must fall through to (authorized w/ company access). -const mockHealthApi = vi.hoisted(() => ({ get: vi.fn() })); -const mockAuthApi = vi.hoisted(() => ({ getSession: vi.fn() })); -const mockAccessApi = vi.hoisted(() => ({ - getCurrentBoardAccess: vi.fn(), - claimBootstrapAdmin: vi.fn(), -})); -vi.mock("./api/health", () => ({ healthApi: mockHealthApi })); -vi.mock("./api/auth", () => ({ authApi: mockAuthApi })); -vi.mock("./api/access", () => ({ accessApi: mockAccessApi })); +// Cloud access is unrelated to the route-table regression. Let it fall through +// synchronously so this test does not poll its three query transitions. +vi.mock("./components/CloudAccessGate", async () => { + const { Outlet } = await import("react-router-dom"); + return { CloudAccessGate: () => }; +}); // The prefix resolver + redirect logic both read the active company. const PAP_COMPANY = { @@ -92,62 +88,32 @@ vi.mock("./context/CompanyContext", () => ({ CompanyProvider: ({ children }: { children: ReactNode }) => <>{children}, })); -async function flushReact() { - for (let i = 0; i < 20; i += 1) { - await Promise.resolve(); - await new Promise((resolve) => window.setTimeout(resolve, 0)); - } - flushSync(() => {}); -} - -async function waitForText(container: HTMLElement, text: string) { - for (let attempt = 0; attempt < 25; attempt += 1) { - if (container.textContent?.includes(text)) return; - await flushReact(); - } - expect(container.textContent).toContain(text); -} - async function renderAppAt(container: HTMLElement, path: string) { - const { App } = await import("./App"); const root = createRoot(container); - const queryClient = new QueryClient({ defaultOptions: { queries: { retry: false } } }); flushSync(() => { root.render( - - - - - , + + + , ); }); return root; } +async function waitForRoute(container: HTMLElement, text: string) { + for (let attempt = 0; attempt < 3; attempt += 1) { + if (container.textContent?.includes(text)) return; + await new Promise((resolve) => window.setTimeout(resolve, 0)); + } + expect(container.textContent).toContain(text); +} + describe("App Cases routing (PAP-13002)", () => { let container: HTMLDivElement; beforeEach(() => { container = document.createElement("div"); document.body.appendChild(container); - mockHealthApi.get.mockResolvedValue({ - status: "ok", - deploymentMode: "authenticated", - deploymentExposure: "private", - bootstrapStatus: "ready", - }); - mockAuthApi.getSession.mockResolvedValue({ - session: { id: "session-1", userId: "user-1" }, - user: { id: "user-1", email: "user@example.com", name: "User", image: null }, - }); - mockAccessApi.getCurrentBoardAccess.mockResolvedValue({ - user: { id: "user-1", email: "user@example.com", name: "User", image: null }, - userId: "user-1", - isInstanceAdmin: false, - companyIds: [PAP_COMPANY.id], - source: "session", - keyId: null, - }); }); afterEach(() => { @@ -158,15 +124,15 @@ describe("App Cases routing (PAP-13002)", () => { it("redirects unprefixed /cases to the company-prefixed list page", async () => { const root = await renderAppAt(container, "/cases"); - await waitForText(container, "CASES_LIST_PAGE"); + await waitForRoute(container, "CASES_LIST_PAGE"); expect(container.textContent).not.toContain("No company matches prefix"); flushSync(() => root.unmount()); - }, 20000); + }); it("redirects unprefixed /cases/:id to the company-prefixed detail page", async () => { const root = await renderAppAt(container, "/cases/PAP-C5"); - await waitForText(container, "CASE_DETAIL_PAGE"); + await waitForRoute(container, "CASE_DETAIL_PAGE"); expect(container.textContent).not.toContain("No company matches prefix"); flushSync(() => root.unmount()); - }, 20000); + }); });