@sigil-dev/grimoire 0.7.6 → 0.8.0

package/test/hydration.test.ts

@@ -1,119 +1,119 @@
-import { Window } from "happy-dom";
-
-// set up DOM globals before tests
-const window = new Window();
-const document = window.document;
-
-// @ts-expect-error
-globalThis.document = document;
-// @ts-expect-error
-globalThis.window = window;
-// @ts-expect-error
-globalThis.HTMLElement = window.HTMLElement;
-// @ts-expect-error
-globalThis.Event = window.Event;
-// @ts-expect-error
-globalThis.MouseEvent = window.MouseEvent;
-// @ts-expect-error
-globalThis.SyntaxError = SyntaxError;
-
-import { beforeEach, describe, expect, test } from "bun:test";
-
-// mock routes - simulates what #grimoire-routes generates
-const mockRoutes: Record<string, (props: any) => any> = {
-	"/spells/:id": (props: any) => {
-		return { params: props.params };
-	},
-};
-
-// simulate hydrate logic (same as hydrate.ts but without the import)
-function runHydrate(routes: Record<string, (props: any) => any>) {
-	const stateEl = document.getElementById("__grimoire_state__");
-	if (stateEl) {
-		const state = JSON.parse(stateEl.textContent!);
-		const Page = routes[state.pattern];
-		if (Page) {
-			Page({ ...state.data, params: state.params });
-		}
-	}
-}
-
-// simulate initRouter (same logic as router.ts)
-let clickHandlerAttached = false;
-function initRouter(routes: Record<string, (props: any) => any>) {
-	document.addEventListener("click", () => {});
-	clickHandlerAttached = true;
-}
-
-describe("hydration", () => {
-	beforeEach(() => {
-		clickHandlerAttached = false;
-		document.body.innerHTML = `
-            <div id="app">
-                <div id="grimoire-page">
-                    <div class="spell-detail">
-                        <h1>Fireball</h1>
-                    </div>
-                </div>
-            </div>
-            <script id="__grimoire_state__" type="application/json">
-                ${JSON.stringify({ params: { id: "fireball" }, data: {}, pattern: "/spells/:id" })}
-            </script>
-        `;
-	});
-
-	// 1. hydrate claims existing DOM, doesn't create new nodes
-	test("hydrate claims existing h1 instead of creating new one", () => {
-		const before = document.getElementById("app")!.innerHTML;
-		runHydrate(mockRoutes);
-		// DOM unchanged - hydrate only reads state, doesn't write
-		expect(document.getElementById("app")!.innerHTML).toBe(before);
-	});
-
-	// 2. router attaches after hydration
-	test("initRouter attaches click handler", () => {
-		initRouter(mockRoutes);
-		expect(clickHandlerAttached).toBe(true);
-	});
-
-	// 3. state script is readable
-	test("grimoire state is parseable", () => {
-		const el = document.getElementById("__grimoire_state__");
-		const state = JSON.parse(el!.textContent!);
-		expect(state.pattern).toBe("/spells/:id");
-		expect(state.params).toEqual({ id: "fireball" });
-	});
-
-	// 4. hydrate doesn't touch DOM structure
-	test("hydrate preserves DOM structure", () => {
-		const before = document.body.innerHTML;
-		runHydrate(mockRoutes);
-		expect(document.body.innerHTML).toBe(before);
-	});
-
-	// 5. hydrate with missing pattern is safe
-	test("hydrate with unknown pattern does not throw", () => {
-		const el = document.getElementById("__grimoire_state__");
-		const state = JSON.parse(el!.textContent!);
-		state.pattern = "/nonexistent";
-		el!.textContent = JSON.stringify(state);
-
-		expect(() => runHydrate(mockRoutes)).not.toThrow();
-	});
-
-	// 6. hydrate passes data and params correctly
-	test("hydrate passes data and params to page component", () => {
-		let receivedProps: any = null;
-		const testRoutes: Record<string, (props: any) => any> = {
-			"/spells/:id": (props: any) => {
-				receivedProps = props;
-				return null;
-			},
-		};
-
-		runHydrate(testRoutes);
-		expect(receivedProps).toEqual({
-			params: { id: "fireball" },
-		});
-	});
-});
+import { Window } from "happy-dom";
+
+// set up DOM globals before tests
+const window = new Window();
+const document = window.document;
+
+// @ts-expect-error
+globalThis.document = document;
+// @ts-expect-error
+globalThis.window = window;
+// @ts-expect-error
+globalThis.HTMLElement = window.HTMLElement;
+// @ts-expect-error
+globalThis.Event = window.Event;
+// @ts-expect-error
+globalThis.MouseEvent = window.MouseEvent;
+// @ts-expect-error
+globalThis.SyntaxError = SyntaxError;
+
+import { beforeEach, describe, expect, test } from "bun:test";
+
+// mock routes - simulates what #grimoire-routes generates
+const mockRoutes: Record<string, (props: any) => any> = {
+	"/spells/:id": (props: any) => {
+		return { params: props.params };
+	},
+};
+
+// simulate hydrate logic (same as hydrate.ts but without the import)
+function runHydrate(routes: Record<string, (props: any) => any>) {
+	const stateEl = document.getElementById("__grimoire_state__");
+	if (stateEl) {
+		const state = JSON.parse(stateEl.textContent!);
+		const Page = routes[state.pattern];
+		if (Page) {
+			Page({ ...state.data, params: state.params });
+		}
+	}
+}
+
+// simulate initRouter (same logic as router.ts)
+let clickHandlerAttached = false;
+function initRouter(routes: Record<string, (props: any) => any>) {
+	document.addEventListener("click", () => {});
+	clickHandlerAttached = true;
+}
+
+describe("hydration", () => {
+	beforeEach(() => {
+		clickHandlerAttached = false;
+		document.body.innerHTML = `
+            <div id="app">
+                <div id="grimoire-page">
+                    <div class="spell-detail">
+                        <h1>Fireball</h1>
+                    </div>
+                </div>
+            </div>
+            <script id="__grimoire_state__" type="application/json">
+                ${JSON.stringify({ params: { id: "fireball" }, data: {}, pattern: "/spells/:id" })}
+            </script>
+        `;
+	});
+
+	// 1. hydrate claims existing DOM, doesn't create new nodes
+	test("hydrate claims existing h1 instead of creating new one", () => {
+		const before = document.getElementById("app")!.innerHTML;
+		runHydrate(mockRoutes);
+		// DOM unchanged - hydrate only reads state, doesn't write
+		expect(document.getElementById("app")!.innerHTML).toBe(before);
+	});
+
+	// 2. router attaches after hydration
+	test("initRouter attaches click handler", () => {
+		initRouter(mockRoutes);
+		expect(clickHandlerAttached).toBe(true);
+	});
+
+	// 3. state script is readable
+	test("grimoire state is parseable", () => {
+		const el = document.getElementById("__grimoire_state__");
+		const state = JSON.parse(el!.textContent!);
+		expect(state.pattern).toBe("/spells/:id");
+		expect(state.params).toEqual({ id: "fireball" });
+	});
+
+	// 4. hydrate doesn't touch DOM structure
+	test("hydrate preserves DOM structure", () => {
+		const before = document.body.innerHTML;
+		runHydrate(mockRoutes);
+		expect(document.body.innerHTML).toBe(before);
+	});
+
+	// 5. hydrate with missing pattern is safe
+	test("hydrate with unknown pattern does not throw", () => {
+		const el = document.getElementById("__grimoire_state__");
+		const state = JSON.parse(el!.textContent!);
+		state.pattern = "/nonexistent";
+		el!.textContent = JSON.stringify(state);
+
+		expect(() => runHydrate(mockRoutes)).not.toThrow();
+	});
+
+	// 6. hydrate passes data and params correctly
+	test("hydrate passes data and params to page component", () => {
+		let receivedProps: any = null;
+		const testRoutes: Record<string, (props: any) => any> = {
+			"/spells/:id": (props: any) => {
+				receivedProps = props;
+				return null;
+			},
+		};
+
+		runHydrate(testRoutes);
+		expect(receivedProps).toEqual({
+			params: { id: "fireball" },
+		});
+	});
+});