65 lines
2.4 KiB
TypeScript
65 lines
2.4 KiB
TypeScript
import { describe, it, expect, afterEach } from "vitest";
|
|
import { render, screen, cleanup } from "@testing-library/react";
|
|
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
|
import type { Block, TextBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
// PublicPageRenderer 텍스트 블록 스타일 TDD
|
|
// - computeTextPublicTokens 결과가 실제 프리뷰 렌더링에 올바르게 반영되는지 검증한다.
|
|
|
|
describe("PublicPageRenderer - 텍스트 블록 스타일", () => {
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
const makeTextBlock = (override: Partial<TextBlockProps> = {}): Block => {
|
|
const base: TextBlockProps = {
|
|
text: "퍼블릭 텍스트 스타일 테스트",
|
|
align: "left",
|
|
size: "base",
|
|
} as TextBlockProps;
|
|
|
|
return {
|
|
id: "text_1",
|
|
type: "text",
|
|
props: { ...base, ...override },
|
|
} as any;
|
|
};
|
|
|
|
it("기본 텍스트 블록은 pb-text-left / pb-text-base 및 기본 색상(pb-text-color-strong)으로 렌더되어야 한다", () => {
|
|
const blocks: Block[] = [makeTextBlock()];
|
|
|
|
render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;
|
|
|
|
expect(el.className).toContain("pb-text-left");
|
|
expect(el.className).toContain("pb-text-base");
|
|
// 기본 색상은 builder.css 의 pb-text-color-strong 클래스로 표현된다.
|
|
expect(el.className).toContain("pb-text-color-strong");
|
|
});
|
|
|
|
it("fontSizeMode=custom, fontSizeCustom, colorCustom, backgroundColorCustom 이 설정되면 스타일이 인라인으로 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
makeTextBlock({
|
|
align: "center",
|
|
fontSizeMode: "custom",
|
|
fontSizeCustom: "24px",
|
|
colorCustom: "#ff0000",
|
|
backgroundColorCustom: "#123456",
|
|
}),
|
|
];
|
|
|
|
render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const el = screen.getByText("퍼블릭 텍스트 스타일 테스트") as HTMLParagraphElement;
|
|
|
|
// 정렬 클래스는 pb-text-center 로 반영된다.
|
|
expect(el.className).toContain("pb-text-center");
|
|
// 커스텀 폰트 크기: sizeClass 는 비워지고, 인라인 스타일로 설정된다.
|
|
expect(el.style.fontSize).toBe("1.5em");
|
|
// 커스텀 색상/배경색
|
|
expect(el.style.color).toBe("rgb(255, 0, 0)");
|
|
expect(el.style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
});
|
|
});
|