92 lines
2.8 KiB
TypeScript
92 lines
2.8 KiB
TypeScript
import { describe, it, expect, vi } from "vitest";
|
|
import { render, screen, fireEvent } from "@testing-library/react";
|
|
import { TextPropertiesPanel } from "@/app/editor/panels/TextPropertiesPanel";
|
|
import { ListPropertiesPanel } from "@/app/editor/panels/ListPropertiesPanel";
|
|
import { FormControllerPanel } from "@/app/editor/forms/FormControllerPanel";
|
|
import type { Block } from "@/features/editor/state/editorStore";
|
|
|
|
// Text/List/Form 패널에 추가되는 블록 배경색(backgroundColorCustom) 컨트롤에 대한 최소 TDD
|
|
|
|
describe("Text/List/Form 패널 - 블록 배경색 컨트롤", () => {
|
|
it("TextPropertiesPanel 에서 배경색 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<TextPropertiesPanel
|
|
textProps={{
|
|
text: "텍스트",
|
|
align: "left",
|
|
size: "base",
|
|
} as any}
|
|
selectedBlockId="text-1"
|
|
updateBlock={updateBlock}
|
|
editingBlockId={null}
|
|
setEditingText={() => {}}
|
|
/>,
|
|
);
|
|
|
|
const hexInput = screen.getByLabelText("텍스트 블록 배경색 HEX");
|
|
fireEvent.change(hexInput, { target: { value: "#112233" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"text-1",
|
|
expect.objectContaining({ backgroundColorCustom: "#112233" }),
|
|
);
|
|
});
|
|
|
|
it("ListPropertiesPanel 에서 배경색 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<ListPropertiesPanel
|
|
listProps={{
|
|
items: ["아이템 1"],
|
|
ordered: false,
|
|
align: "left",
|
|
} as any}
|
|
selectedBlockId="list-1"
|
|
selectedListItemId={null}
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const hexInput = screen.getByLabelText("리스트 배경색 HEX");
|
|
fireEvent.change(hexInput, { target: { value: "#445566" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"list-1",
|
|
expect.objectContaining({ backgroundColorCustom: "#445566" }),
|
|
);
|
|
});
|
|
|
|
it("FormControllerPanel 에서 배경색 HEX 인풋 변경 시 updateBlock 이 backgroundColorCustom 으로 호출되어야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
const formBlock: Block = {
|
|
id: "form-1",
|
|
type: "form",
|
|
props: {
|
|
kind: "contact",
|
|
submitTarget: "internal",
|
|
} as any,
|
|
};
|
|
|
|
render(
|
|
<FormControllerPanel
|
|
block={formBlock}
|
|
blocks={[]}
|
|
selectedBlockId="form-1"
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const hexInput = screen.getByLabelText("폼 배경색 HEX");
|
|
fireEvent.change(hexInput, { target: { value: "#778899" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"form-1",
|
|
expect.objectContaining({ backgroundColorCustom: "#778899" }),
|
|
);
|
|
});
|
|
});
|