TDD,E2E 개선, 미적용 스타일 개선

tests/unit/ButtonPropertiesPanel.spec.tsx

@@ -179,4 +179,224 @@ describe("ButtonPropertiesPanel", () => {
       }),
     );
   });
+
+  it("버튼 텍스트 변경 시 updateBlock 이 label 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={baseProps}
+        selectedBlockId="btn-label"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const textarea = screen.getByLabelText("버튼 텍스트");
+    fireEvent.change(textarea, { target: { value: "새 버튼" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-label",
+      expect.objectContaining({ label: "새 버튼" }),
+    );
+  });
+
+  it("가로 패딩 슬라이더 변경 시 updateBlock 이 paddingX 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, paddingX: 16 }}
+        selectedBlockId="btn-padding-x"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("가로 패딩 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "24" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-padding-x",
+      expect.objectContaining({ paddingX: 24 }),
+    );
+  });
+
+  it("세로 패딩 슬라이더 변경 시 updateBlock 이 paddingY 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, paddingY: 10 }}
+        selectedBlockId="btn-padding-y"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("세로 패딩 (px) 슬라이더");
+    fireEvent.change(slider, { target: { value: "18" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-padding-y",
+      expect.objectContaining({ paddingY: 18 }),
+    );
+  });
+
+  it("버튼 링크 인풋 변경 시 updateBlock 이 href 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, href: "#" }}
+        selectedBlockId="btn-href"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const input = screen.getByLabelText("버튼 링크");
+    fireEvent.change(input, { target: { value: "/signup" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-href",
+      expect.objectContaining({ href: "/signup" }),
+    );
+  });
+
+  it("버튼 정렬 셀렉트 변경 시 updateBlock 이 align 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, align: "left" }}
+        selectedBlockId="btn-align"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("버튼 정렬");
+    fireEvent.change(select, { target: { value: "center" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-align",
+      expect.objectContaining({ align: "center" }),
+    );
+  });
+
+  it("버튼 스타일 셀렉트 변경 시 updateBlock 이 variant 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, variant: "solid" }}
+        selectedBlockId="btn-variant"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const select = screen.getByLabelText("버튼 스타일");
+    fireEvent.change(select, { target: { value: "outline" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-variant",
+      expect.objectContaining({ variant: "outline" }),
+    );
+  });
+
+  it("모서리 둥글기 슬라이더 변경 시 updateBlock 이 borderRadius 토큰으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, borderRadius: "md" }}
+        selectedBlockId="btn-radius"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("모서리 둥글기 슬라이더");
+    fireEvent.change(slider, { target: { value: "4" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-radius",
+      expect.objectContaining({ borderRadius: "full" }),
+    );
+  });
+
+  it("widthMode 가 fixed 일 때 고정 너비 슬라이더 변경 시 updateBlock 이 widthPx 로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, widthMode: "fixed", widthPx: 240 }}
+        selectedBlockId="btn-width-fixed"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("버튼 고정 너비 슬라이더");
+    fireEvent.change(slider, { target: { value: "300" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-width-fixed",
+      expect.objectContaining({ widthPx: 300 }),
+    );
+  });
+
+  it("버튼 크기 슬라이더 변경 시 updateBlock 이 fontSizeCustom 을 px 문자열로 호출해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, fontSizeCustom: "16px" }}
+        selectedBlockId="btn-font-size"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("버튼 크기 슬라이더");
+    fireEvent.change(slider, { target: { value: "20" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-font-size",
+      expect.objectContaining({ fontSizeCustom: "20px" }),
+    );
+  });
+
+  it("줄 간격 슬라이더 변경 시 updateBlock 이 lineHeightCustom 으로 호출되어야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, lineHeightCustom: "1.4" }}
+        selectedBlockId="btn-line-height"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("줄 간격 슬라이더");
+    fireEvent.change(slider, { target: { value: "1.8" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-line-height",
+      expect.objectContaining({ lineHeightCustom: "1.8" }),
+    );
+  });
+
+  it("글자 간격 슬라이더 변경 시 updateBlock 이 letterSpacingCustom 을 em 단위로 호출해야 한다", () => {
+    const updateBlock = vi.fn();
+
+    render(
+      <ButtonPropertiesPanel
+        buttonProps={{ ...baseProps, letterSpacingCustom: "0em" }}
+        selectedBlockId="btn-letter-spacing"
+        updateBlock={updateBlock}
+      />,
+    );
+
+    const slider = screen.getByLabelText("글자 간격 슬라이더");
+    fireEvent.change(slider, { target: { value: "16" } });
+
+    expect(updateBlock).toHaveBeenCalledWith(
+      "btn-letter-spacing",
+      expect.objectContaining({ letterSpacingCustom: "1em" }),
+    );
+  });
 });