import { describe, expect, test } from "bun:test"; import { APP_ACTION_BAR_CLASSES, APP_HEADER_SURFACE_CLASSES, APP_NAV_SURFACE_CLASSES, APP_SECTION_SURFACE_CLASSES, getConnectionBadgeClasses, } from "@/lib/ui-shell-contract"; import { EVENT_CARD_SURFACE_CLASSES } from "@/components/event-card"; describe("app shell surfaces", () => { test("header surface is a thin structural bar instead of a glass panel", () => { expect(APP_HEADER_SURFACE_CLASSES).toContain("min-h-14"); expect(APP_HEADER_SURFACE_CLASSES).toContain("shadow-[inset_0_-1px_0_0_var(--color-border)]"); expect(APP_HEADER_SURFACE_CLASSES).not.toContain("glass-surface"); }); test("section and action surfaces use tokenized shell classes instead of frozen light-mode shadows", () => { expect(APP_SECTION_SURFACE_CLASSES).not.toContain("glass-panel"); expect(APP_ACTION_BAR_CLASSES).not.toContain("glass-subtle"); expect(APP_NAV_SURFACE_CLASSES).not.toContain("glass-surface"); expect(APP_SECTION_SURFACE_CLASSES).toContain("shadow"); expect(APP_SECTION_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)"); expect(APP_ACTION_BAR_CLASSES).toContain("shadow-sm"); expect(APP_ACTION_BAR_CLASSES).not.toContain("rgba(0,0,0,0.08)"); expect(APP_NAV_SURFACE_CLASSES).toContain("shadow-lg"); expect(APP_NAV_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)"); }); }); describe("event cards", () => { test("event cards use the redesigned console card treatment", () => { expect(EVENT_CARD_SURFACE_CLASSES).toContain("rounded-[10px]"); expect(EVENT_CARD_SURFACE_CLASSES).toContain("shadow"); expect(EVENT_CARD_SURFACE_CLASSES).not.toContain("rgba(0,0,0,0.08)"); }); }); describe("connection badge", () => { test("online-ready badge uses the console utility blue while offline stays neutral", () => { const onlineClasses = getConnectionBadgeClasses(true); const offlineClasses = getConnectionBadgeClasses(false); expect(onlineClasses).toContain("bg-[#ebf5ff]"); expect(onlineClasses).toContain("text-[#0068d6]"); expect(offlineClasses).not.toContain("bg-[#ebf5ff]"); expect(offlineClasses).toContain("text-muted-foreground"); }); });