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

2025-12-07 09:52:42 +09:00
parent e726f43f7c
commit a5b432fb7b
167 changed files with 7397 additions and 663 deletions
@@ -119,7 +119,7 @@ describe("EditorPage - 폼 블록 스타일", () => {

    render(<EditorPage />);

-    const field = screen.getByTestId("form-input-field") as HTMLElement;
+    const field = screen.getByTestId("form-input-field") as HTMLInputElement;

    expect(field.style.color).toBe(hexToRgb("#ff0000"));
    expect(field.style.backgroundColor).toBe(hexToRgb("#123456"));
@@ -129,6 +129,91 @@ describe("EditorPage - 폼 블록 스타일", () => {
    expect(field.style.borderRadius).toBe("9999px");
  });

+  it("formInput: labelDisplay 가 hidden 이면 라벨 텍스트는 렌더되지 않지만 getByLabelText 로 접근 가능해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_hidden",
+        type: "formInput",
+        props: {
+          label: "숨김 라벨",
+          formFieldName: "hidden_label",
+          labelDisplay: "hidden",
+          inputType: "text",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_input_hidden";
+
+    render(<EditorPage />);
+
+    // 시각적으로 라벨 텍스트는 별도의 span 으로 렌더되지 않아야 한다.
+    const visibleLabel = screen.queryByText("숨김 라벨");
+    expect(visibleLabel).toBeNull();
+
+    // 대신 인풋은 aria-label 로 동일한 라벨 이름을 노출해야 한다.
+    const input = screen.getByLabelText("숨김 라벨") as HTMLInputElement;
+    expect(input).toBeTruthy();
+  });
+
+  it("formInput: labelDisplay 가 floating 이면 placeholder 는 공백(\" \")으로 설정되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_floating_editor",
+        type: "formInput",
+        props: {
+          label: "플로팅 라벨",
+          formFieldName: "floating_label",
+          labelDisplay: "floating",
+          placeholder: "플로팅 플레이스홀더",
+          inputType: "text",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_input_floating_editor";
+
+    render(<EditorPage />);
+
+    const input = screen.getByTestId("form-input-field") as HTMLInputElement;
+    expect(input.placeholder).toBe(" ");
+
+    const field = input.parentElement as HTMLElement | null;
+    expect(field).not.toBeNull();
+
+    const floatingLabel = field!.querySelector(
+      '[data-testid="editor-form-input-floating-label"]',
+    ) as HTMLSpanElement | null;
+    expect(floatingLabel).not.toBeNull();
+    // 포커스된 플로팅 라벨 상태와 유사하게, top 이 음수이고 작은 폰트 크기를 사용해야 한다.
+    expect(floatingLabel!.style.top).toBe("-0.3rem");
+  });
+
+  it("formInput: 기본 인풋 높이는 pb-input 과 동일한 padding(px-3/py-2)을 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_input_height",
+        type: "formInput",
+        props: {
+          label: "높이 테스트",
+          formFieldName: "height_test",
+          inputType: "text",
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_input_height";
+
+    render(<EditorPage />);
+
+    const input = screen.getByLabelText("높이 테스트") as HTMLInputElement;
+    // 프리뷰/퍼블릭과 동일한 pb-input 클래스를 사용해야 한다.
+    expect(input.className).toContain("pb-input");
+  });
+
  it("formSelect: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
    const blocks: Block[] = [
      {
@@ -155,14 +240,39 @@ describe("EditorPage - 폼 블록 스타일", () => {

    render(<EditorPage />);

-    const select = screen.getByLabelText("폼 셀렉트") as HTMLSelectElement;
-    const wrapper = select.parentElement as HTMLElement; // style 이 적용된 div
+    const select = screen.getByTestId("form-select-field") as HTMLSelectElement;

-    expect(wrapper.style.color).toBe(hexToRgb("#ff0000"));
-    expect(wrapper.style.backgroundColor).toBe(hexToRgb("#123456"));
-    expect(wrapper.style.borderColor).toBe(hexToRgb("#654321"));
-    expect(wrapper.style.width).toBe("260px");
-    expect(wrapper.style.borderRadius).toBe("9999px"); // lg → 9999 (에디터 구현 기준)
+    expect(select.style.color).toBe(hexToRgb("#ff0000"));
+    expect(select.style.backgroundColor).toBe(hexToRgb("#123456"));
+    expect(select.style.borderColor).toBe(hexToRgb("#654321"));
+    expect(select.style.width).toBe("260px");
+    expect(select.style.borderRadius).toBe("9999px"); // lg → 9999 (에디터 구현 기준)
+  });
+
+  it("formSelect: 기본 셀렉트 높이는 pb-select 와 동일한 padding(px-3/py-2)을 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_select_height",
+        type: "formSelect",
+        props: {
+          label: "셀렉트 높이",
+          formFieldName: "select_height",
+          options: [
+            { label: "A", value: "a" },
+            { label: "B", value: "b" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_select_height";
+
+    render(<EditorPage />);
+
+    const select = screen.getByLabelText("셀렉트 높이") as HTMLSelectElement;
+    // 프리뷰/퍼블릭과 동일한 pb-select 클래스를 사용해야 한다.
+    expect(select.className).toContain("pb-select");
  });

  it("formRadio: textColorCustom / fillColorCustom / strokeColorCustom / widthPx / borderRadius 가 에디터 렌더에 반영되어야 한다", () => {
@@ -240,4 +350,260 @@ describe("EditorPage - 폼 블록 스타일", () => {
    expect(groupContainer.style.width).toBe("300px");
    expect(groupContainer.style.borderRadius).toBe("9999px");
  });
+
+  it("formRadio: 그룹 타이틀 레이아웃이 inline 이면 에디터에서도 라벨과 필드 컨테이너가 가로 정렬되고 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_label_inline",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-inline",
+          groupLabel: "라디오 그룹 인라인",
+          labelLayout: "inline",
+          labelGapPx: 16,
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_label_inline";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("라디오 그룹 인라인");
+    const groupContainer = label.parentElement as HTMLElement;
+
+    expect(groupContainer.className).toContain("flex");
+    expect(groupContainer.className).toContain("flex-row");
+    expect(groupContainer.className).toContain("items-center");
+    expect(groupContainer.style.columnGap).toBe("16px");
+  });
+
+  it("formCheckbox: 그룹 타이틀 레이아웃이 inline 이면 에디터에서도 라벨과 필드 컨테이너가 가로 정렬되고 columnGap 이 labelGapPx 로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_label_inline",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-inline",
+          groupLabel: "체크 그룹 인라인",
+          labelLayout: "inline",
+          labelGapPx: 12,
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_checkbox_label_inline";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("체크 그룹 인라인");
+    const groupContainer = label.closest("div") as HTMLElement;
+
+    expect(groupContainer.className).toContain("flex");
+    expect(groupContainer.className).toContain("flex-row");
+    expect(groupContainer.className).toContain("items-center");
+    expect(groupContainer.style.columnGap).toBe("12px");
+  });
+
+  it("formRadio 블록의 옵션 컨테이너는 optionLayout 에 따라 pb-form-options--stacked/inline 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_stacked",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-stacked",
+          groupLabel: "라디오 세로",
+          optionLayout: "stacked",
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+      {
+        id: "form_radio_inline",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-inline",
+          groupLabel: "라디오 인라인",
+          optionLayout: "inline",
+          options: [
+            { label: "옵션 C", value: "c" },
+            { label: "옵션 D", value: "d" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_stacked";
+
+    render(<EditorPage />);
+
+    const stackedLabel = screen.getByText("라디오 세로");
+    const stackedOptionsContainer = stackedLabel.nextElementSibling as HTMLElement;
+    expect(stackedOptionsContainer.className).toContain("pb-form-options");
+    expect(stackedOptionsContainer.className).toContain("pb-form-options--stacked");
+
+    const inlineLabel = screen.getByText("라디오 인라인");
+    const inlineOptionsContainer = inlineLabel.nextElementSibling as HTMLElement;
+    expect(inlineOptionsContainer.className).toContain("pb-form-options");
+    expect(inlineOptionsContainer.className).toContain("pb-form-options--inline");
+  });
+
+  it("formRadio: optionGapPx 값이 에디터 옵션 컨테이너의 rowGap/columnGap 으로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_option_gap",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-gap",
+          groupLabel: "라디오 옵션 간격",
+          optionLayout: "inline",
+          optionGapPx: 12,
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_option_gap";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("라디오 옵션 간격");
+    const optionsContainer = label.nextElementSibling as HTMLElement;
+    expect(optionsContainer.className).toContain("pb-form-options");
+    expect(optionsContainer.style.rowGap).toBe("12px");
+    expect(optionsContainer.style.columnGap).toBe("12px");
+  });
+
+  it("formCheckbox: optionGapPx 값이 에디터 옵션 컨테이너의 rowGap/columnGap 으로 반영되어야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_option_gap",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-gap",
+          groupLabel: "체크 옵션 간격",
+          optionLayout: "inline",
+          optionGapPx: 10,
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_checkbox_option_gap";
+
+    render(<EditorPage />);
+
+    const label = screen.getByText("체크 옵션 간격");
+    const groupContainer = label.closest("div") as HTMLElement;
+    const optionsContainer = groupContainer.querySelector(".pb-form-options") as HTMLElement;
+    expect(optionsContainer).not.toBeNull();
+    expect(optionsContainer.style.rowGap).toBe("10px");
+    expect(optionsContainer.style.columnGap).toBe("10px");
+  });
+
+  it("formCheckbox 블록의 옵션 컨테이너는 optionLayout 에 따라 pb-form-options--stacked/inline 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_checkbox_stacked",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-stacked",
+          groupLabel: "체크 세로",
+          optionLayout: "stacked",
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+      {
+        id: "form_checkbox_inline",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-inline",
+          groupLabel: "체크 인라인",
+          optionLayout: "inline",
+          options: [
+            { label: "체크 3", value: "c3" },
+            { label: "체크 4", value: "c4" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_checkbox_stacked";
+
+    render(<EditorPage />);
+
+    const stackedLabel = screen.getByText("체크 세로");
+    const stackedGroup = stackedLabel.closest("div") as HTMLElement;
+    const stackedOptionsContainer = stackedGroup.querySelector("div.pb-form-options") as HTMLElement;
+    expect(stackedOptionsContainer).toBeTruthy();
+    expect(stackedOptionsContainer.className).toContain("pb-form-options--stacked");
+
+    const inlineLabel = screen.getByText("체크 인라인");
+    const inlineGroup = inlineLabel.closest("div") as HTMLElement;
+    const inlineOptionsContainer = inlineGroup.querySelector("div.pb-form-options") as HTMLElement;
+    expect(inlineOptionsContainer).toBeTruthy();
+    expect(inlineOptionsContainer.className).toContain("pb-form-options--inline");
+  });
+
+  it("formRadio/formCheckbox 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => {
+    const blocks: Block[] = [
+      {
+        id: "form_radio_options",
+        type: "formRadio",
+        props: {
+          formFieldName: "radio-group",
+          groupLabel: "라디오 옵션 그룹",
+          options: [
+            { label: "옵션 A", value: "a" },
+            { label: "옵션 B", value: "b" },
+          ],
+        },
+      } as any,
+      {
+        id: "form_checkbox_options",
+        type: "formCheckbox",
+        props: {
+          formFieldName: "check-group",
+          groupLabel: "체크 옵션 그룹",
+          options: [
+            { label: "체크 1", value: "c1" },
+            { label: "체크 2", value: "c2" },
+          ],
+        },
+      } as any,
+    ];
+
+    mockState.blocks = blocks;
+    mockState.selectedBlockId = "form_radio_options";
+
+    render(<EditorPage />);
+
+    const allOptionLabels = document.querySelectorAll("label.pb-form-option");
+    expect(allOptionLabels.length).toBeGreaterThan(0);
+  });
 });