1차 싱크 완료
This commit is contained in:
@@ -0,0 +1,371 @@
|
||||
import { describe, it, expect, vi, afterEach } from "vitest";
|
||||
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
||||
import { FormInputPropertiesPanel } from "@/app/editor/forms/FormInputPropertiesPanel";
|
||||
import { FormSelectPropertiesPanel } from "@/app/editor/forms/FormSelectPropertiesPanel";
|
||||
import { FormCheckboxPropertiesPanel } from "@/app/editor/forms/FormCheckboxPropertiesPanel";
|
||||
import { FormRadioPropertiesPanel } from "@/app/editor/forms/FormRadioPropertiesPanel";
|
||||
import type {
|
||||
Block,
|
||||
FormInputBlockProps,
|
||||
FormSelectBlockProps,
|
||||
FormCheckboxBlockProps,
|
||||
FormRadioBlockProps,
|
||||
} from "@/features/editor/state/editorStore";
|
||||
|
||||
// Form*PropertiesPanel 컨트롤 TDD
|
||||
// - 각 패널의 색상 HEX 인풋과 필드 너비 셀렉트가 updateBlock 을 올바르게 호출하는지 검증한다.
|
||||
|
||||
function makeBlock<T extends Block["props"]>(id: string, type: Block["type"], props: T): Block {
|
||||
return { id, type, props } as any;
|
||||
}
|
||||
|
||||
describe("FormInputPropertiesPanel", () => {
|
||||
const baseProps: FormInputBlockProps = {
|
||||
label: "이메일",
|
||||
formFieldName: "email",
|
||||
} as any;
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("텍스트 색상 HEX 인풋 변경 시 updateBlock 이 textColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormInputBlockProps>("f-input-1", "formInput", {
|
||||
...baseProps,
|
||||
textColorCustom: "#ffffff",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormInputPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-input-1"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("필드 텍스트 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#112233" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-input-1",
|
||||
expect.objectContaining({ textColorCustom: "#112233" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("채움 색상 HEX 인풋 변경 시 updateBlock 이 fillColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormInputBlockProps>("f-input-2", "formInput", {
|
||||
...baseProps,
|
||||
fillColorCustom: "#000000",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormInputPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-input-2"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("필드 채움 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#445566" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-input-2",
|
||||
expect.objectContaining({ fillColorCustom: "#445566" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("테두리 색상 HEX 인풋 변경 시 updateBlock 이 strokeColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormInputBlockProps>("f-input-3", "formInput", {
|
||||
...baseProps,
|
||||
strokeColorCustom: "#000000",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormInputPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-input-3"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("필드 테두리 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#778899" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-input-3",
|
||||
expect.objectContaining({ strokeColorCustom: "#778899" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("필드 너비 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormInputBlockProps>("f-input-4", "formInput", {
|
||||
...baseProps,
|
||||
widthMode: "auto",
|
||||
fullWidth: false,
|
||||
});
|
||||
|
||||
render(
|
||||
<FormInputPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-input-4"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const select = screen.getByLabelText("너비");
|
||||
fireEvent.change(select, { target: { value: "fixed" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-input-4",
|
||||
expect.objectContaining({ widthMode: "fixed" }),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("FormSelectPropertiesPanel", () => {
|
||||
const baseProps: FormSelectBlockProps = {
|
||||
label: "카테고리",
|
||||
formFieldName: "category",
|
||||
options: [{ label: "A", value: "a" }],
|
||||
} as any;
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("텍스트 색상 HEX 인풋 변경 시 updateBlock 이 textColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormSelectBlockProps>("f-select-1", "formSelect", {
|
||||
...baseProps,
|
||||
textColorCustom: "#ffffff",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormSelectPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-select-1"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("셀렉트 텍스트 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#112233" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-select-1",
|
||||
expect.objectContaining({ textColorCustom: "#112233" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("채움 색상 HEX 인풋 변경 시 updateBlock 이 fillColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormSelectBlockProps>("f-select-2", "formSelect", {
|
||||
...baseProps,
|
||||
fillColorCustom: "#000000",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormSelectPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-select-2"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("셀렉트 채움 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#445566" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-select-2",
|
||||
expect.objectContaining({ fillColorCustom: "#445566" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("테두리 색상 HEX 인풋 변경 시 updateBlock 이 strokeColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormSelectBlockProps>("f-select-3", "formSelect", {
|
||||
...baseProps,
|
||||
strokeColorCustom: "#000000",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormSelectPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-select-3"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("셀렉트 테두리 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#778899" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-select-3",
|
||||
expect.objectContaining({ strokeColorCustom: "#778899" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("필드 너비 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormSelectBlockProps>("f-select-4", "formSelect", {
|
||||
...baseProps,
|
||||
widthMode: "auto",
|
||||
fullWidth: false,
|
||||
});
|
||||
|
||||
render(
|
||||
<FormSelectPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-select-4"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const select = screen.getByLabelText("필드 너비");
|
||||
fireEvent.change(select, { target: { value: "fixed" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-select-4",
|
||||
expect.objectContaining({ widthMode: "fixed" }),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("FormCheckboxPropertiesPanel", () => {
|
||||
const baseProps: FormCheckboxBlockProps = {
|
||||
groupLabel: "옵션들",
|
||||
formFieldName: "features",
|
||||
options: [{ label: "옵션 1", value: "opt1" }],
|
||||
} as any;
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("텍스트 색상 HEX 인풋 변경 시 updateBlock 이 textColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormCheckboxBlockProps>("f-check-1", "formCheckbox", {
|
||||
...baseProps,
|
||||
textColorCustom: "#ffffff",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormCheckboxPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-check-1"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("체크박스 텍스트 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#112233" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-check-1",
|
||||
expect.objectContaining({ textColorCustom: "#112233" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("필드 너비 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormCheckboxBlockProps>("f-check-2", "formCheckbox", {
|
||||
...baseProps,
|
||||
widthMode: "auto",
|
||||
fullWidth: false,
|
||||
});
|
||||
|
||||
render(
|
||||
<FormCheckboxPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-check-2"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const select = screen.getByLabelText("필드 너비");
|
||||
fireEvent.change(select, { target: { value: "fixed" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-check-2",
|
||||
expect.objectContaining({ widthMode: "fixed" }),
|
||||
);
|
||||
});
|
||||
});
|
||||
|
||||
describe("FormRadioPropertiesPanel", () => {
|
||||
const baseProps: FormRadioBlockProps = {
|
||||
groupLabel: "플랜",
|
||||
formFieldName: "plan",
|
||||
options: [{ label: "플랜 A", value: "a" }],
|
||||
} as any;
|
||||
|
||||
afterEach(() => {
|
||||
cleanup();
|
||||
});
|
||||
|
||||
it("텍스트 색상 HEX 인풋 변경 시 updateBlock 이 textColorCustom 으로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormRadioBlockProps>("f-radio-1", "formRadio", {
|
||||
...baseProps,
|
||||
textColorCustom: "#ffffff",
|
||||
});
|
||||
|
||||
render(
|
||||
<FormRadioPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-radio-1"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const hexInput = screen.getByLabelText("라디오 텍스트 색상 HEX");
|
||||
fireEvent.change(hexInput, { target: { value: "#112233" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-radio-1",
|
||||
expect.objectContaining({ textColorCustom: "#112233" }),
|
||||
);
|
||||
});
|
||||
|
||||
it("필드 너비 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
|
||||
const updateBlock = vi.fn();
|
||||
|
||||
const block = makeBlock<FormRadioBlockProps>("f-radio-2", "formRadio", {
|
||||
...baseProps,
|
||||
widthMode: "auto",
|
||||
fullWidth: false,
|
||||
});
|
||||
|
||||
render(
|
||||
<FormRadioPropertiesPanel
|
||||
block={block}
|
||||
selectedBlockId="f-radio-2"
|
||||
updateBlock={updateBlock}
|
||||
/>,
|
||||
);
|
||||
|
||||
const select = screen.getByLabelText("필드 너비");
|
||||
fireEvent.change(select, { target: { value: "fixed" } });
|
||||
|
||||
expect(updateBlock).toHaveBeenCalledWith(
|
||||
"f-radio-2",
|
||||
expect.objectContaining({ widthMode: "fixed" }),
|
||||
);
|
||||
});
|
||||
});
|
||||
Reference in New Issue
Block a user