Commit 2d8ca4817593c2fda1ce0b16849fc9920591538f | the-knife

author	Julius Marminge <julius0216@outlook.com> 2026-03-04 13:00:27-08:00
committer	Julius Marminge <jmarminge@gmail.com> 2026-03-05 10:20:34-08:00
log	2d8ca4817593c2fda1ce0b16849fc9920591538f
tree	625ac4c57c2ff5633f33bdd1891951beeb60cbe6
parent	4ca4a1f99c346456bd9434e9ae4e77f31b2c7aaf

Use real TanStack router in ChatView browser tests

- Replace mocked router hooks with a memory router + RouterProvider
- Render ChatView through a test route to exercise attachment height layout in realistic routing context

1 files changed, 28 insertions(+), 8 deletions(-)

apps
- web
  - src
    components
    ChatView.browser.tsx

apps/web/src/components/ChatView.browser.tsx+28-8

 @@ -1,6 +1,14 @@
 import "../index.css";
 import { type MessageId, type ThreadId } from "@t3tools/contracts";
+import {
+  Outlet,
+  RouterProvider,
+  createMemoryHistory,
+  createRootRoute,
+  createRoute,
+  createRouter,
+} from "@tanstack/react-router";
 import { createRoot, type Root } from "react-dom/client";
 import { afterEach, beforeEach, describe, expect, it, vi } from "vitest";
 @@ -10,7 +18,6 @@ import { estimateTimelineMessageHeight } from "./timelineHeight";
 const mocks = vi.hoisted(() => {
   return {
-    navigate: vi.fn(),
     markThreadVisited: vi.fn(),
     setThreadError: vi.fn(),
     setRuntimeMode: vi.fn(),
 @@ -67,12 +74,6 @@ const mocks = vi.hoisted(() => {
   };
 });
-vi.mock("@tanstack/react-router", () => ({
-  useNavigate: () => mocks.navigate,
-  useSearch: (options?: { select?: (params: Record<string, unknown>) => unknown }) =>
-    options?.select ? options.select({}) : {},
-}));
 vi.mock("@tanstack/react-query", async () => {
   const actual = await vi.importActual<typeof import("@tanstack/react-query")>(
     "@tanstack/react-query",
 @@ -163,6 +164,24 @@ interface RenderMeasureOptions {
   targetMessageId: MessageId;
 }
+function createTestRouter(threadId: ThreadId) {
+  const rootRoute = createRootRoute({
+    component: () => <Outlet />,
+  });
+  const threadRoute = createRoute({
+    getParentRoute: () => rootRoute,
+    path: "/$threadId",
+    component: () => <ChatView threadId={threadId} />,
+  });
+  return createRouter({
+    routeTree: rootRoute.addChildren([threadRoute]),
+    history: createMemoryHistory({
+      initialEntries: [`/${threadId}`],
+    }),
+    context: {},
+  });
+}
 function createThread(messages: ChatMessage[]): Thread {
   return {
     id: THREAD_ID,
 @@ -315,9 +334,10 @@ async function renderAndMeasureUserRow({
   document.body.append(host);
   mocks.storeState.threads = [createThread(messages)];
+  const router = createTestRouter(THREAD_ID);
   const root: Root = createRoot(host);
-  root.render(<ChatView threadId={THREAD_ID} />);
+  root.render(<RouterProvider router={router} />);
   await waitForLayout();
   const scrollContainer = host.querySelector("div.overflow-y-auto.overscroll-y-contain");