@terpjs/react-core 0.1.0

package/src/router.test.tsx

@@ -0,0 +1,307 @@
+// @vitest-environment jsdom
+import { RouterProvider, createMemoryHistory } from "@tanstack/react-router";
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { useEffect, useState } from "react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+import type { ModuleManifest } from "@terpjs/contract";
+
+import { buildAppRouter } from "./router";
+import { Page } from "./Page";
+import { TerpProvider, useAuth } from "./TerpProvider";
+
+function jsonResponse(body: unknown): Response {
+  return new Response(JSON.stringify(body), {
+    status: 200,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+});
+
+function LogInOnMount() {
+  const auth = useAuth();
+  useEffect(() => {
+    void auth.login({ email: "editor@example.com", password: "pw" });
+  }, []);
+  return null;
+}
+
+const manifests: ModuleManifest[] = [
+  {
+    name: "home",
+    routes: [{ path: "/", view: "Home" }],
+    nav: [],
+  },
+  {
+    name: "notes",
+    routes: [{ path: "/notes", view: "NotesList" }],
+    nav: [{ label: "Notes", to: "/notes" }],
+  },
+  {
+    name: "users",
+    routes: [{ path: "/users", view: "UsersList", role: "admin" }],
+    nav: [{ label: "Users", to: "/users", role: "admin" }],
+  },
+];
+
+const views = {
+  Home: () => <Page title="Home view">home body</Page>,
+  NotesList: () => <Page title="Notes view">notes body</Page>,
+  UsersList: () => <Page title="Users view">users body</Page>,
+};
+
+describe("buildAppRouter", () => {
+  it("renders the matched view in the shell with a role-filtered nav", async () => {
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const url = (input as Request).url;
+      if (url.endsWith("/api/v1/auth/login")) {
+        return jsonResponse({ access_token: "t", token_type: "bearer" });
+      }
+      return jsonResponse({ id: "1", email: "editor@example.com", role_rank: 20, role_name: "editor" });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const router = buildAppRouter(manifests, {
+      views,
+      title: "Terp",
+      history: createMemoryHistory({ initialEntries: ["/notes"] }),
+    });
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <RouterProvider router={router} />
+      </TerpProvider>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByRole("heading", { name: "Notes view" })).toBeInTheDocument(),
+    );
+    // Editor (rank 20) sees the Notes nav but not the admin-only Users nav.
+    expect(screen.getByRole("link", { name: "Notes" })).toBeInTheDocument();
+    expect(screen.queryByRole("link", { name: "Users" })).not.toBeInTheDocument();
+  });
+
+  it("navigates home through the product brand", async () => {
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const url = (input as Request).url;
+      if (url.endsWith("/api/v1/auth/login")) {
+        return jsonResponse({ access_token: "t", token_type: "bearer" });
+      }
+      return jsonResponse({ id: "1", email: "editor@example.com", role_rank: 20, role_name: "editor" });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    const router = buildAppRouter(manifests, {
+      views,
+      title: "Terp",
+      history: createMemoryHistory({ initialEntries: ["/notes"] }),
+    });
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <RouterProvider router={router} />
+      </TerpProvider>,
+    );
+    await screen.findByRole("heading", { name: "Notes view" });
+    const brand = screen.getByRole("link", { name: "Terp" });
+    expect(brand).toHaveAttribute("data-terp", "appshell-brand");
+    fireEvent.click(brand);
+    await screen.findByRole("heading", { name: "Home view" });
+  });
+
+  it("shows a sign-out control for the signed-in user and revokes the token on click", async () => {
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const url = (input as Request).url;
+      if (url.endsWith("/api/v1/auth/login")) {
+        return jsonResponse({ access_token: "t", token_type: "bearer" });
+      }
+      if (url.endsWith("/api/v1/auth/logout")) {
+        return new Response(null, { status: 204 });
+      }
+      return jsonResponse({ id: "1", email: "editor@example.com", role_rank: 20, role_name: "editor" });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const router = buildAppRouter(manifests, {
+      views,
+      title: "Terp",
+      history: createMemoryHistory({ initialEntries: ["/notes"] }),
+    });
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <RouterProvider router={router} />
+      </TerpProvider>,
+    );
+
+    // The sidebar's user menu shows the signed-in user's email; sign-out lives inside it.
+    await waitFor(() => expect(screen.getByText("editor@example.com")).toBeInTheDocument());
+    fireEvent.click(screen.getByRole("button", { name: "Account menu" }));
+    // Clicking sign-out revokes the token server-side (ADR 0031).
+    fireEvent.click(screen.getByRole("menuitem", { name: "Sign out" }));
+    await waitFor(() =>
+      expect(
+        fetchMock.mock.calls.some(([input]) =>
+          (input as Request).url.endsWith("/api/v1/auth/logout"),
+        ),
+      ).toBe(true),
+    );
+  });
+
+  it("rejects a route whose view id was not collected", () => {
+    expect(() =>
+      buildAppRouter(
+        [{ name: "missing", routes: [{ path: "/missing", view: "MissingView" }] }],
+        {
+          views: {},
+          title: "Terp",
+          history: createMemoryHistory({ initialEntries: ["/missing"] }),
+        },
+      ),
+    ).toThrow(/missing view/);
+  });
+
+  it("refuses a routed view that skips the page archetypes (fail closed)", async () => {
+    // The runtime half of the page-archetype control: a view rendering bare markup (no Page /
+    // OverviewPage / DetailPage / HubPage in its tree) is refused after mount, not shown.
+    vi.spyOn(console, "error").mockImplementation(() => undefined);
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const url = (input as Request).url;
+      if (url.endsWith("/api/v1/auth/login")) {
+        return jsonResponse({ access_token: "t", token_type: "bearer" });
+      }
+      return jsonResponse({ id: "1", email: "editor@example.com", role_rank: 20, role_name: "editor" });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const router = buildAppRouter(
+      [{ name: "bare", routes: [{ path: "/bare", view: "BareView" }], nav: [] }],
+      {
+        views: { BareView: () => <h1>Bare view</h1> },
+        title: "Terp",
+        history: createMemoryHistory({ initialEntries: ["/bare"] }),
+      },
+    );
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <RouterProvider router={router} />
+      </TerpProvider>,
+    );
+
+    // The bare view mounts, the post-mount check bites, and the screen is torn down.
+    await waitFor(() =>
+      expect(screen.queryByRole("heading", { name: "Bare view" })).not.toBeInTheDocument(),
+    );
+  });
+
+  it("accepts a view whose page archetype lands on a follow-up commit", async () => {
+    // A view may frame one commit late (e.g. a lazy inner component resolving); the grace
+    // window tolerates it while a view that never frames is still refused.
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const url = (input as Request).url;
+      if (url.endsWith("/api/v1/auth/login")) {
+        return jsonResponse({ access_token: "t", token_type: "bearer" });
+      }
+      return jsonResponse({ id: "1", email: "editor@example.com", role_rank: 20, role_name: "editor" });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    function LateFramedView() {
+      const [ready, setReady] = useState(false);
+      useEffect(() => setReady(true), []);
+      return ready ? <Page title="Late view">late body</Page> : null;
+    }
+
+    const router = buildAppRouter(
+      [{ name: "late", routes: [{ path: "/late", view: "LateView" }], nav: [] }],
+      {
+        views: { LateView: LateFramedView },
+        title: "Terp",
+        history: createMemoryHistory({ initialEntries: ["/late"] }),
+      },
+    );
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <RouterProvider router={router} />
+      </TerpProvider>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByRole("heading", { name: "Late view" })).toBeInTheDocument(),
+    );
+  });
+
+  it("mounts the built-in profile page; the user menu's Settings opens it", async () => {
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const url = (input as Request).url;
+      if (url.endsWith("/api/v1/auth/login")) {
+        return jsonResponse({ access_token: "t", token_type: "bearer" });
+      }
+      return jsonResponse({ id: "1", email: "editor@example.com", role_rank: 20, role_name: "editor" });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const router = buildAppRouter(manifests, {
+      views,
+      title: "Terp",
+      history: createMemoryHistory({ initialEntries: ["/notes"] }),
+    });
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <RouterProvider router={router} />
+      </TerpProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("editor@example.com")).toBeInTheDocument());
+    fireEvent.click(screen.getByRole("button", { name: "Account menu" }));
+    fireEvent.click(screen.getByRole("menuitem", { name: "Settings" }));
+
+    await waitFor(() =>
+      expect(screen.getByRole("heading", { level: 1, name: "Profile" })).toBeInTheDocument(),
+    );
+    // The identity comes from the server-validated session (email + role), framed by a Page.
+    expect(screen.getByText("editor (20)")).toBeInTheDocument();
+  });
+
+  it("lets an app manifest claim /profile over the built-in page", async () => {
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const url = (input as Request).url;
+      if (url.endsWith("/api/v1/auth/login")) {
+        return jsonResponse({ access_token: "t", token_type: "bearer" });
+      }
+      return jsonResponse({ id: "1", email: "editor@example.com", role_rank: 20, role_name: "editor" });
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    const router = buildAppRouter(
+      [{ name: "custom", routes: [{ path: "/profile", view: "CustomProfile" }], nav: [] }],
+      {
+        views: { CustomProfile: () => <Page title="Custom profile">custom body</Page> },
+        title: "Terp",
+        history: createMemoryHistory({ initialEntries: ["/profile"] }),
+      },
+    );
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LogInOnMount />
+        <RouterProvider router={router} />
+      </TerpProvider>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByRole("heading", { name: "Custom profile" })).toBeInTheDocument(),
+    );
+  });
+});

