/** * BLOCK O2 — Every system state polished. * * Covers the four polished surfaces: * 1. Error pages (404 / 500 / 403) * 2. Empty state component * 3. Skeleton component * 4. Form validation script * * No mock pollution — each test renders the real component to JSX * string output (or hits the real Hono router) and asserts on the * rendered HTML. */ import { describe, it, expect } from "bun:test"; import app from "../app"; import { ErrorPage, NotFoundPage, ServerErrorPage, ForbiddenPage, renderStandaloneErrorPage, } from "../views/error-page"; import { EmptyState } from "../views/empty-state"; import { Skeleton, SkeletonList, SkeletonRepoRow, } from "../views/skeleton"; import { formValidationScript, formValidationCss, FormValidationAssets, } from "../views/form-validation-js"; // Render a JSX element to its HTML string via Hono's JSX runtime. async function renderJsx(node: any): Promise { if (node && typeof node === "object" && "toString" in node) { const s = await Promise.resolve(node.toString()); return typeof s === "string" ? s : String(s); } return String(node); } describe("BLOCK O2 — Error pages", () => { it("GET unknown deep path returns the polished 404 page via app.notFound", async () => { // A path with 4+ segments doesn't match any defined route — falls // through to app.notFound. (`/:owner` would otherwise swallow a // single-segment 404 with a 200 user-profile shell on DB miss.) const res = await app.request("/__o2_unknown__/a/b/c/d"); expect(res.status).toBe(404); const body = await res.text(); // Big "404" gradient text expect(body).toContain("data-error-code=\"404\""); expect(body).toContain(">404<"); expect(body).toContain("gradient-text"); // Two CTAs (primary + secondary) expect(body).toMatch(/data-error-cta="primary"/); expect(body).toMatch(/data-error-cta="secondary"/); expect(body).toContain("Go home"); expect(body).toContain("Status page"); // Subhead/body expect(body).toContain("Not found"); }); it("ServerErrorPage component renders the 500 + request ID line", async () => { const node = ServerErrorPage({ user: null, requestId: "req-test-abc-123", } as any); const body = await renderJsx(node); expect(body).toContain(">500<"); expect(body).toContain("Server error"); expect(body).toContain("Request ID:"); expect(body).toContain("req-test-abc-123"); // Two CTAs expect(body).toMatch(/data-error-cta="primary"/); expect(body).toMatch(/data-error-cta="secondary"/); }); it("ForbiddenPage component renders the polished 403", async () => { const node = ForbiddenPage({ user: null } as any); const body = await renderJsx(node); expect(body).toContain(">403<"); expect(body).toContain("Forbidden"); expect(body).toContain("Admin access required"); // Signed-out path → "Sign in" suggestion expect(body).toContain("Sign in"); }); it("ForbiddenPage when signed in offers 'sign in as different user'", async () => { const fakeUser: any = { id: "u1", username: "alice" }; const node = ForbiddenPage({ user: fakeUser } as any); const body = await renderJsx(node); expect(body).toContain("Sign in as a different user"); expect(body).toContain("/logout"); }); it("renderStandaloneErrorPage returns a complete document", () => { const html = renderStandaloneErrorPage({ code: "403", eyebrow: "Forbidden", title: "Admin access required.", body: "Body copy.", signedIn: true, }); expect(html.toLowerCase()).toContain(""); expect(html).toContain("data-error-code=\"403\""); expect(html).toContain("Admin access required."); expect(html).toContain("Body copy."); // Self-contained — has its own