test(web): cover CategoryGrid per-level navigation for vehicles & catalog

Locks in the catalog regression check after CategoryGrid switched from
in-place stack drilling to per-level route navigation: catalog-mode parent
clicks route to the catalog category page preserving variant + mgp search
params (no vehicles-mode cache seeding), and vehicles-mode parent clicks
route to the category page and seed the query cache.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

apps/web/src/components/categories/__tests__/category-grid-nav.test.tsx

@@ -0,0 +1,73 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import { beforeEach, describe, expect, it, vi } from "vitest";
+
+const navigateMock = vi.fn();
+const setQueryDataMock = vi.fn();
+
+vi.mock("@/lib/i18n", () => ({ useTranslation: () => ({ t: (k: string) => k }) }));
+vi.mock("@/lib/category-icons", () => ({ getCategoryIcon: () => () => null }));
+vi.mock("@/lib/api-client", () => ({ api: { get: vi.fn().mockResolvedValue([]) } }));
+vi.mock("@tanstack/react-query", () => ({
+  useQueryClient: () => ({ setQueryData: setQueryDataMock }),
+}));
+vi.mock("@tanstack/react-router", () => ({ useNavigate: () => navigateMock }));
+vi.mock("@sase/ui", () => ({
+  Card: ({ children }: any) => <div>{children}</div>,
+  CardContent: ({ children }: any) => <div>{children}</div>,
+  Input: (props: any) => <input {...props} />,
+}));
+
+import { CategoryGrid } from "../category-grid";
+
+describe("CategoryGrid navigation", () => {
+  beforeEach(() => vi.clearAllMocks());
+
+  it("vehicles mode: clicking a parent routes to the category page and seeds the cache", () => {
+    render(
+      <CategoryGrid
+        vehicleId="v1"
+        categories={[
+          { id: "c1", name: "Motor", parentId: null, children: [{ id: "c2", name: "Silindir" }] },
+        ]}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Motor"));
+
+    expect(navigateMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        to: "/dashboard/vehicles/$id/categories/$categoryId",
+        params: { id: "v1", categoryId: "c1" },
+      }),
+    );
+    // Known children are seeded so the destination renders instantly.
+    expect(setQueryDataMock).toHaveBeenCalledWith(
+      ["category-parts", "v1", "c1"],
+      expect.objectContaining({ id: "c1", children: [{ id: "c2", name: "Silindir" }] }),
+    );
+  });
+
+  it("catalog mode: parent click routes to the catalog page, preserving variant + mgp, without seeding", () => {
+    render(
+      <CategoryGrid
+        vehicleId="m1"
+        catalogMode
+        brandName="bmw"
+        categories={[{ id: "c1", name: "Motor", children: [{ id: "c2", name: "Silindir" }] }]}
+        variantSearch={{ body: "sedan", engine: "n20", gearbox: "auto", mgp: "x" } as any}
+      />,
+    );
+
+    fireEvent.click(screen.getByText("Motor"));
+
+    expect(navigateMock).toHaveBeenCalledWith(
+      expect.objectContaining({
+        to: "/dashboard/catalog/$brandName/$modelId/categories/$categoryId",
+        params: { brandName: "bmw", modelId: "m1", categoryId: "c1" },
+        search: { body: "sedan", engine: "n20", gearbox: "auto", mgp: "x" },
+      }),
+    );
+    // Catalog mode uses a different query key/route — no vehicles-mode seeding.
+    expect(setQueryDataMock).not.toHaveBeenCalled();
+  });
+});