jaybe/page-builder
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

스타일 수정
CI / test (push) Failing after 44m2s
Details
CI / pr_and_merge (push) Has been skipped
Details

Browse Source
This commit is contained in:
Jaybe
2025-11-29 15:11:49 +09:00
parent c9a62d479c
commit 1f085bd64c
64 changed files with 568 additions and 126 deletions
Download Patch File Download Diff File Expand all files Collapse all files
tests/unit/formHelpers.spec.ts
+54 -18
View File
@@ -1,4 +1,5 @@
import { describe, it, expect } from "vitest";
import { expectNoPxInStyleObject, expectNoPxInStyleString } from "./styleInvariants";
import {
computeFormInputExportTokens,
computeFormSelectExportTokens,
@@ -64,12 +65,17 @@ describe("formHelpers.computeFormInputExportTokens", () => {
expect(tokens.inputStyleAttr).toContain("color:#ff0000");
expect(tokens.inputStyleAttr).toContain("background-color:#111827");
expect(tokens.inputStyleAttr).toContain("border-color:#4b5563");
expect(tokens.inputStyleAttr).toContain("padding-left:8px");
expect(tokens.inputStyleAttr).toContain("padding-right:8px");
expect(tokens.inputStyleAttr).toContain("padding-top:4px");
expect(tokens.inputStyleAttr).toContain("padding-bottom:4px");
expect(tokens.inputStyleAttr).toContain("width:300px");
expect(tokens.inputStyleAttr).toContain("padding-left:0.5em");
expect(tokens.inputStyleAttr).toContain("padding-right:0.5em");
expect(tokens.inputStyleAttr).toContain("padding-top:0.25em");
expect(tokens.inputStyleAttr).toContain("padding-bottom:0.25em");
expect(tokens.inputStyleAttr).toContain("width:18.75em");
expect(tokens.inputStyleAttr).toContain("border-radius:6px");
// Export 인풋 스타일에는 border-radius 등의 예외를 제외하고 px 단위가 포함되지 않아야 한다.
expectNoPxInStyleString(tokens.inputStyleAttr, {
allowPatterns: [/border-radius:\d+px/, /border-width:\d+px/],
});
});
it("스타일 값이 없으면 style 속성이 비어 있어야 한다", () => {
@@ -97,12 +103,17 @@ describe("formHelpers.computeFormSelectExportTokens", () => {
expect(tokens.selectStyleAttr).toContain("color:#00ff00");
expect(tokens.selectStyleAttr).toContain("background-color:#020617");
expect(tokens.selectStyleAttr).toContain("border-color:#64748b");
expect(tokens.selectStyleAttr).toContain("padding-left:12px");
expect(tokens.selectStyleAttr).toContain("padding-right:12px");
expect(tokens.selectStyleAttr).toContain("padding-top:6px");
expect(tokens.selectStyleAttr).toContain("padding-bottom:6px");
expect(tokens.selectStyleAttr).toContain("width:240px");
expect(tokens.selectStyleAttr).toContain("padding-left:0.75em");
expect(tokens.selectStyleAttr).toContain("padding-right:0.75em");
expect(tokens.selectStyleAttr).toContain("padding-top:0.375em");
expect(tokens.selectStyleAttr).toContain("padding-bottom:0.375em");
expect(tokens.selectStyleAttr).toContain("width:15em");
expect(tokens.selectStyleAttr).toContain("border-radius:9999px");
// Export 셀렉트 스타일에는 border-radius 등의 예외를 제외하고 px 단위가 포함되지 않아야 한다.
expectNoPxInStyleString(tokens.selectStyleAttr, {
allowPatterns: [/border-radius:\d+px/, /border-width:\d+px/],
});
});
it("스타일 값이 없으면 style 속성이 비어 있어야 한다", () => {
@@ -130,11 +141,16 @@ describe("formHelpers.computeFormCheckboxExportTokens", () => {
expect(tokens.optionStyleAttr).toContain("border-color:#e5e7eb");
expect(tokens.optionStyleAttr).toContain("border-width:1px");
expect(tokens.optionStyleAttr).toContain("border-style:solid");
expect(tokens.optionStyleAttr).toContain("padding-left:10px");
expect(tokens.optionStyleAttr).toContain("padding-right:10px");
expect(tokens.optionStyleAttr).toContain("padding-top:5px");
expect(tokens.optionStyleAttr).toContain("padding-bottom:5px");
expect(tokens.optionStyleAttr).toContain("padding-left:0.625em");
expect(tokens.optionStyleAttr).toContain("padding-right:0.625em");
expect(tokens.optionStyleAttr).toContain("padding-top:0.3125em");
expect(tokens.optionStyleAttr).toContain("padding-bottom:0.3125em");
expect(tokens.optionStyleAttr).toContain("border-radius:2px");
// Export 체크박스 옵션 스타일에는 border/border-radius 를 제외하고 px 단위가 포함되지 않아야 한다.
expectNoPxInStyleString(tokens.optionStyleAttr, {
allowPatterns: [/border-radius:\d+px/, /border-width:\d+px/],
});
});
it("스타일 값이 없으면 style 속성이 비어 있어야 한다", () => {
@@ -162,11 +178,16 @@ describe("formHelpers.computeFormRadioExportTokens", () => {
expect(tokens.optionStyleAttr).toContain("border-color:#facc15");
expect(tokens.optionStyleAttr).toContain("border-width:1px");
expect(tokens.optionStyleAttr).toContain("border-style:solid");
expect(tokens.optionStyleAttr).toContain("padding-left:4px");
expect(tokens.optionStyleAttr).toContain("padding-right:4px");
expect(tokens.optionStyleAttr).toContain("padding-top:2px");
expect(tokens.optionStyleAttr).toContain("padding-bottom:2px");
expect(tokens.optionStyleAttr).toContain("padding-left:0.25em");
expect(tokens.optionStyleAttr).toContain("padding-right:0.25em");
expect(tokens.optionStyleAttr).toContain("padding-top:0.125em");
expect(tokens.optionStyleAttr).toContain("padding-bottom:0.125em");
expect(tokens.optionStyleAttr).toContain("border-radius:4px");
// Export 라디오 옵션 스타일에는 border/border-radius 를 제외하고 px 단위가 포함되지 않아야 한다.
expectNoPxInStyleString(tokens.optionStyleAttr, {
allowPatterns: [/border-radius:\d+px/, /border-width:\d+px/],
});
});
});
@@ -253,6 +274,10 @@ describe("formHelpers - public tokens", () => {
expect(tokens.inputStyle.backgroundColor).toBe("#123456");
expect(tokens.inputStyle.borderColor).toBe("#ff0000");
expect(tokens.inputStyle.borderRadius).toBe("6px");
// 퍼블릭 인풋 토큰 스타일에는 borderRadius/borderWidth 를 제외하고 px 단위가 없어야 한다.
expectNoPxInStyleObject(tokens.wrapperStyle);
expectNoPxInStyleObject(tokens.inputStyle, { allowKeys: ["borderRadius", "borderWidth"] });
});
it("computeFormSelectPublicTokens: 퍼블릭 셀렉트 필드 스타일을 계산해야 한다", () => {
@@ -276,6 +301,10 @@ describe("formHelpers - public tokens", () => {
expect(tokens.selectStyle.backgroundColor).toBe("#123456");
expect(tokens.selectStyle.borderColor).toBe("#ff0000");
expect(tokens.selectStyle.borderRadius).toBe("6px");
// 퍼블릭 셀렉트 토큰 스타일에는 borderRadius/borderWidth 를 제외하고 px 단위가 없어야 한다.
expectNoPxInStyleObject(tokens.wrapperStyle);
expectNoPxInStyleObject(tokens.selectStyle, { allowKeys: ["borderRadius", "borderWidth"] });
});
it("computeFormCheckboxPublicTokens: 퍼블릭 체크박스 그룹 스타일을 계산해야 한다", () => {
@@ -304,6 +333,13 @@ describe("formHelpers - public tokens", () => {
expect(tokens.optionContainerStyle.borderRadius).toBe("6px");
expect(tokens.groupTextStyle.color).toBe("#ffffff");
expect(tokens.optionTextStyle.color).toBe("#ffffff");
// 퍼블릭 체크박스 토큰 스타일에는 borderRadius/borderWidth 를 제외하고 px 단위가 없어야 한다.
expectNoPxInStyleObject(tokens.groupStyle);
expectNoPxInStyleObject(tokens.optionsStyle);
expectNoPxInStyleObject(tokens.optionContainerStyle, { allowKeys: ["borderRadius", "borderWidth"] });
expectNoPxInStyleObject(tokens.groupTextStyle);
expectNoPxInStyleObject(tokens.optionTextStyle);
});
it("computeFormRadioPublicTokens: 퍼블릭 라디오 그룹 스타일을 계산해야 한다", () => {