From 23a08621db395be37f1708c9510b7c7e5fa645e5 Mon Sep 17 00:00:00 2001 From: Jaybe Date: Tue, 9 Dec 2025 20:20:47 +0900 Subject: [PATCH] =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=98=A4?= =?UTF-8?q?=EB=A5=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- tests/unit/ColorPickerField.spec.tsx | 5 +- tests/unit/PropertiesSidebar.spec.tsx | 4 +- ...PublicPageRendererFormFieldStyles.spec.tsx | 96 ++++++++----------- 3 files changed, 43 insertions(+), 62 deletions(-) diff --git a/tests/unit/ColorPickerField.spec.tsx b/tests/unit/ColorPickerField.spec.tsx index 05b6a9b..dafec8f 100644 --- a/tests/unit/ColorPickerField.spec.tsx +++ b/tests/unit/ColorPickerField.spec.tsx @@ -70,8 +70,9 @@ describe("ColorPickerField - 테마", () => { expect(toggleButton).not.toBeNull(); fireEvent.click(toggleButton!); - // 팔레트 첫 항목("기본") 버튼을 찾는다 - const itemButton = screen.getByRole("button", { name: "기본" }) as HTMLButtonElement; + // 팔레트 첫 항목 버튼을 찾는다 (TEXT_COLOR_PALETTE[0] 라벨과 동기화) + const firstItem = TEXT_COLOR_PALETTE[0]; + const itemButton = screen.getByRole("button", { name: firstItem.label }) as HTMLButtonElement; const className = itemButton.getAttribute("class") ?? ""; // 라이트 모드: 흰 배경 + 어두운 텍스트 diff --git a/tests/unit/PropertiesSidebar.spec.tsx b/tests/unit/PropertiesSidebar.spec.tsx index a9651b5..13f526c 100644 --- a/tests/unit/PropertiesSidebar.spec.tsx +++ b/tests/unit/PropertiesSidebar.spec.tsx @@ -144,7 +144,7 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => { expect(className).toContain("dark:bg-slate-950/40"); }); - it("속성 패널 루트는 pb-scroll 커스텀 스크롤바 클래스를 사용하지 않아야 한다", () => { + it("속성 패널 루트는 pb-scroll 커스텀 스크롤바 클래스를 사용해 에디터용 스크롤바 테마를 적용해야 한다", () => { const props = defaultProps([], null); render(); @@ -152,6 +152,6 @@ describe("PropertiesSidebar HELP 튜토리얼 모달", () => { const aside = screen.getByTestId("properties-sidebar") as HTMLElement; const className = aside.getAttribute("class") ?? ""; - expect(className).not.toContain("pb-scroll"); + expect(className).toContain("pb-scroll"); }); }); diff --git a/tests/unit/PublicPageRendererFormFieldStyles.spec.tsx b/tests/unit/PublicPageRendererFormFieldStyles.spec.tsx index 7658df3..370bcef 100644 --- a/tests/unit/PublicPageRendererFormFieldStyles.spec.tsx +++ b/tests/unit/PublicPageRendererFormFieldStyles.spec.tsx @@ -457,72 +457,52 @@ options: [ } as any, }, ]; - type: "form", - props: { - kind: "contact", - submitTarget: "internal", - requiredFieldIds: ["radio_required"], - } as any, - }, - { - id: "radio_required", - type: "formRadio", - props: { - groupLabel: "플랜", - formFieldName: "plan", - options: [ - { label: "A", value: "a" }, - { label: "B", value: "b" }, - ], - } as any, - }, - ]; - const { getByTestId } = render(); +const { getByTestId } = render(); - const group = getByTestId("preview-form-radio-group") as HTMLElement; - const inputs = group.querySelectorAll("input[type='radio']"); - expect(inputs.length).toBe(2); +const group = getByTestId("preview-form-radio-group") as HTMLElement; +const inputs = group.querySelectorAll("input[type='radio']"); +expect(inputs.length).toBe(2); - const first = inputs[0] as HTMLInputElement; - const second = inputs[1] as HTMLInputElement; +const first = inputs[0] as HTMLInputElement; +const second = inputs[1] as HTMLInputElement; - expect(first.type).toBe("radio"); - expect(first.name).toBe("plan"); - expect(first.value).toBe("a"); - expect(first.required).toBe(true); +expect(first.type).toBe("radio"); +expect(first.name).toBe("plan"); +expect(first.value).toBe("a"); +expect(first.required).toBe(true); - expect(second.type).toBe("radio"); - expect(second.name).toBe("plan"); - expect(second.value).toBe("b"); - expect(second.required).toBe(false); - }); +expect(second.type).toBe("radio"); +expect(second.name).toBe("plan"); +expect(second.value).toBe("b"); +expect(second.required).toBe(false); +}); - it("formCheckbox 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => { - const blocks: Block[] = [ - { - id: "form_checkbox_pb_option_class", - type: "formCheckbox", - props: { - groupLabel: "옵션들", - formFieldName: "features", - options: [ - { label: "옵션 1", value: "opt1" }, - { label: "옵션 2", value: "opt2" }, - ], - } as any, - }, - ]; + it("formCheckbox 블록의 각 옵션 라벨은 builder.css 의 pb-form-option 클래스를 사용해야 한다", () => { + const blocks: Block[] = [ + { + id: "form_checkbox_pb_option_class", + type: "formCheckbox", + props: { + groupLabel: "옵션들", + formFieldName: "features", + options: [ + { label: "옵션 1", value: "opt1" }, + { label: "옵션 2", value: "opt2" }, + ], + } as any, + }, + ]; - const { getByTestId } = render(); + const { getByTestId } = render(); - const group = getByTestId("preview-form-checkbox-group") as HTMLElement; - const optionLabels = group.querySelectorAll("label"); - expect(optionLabels.length).toBeGreaterThan(0); - optionLabels.forEach((label) => { - expect((label as HTMLLabelElement).className).toContain("pb-form-option"); - }); - }); + const group = getByTestId("preview-form-checkbox-group") as HTMLElement; + const optionLabels = group.querySelectorAll("label"); + expect(optionLabels.length).toBeGreaterThan(0); + optionLabels.forEach((label) => { + expect((label as HTMLLabelElement).className).toContain("pb-form-option"); + }); + }); it("formRadio 프리뷰의 옵션 input 은 OS 기본 스타일을 사용하기 위해 색상 관련 Tailwind 클래스(bg-/text-/border-)를 사용하지 않아야 한다", () => { const blocks: Block[] = [