@richie-router/react 0.1.2 → 0.1.4

package/dist/cjs/router.test.cjs

@@ -0,0 +1,574 @@
+var __create = Object.create;
+var __getProtoOf = Object.getPrototypeOf;
+var __defProp = Object.defineProperty;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+function __accessProp(key) {
+  return this[key];
+}
+var __toESMCache_node;
+var __toESMCache_esm;
+var __toESM = (mod, isNodeMode, target) => {
+  var canCache = mod != null && typeof mod === "object";
+  if (canCache) {
+    var cache = isNodeMode ? __toESMCache_node ??= new WeakMap : __toESMCache_esm ??= new WeakMap;
+    var cached = cache.get(mod);
+    if (cached)
+      return cached;
+  }
+  target = mod != null ? __create(__getProtoOf(mod)) : {};
+  const to = isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target;
+  for (let key of __getOwnPropNames(mod))
+    if (!__hasOwnProp.call(to, key))
+      __defProp(to, key, {
+        get: __accessProp.bind(mod, key),
+        enumerable: true
+      });
+  if (canCache)
+    cache.set(mod, to);
+  return to;
+};
+
+// packages/react/src/router.test.ts
+var import_bun_test = require("bun:test");
+var import_react = __toESM(require("react"));
+var import_server = require("react-dom/server");
+var import_router = require("./router.cjs");
+function createTestRouteTree(options) {
+  const rootRoute = import_router.createRootRoute({
+    component: () => null
+  });
+  const indexRoute = import_router.createFileRoute("/")({
+    component: () => null
+  });
+  const aboutRoute = import_router.createFileRoute("/about")({
+    component: () => null
+  });
+  aboutRoute._setServerHead(options?.serverHead);
+  return rootRoute._addFileChildren({
+    index: indexRoute,
+    about: aboutRoute
+  });
+}
+function createNestedHeadRouteTree() {
+  const rootRoute = import_router.createRootRoute({
+    component: () => null
+  });
+  const postsRoute = import_router.createFileRoute("/posts")({
+    component: () => null,
+    head: [
+      { tag: "title", children: "Posts" }
+    ]
+  });
+  const postRoute = import_router.createFileRoute("/posts/$postId")({
+    component: () => null
+  });
+  rootRoute._setServerHead(true);
+  postRoute._setServerHead(true);
+  postsRoute._addFileChildren({
+    post: postRoute
+  });
+  return rootRoute._addFileChildren({
+    posts: postsRoute
+  });
+}
+function createRootServerHeadTree() {
+  const rootRoute = import_router.createRootRoute({
+    component: () => null
+  });
+  const indexRoute = import_router.createFileRoute("/")({
+    component: () => null
+  });
+  const aboutRoute = import_router.createFileRoute("/about")({
+    component: () => null
+  });
+  rootRoute._setServerHead(true);
+  return rootRoute._addFileChildren({
+    index: indexRoute,
+    about: aboutRoute
+  });
+}
+function createNestedServerHeadTree() {
+  const rootRoute = import_router.createRootRoute({
+    component: () => null
+  });
+  const postsRoute = import_router.createFileRoute("/posts")({
+    component: () => null
+  });
+  const postRoute = import_router.createFileRoute("/posts/$postId")({
+    component: () => null
+  });
+  rootRoute._setServerHead(true);
+  postsRoute._setServerHead(true);
+  postRoute._setServerHead(true);
+  postsRoute._addFileChildren({
+    post: postRoute
+  });
+  return rootRoute._addFileChildren({
+    posts: postsRoute
+  });
+}
+function createLinkTestRouteTree(component) {
+  const rootRoute = import_router.createRootRoute({
+    component
+  });
+  const postRoute = import_router.createFileRoute("/post")({
+    component: () => null
+  });
+  const postsRoute = import_router.createFileRoute("/posts")({
+    component: () => null
+  });
+  const postDetailRoute = import_router.createFileRoute("/posts/$postId")({
+    component: () => null
+  });
+  postsRoute._addFileChildren({
+    detail: postDetailRoute
+  });
+  return rootRoute._addFileChildren({
+    post: postRoute,
+    posts: postsRoute
+  });
+}
+function renderLinkMarkup(initialEntry, component) {
+  const history = import_router.createMemoryHistory({
+    initialEntries: [initialEntry]
+  });
+  const router = import_router.createRouter({
+    routeTree: createLinkTestRouteTree(component),
+    history
+  });
+  return import_server.renderToStaticMarkup(import_react.default.createElement(import_router.RouterProvider, { router }));
+}
+import_bun_test.describe("createRouter basePath", () => {
+  import_bun_test.test('treats "/" as the root basePath', () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/about?tab=team#bio"]
+    });
+    const router = import_router.createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/"
+    });
+    import_bun_test.expect(router.state.location.pathname).toBe("/about");
+    import_bun_test.expect(router.state.location.href).toBe("/about?tab=team#bio");
+    import_bun_test.expect(router.buildHref({ to: "/about" })).toBe("/about");
+  });
+  import_bun_test.test("normalizes a trailing slash in the basePath", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/project/about?tab=team#bio"]
+    });
+    const router = import_router.createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/project/"
+    });
+    import_bun_test.expect(router.state.location.pathname).toBe("/about");
+    import_bun_test.expect(router.buildHref({ to: "/about" })).toBe("/project/about");
+    await router.navigate({
+      to: "/about"
+    });
+    import_bun_test.expect(history.location.href).toBe("/project/about");
+  });
+  import_bun_test.test("strips the basePath from the current history location", () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/project/about?tab=team#bio"]
+    });
+    const router = import_router.createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/project"
+    });
+    import_bun_test.expect(router.state.location.pathname).toBe("/about");
+    import_bun_test.expect(router.state.location.href).toBe("/about?tab=team#bio");
+    import_bun_test.expect(router.state.matches.at(-1)?.route.fullPath).toBe("/about");
+  });
+  import_bun_test.test("prefixes generated hrefs and history writes with the basePath", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/project"]
+    });
+    const router = import_router.createRouter({
+      routeTree: createTestRouteTree(),
+      history,
+      basePath: "/project"
+    });
+    import_bun_test.expect(router.buildHref({ to: "/about" })).toBe("/project/about");
+    await router.navigate({
+      to: "/about",
+      search: {
+        tab: "team"
+      }
+    });
+    import_bun_test.expect(history.location.href).toBe("/project/about?tab=team");
+    import_bun_test.expect(router.state.location.href).toBe("/about?tab=team");
+  });
+  import_bun_test.test("uses the basePath for the default head API endpoint", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/project/about"]
+    });
+    const fetchCalls = [];
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = async (input) => {
+      fetchCalls.push(typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url);
+      return new Response(JSON.stringify({
+        head: [],
+        routeHeads: [
+          { routeId: "/about", head: [] }
+        ]
+      }), {
+        status: 200,
+        headers: {
+          "content-type": "application/json"
+        }
+      });
+    };
+    try {
+      const router = import_router.createRouter({
+        routeTree: createTestRouteTree({ serverHead: true }),
+        history,
+        basePath: "/project"
+      });
+      await router.load();
+      import_bun_test.expect(fetchCalls).toHaveLength(1);
+      import_bun_test.expect(fetchCalls[0]).toBe("/project/head-api?href=%2Fproject%2Fabout");
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+  import_bun_test.test("uses one document head request and preserves inline head precedence", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/posts/alpha"]
+    });
+    const fetchCalls = [];
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = async (input) => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      fetchCalls.push(url);
+      return new Response(JSON.stringify({
+        head: [
+          { tag: "title", children: "Site" },
+          { tag: "title", children: "Alpha" }
+        ],
+        routeHeads: [
+          {
+            routeId: "__root__",
+            head: [{ tag: "title", children: "Site" }],
+            staleTime: 60000
+          },
+          {
+            routeId: "/posts/$postId",
+            head: [{ tag: "title", children: "Alpha" }],
+            staleTime: 1e4
+          }
+        ],
+        staleTime: 1e4
+      }), {
+        status: 200,
+        headers: {
+          "content-type": "application/json"
+        }
+      });
+    };
+    try {
+      const router = import_router.createRouter({
+        routeTree: createNestedHeadRouteTree(),
+        history
+      });
+      await router.load();
+      import_bun_test.expect(fetchCalls).toEqual(["/head-api?href=%2Fposts%2Falpha"]);
+      import_bun_test.expect(router.state.head).toEqual([
+        { tag: "title", children: "Alpha" }
+      ]);
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+  import_bun_test.test("reuses a fresh root server head across navigations without refetching", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/"]
+    });
+    const fetchCalls = [];
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = async (input) => {
+      fetchCalls.push(typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url);
+      return new Response(JSON.stringify({
+        head: [
+          { tag: "title", children: "Site" }
+        ],
+        routeHeads: [
+          {
+            routeId: "__root__",
+            head: [{ tag: "title", children: "Site" }],
+            staleTime: 60000
+          }
+        ],
+        staleTime: 60000
+      }), {
+        status: 200,
+        headers: {
+          "content-type": "application/json"
+        }
+      });
+    };
+    try {
+      const router = import_router.createRouter({
+        routeTree: createRootServerHeadTree(),
+        history
+      });
+      await router.load();
+      await router.navigate({
+        to: "/about"
+      });
+      import_bun_test.expect(fetchCalls).toEqual(["/head-api?href=%2F"]);
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+  import_bun_test.test("seeds the route head cache from the dehydrated snapshot", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/about"]
+    });
+    const fetchCalls = [];
+    const originalFetch = globalThis.fetch;
+    const globalWithWindow = globalThis;
+    const originalWindow = globalWithWindow.window;
+    globalThis.fetch = async (input) => {
+      fetchCalls.push(typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url);
+      return new Response(JSON.stringify({
+        head: [
+          { tag: "title", children: "Site" }
+        ],
+        routeHeads: [
+          {
+            routeId: "__root__",
+            head: [{ tag: "title", children: "Site" }],
+            staleTime: 60000
+          }
+        ],
+        staleTime: 60000
+      }), {
+        status: 200,
+        headers: {
+          "content-type": "application/json"
+        }
+      });
+    };
+    globalWithWindow.window = {
+      __RICHIE_ROUTER_HEAD__: {
+        href: "/about",
+        head: [
+          { tag: "title", children: "Site" }
+        ],
+        routeHeads: [
+          {
+            routeId: "__root__",
+            head: [{ tag: "title", children: "Site" }],
+            staleTime: 60000
+          }
+        ]
+      }
+    };
+    try {
+      const router = import_router.createRouter({
+        routeTree: createRootServerHeadTree(),
+        history
+      });
+      await router.load();
+      import_bun_test.expect(fetchCalls).toHaveLength(0);
+      import_bun_test.expect(router.state.head).toEqual([
+        { tag: "title", children: "Site" }
+      ]);
+    } finally {
+      globalThis.fetch = originalFetch;
+      if (originalWindow === undefined) {
+        Reflect.deleteProperty(globalWithWindow, "window");
+      } else {
+        originalWindow.__RICHIE_ROUTER_HEAD__ = undefined;
+        globalWithWindow.window = originalWindow;
+      }
+    }
+  });
+  import_bun_test.test("reuses the initial merged head snapshot without fetching when the branch has no inline head", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/about"]
+    });
+    const fetchCalls = [];
+    const originalFetch = globalThis.fetch;
+    const globalWithWindow = globalThis;
+    const originalWindow = globalWithWindow.window;
+    globalThis.fetch = async (input) => {
+      fetchCalls.push(typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url);
+      return new Response("{}", {
+        status: 500
+      });
+    };
+    globalWithWindow.window = {
+      __RICHIE_ROUTER_HEAD__: {
+        href: "/about",
+        head: [
+          { tag: "title", children: "About from SSR" }
+        ]
+      }
+    };
+    try {
+      const router = import_router.createRouter({
+        routeTree: createTestRouteTree({ serverHead: true }),
+        history
+      });
+      await router.load();
+      import_bun_test.expect(fetchCalls).toHaveLength(0);
+      import_bun_test.expect(router.state.head).toEqual([
+        { tag: "title", children: "About from SSR" }
+      ]);
+    } finally {
+      globalThis.fetch = originalFetch;
+      if (originalWindow === undefined) {
+        Reflect.deleteProperty(globalWithWindow, "window");
+      } else {
+        originalWindow.__RICHIE_ROUTER_HEAD__ = undefined;
+        globalWithWindow.window = originalWindow;
+      }
+    }
+  });
+  import_bun_test.test("uses the merged document head without route fallback requests when the branch has no inline head", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/posts/alpha"]
+    });
+    const fetchCalls = [];
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = async (input) => {
+      const url = typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url;
+      fetchCalls.push(url);
+      return new Response(JSON.stringify({
+        head: [
+          { tag: "meta", name: "description", content: "Nested server head" },
+          { tag: "title", children: "Alpha" }
+        ],
+        staleTime: 1e4
+      }), {
+        status: 200,
+        headers: {
+          "content-type": "application/json"
+        }
+      });
+    };
+    try {
+      const router = import_router.createRouter({
+        routeTree: createNestedServerHeadTree(),
+        history
+      });
+      await router.load();
+      import_bun_test.expect(fetchCalls).toEqual(["/head-api?href=%2Fposts%2Falpha"]);
+      import_bun_test.expect(router.state.head).toEqual([
+        { tag: "meta", name: "description", content: "Nested server head" },
+        { tag: "title", children: "Alpha" }
+      ]);
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+  import_bun_test.test("keeps loadRouteHead as the route-scoped override path", async () => {
+    const history = import_router.createMemoryHistory({
+      initialEntries: ["/about"]
+    });
+    const fetchCalls = [];
+    const loadRouteHeadCalls = [];
+    const originalFetch = globalThis.fetch;
+    globalThis.fetch = async (input) => {
+      fetchCalls.push(typeof input === "string" ? input : input instanceof URL ? input.toString() : input.url);
+      return new Response("{}", {
+        status: 500
+      });
+    };
+    try {
+      const router = import_router.createRouter({
+        routeTree: createTestRouteTree({ serverHead: true }),
+        history,
+        loadRouteHead: async ({ routeId }) => {
+          loadRouteHeadCalls.push(routeId);
+          return {
+            head: [
+              { tag: "title", children: "About override" }
+            ],
+            staleTime: 1000
+          };
+        }
+      });
+      await router.load();
+      import_bun_test.expect(loadRouteHeadCalls).toEqual(["/about"]);
+      import_bun_test.expect(fetchCalls).toHaveLength(0);
+      import_bun_test.expect(router.state.head).toEqual([
+        { tag: "title", children: "About override" }
+      ]);
+    } finally {
+      globalThis.fetch = originalFetch;
+    }
+  });
+});
+import_bun_test.describe("Link active state", () => {
+  import_bun_test.test("keeps parent links active on child routes by default", () => {
+    const TestLink = import_router.Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(TestLink, { to: "/posts", activeProps: { className: "active" } }, "Posts"));
+    import_bun_test.expect(markup).toContain('class="active"');
+  });
+  import_bun_test.test("supports exact-only active matching", () => {
+    const TestLink = import_router.Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(TestLink, {
+      to: "/posts",
+      activeOptions: { exact: true },
+      activeProps: { className: "active" }
+    }, "Posts"));
+    import_bun_test.expect(markup).not.toContain('class="active"');
+  });
+  import_bun_test.test("matches path segments instead of raw string prefixes", () => {
+    const TestLink = import_router.Link;
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(TestLink, { to: "/post", activeProps: { className: "active" } }, "Post"));
+    import_bun_test.expect(markup).not.toContain('class="active"');
+  });
+  import_bun_test.test("applies activeOptions in custom links created with createLink", () => {
+    const AppLink = import_router.createLink((props) => import_react.default.createElement("a", props));
+    const markup = renderLinkMarkup("/posts/alpha", () => import_react.default.createElement(AppLink, {
+      to: "/posts",
+      activeOptions: { exact: true },
+      activeProps: { className: "active" }
+    }, "Posts"));
+    import_bun_test.expect(markup).not.toContain('class="active"');
+  });
+});
+import_bun_test.describe("useMatchRoute", () => {
+  import_bun_test.test("returns matched params for exact matches", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({ to: "/posts/$postId" });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("{"postId":"alpha"}");
+  });
+  import_bun_test.test("supports fuzzy parent matching", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({ to: "/posts", fuzzy: true });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("{}");
+  });
+  import_bun_test.test("supports partial param filters", () => {
+    const markup = renderLinkMarkup("/posts/alpha", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({ to: "/posts/$postId", params: { postId: "beta" } });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("false");
+  });
+  import_bun_test.test("can include search params in the match", () => {
+    const markup = renderLinkMarkup("/posts/alpha?tab=details&count=2", () => {
+      const matchRoute = import_router.useMatchRoute();
+      const match = matchRoute({
+        to: "/posts/$postId",
+        includeSearch: true,
+        search: { tab: "details" }
+      });
+      return import_react.default.createElement("pre", null, match === false ? "false" : JSON.stringify(match));
+    });
+    import_bun_test.expect(markup).toContain("{"postId":"alpha"}");
+  });
+});