test(ui): isolate Cases routing regression (#10591)
## 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 <noreply@paperclip.ing>
This commit is contained in:
Dotta
GitHub
parent
a29b10510c
commit
86b265bb85
|
|
@ -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 <App>'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: () => <div>CASES_LIST_PAGE</div> }));
|
||||
vi.mock("./pages/CaseDetail", () => ({ CaseDetail: () => <div>CASE_DETAIL_PAGE</div> }));
|
||||
|
||||
// CloudAccessGate must fall through to <Outlet/> (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: () => <Outlet /> };
|
||||
});
|
||||
|
||||
// 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(
|
||||
<QueryClientProvider client={queryClient}>
|
||||
<MemoryRouter initialEntries={[path]}>
|
||||
<App />
|
||||
</MemoryRouter>
|
||||
</QueryClientProvider>,
|
||||
<MemoryRouter initialEntries={[path]}>
|
||||
<App />
|
||||
</MemoryRouter>,
|
||||
);
|
||||
});
|
||||
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);
|
||||
});
|
||||
});
|
||||
|
|
|
|||
Loading…
Reference in New Issue