package/src/router.tsx

@@ -0,0 +1,222 @@
+import {
+  createRootRoute,
+  createRoute,
+  createRouter,
+  Link,
+  Outlet,
+  useRouter,
+  type AnyRoute,
+  type RouterHistory,
+} from "@tanstack/react-router";
+import type { ComponentType, ReactNode } from "react";
+import { useEffect, useRef, useState } from "react";
+import type { ModuleManifest } from "@terpjs/contract";
+
+import { AppShell } from "./AppShell";
+import { ProfileView } from "./ProfileView";
+import { LAYOUT_CONTRACTS, LayoutContractContext } from "./layoutContract";
+import { visibleNav } from "./nav";
+import { PageMarkerContext } from "./pageMarker";
+import { useAuth } from "./TerpProvider";
+import { UserMenu } from "./UserMenu";
+import { useStrings } from "./uiText";
+
+/** Default role-name -> minimum rank map (the bundled viewer/editor/admin ladder). */
+export const DEFAULT_ROLE_RANKS: Record<string, number> = {
+  viewer: 10,
+  editor: 20,
+  admin: 30,
+};
+
+/** The built-in profile / settings route (an app manifest claiming the path wins). */
+export const PROFILE_PATH = "/profile";
+
+export interface BuildAppRouterOptions {
+  /** Maps a manifest route's `view` id to the component that renders it. */
+  views: Record<string, ComponentType>;
+  /** App title shown in the shell's sidebar brand. */
+  title: string;
+  /** Brand mark in the sidebar (any rendered node); default: the placeholder TerpMark. */
+  logo?: ReactNode;
+  /** Footer line under the content; default: a muted line with the app title. */
+  footer?: ReactNode;
+  /** Role-name -> minimum rank; an unknown role is denied (fail closed). */
+  roleRanks?: Record<string, number>;
+  /** Rendered when the current user may not access a route (default: a simple message). */
+  unauthorized?: ComponentType;
+  /**
+   * Opt into a slot-typed layout contract (ADR 0079), e.g. `"standard"`: every routed
+   * archetype's body slot then accepts only the components the contract allows there,
+   * verified at runtime (fail closed) with the same directive message the
+   * `terp/layout-contract` lint rule phrases. Keep it in sync with the app's checked-in
+   * `layout-contract.json` (the lint half). Omit for today's archetype-only behavior.
+   */
+  layoutContract?: string;
+  /** Router history (e.g. `createMemoryHistory`); omit for the browser history. */
+  history?: RouterHistory;
+}
+
+/** Whether a user with `roleRank` (null = signed out) may access a route requiring `role`. */
+function allows(
+  roleRanks: Record<string, number>,
+  roleRank: number | null,
+  role: string | undefined,
+): boolean {
+  if (roleRank === null) {
+    return false;
+  }
+  if (role === undefined) {
+    return true; // any authenticated user
+  }
+  const required = roleRanks[role];
+  return required !== undefined && roleRank >= required;
+}
+
+function DefaultUnauthorized() {
+  return <p>{useStrings().unauthorized}</p>;
+}
+
+/**
+ * Build a TanStack Router from module manifests. The root route renders the {@link AppShell}
+ * (logo + title brand, a role-filtered icon/label sidebar of TanStack `Link`s, the
+ * {@link UserMenu} pinned at the sidebar's bottom, the sticky header with the sidebar
+ * toggle and theme/language controls, and the footer) around an `<Outlet/>`; each manifest
+ * route mounts its `view`, gated by the route's `role` (an unknown role is denied). The
+ * built-in {@link ProfileView} mounts at {@link PROFILE_PATH} unless a manifest claims that
+ * path. Wrap the returned router in `<TerpProvider><RouterProvider router={router}/></TerpProvider>`.
+ */
+export function buildAppRouter(
+  manifests: readonly ModuleManifest[],
+  options: BuildAppRouterOptions,
+) {
+  const roleRanks = options.roleRanks ?? DEFAULT_ROLE_RANKS;
+  const Unauthorized = options.unauthorized ?? DefaultUnauthorized;
+  const layoutContract = options.layoutContract ?? null;
+  if (layoutContract !== null && LAYOUT_CONTRACTS[layoutContract] === undefined) {
+    throw new Error(
+      `Unknown layout contract "${layoutContract}"; known contracts: ` +
+        Object.keys(LAYOUT_CONTRACTS).join(", ") +
+        ".",
+    );
+  }
+  const missingViews = manifests.flatMap((manifest) =>
+    manifest.routes
+      .filter((route) => options.views[route.view] === undefined)
+      .map((route) => `${manifest.name}:${route.path} -> ${route.view}`),
+  );
+  if (missingViews.length > 0) {
+    throw new Error(
+      "Terp route(s) reference missing view(s): " + missingViews.join(", "),
+    );
+  }
+
+  function Shell() {
+    const router = useRouter();
+    const rank = useAuth().currentUser()?.role_rank ?? null;
+    const nav = visibleNav(manifests, (role) => allows(roleRanks, rank, role));
+    return (
+      <AppShell
+        title={options.title}
+        logo={options.logo}
+        footer={options.footer}
+        nav={nav}
+        renderBrandLink={({ to, children, style }) => (
+          <Link to={to} data-terp="appshell-brand" style={style}>
+            {children}
+          </Link>
+        )}
+        renderLink={(item, children, context) => (
+          <Link
+            to={item.to}
+            style={context.style}
+            activeProps={{ style: { ...context.style, ...context.activeStyle } }}
+            activeOptions={{ exact: item.to === "/" }}
+          >
+            {children}
+          </Link>
+        )}
+        navFooter={({ collapsed }) => (
+          <UserMenu
+            collapsed={collapsed}
+            onSettings={() => void router.navigate({ to: PROFILE_PATH })}
+          />
+        )}
+      >
+        <Outlet />
+      </AppShell>
+    );
+  }
+
+  const rootRoute = createRootRoute({ component: Shell });
+
+  function guardedRoute(
+    path: string,
+    View: ComponentType,
+    role: string | undefined,
+    viewName: string,
+  ): AnyRoute {
+    function RouteComponent() {
+      const rank = useAuth().currentUser()?.role_rank ?? null;
+      const allowed = allows(roleRanks, rank, role);
+      // The runtime half of the "every routed view is a page archetype" control: Page
+      // (composed by OverviewPage / DetailPage / HubPage) marks the render; a routed view
+      // that mounted without any archetype in its tree is refused, fail closed. The check
+      // waits one macrotask so a view whose archetype lands on a follow-up commit (e.g. a
+      // lazy inner component resolving) is not refused spuriously.
+      const marked = useRef(false);
+      const [unframed, setUnframed] = useState(false);
+      useEffect(() => {
+        if (!allowed || marked.current) {
+          return;
+        }
+        const timer = setTimeout(() => {
+          if (!marked.current) {
+            setUnframed(true);
+          }
+        }, 0);
+        return () => clearTimeout(timer);
+      }, [allowed]);
+      if (unframed && !marked.current) {
+        throw new Error(
+          `Terp routed view "${viewName}" must render a react-core page archetype ` +
+            "(Page, OverviewPage, DetailPage or HubPage) so every screen keeps the " +
+            "breadcrumb/title/error frame.",
+        );
+      }
+      if (!allowed) {
+        return <Unauthorized />;
+      }
+      return (
+        <LayoutContractContext.Provider value={layoutContract}>
+          <PageMarkerContext.Provider
+            value={() => {
+              marked.current = true;
+            }}
+          >
+            <View />
+          </PageMarkerContext.Provider>
+        </LayoutContractContext.Provider>
+      );
+    }
+    return createRoute({
+      getParentRoute: () => rootRoute,
+      path,
+      component: RouteComponent,
+    });
+  }
+
+  const childRoutes: AnyRoute[] = manifests.flatMap((manifest) =>
+    manifest.routes.map((route) =>
+      guardedRoute(route.path, options.views[route.view]!, route.role, route.view),
+    ),
+  );
+  const profileClaimed = manifests.some((manifest) =>
+    manifest.routes.some((route) => route.path === PROFILE_PATH),
+  );
+  if (!profileClaimed) {
+    childRoutes.push(guardedRoute(PROFILE_PATH, ProfileView, undefined, "profile"));
+  }
+
+  const routeTree = rootRoute.addChildren(childRoutes);
+  return createRouter({ routeTree, history: options.history });
+}

