116 lines
3.5 KiB
TypeScript
116 lines
3.5 KiB
TypeScript
import { describe, it, expect, afterEach } from "vitest";
|
|
import { render, cleanup } from "@testing-library/react";
|
|
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
|
import type { Block } from "@/features/editor/state/editorStore";
|
|
|
|
// divider 스타일 TDD
|
|
// - colorHex 에 따른 라인 색상
|
|
// - marginY/marginYPx 에 따른 상하 여백 em 스케일
|
|
// - widthMode/widthPx 에 따른 길이 모드
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
describe("PublicPageRenderer - divider 스타일", () => {
|
|
it("colorHex 가 지정되면 구분선 라인에 해당 색상이 적용되어야 한다", () => {
|
|
const blocksWithColor: Block[] = [
|
|
{
|
|
id: "div_color",
|
|
type: "divider",
|
|
props: {
|
|
align: "center",
|
|
thickness: "thin",
|
|
colorHex: "#123456",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getByTestId, rerender } = render(<PublicPageRenderer blocks={blocksWithColor} />);
|
|
|
|
const lineWithColor = getByTestId("preview-divider-line") as HTMLElement;
|
|
// JSDOM 은 #123456 을 rgb(18, 52, 86) 으로 노출한다.
|
|
expect(lineWithColor.style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
|
|
const blocksWithoutColor: Block[] = [
|
|
{
|
|
id: "div_default",
|
|
type: "divider",
|
|
props: {
|
|
align: "center",
|
|
thickness: "thin",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
rerender(<PublicPageRenderer blocks={blocksWithoutColor} />);
|
|
|
|
const lineDefault = getByTestId("preview-divider-line") as HTMLElement;
|
|
// 기본 색상은 #475569 이며, JSDOM 에서는 rgb(71, 85, 105) 로 표시된다.
|
|
expect(lineDefault.style.backgroundColor).toBe("rgb(71, 85, 105)");
|
|
});
|
|
|
|
it("marginYPx 이 있으면 divider 컨테이너 상하 여백이 em 스케일로 적용되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "div_margin_px",
|
|
type: "divider",
|
|
props: {
|
|
align: "center",
|
|
thickness: "thin",
|
|
marginYPx: 32,
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const wrapper = getByTestId("preview-divider") as HTMLDivElement;
|
|
// 32px / 16 = 2em
|
|
expect(wrapper.style.marginTop).toBe("2em");
|
|
expect(wrapper.style.marginBottom).toBe("2em");
|
|
});
|
|
|
|
it("marginY 토큰만 있을 때도 적절한 px 값을 em 으로 변환해 상하 여백에 적용해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "div_margin_token",
|
|
type: "divider",
|
|
props: {
|
|
align: "center",
|
|
thickness: "thin",
|
|
marginY: "lg", // 24px 로 매핑
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const wrapper = getByTestId("preview-divider") as HTMLDivElement;
|
|
// 24px / 16 = 1.5em
|
|
expect(wrapper.style.marginTop).toBe("1.5em");
|
|
expect(wrapper.style.marginBottom).toBe("1.5em");
|
|
});
|
|
|
|
it("widthMode 가 fixed 이고 widthPx 가 있으면 divider 라인의 width 가 pxToEm 으로 변환되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "div_fixed_width",
|
|
type: "divider",
|
|
props: {
|
|
align: "center",
|
|
thickness: "thin",
|
|
widthMode: "fixed",
|
|
widthPx: 480,
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const line = getByTestId("preview-divider-line") as HTMLDivElement;
|
|
// 480px / 16 = 30em
|
|
expect(line.style.width).toBe("30em");
|
|
});
|
|
});
|