Update route tests to match dumb-consumer architecture

CentralRouteManager now owns URL parsing, GraphQL resolution, and reactive-var
population for /extracts/:extractId, /users/:slug, and /label_sets/:id. The
existing route component tests still drove the old query-based behavior:

- UserProfileRoute.test.tsx now asserts that the component reads
  openedUser/routeLoading/routeError and renders accordingly. The /profile
  redirect cases moved to a new ProfileRedirect.test.tsx.
- ExtractDetailRoute.test.tsx is rewritten to drive the dumb-consumer
  behavior via openedExtract/routeLoading/routeError directly.
- LabelSetLandingRoute.test.tsx no longer expects the route to clear
  openedLabelset on close — that clear is owned by Phase 1 of the manager.
  The test now verifies onClose navigates to /label_sets.

Author: JSv4

frontend/src/components/routes/__tests__/ExtractDetailRoute.test.tsx

@@ -1,11 +1,13 @@
-import { render, screen, waitFor } from "@testing-library/react";
+import { render, screen } from "@testing-library/react";
 import { MockedProvider } from "@apollo/client/testing";
-import { GraphQLError } from "graphql";
 import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
 import { MemoryRouter, Route, Routes } from "react-router-dom";
 import { ExtractDetailRoute } from "../ExtractDetailRoute";
