import { describe, it, expect } from "vitest"; import type { SectionBlockProps } from "@/features/editor/state/editorStore"; import { getSectionLayoutConfig } from "@/features/editor/components/PublicPageRenderer"; describe("getSectionLayoutConfig", () => { const baseProps: SectionBlockProps = { background: "default", paddingY: "md", columns: [{ id: "sec_col_1", span: 12 }], maxWidthMode: "normal", gapX: "md", alignItems: "top", }; it("기본 섹션 설정에서 예상 클래스 조합을 반환해야 한다", () => { const cfg = getSectionLayoutConfig(baseProps); expect(cfg.backgroundClass).toBe("bg-slate-950"); expect(cfg.paddingYClass).toBe("py-12"); expect(cfg.maxWidthClass).toBe("max-w-5xl"); expect(cfg.gapXClass).toBe("gap-8"); expect(cfg.alignItemsClass).toBe("items-start"); }); it("maxWidthMode/gapX/alignItems 토큰에 따라 클래스를 변경해야 한다", () => { const wideCentered: SectionBlockProps = { ...baseProps, maxWidthMode: "wide", gapX: "lg", alignItems: "center", }; const narrowBottomMuted: SectionBlockProps = { ...baseProps, background: "muted", maxWidthMode: "narrow", gapX: "sm", alignItems: "bottom", paddingY: "sm", }; const wideCfg = getSectionLayoutConfig(wideCentered); expect(wideCfg.maxWidthClass).toBe("max-w-6xl"); expect(wideCfg.gapXClass).toBe("gap-10"); expect(wideCfg.alignItemsClass).toBe("items-center"); const narrowCfg = getSectionLayoutConfig(narrowBottomMuted); expect(narrowCfg.backgroundClass).toBe("bg-slate-900"); expect(narrowCfg.maxWidthClass).toBe("max-w-3xl"); expect(narrowCfg.gapXClass).toBe("gap-4"); expect(narrowCfg.alignItemsClass).toBe("items-end"); expect(narrowCfg.paddingYClass).toBe("py-8"); }); it("primary 배경과 큰 패딩에 대해 올바른 클래스를 반환해야 한다", () => { const primaryLarge: SectionBlockProps = { ...baseProps, background: "primary", paddingY: "lg", }; const cfg = getSectionLayoutConfig(primaryLarge); expect(cfg.backgroundClass).toBe("bg-sky-900"); expect(cfg.paddingYClass).toBe("py-20"); }); });