@sigil-dev/grimoire 0.4.0 → 0.5.0

package/test/rendering.test.ts

@@ -1,310 +1,310 @@
-import { afterAll, beforeAll, describe, expect, test } from "bun:test";
-import { mkdir, rm, writeFile } from "fs/promises";
-import { tmpdir as osTmpDir } from "os";
-import { join } from "path";
-import { renderRoute } from "../src/renderer";
-import { matchRoute } from "../src/router";
-import { scanRoutes } from "../src/scanner";
-
-/** Read a streaming Response body into a single string */
-async function readStream(res: Response): Promise<string> {
-	const reader = res.body!.getReader();
-	const parts: string[] = [];
-	while (true) {
-		const { done, value } = await reader.read();
-		if (done) break;
-		// Bun ReadableStream chunks can be string, Uint8Array, or other
-		parts.push(String(value));
-	}
-	return parts.join("");
-}
-
-let tmpDir: string;
-
-beforeAll(async () => {
-	tmpDir = join(osTmpDir(), `grimoire-render-${Date.now()}`);
-	await mkdir(join(tmpDir, "blog"), { recursive: true });
-
-	// simple static page
-	await writeFile(
-		join(tmpDir, "index.tsx"),
-		`
-        export default function Home() {
-            return <h1>Hello Grimoire</h1>;
-        }
-    `,
-	);
-
-	// page with load function
-	await writeFile(
-		join(tmpDir, "blog", "+page.server.ts"),
-		`
-        export async function load({ params }) {
-            return { title: 'My Blog' };
-        }
-    `,
-	);
-
-	await writeFile(
-		join(tmpDir, "blog", "+page.tsx"),
-		`
-        export default function Blog({ data }) {
-            return <h1>{data.title}</h1>;
-        }
-    `,
-	);
-
-	// layout
-	await writeFile(
-		join(tmpDir, "+layout.tsx"),
-		`
-        export default function Layout({ children }) {
-            return <div class="app" innerHTML={children}></div>;
-        }
-    `,
-	);
-
-	// root error page — renders status and message
-	await writeFile(
-		join(tmpDir, "+error.tsx"),
-		`
-        export default function ErrorPage({ status, message }) {
-            return <div class="error"><span class="status">{status}</span><span class="msg">{message}</span></div>;
-        }
-    `,
-	);
-
-	// page whose load throws redirect — use inline object so no grimoire import needed from /tmp
-	await mkdir(join(tmpDir, "redirect-page"), { recursive: true });
-	await writeFile(
-		join(tmpDir, "redirect-page", "+page.server.ts"),
-		`export async function load() { throw { __redirect: true, status: 302, location: "/login" }; }`,
-	);
-	await writeFile(
-		join(tmpDir, "redirect-page", "+page.tsx"),
-		`export default function P() { return <div>never</div>; }`,
-	);
-
-	// page whose load throws error — same pattern
-	await mkdir(join(tmpDir, "error-page"), { recursive: true });
-	await writeFile(
-		join(tmpDir, "error-page", "+page.server.ts"),
-		`export async function load() { throw { __error: true, status: 404, message: "Not found" }; }`,
-	);
-	await writeFile(
-		join(tmpDir, "error-page", "+page.tsx"),
-		`export default function P() { return <div>never</div>; }`,
-	);
-
-	// page whose load returns locals.tag (tests locals passthrough)
-	await mkdir(join(tmpDir, "locals-test"), { recursive: true });
-	await writeFile(
-		join(tmpDir, "locals-test", "+page.server.ts"),
-		`
-        export async function load({ locals }) { return { tag: locals.tag ?? "none" }; }
-    `,
-	);
-	await writeFile(
-		join(tmpDir, "locals-test", "+page.tsx"),
-		`export default function P({ data }) { return <div class="tag">{data.tag}</div>; }`,
-	);
-
-	// layout.server test — nested layout with server data
-	await mkdir(join(tmpDir, "dashboard"), { recursive: true });
-	await writeFile(
-		join(tmpDir, "dashboard", "+layout.server.ts"),
-		`export async function load() { return { user: "admin" }; }`,
-	);
-	await writeFile(
-		join(tmpDir, "dashboard", "+layout.tsx"),
-		`export default function DashLayout({ data, children }) {
-            return <div class="dash" data-user={data.user} innerHTML={children}></div>;
-        }`,
-	);
-	await writeFile(
-		join(tmpDir, "dashboard", "index.tsx"),
-		`export default function Dash() { return <p>dash content</p>; }`,
-	);
-});
-
-afterAll(async () => {
-	await rm(tmpDir, { recursive: true });
-});
-
-describe("renderRoute", () => {
-	test("renders static page", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/"));
-		const res = await renderRoute(matched!, new Request("http://localhost/"));
-		const html = await readStream(res);
-		expect(html).toContain("<h1>Hello Grimoire</h1>");
-		expect(html).toContain("<!DOCTYPE html>");
-	});
-
-	test("renders page with load data", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/blog"));
-		console.log("matched.route.type:", matched?.route.type);
-		console.log("matched.pageServer:", matched?.pageServer?.filePath);
-		const res = await renderRoute(
-			matched!,
-			new Request("http://localhost/blog"),
-		);
-		const html = await readStream(res);
-		expect(html).toContain("<!--g-->My Blog<!--/g-->");
-	});
-
-	test("wraps page in layout", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/"));
-		const res = await renderRoute(matched!, new Request("http://localhost/"));
-		const html = await readStream(res);
-		expect(html).toContain('class="app"');
-		expect(html).toContain("<h1>Hello Grimoire</h1>");
-	});
-
-	test("returns 404 shape for unmatched route", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/nonexistent"));
-		expect(matched).toBeNull();
-	});
-
-	test("injects grimoire state script", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/"));
-		const res = await renderRoute(matched!, new Request("http://localhost/"));
-		const html = await readStream(res);
-		expect(html).toContain("__grimoire_state__");
-	});
-
-	test("component output is not escaped", async () => {
-		await writeFile(
-			join(tmpDir, "inner.tsx"),
-			`
-            export default function Inner() {
-                return <strong>bold</strong>;
-            }
-        `,
-		);
-		await writeFile(
-			join(tmpDir, "outer.tsx"),
-			`
-            import Inner from './inner';
-            export default function Outer() {
-                return <div><Inner /></div>;
-            }
-        `,
-		);
-
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/outer"));
-		const res = await renderRoute(
-			matched!,
-			new Request("http://localhost/outer"),
-		);
-		const html = await readStream(res);
-
-		// should contain actual HTML tags, not escaped versions
-		expect(html).toContain("<strong>bold</strong>");
-		expect(html).not.toContain("&lt;strong&gt;");
-	});
-
-	test("user data is escaped", async () => {
-		await writeFile(
-			join(tmpDir, "xss.tsx"),
-			`
-            export default function XSS() {
-                const userInput = '<script>alert("xss")</script>';
-                return <div>{userInput}</div>;
-            }
-        `,
-		);
-
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/xss"));
-		const res = await renderRoute(
-			matched!,
-			new Request("http://localhost/xss"),
-		);
-		const html = await readStream(res);
-
-		expect(html).toContain("&lt;script&gt;");
-		expect(html).not.toContain("<script>alert");
-	});
-
-	test("load return value is passed as the data prop (SvelteKit convention)", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/blog"));
-		const res = await renderRoute(matched!, new Request("http://localhost/blog"));
-		const html = await readStream(res);
-		// blog/+page.server.ts returns { title: "My Blog" }
-		// blog/+page.tsx receives { data: { title: "My Blog" } } — not spread
-		expect(html).toContain("My Blog");
-		// the state JSON embeds data under the data key
-		const stateJson = JSON.parse(
-			html.match(/<script[^>]*>([^<]+)<\/script>/)?.[1] ?? "{}",
-		);
-		expect(stateJson.data?.title).toBe("My Blog");
-		expect(html).not.toContain("[object Object]");
-	});
-
-	test("redirect() from load returns 3xx with Location header", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/redirect-page"));
-		const res = await renderRoute(matched!, new Request("http://localhost/redirect-page"));
-		expect(res.status).toBe(302);
-		expect(res.headers.get("Location")).toBe("/login");
-	});
-
-	test("error() from load renders +error.tsx when present", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/error-page"));
-		const res = await renderRoute(
-			matched!,
-			new Request("http://localhost/error-page"),
-			tree.errors,
-		);
-		expect(res.status).toBe(404);
-		const html = await res.text();
-		expect(html).toContain('class="error"');
-		expect(html).toContain("404");
-		expect(html).toContain("Not found");
-	});
-
-	test("error() from load falls back to plain text when no error routes provided", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/error-page"));
-		const res = await renderRoute(
-			matched!,
-			new Request("http://localhost/error-page"),
-			[], // no error routes
-		);
-		expect(res.status).toBe(404);
-		const text = await res.text();
-		expect(text).toBe("Not found");
-	});
-
-	test("locals passed to renderRoute are visible inside load()", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/locals-test"));
-		const res = await renderRoute(
-			matched!,
-			new Request("http://localhost/locals-test"),
-			[],
-			undefined,
-			{ tag: "from-hook" },
-		);
-		const html = await readStream(res);
-		expect(html).toContain("from-hook");
-	});
-
-	test("+layout.server.ts load data is passed to the layout component", async () => {
-		const tree = await scanRoutes(tmpDir);
-		const matched = matchRoute(tree, new URL("http://localhost/dashboard"));
-		const res = await renderRoute(matched!, new Request("http://localhost/dashboard"));
-		const html = await readStream(res);
-		expect(html).toContain('class="dash"');
-		expect(html).toContain('data-user="admin"');
-		expect(html).toContain("dash content");
-	});
-});
+import { afterAll, beforeAll, describe, expect, test } from "bun:test";
+import { mkdir, rm, writeFile } from "fs/promises";
+import { tmpdir as osTmpDir } from "os";
+import { join } from "path";
+import { renderRoute } from "../src/renderer";
+import { matchRoute } from "../src/router";
+import { scanRoutes } from "../src/scanner";
+
+/** Read a streaming Response body into a single string */
+async function readStream(res: Response): Promise<string> {
+	const reader = res.body!.getReader();
+	const parts: string[] = [];
+	while (true) {
+		const { done, value } = await reader.read();
+		if (done) break;
+		// Bun ReadableStream chunks can be string, Uint8Array, or other
+		parts.push(String(value));
+	}
+	return parts.join("");
+}
+
+let tmpDir: string;
+
+beforeAll(async () => {
+	tmpDir = join(osTmpDir(), `grimoire-render-${Date.now()}`);
+	await mkdir(join(tmpDir, "blog"), { recursive: true });
+
+	// simple static page
+	await writeFile(
+		join(tmpDir, "index.tsx"),
+		`
+        export default function Home() {
+            return <h1>Hello Grimoire</h1>;
+        }
+    `,
+	);
+
+	// page with load function
+	await writeFile(
+		join(tmpDir, "blog", "+page.server.ts"),
+		`
+        export async function load({ params }) {
+            return { title: 'My Blog' };
+        }
+    `,
+	);
+
+	await writeFile(
+		join(tmpDir, "blog", "+page.tsx"),
+		`
+        export default function Blog({ data }) {
+            return <h1>{data.title}</h1>;
+        }
+    `,
+	);
+
+	// layout
+	await writeFile(
+		join(tmpDir, "+layout.tsx"),
+		`
+        export default function Layout({ children }) {
+            return <div class="app" innerHTML={children}></div>;
+        }
+    `,
+	);
+
+	// root error page — renders status and message
+	await writeFile(
+		join(tmpDir, "+error.tsx"),
+		`
+        export default function ErrorPage({ status, message }) {
+            return <div class="error"><span class="status">{status}</span><span class="msg">{message}</span></div>;
+        }
+    `,
+	);
+
+	// page whose load throws redirect — use inline object so no grimoire import needed from /tmp
+	await mkdir(join(tmpDir, "redirect-page"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "redirect-page", "+page.server.ts"),
+		`export async function load() { throw { __redirect: true, status: 302, location: "/login" }; }`,
+	);
+	await writeFile(
+		join(tmpDir, "redirect-page", "+page.tsx"),
+		`export default function P() { return <div>never</div>; }`,
+	);
+
+	// page whose load throws error — same pattern
+	await mkdir(join(tmpDir, "error-page"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "error-page", "+page.server.ts"),
+		`export async function load() { throw { __error: true, status: 404, message: "Not found" }; }`,
+	);
+	await writeFile(
+		join(tmpDir, "error-page", "+page.tsx"),
+		`export default function P() { return <div>never</div>; }`,
+	);
+
+	// page whose load returns locals.tag (tests locals passthrough)
+	await mkdir(join(tmpDir, "locals-test"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "locals-test", "+page.server.ts"),
+		`
+        export async function load({ locals }) { return { tag: locals.tag ?? "none" }; }
+    `,
+	);
+	await writeFile(
+		join(tmpDir, "locals-test", "+page.tsx"),
+		`export default function P({ data }) { return <div class="tag">{data.tag}</div>; }`,
+	);
+
+	// layout.server test — nested layout with server data
+	await mkdir(join(tmpDir, "dashboard"), { recursive: true });
+	await writeFile(
+		join(tmpDir, "dashboard", "+layout.server.ts"),
+		`export async function load() { return { user: "admin" }; }`,
+	);
+	await writeFile(
+		join(tmpDir, "dashboard", "+layout.tsx"),
+		`export default function DashLayout({ data, children }) {
+            return <div class="dash" data-user={data.user} innerHTML={children}></div>;
+        }`,
+	);
+	await writeFile(
+		join(tmpDir, "dashboard", "index.tsx"),
+		`export default function Dash() { return <p>dash content</p>; }`,
+	);
+});
+
+afterAll(async () => {
+	await rm(tmpDir, { recursive: true });
+});
+
+describe("renderRoute", () => {
+	test("renders static page", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/"));
+		const res = await renderRoute(matched!, new Request("http://localhost/"));
+		const html = await readStream(res);
+		expect(html).toContain("<h1>Hello Grimoire</h1>");
+		expect(html).toContain("<!DOCTYPE html>");
+	});
+
+	test("renders page with load data", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/blog"));
+		console.log("matched.route.type:", matched?.route.type);
+		console.log("matched.pageServer:", matched?.pageServer?.filePath);
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/blog"),
+		);
+		const html = await readStream(res);
+		expect(html).toContain("<!--g-->My Blog<!--/g-->");
+	});
+
+	test("wraps page in layout", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/"));
+		const res = await renderRoute(matched!, new Request("http://localhost/"));
+		const html = await readStream(res);
+		expect(html).toContain('class="app"');
+		expect(html).toContain("<h1>Hello Grimoire</h1>");
+	});
+
+	test("returns 404 shape for unmatched route", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/nonexistent"));
+		expect(matched).toBeNull();
+	});
+
+	test("injects grimoire state script", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/"));
+		const res = await renderRoute(matched!, new Request("http://localhost/"));
+		const html = await readStream(res);
+		expect(html).toContain("__grimoire_state__");
+	});
+
+	test("component output is not escaped", async () => {
+		await writeFile(
+			join(tmpDir, "inner.tsx"),
+			`
+            export default function Inner() {
+                return <strong>bold</strong>;
+            }
+        `,
+		);
+		await writeFile(
+			join(tmpDir, "outer.tsx"),
+			`
+            import Inner from './inner';
+            export default function Outer() {
+                return <div><Inner /></div>;
+            }
+        `,
+		);
+
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/outer"));
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/outer"),
+		);
+		const html = await readStream(res);
+
+		// should contain actual HTML tags, not escaped versions
+		expect(html).toContain("<strong>bold</strong>");
+		expect(html).not.toContain("&lt;strong&gt;");
+	});
+
+	test("user data is escaped", async () => {
+		await writeFile(
+			join(tmpDir, "xss.tsx"),
+			`
+            export default function XSS() {
+                const userInput = '<script>alert("xss")</script>';
+                return <div>{userInput}</div>;
+            }
+        `,
+		);
+
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/xss"));
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/xss"),
+		);
+		const html = await readStream(res);
+
+		expect(html).toContain("&lt;script&gt;");
+		expect(html).not.toContain("<script>alert");
+	});
+
+	test("load return value is passed as the data prop (SvelteKit convention)", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/blog"));
+		const res = await renderRoute(matched!, new Request("http://localhost/blog"));
+		const html = await readStream(res);
+		// blog/+page.server.ts returns { title: "My Blog" }
+		// blog/+page.tsx receives { data: { title: "My Blog" } } — not spread
+		expect(html).toContain("My Blog");
+		// the state JSON embeds data under the data key
+		const stateJson = JSON.parse(
+			html.match(/<script[^>]*>([^<]+)<\/script>/)?.[1] ?? "{}",
+		);
+		expect(stateJson.data?.title).toBe("My Blog");
+		expect(html).not.toContain("[object Object]");
+	});
+
+	test("redirect() from load returns 3xx with Location header", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/redirect-page"));
+		const res = await renderRoute(matched!, new Request("http://localhost/redirect-page"));
+		expect(res.status).toBe(302);
+		expect(res.headers.get("Location")).toBe("/login");
+	});
+
+	test("error() from load renders +error.tsx when present", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/error-page"));
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/error-page"),
+			tree.errors,
+		);
+		expect(res.status).toBe(404);
+		const html = await res.text();
+		expect(html).toContain('class="error"');
+		expect(html).toContain("404");
+		expect(html).toContain("Not found");
+	});
+
+	test("error() from load falls back to plain text when no error routes provided", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/error-page"));
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/error-page"),
+			[], // no error routes
+		);
+		expect(res.status).toBe(404);
+		const text = await res.text();
+		expect(text).toBe("Not found");
+	});
+
+	test("locals passed to renderRoute are visible inside load()", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/locals-test"));
+		const res = await renderRoute(
+			matched!,
+			new Request("http://localhost/locals-test"),
+			[],
+			undefined,
+			{ tag: "from-hook" },
+		);
+		const html = await readStream(res);
+		expect(html).toContain("from-hook");
+	});
+
+	test("+layout.server.ts load data is passed to the layout component", async () => {
+		const tree = await scanRoutes(tmpDir);
+		const matched = matchRoute(tree, new URL("http://localhost/dashboard"));
+		const res = await renderRoute(matched!, new Request("http://localhost/dashboard"));
+		const html = await readStream(res);
+		expect(html).toContain('class="dash"');
+		expect(html).toContain('data-user="admin"');
+		expect(html).toContain("dash content");
+	});
+});