-import { openedExtract } from "../../../graphql/cache";
-import { RESOLVE_EXTRACT_BY_ID } from "../../../graphql/queries";
+import {
+  openedExtract,
+  routeLoading,
+  routeError,
+} from "../../../graphql/cache";
 import type { ExtractType } from "../../../types/graphql-api";
 
 vi.mock("../../../views/ExtractDetail", () => ({
@@ -31,13 +33,11 @@ vi.mock("../../widgets/ModernErrorDisplay", () => ({
 }));
 
 /**
- * Tests for ExtractDetailRoute.
+ * Tests for ExtractDetailRoute (dumb consumer).
  *
- * ExtractDetailRoute resolves /extracts/:extractId by either reusing the
- * openedExtract reactive var (when it matches the URL id) or executing a
- * RESOLVE_EXTRACT_BY_ID query. It surfaces loading, error, and not-found
- * states with the ModernLoading/Error displays and defers to ExtractDetail
- * on success.
+ * URL parsing and the RESOLVE_EXTRACT_BY_ID query now live in
+ * CentralRouteManager. ExtractDetailRoute reads openedExtract / routeLoading
+ * / routeError and renders one of three states.
  */
 describe("ExtractDetailRoute", () => {
   const mockExtract: ExtractType = {
@@ -50,115 +50,61 @@ describe("ExtractDetailRoute", () => {
     myPermissions: ["read_extract"],
   } as unknown as ExtractType;
 
-  const renderRoute = (extractId: string | undefined, mocks: any[] = []) => {
-    const path = extractId ? `/extracts/${extractId}` : "/extracts/";
-    return render(
-      <MockedProvider mocks={mocks} addTypename={false}>
-        <MemoryRouter initialEntries={[path]}>
+  const renderRoute = () =>
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <MemoryRouter initialEntries={["/extracts/extract-123"]}>
           <Routes>
             <Route
               path="/extracts/:extractId"
               element={<ExtractDetailRoute />}
             />
-            <Route path="/extracts/" element={<ExtractDetailRoute />} />
           </Routes>
         </MemoryRouter>
       </MockedProvider>
     );
-  };
 
   beforeEach(() => {
     openedExtract(null);
+    routeLoading(false);
+    routeError(null);
   });
 
   afterEach(() => {
     vi.clearAllMocks();
     openedExtract(null);
+    routeLoading(false);
+    routeError(null);
   });
 
-  it("shows 'No extract ID provided' when extractId param is missing", () => {
-    renderRoute(undefined);
-    expect(
-      screen.getByText(/Error:.*No extract ID provided/)
-    ).toBeInTheDocument();
-  });
-
-  it("skips the query and renders ExtractDetail when reactive var already has a matching extract", () => {
-    openedExtract({ ...mockExtract, id: "extract-123" } as any);
-
-    renderRoute("extract-123");
-
-    // Query is skipped because existingExtract.id === extractId, so we
-    // should see the ExtractDetail view immediately.
-    expect(screen.getByText("ExtractDetail Component")).toBeInTheDocument();
-  });
-
-  it("renders loading state while resolving an unfamiliar extract id", async () => {
-    renderRoute("extract-999", [
-      {
-        request: {
-          query: RESOLVE_EXTRACT_BY_ID,
-          variables: { extractId: "extract-999" },
-        },
-        delay: 100,
-        result: { data: { extract: { ...mockExtract, id: "extract-999" } } },
-      },
-    ]);
-
+  it("shows loading display when routeLoading is true and no extract is resolved", () => {
+    routeLoading(true);
+    renderRoute();
     expect(screen.getByText("Loading...")).toBeInTheDocument();
   });
 
-  it("renders error state when RESOLVE_EXTRACT_BY_ID returns an error", async () => {
-    renderRoute("extract-404", [
-      {
-        request: {
-          query: RESOLVE_EXTRACT_BY_ID,
-          variables: { extractId: "extract-404" },
-        },
-        result: { errors: [new GraphQLError("Extract not found")] },
-      },
-    ]);
-
-    await waitFor(() => {
-      expect(screen.getByText(/Error:/)).toBeInTheDocument();
-    });
+  it("shows error display when routeError is set", () => {
+    routeError(new Error("Boom"));
+    renderRoute();
+    expect(screen.getByText(/Error:.*Boom/)).toBeInTheDocument();
   });
 
-  it("renders not-found state when the query resolves with no extract", async () => {
-    renderRoute("extract-missing", [
-      {
-        request: {
-          query: RESOLVE_EXTRACT_BY_ID,
-          variables: { extractId: "extract-missing" },
-        },
-        result: { data: { extract: null } },
-      },
-    ]);
-
-    await waitFor(() => {
-      expect(screen.getByText(/Error:.*Extract not found/)).toBeInTheDocument();
-    });
+  it("shows 'Extract not found' when no extract is resolved and no error/loading is set", () => {
+    renderRoute();
+    expect(screen.getByText(/Error:.*Extract not found/)).toBeInTheDocument();
   });
 
-  it("renders ExtractDetail and sets openedExtract when the query resolves successfully", async () => {
-    const resolved = {
-      ...mockExtract,
-      id: "extract-555",
-      name: "Resolved Extract",
-    };
-    renderRoute("extract-555", [
-      {
-        request: {
-          query: RESOLVE_EXTRACT_BY_ID,
-          variables: { extractId: "extract-555" },
-        },
-        result: { data: { extract: resolved } },
-      },
-    ]);
+  it("renders ExtractDetail when an extract has been resolved", () => {
+    openedExtract(mockExtract as any);
+    renderRoute();
+    expect(screen.getByText("ExtractDetail Component")).toBeInTheDocument();
+  });
 
-    await waitFor(() => {
-      expect(screen.getByText("ExtractDetail Component")).toBeInTheDocument();
-    });
-    expect(openedExtract()?.id).toBe("extract-555");
+  it("prefers a resolved extract over the loading state when both are set", () => {
+    routeLoading(true);
+    openedExtract(mockExtract as any);
+    renderRoute();
+    expect(screen.getByText("ExtractDetail Component")).toBeInTheDocument();
+    expect(screen.queryByText("Loading...")).toBeNull();
   });
 });

frontend/src/components/routes/__tests__/LabelSetLandingRoute.test.tsx

@@ -2,7 +2,7 @@ import { render, screen } from "@testing-library/react";
 import userEvent from "@testing-library/user-event";
 import { MockedProvider } from "@apollo/client/testing";
 import { describe, it, expect, beforeEach, vi, afterEach } from "vitest";
-import { MemoryRouter } from "react-router-dom";
+import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
 import { LabelSetLandingRoute } from "../LabelSetLandingRoute";
 import {
   openedLabelset,
@@ -99,13 +99,32 @@ describe("LabelSetLandingRoute", () => {
     ).toBeInTheDocument();
   });
 
-  it("clears openedLabelset when LabelSetDetailPage invokes onClose", async () => {
+  it("navigates to /label_sets when LabelSetDetailPage invokes onClose", async () => {
+    const LocationReporter: React.FC = () => {
+      const location = useLocation();
+      return <div data-testid="location">{location.pathname}</div>;
+    };
+
     openedLabelset(mockLabelset);
-    renderRoute();
+
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <MemoryRouter initialEntries={["/label_sets/ls-1"]}>
+          <Routes>
+            <Route path="/label_sets/:id" element={<LabelSetLandingRoute />} />
+            <Route path="/label_sets" element={<LocationReporter />} />
+          </Routes>
+        </MemoryRouter>
+      </MockedProvider>
+    );
 
     const closeBtn = screen.getByRole("button", { name: "close-labelset" });
     await userEvent.click(closeBtn);
 
-    expect(openedLabelset()).toBeNull();
+    // CentralRouteManager Phase 1 owns the openedLabelset(null) clear when
+    // the new path resolves to a browse route — the route component just
+    // navigates and lets the manager handle the var.
+    const loc = await screen.findByTestId("location");
+    expect(loc.textContent).toBe("/label_sets");
   });
 });

frontend/src/components/routes/__tests__/ProfileRedirect.test.tsx

@@ -0,0 +1,62 @@
+import { render, screen } from "@testing-library/react";
+import { MockedProvider } from "@apollo/client/testing";
+import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
+import { MemoryRouter, Route, Routes, useLocation } from "react-router-dom";
+import { ProfileRedirect } from "../ProfileRedirect";
+import { backendUserObj } from "../../../graphql/cache";
+
+/**
+ * Tests for ProfileRedirect.
+ *
+ * /profile is auth-state-driven, not URL-state-driven, so the redirect lives
+ * outside CentralRouteManager. ProfileRedirect reads backendUserObj and
+ * issues a Navigate to /login (anonymous) or /users/<slug> (logged in).
+ */
+describe("ProfileRedirect", () => {
+  const LocationReporter: React.FC = () => {
+    const location = useLocation();
+    return <div data-testid="location">{location.pathname}</div>;
+  };
+
+  const renderAt = (path: string) =>
+    render(
+      <MockedProvider mocks={[]} addTypename={false}>
+        <MemoryRouter initialEntries={[path]}>
+          <Routes>
+            <Route path="/profile" element={<ProfileRedirect />} />
+            <Route path="/login" element={<LocationReporter />} />
+            <Route path="/users/:slug" element={<LocationReporter />} />
+          </Routes>
+        </MemoryRouter>
+      </MockedProvider>
+    );
+
+  beforeEach(() => {
+    backendUserObj(null);
+  });
+
+  afterEach(() => {
+    vi.clearAllMocks();
+    backendUserObj(null);
+  });
+
+  it("redirects to /login when no user is authenticated", async () => {
+    renderAt("/profile");
+    const loc = await screen.findByTestId("location");
+    expect(loc.textContent).toBe("/login");
+  });
+
+  it("redirects to /users/<slug> when a user is authenticated", async () => {
+    backendUserObj({ id: "u-1", slug: "alice" } as any);
+    renderAt("/profile");
+    const loc = await screen.findByTestId("location");
+    expect(loc.textContent).toBe("/users/alice");
+  });
+
+  it("redirects to /login when the authenticated user has no slug", async () => {
+    backendUserObj({ id: "u-1" } as any);
+    renderAt("/profile");
+    const loc = await screen.findByTestId("location");
+    expect(loc.textContent).toBe("/login");
+  });
+});