103 lines
3.1 KiB
TypeScript
103 lines
3.1 KiB
TypeScript
import { describe, it, expect, vi, afterEach } from "vitest";
|
|
import { render, screen, fireEvent, cleanup } from "@testing-library/react";
|
|
import { ButtonPropertiesPanel } from "@/app/editor/panels/ButtonPropertiesPanel";
|
|
import type { ButtonBlockProps } from "@/features/editor/state/editorStore";
|
|
|
|
// ButtonPropertiesPanel 컨트롤 TDD
|
|
// - 색상 HEX 인풋 및 너비 모드 셀렉트가 updateBlock 을 올바르게 호출하는지 검증한다.
|
|
|
|
describe("ButtonPropertiesPanel", () => {
|
|
const baseProps: ButtonBlockProps = {
|
|
label: "버튼",
|
|
href: "#",
|
|
align: "left",
|
|
size: "md",
|
|
variant: "solid",
|
|
colorPalette: "primary",
|
|
};
|
|
|
|
afterEach(() => {
|
|
cleanup();
|
|
});
|
|
|
|
it("텍스트 색상 HEX 인풋 변경 시 updateBlock 이 textColorCustom 으로 호출되어야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<ButtonPropertiesPanel
|
|
buttonProps={{ ...baseProps, textColorCustom: "#ffffff" }}
|
|
selectedBlockId="btn-1"
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const hexInput = screen.getByLabelText("버튼 텍스트 색상 HEX");
|
|
fireEvent.change(hexInput, { target: { value: "#112233" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"btn-1",
|
|
expect.objectContaining({ textColorCustom: "#112233" }),
|
|
);
|
|
});
|
|
|
|
it("채움 색상 HEX 인풋 변경 시 updateBlock 이 fillColorCustom 으로 호출되어야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<ButtonPropertiesPanel
|
|
buttonProps={{ ...baseProps, fillColorCustom: "#000000" }}
|
|
selectedBlockId="btn-2"
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const hexInput = screen.getByLabelText("버튼 채움 색상 HEX");
|
|
fireEvent.change(hexInput, { target: { value: "#445566" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"btn-2",
|
|
expect.objectContaining({ fillColorCustom: "#445566" }),
|
|
);
|
|
});
|
|
|
|
it("외곽선 색상 HEX 인풋 변경 시 updateBlock 이 strokeColorCustom 으로 호출되어야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<ButtonPropertiesPanel
|
|
buttonProps={{ ...baseProps, strokeColorCustom: "#000000" }}
|
|
selectedBlockId="btn-3"
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const hexInput = screen.getByLabelText("버튼 외곽선 색상 HEX");
|
|
fireEvent.change(hexInput, { target: { value: "#778899" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"btn-3",
|
|
expect.objectContaining({ strokeColorCustom: "#778899" }),
|
|
);
|
|
});
|
|
|
|
it("버튼 너비 모드 셀렉트 변경 시 updateBlock 이 widthMode 로 호출되어야 한다", () => {
|
|
const updateBlock = vi.fn();
|
|
|
|
render(
|
|
<ButtonPropertiesPanel
|
|
buttonProps={{ ...baseProps, widthMode: "auto", fullWidth: false }}
|
|
selectedBlockId="btn-4"
|
|
updateBlock={updateBlock}
|
|
/>,
|
|
);
|
|
|
|
const select = screen.getByLabelText("버튼 너비 모드");
|
|
fireEvent.change(select, { target: { value: "fixed" } });
|
|
|
|
expect(updateBlock).toHaveBeenCalledWith(
|
|
"btn-4",
|
|
expect.objectContaining({ widthMode: "fixed" }),
|
|
);
|
|
});
|
|
});
|