malpercio.dev
WIP! A BB-style forum, on the ATmosphere!
We're still working... we'll be back soon when we have something to show off!
node
typescript
hono
htmx
atproto
1import { describe, it, expect } from "vitest";
2import { Hono } from "hono";
3import { PageHeader } from "../page-header.js";
4
5describe("PageHeader", () => {
6 it("renders title in h1 with page-header class", async () => {
7 const app = new Hono().get("/", (c) =>
8 c.html(<PageHeader title="My Page" />)
9 );
10 const res = await app.request("/");
11 const html = await res.text();
12 expect(html).toContain('class="page-header"');
13 expect(html).toContain("<h1");
14 expect(html).toContain("My Page");
15 });
16
17 it("renders description when provided", async () => {
18 const app = new Hono().get("/", (c) =>
19 c.html(<PageHeader title="T" description="A description" />)
20 );
21 const res = await app.request("/");
22 const html = await res.text();
23 expect(html).toContain("A description");
24 });
25
26 it("omits description element when not provided", async () => {
27 const app = new Hono().get("/", (c) =>
28 c.html(<PageHeader title="T" />)
29 );
30 const res = await app.request("/");
31 const html = await res.text();
32 expect(html).not.toMatch(/<p[^>]*>\s*<\/p>/);
33 });
34
35 it("renders action slot when provided", async () => {
36 const app = new Hono().get("/", (c) =>
37 c.html(
38 <PageHeader title="T" action={<button>New Topic</button>} />
39 )
40 );
41 const res = await app.request("/");
42 const html = await res.text();
43 expect(html).toContain('class="page-header__action"');
44 expect(html).toContain("New Topic");
45 });
46});