76 lines
2.6 KiB
TypeScript
76 lines
2.6 KiB
TypeScript
import { describe, it, expect } from "vitest";
|
|
import { render } from "@testing-library/react";
|
|
import { PublicPageRenderer } from "@/features/editor/components/PublicPageRenderer";
|
|
import type { Block } from "@/features/editor/state/editorStore";
|
|
|
|
// 폼 관련 블록(formSelect/formCheckbox/formRadio)의 textColorCustom 이
|
|
// 프리뷰 렌더러에서 실제 텍스트 color 스타일에 반영되는지 검증한다.
|
|
|
|
describe("PublicPageRenderer - 폼 텍스트 색상", () => {
|
|
it("formSelect 블록의 textColorCustom 은 셀렉트 텍스트 색상에 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_select_color",
|
|
type: "formSelect",
|
|
props: {
|
|
label: "셀렉트 라벨",
|
|
formFieldName: "category",
|
|
options: [
|
|
{ label: "옵션 A", value: "a" },
|
|
{ label: "옵션 B", value: "b" },
|
|
],
|
|
textColorCustom: "#ff0000",
|
|
},
|
|
} 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();
|
|
expect(select!.style.color).toBe("rgb(255, 0, 0)");
|
|
});
|
|
|
|
it("formCheckbox 블록의 textColorCustom 은 옵션 텍스트 색상에 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_checkbox_color",
|
|
type: "formCheckbox",
|
|
props: {
|
|
groupLabel: "체크박스 그룹",
|
|
formFieldName: "features",
|
|
options: [{ label: "옵션 1", value: "opt1" }],
|
|
textColorCustom: "#00ff00",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const optionSpan = getByTestId("preview-form-checkbox-option") as HTMLElement;
|
|
expect(optionSpan.style.color).toBe("rgb(0, 255, 0)");
|
|
});
|
|
|
|
it("formRadio 블록의 textColorCustom 은 옵션 텍스트 색상에 반영되어야 한다", () => {
|
|
const blocks: Block[] = [
|
|
{
|
|
id: "form_radio_color",
|
|
type: "formRadio",
|
|
props: {
|
|
groupLabel: "라디오 그룹",
|
|
formFieldName: "plan",
|
|
options: [{ label: "플랜 A", value: "a" }],
|
|
textColorCustom: "#0000ff",
|
|
},
|
|
} as any,
|
|
];
|
|
|
|
const { getByTestId } = render(<PublicPageRenderer blocks={blocks} />);
|
|
|
|
const optionSpan = getByTestId("preview-form-radio-option") as HTMLElement;
|
|
expect(optionSpan.style.color).toBe("rgb(0, 0, 255)");
|
|
});
|
|
})
|