package/src/sso.test.tsx

@@ -0,0 +1,128 @@
+// @vitest-environment jsdom
+import { cleanup, fireEvent, render, screen, waitFor } from "@testing-library/react";
+import { afterEach, describe, expect, it, vi } from "vitest";
+
+import { LoginView } from "./LoginView";
+import { TerpProvider, useAuth } from "./TerpProvider";
+import { parseSsoCallback } from "./sso";
+
+function json(body: unknown, status = 200): Response {
+  return new Response(JSON.stringify(body), {
+    status,
+    headers: { "content-type": "application/json" },
+  });
+}
+
+afterEach(() => {
+  cleanup();
+  vi.restoreAllMocks();
+  window.history.replaceState({}, "", "/");
+});
+
+function CurrentEmail() {
+  const auth = useAuth();
+  return <p>{auth.currentUser()?.email ?? "signed out"}</p>;
+}
+
+describe("parseSsoCallback", () => {
+  it("parses a provider callback landing", () => {
+    expect(
+      parseSsoCallback({ pathname: "/auth/callback/dex", search: "?code=c1&state=s1" }),
+    ).toEqual({ provider: "dex", code: "c1", state: "s1" });
+  });
+
+  it("returns null for a normal boot or a code-less landing", () => {
+    expect(parseSsoCallback({ pathname: "/", search: "" })).toBeNull();
+    expect(parseSsoCallback({ pathname: "/auth/callback/dex", search: "?error=denied" })).toBeNull();
+    expect(parseSsoCallback({ pathname: "/auth/callback/", search: "?code=c&state=s" })).toBeNull();
+    expect(
+      parseSsoCallback({ pathname: "/auth/callback/a/b", search: "?code=c&state=s" }),
+    ).toBeNull();
+  });
+});
+
+describe("SSO login (ADR 0058)", () => {
+  it("renders provider buttons and navigates to the IdP authorize URL", async () => {
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const request = input as Request;
+      if (request.url.endsWith("/api/v1/auth/refresh")) return json({}, 401);
+      if (request.url.endsWith("/api/v1/oidc/dex/authorize")) {
+        return json({ provider: "dex", authorization_url: "https://idp.test/authorize?x=1" });
+      }
+      return json({}, 404);
+    });
+    vi.stubGlobal("fetch", fetchMock);
+    const assign = vi.fn();
+    vi.spyOn(window, "location", "get").mockReturnValue({
+      ...window.location,
+      assign,
+      pathname: "/",
+      search: "",
+    } as unknown as Location);
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LoginView ssoProviders={[{ name: "dex", label: "Dex" }]} />
+      </TerpProvider>,
+    );
+
+    fireEvent.click(await screen.findByRole("button", { name: "Continue with Dex" }));
+    await waitFor(() => expect(assign).toHaveBeenCalledWith("https://idp.test/authorize?x=1"));
+  });
+
+  it("completes the callback landing into a signed-in session and cleans the URL", async () => {
+    window.history.replaceState({}, "", "/auth/callback/dex?code=c1&state=s1");
+    const fetchMock = vi.fn<typeof fetch>(async (input) => {
+      const request = input as Request;
+      if (request.url.endsWith("/api/v1/oidc/dex/callback")) {
+        expect(await request.clone().json()).toEqual({ code: "c1", state: "s1" });
+        return json({ access_token: "sso-token", token_type: "bearer" });
+      }
+      if (request.url.endsWith("/api/v1/me/")) {
+        expect(request.headers.get("authorization")).toContain("sso-token");
+        return json({ id: "1", email: "sso@acme.test", role_rank: 10, role_name: "viewer" });
+      }
+      return json({}, 404);
+    });
+    vi.stubGlobal("fetch", fetchMock);
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <CurrentEmail />
+      </TerpProvider>,
+    );
+
+    await waitFor(() => expect(screen.getByText("sso@acme.test")).toBeInTheDocument());
+    expect(window.location.pathname).toBe("/");
+    // The single-use code/state must not be replayed by a second boot pass.
+    const callbackCalls = fetchMock.mock.calls.filter((call) =>
+      (call[0] as Request).url.endsWith("/api/v1/oidc/dex/callback"),
+    );
+    expect(callbackCalls).toHaveLength(1);
+  });
+
+  it("surfaces a failed callback on the login screen instead of signing in", async () => {
+    window.history.replaceState({}, "", "/auth/callback/dex?code=bad&state=bad");
+    vi.stubGlobal(
+      "fetch",
+      vi.fn<typeof fetch>(async (input) => {
+        const request = input as Request;
+        if (request.url.endsWith("/api/v1/oidc/dex/callback")) {
+          return json({ detail: "Authentication failed", code: "authentication_failed" }, 401);
+        }
+        return json({}, 404);
+      }),
+    );
+
+    render(
+      <TerpProvider baseUrl="https://api.test">
+        <LoginView ssoProviders={[{ name: "dex" }]} />
+      </TerpProvider>,
+    );
+
+    await waitFor(() =>
+      expect(screen.getByText("Single sign-on failed. Try again.")).toBeInTheDocument(),
+    );
+    expect(window.location.pathname).toBe("/");
+  });
+});