From 2d8ca4817593c2fda1ce0b16849fc9920591538f Mon Sep 17 00:00:00 2001
From: Julius Marminge <julius0216@outlook.com>
Date: Wed, 4 Mar 2026 13:00:27 -0800
Subject: [PATCH] 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
---
 apps/web/src/components/ChatView.browser.tsx | 36 +++++++++++++++-----
 1 file changed, 28 insertions(+), 8 deletions(-)

diff --git a/apps/web/src/components/ChatView.browser.tsx b/apps/web/src/components/ChatView.browser.tsx
index 167f95f2f3d75827788d18f9ddc6e59120c2954f..58a0b3f8a5d9c50dbebba1b9cc0fd569853e6ab5 100644
--- a/apps/web/src/components/ChatView.browser.tsx
+++ b/apps/web/src/components/ChatView.browser.tsx
@@ -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");
-- 
2.54.0