193 lines
6.9 KiB
TypeScript
193 lines
6.9 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";
|
|
|
|
// 폼 필드 스타일 TDD
|
|
// - formInput: 색상/패딩/너비/둥글기 스타일
|
|
// - formSelect: 색상/패딩/너비/둥글기 스타일
|
|
// - formCheckbox/formRadio: 옵션 컨테이너 색상/패딩/둥글기 스타일
|
|
|
|
function getFirstLabel(root: HTMLElement): HTMLLabelElement {
|
|
const label = root.querySelector("label");
|
|
if (!label) {
|
|
throw new Error("label element not found");
|
|
}
|
|
return label as HTMLLabelElement;
|
|
}
|
|
|
|
describe("PublicPageRenderer - 폼 필드 스타일", () => {
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
it("formInput 블록은 색상/패딩/너비/둥글기 스타일을 반영해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_input_styles",
|
|
type: "formInput",
|
|
props: {
|
|
label: "이메일",
|
|
formFieldName: "email",
|
|
align: "center",
|
|
widthMode: "fixed",
|
|
widthPx: 320,
|
|
paddingX: 16,
|
|
paddingY: 8,
|
|
textColorCustom: "#112233",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const wrapper = getByTestId("preview-form-input-wrapper") as HTMLElement;
|
|
const input = wrapper.querySelector('[data-testid="preview-form-input"]') as HTMLElement | null;
|
|
expect(input).not.toBeNull();
|
|
|
|
// 정렬
|
|
expect((input as HTMLInputElement).style.textAlign).toBe("center");
|
|
// width: 320px / 16 = 20em
|
|
expect((input as HTMLInputElement).style.width).toBe("20em");
|
|
// padding-inline/block: 16px/8px -> 1em / 0.5em
|
|
expect((input as HTMLInputElement).style.paddingInline).toBe("1em");
|
|
expect((input as HTMLInputElement).style.paddingBlock).toBe("0.5em");
|
|
// 색상: hex -> rgb 변환
|
|
expect((input as HTMLInputElement).style.color).toBe("rgb(17, 34, 51)");
|
|
expect((input as HTMLInputElement).style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
expect((input as HTMLInputElement).style.borderColor).toBe("rgb(255, 0, 0)");
|
|
// borderRadius: lg -> 6px
|
|
expect((input as HTMLInputElement).style.borderRadius).toBe("6px");
|
|
});
|
|
|
|
it("formSelect 블록은 색상/패딩/너비/둥글기 스타일을 반영해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_select_styles",
|
|
type: "formSelect",
|
|
props: {
|
|
label: "카테고리",
|
|
formFieldName: "category",
|
|
options: [
|
|
{ label: "A", value: "a" },
|
|
{ label: "B", value: "b" },
|
|
],
|
|
widthMode: "fixed",
|
|
widthPx: 240,
|
|
paddingX: 16,
|
|
paddingY: 8,
|
|
textColorCustom: "#00ff00",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const wrapper = getByTestId("preview-form-select") as HTMLElement;
|
|
const select = wrapper.querySelector("select") as HTMLSelectElement | null;
|
|
expect(select).not.toBeNull();
|
|
|
|
// width: 240px / 16 = 15em
|
|
expect(wrapper.style.width).toBe("15em");
|
|
// padding-inline/block: 16px/8px -> 1em / 0.5em
|
|
expect(select!.style.paddingInline).toBe("1em");
|
|
expect(select!.style.paddingBlock).toBe("0.5em");
|
|
// 색상
|
|
expect(select!.style.color).toBe("rgb(0, 255, 0)");
|
|
expect(select!.style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
expect(select!.style.borderColor).toBe("rgb(255, 0, 0)");
|
|
// 둥글기
|
|
expect(select!.style.borderRadius).toBe("6px");
|
|
});
|
|
|
|
it("formCheckbox 블록은 옵션 컨테이너에 색상/패딩/둥글기 스타일을 반영해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_checkbox_styles",
|
|
type: "formCheckbox",
|
|
props: {
|
|
groupLabel: "옵션들",
|
|
formFieldName: "features",
|
|
options: [{ label: "옵션 1", value: "opt1" }],
|
|
widthMode: "fixed",
|
|
widthPx: 320,
|
|
paddingX: 8,
|
|
paddingY: 4,
|
|
optionGapPx: 16,
|
|
textColorCustom: "#ffffff",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const group = getByTestId("preview-form-checkbox-group") as HTMLElement;
|
|
const firstLabel = getFirstLabel(group);
|
|
|
|
// width: 320px / 16 = 20em
|
|
expect(group.style.width).toBe("20em");
|
|
// 옵션 간 간격: 16px -> 1em
|
|
const optionsContainer = group.querySelector('[data-testid="preview-form-checkbox-options"]') as HTMLElement | null;
|
|
expect(optionsContainer).not.toBeNull();
|
|
expect(optionsContainer!.style.rowGap).toBe("1em");
|
|
|
|
// 옵션 컨테이너 스타일: padding, 배경, 보더, 둥글기
|
|
expect(firstLabel.style.paddingInline).toBe("0.5em");
|
|
expect(firstLabel.style.paddingBlock).toBe("0.25em");
|
|
expect(firstLabel.style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
expect(firstLabel.style.borderColor).toBe("rgb(255, 0, 0)");
|
|
expect(firstLabel.style.borderRadius).toBe("6px");
|
|
});
|
|
|
|
it("formRadio 블록은 옵션 컨테이너에 색상/패딩/둥글기 스타일을 반영해야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_radio_styles",
|
|
type: "formRadio",
|
|
props: {
|
|
groupLabel: "플랜",
|
|
formFieldName: "plan",
|
|
options: [{ label: "플랜 A", value: "a" }],
|
|
widthMode: "fixed",
|
|
widthPx: 320,
|
|
paddingX: 8,
|
|
paddingY: 4,
|
|
optionGapPx: 16,
|
|
textColorCustom: "#ffffff",
|
|
fillColorCustom: "#123456",
|
|
strokeColorCustom: "#ff0000",
|
|
borderRadius: "lg",
|
|
} as any,
|
|
},
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const group = getByTestId("preview-form-radio-group") as HTMLElement;
|
|
const firstLabel = getFirstLabel(group);
|
|
|
|
// width: 320px / 16 = 20em
|
|
expect(group.style.width).toBe("20em");
|
|
// 옵션 간 간격: 16px -> 1em
|
|
const optionsContainer = group.querySelector('[data-testid="preview-form-radio-options"]') as HTMLElement | null;
|
|
expect(optionsContainer).not.toBeNull();
|
|
expect(optionsContainer!.style.rowGap).toBe("1em");
|
|
|
|
// 옵션 컨테이너 스타일: padding, 배경, 보더, 둥글기
|
|
expect(firstLabel.style.paddingInline).toBe("0.5em");
|
|
expect(firstLabel.style.paddingBlock).toBe("0.25em");
|
|
expect(firstLabel.style.backgroundColor).toBe("rgb(18, 52, 86)");
|
|
expect(firstLabel.style.borderColor).toBe("rgb(255, 0, 0)");
|
|
expect(firstLabel.style.borderRadius).toBe("6px");
|
|
});
|
|
});
|