@richie-router/react 0.1.1 → 0.1.3

package/dist/cjs/router.test.cjs

@@ -0,0 +1,413 @@
+// packages/react/src/router.test.ts
+var import_bun_test = require("bun:test");
+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
+  });
+}
+import_bun_test.describe("createRouter basePath", () => {
+  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;
+    }
+  });
+});