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
test(web): add failing preset completeness tests (ATB-52)
+60
+60
apps/web/src/styles/presets/__tests__/presets.test.ts
+60
apps/web/src/styles/presets/__tests__/presets.test.ts
···
1
+
import { describe, it, expect } from "vitest";
2
+
import neobrutalLight from "../neobrutal-light.json";
3
+
import neobrutalDark from "../neobrutal-dark.json";
4
+
import { tokensToCss } from "../../../lib/theme.js";
5
+
6
+
const REQUIRED_TOKENS = [
7
+
// Colors
8
+
"color-bg", "color-surface", "color-text", "color-text-muted",
9
+
"color-primary", "color-primary-hover", "color-secondary",
10
+
"color-border", "color-shadow", "color-success", "color-warning",
11
+
"color-danger", "color-code-bg", "color-code-text",
12
+
// Typography
13
+
"font-body", "font-heading", "font-mono",
14
+
"font-size-base", "font-size-sm", "font-size-xs",
15
+
"font-size-lg", "font-size-xl", "font-size-2xl",
16
+
"font-weight-normal", "font-weight-bold",
17
+
"line-height-body", "line-height-heading",
18
+
// Spacing & layout
19
+
"space-xs", "space-sm", "space-md", "space-lg", "space-xl",
20
+
"radius", "border-width", "shadow-offset", "content-width",
21
+
// Components
22
+
"button-radius", "button-shadow", "card-radius", "card-shadow",
23
+
"btn-press-hover", "btn-press-active",
24
+
"input-radius", "input-border", "nav-height",
25
+
];
26
+
27
+
describe("neobrutal-light preset", () => {
28
+
it("contains all required tokens including font-size-xs", () => {
29
+
for (const token of REQUIRED_TOKENS) {
30
+
expect(neobrutalLight, `missing token: ${token}`).toHaveProperty(token);
31
+
}
32
+
});
33
+
34
+
it("produces valid CSS via tokensToCss", () => {
35
+
const css = tokensToCss(neobrutalLight as Record<string, string>);
36
+
expect(css).toContain("--color-bg:");
37
+
expect(css).toContain("--font-size-xs:");
38
+
expect(css).toContain("--nav-height:");
39
+
});
40
+
});
41
+
42
+
describe("neobrutal-dark preset", () => {
43
+
it("contains all required tokens including font-size-xs", () => {
44
+
for (const token of REQUIRED_TOKENS) {
45
+
expect(neobrutalDark, `missing token: ${token}`).toHaveProperty(token);
46
+
}
47
+
});
48
+
49
+
it("has a darker background than the light preset", () => {
50
+
expect((neobrutalDark as Record<string, string>)["color-bg"]).not.toBe(
51
+
(neobrutalLight as Record<string, string>)["color-bg"]
52
+
);
53
+
});
54
+
55
+
it("produces valid CSS via tokensToCss", () => {
56
+
const css = tokensToCss(neobrutalDark as Record<string, string>);
57
+
expect(css).toContain("--color-bg:");
58
+
expect(css).toContain("--font-size-xs:");
59
+
});
60
+
});