1차 싱크 완료

2025-11-24 21:32:37 +09:00
parent 7a8ad7c057
commit 672cca5271
83 changed files with 6681 additions and 325 deletions
@@ -0,0 +1,102 @@
+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" }),
+    );
+  });
+});