1차 싱크 완료

tests/unit/DividerPropertiesPanel.spec.tsx

@@ -0,0 +1,106 @@
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, screen, fireEvent, cleanup } from "@testing-library/react";
+import { DividerPropertiesPanel } from "@/app/editor/panels/DividerPropertiesPanel";
+import type { DividerBlockProps } from "@/features/editor/state/editorStore";
+
+// DividerPropertiesPanel 컨트롤 TDD
+// - 정렬/두께 select 변경 시 updateBlock 이 올바른 필드로 호출되는지
+// - 색상 HEX 인풋 변경 시 colorHex 로 호출되는지
+// - 위/아래 여백 커스텀(px) 입력 시 marginYPx 로 호출되는지
+
+describe("DividerPropertiesPanel", () => {
+  const baseProps: DividerBlockProps = {
+    align: "left",
+    thickness: "thin",
+    widthMode: "full",
+    colorHex: "#475569",
+    marginY: "md",
+  };
+
+  afterEach(() => {
+    cleanup();
+  });
+
+  it("정렬 select 변경 시 updateBlock 이 align 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <DividerPropertiesPanel
+        dividerProps={baseProps}
+        selectedBlockId="divider-1"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("구분선 정렬");
+    fireEvent.change(select, { target: { value: "center" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "divider-1",
+      expect.objectContaining({ align: "center" }),
+    );
+  });
+
+  it("두께 select 변경 시 updateBlock 이 thickness 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <DividerPropertiesPanel
+        dividerProps={baseProps}
+        selectedBlockId="divider-2"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("구분선 두께");
+    fireEvent.change(select, { target: { value: "medium" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "divider-2",
+      expect.objectContaining({ thickness: "medium" }),
+    );
+  });
+
+  it("색상 HEX 인풋 변경 시 updateBlock 이 colorHex 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <DividerPropertiesPanel
+        dividerProps={{ ...baseProps, colorHex: "#111111" }}
+        selectedBlockId="divider-3"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const hexInputs = screen.getAllByLabelText("구분선 색상 HEX");
+    const hexInput = hexInputs[0] as HTMLInputElement;
+    fireEvent.change(hexInput, { target: { value: "#123456" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "divider-3",
+      expect.objectContaining({ colorHex: "#123456" }),
+    );
+  });
+
+  it("위/아래 여백 커스텀 (px) 인풋 변경 시 updateBlock 이 marginYPx 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <DividerPropertiesPanel
+        dividerProps={baseProps}
+        selectedBlockId="divider-4"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const marginInputs = screen.getAllByLabelText("위/아래 여백 커스텀 (px)");
+    const marginInput = marginInputs[0] as HTMLInputElement;
+
+    fireEvent.change(marginInput, { target: { value: "24" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "divider-4",
+      expect.objectContaining({ marginYPx: 24 }),
+    );
+  });
+});