@simplysm/solid 13.0.70 → 13.0.71

package/tests/components/form-control/field/NumberInput.spec.tsx

@@ -5,28 +5,28 @@ import { NumberInput } from "../../../../src/components/form-control/field/Numbe
 
 describe("NumberInput", () => {
   describe("basic rendering", () => {
-    it("input 요소를 렌더링한다", () => {
+    it("renders input element", () => {
       render(() => <NumberInput />);
 
       const input = screen.getByRole("textbox");
       expect(input).toBeInTheDocument();
     });
 
-    it("inputmode가 numeric으로 설정된다", () => {
+    it("sets inputmode to numeric", () => {
       render(() => <NumberInput />);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveAttribute("inputmode", "numeric");
     });
 
-    it("input type이 text로 설정된다", () => {
+    it("sets input type to text", () => {
       render(() => <NumberInput />);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveAttribute("type", "text");
     });
 
-    it("autocomplete 기본값은 one-time-code이다", () => {
+    it("defaults autocomplete to one-time-code", () => {
       render(() => <NumberInput />);
 
       const input = screen.getByRole("textbox");
@@ -34,23 +34,23 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("값 변환", () => {
-    it("숫자 값을 문자열로 표시한다", () => {
+  describe("value conversion", () => {
+    it("displays numeric value as string", () => {
       render(() => <NumberInput value={12345} />);
 
       const input = screen.getByRole("textbox");
-      // comma가 기본적으로 true이므로 콤마가 포함됨
+      // comma is true by default, so commas are included
       expect(input).toHaveValue("12,345");
     });
 
-    it("소수점이 포함된 숫자를 올바르게 표시한다", () => {
+    it("displays decimal numbers correctly", () => {
       render(() => <NumberInput value={1234.56} />);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234.56");
     });
 
-    it("입력 중에 올바르게 동작한다", () => {
+    it("works correctly during input", () => {
       const handleChange = vi.fn();
       render(() => <NumberInput onValueChange={handleChange} />);
 
@@ -60,32 +60,32 @@ describe("NumberInput", () => {
       expect(handleChange).toHaveBeenCalledWith(123);
     });
 
-    it("소수점 입력 중인 상태를 유지한다", () => {
+    it("preserves trailing decimal point during input", () => {
       const [value, setValue] = createSignal<number | undefined>(undefined);
       render(() => <NumberInput value={value()} onValueChange={setValue} />);
 
       const input = screen.getByRole("textbox");
 
-      // "123."을 입력할 때 소수점만 입력된 상태 유지
+      // preserve trailing decimal while entering "123."
       fireEvent.input(input, { target: { value: "123." } });
 
-      // 값은 123으로 변환되지만 표시는 "123."을 유지해야 함
+      // value converts to 123, but display must retain "123."
       expect(input).toHaveValue("123.");
     });
 
-    it("유효하지 않은 입력은 무시한다", () => {
+    it("ignores invalid input", () => {
       const handleChange = vi.fn();
       render(() => <NumberInput value={100} onValueChange={handleChange} />);
 
       const input = screen.getByRole("textbox");
-      // 숫자가 아닌 문자 입력 시도
+      // attempt to input non-numeric characters
       fireEvent.input(input, { target: { value: "abc" } });
 
-      // 유효하지 않은 입력이므로 콜백이 호출되지 않거나 값이 유지됨
+      // invalid input so callback is not called or value is retained
       expect(handleChange).not.toHaveBeenCalled();
     });
 
-    it("빈 입력은 undefined로 변환한다", () => {
+    it("converts empty input to undefined", () => {
       const handleChange = vi.fn();
       render(() => <NumberInput value={100} onValueChange={handleChange} />);
 
@@ -95,7 +95,7 @@ describe("NumberInput", () => {
       expect(handleChange).toHaveBeenCalledWith(undefined);
     });
 
-    it("음수를 올바르게 처리한다", () => {
+    it("handles negative numbers correctly", () => {
       const handleChange = vi.fn();
       render(() => <NumberInput onValueChange={handleChange} />);
 
@@ -106,36 +106,36 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("표시 형식", () => {
-    it("comma가 true일 때 천단위 콤마를 표시한다", () => {
+  describe("display format", () => {
+    it("displays thousands comma when comma=true", () => {
       render(() => <NumberInput value={1234567} comma={true} />);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
-    it("comma가 false일 때 콤마 없이 표시한다", () => {
+    it("displays without comma when comma=false", () => {
       render(() => <NumberInput value={1234567} comma={false} />);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1234567");
     });
 
-    it("comma 기본값은 true이다", () => {
+    it("defaults comma to true", () => {
       render(() => <NumberInput value={1234567} />);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
-    it("minDigits로 최소 소수점 자릿수를 지정할 수 있다", () => {
+    it("sets minimum decimal digits with minDigits", () => {
       render(() => <NumberInput value={100} minDigits={2} />);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100.00");
     });
 
-    it("minDigits보다 긴 소수점은 그대로 표시한다", () => {
+    it("displays decimals longer than minDigits as-is", () => {
       render(() => <NumberInput value={100.12345} minDigits={2} />);
 
       const input = screen.getByRole("textbox");
@@ -143,24 +143,24 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("disabled/readonly 상태", () => {
-    it("disabled 상태에서는 div로 렌더링한다", () => {
+  describe("disabled/readonly state", () => {
+    it("renders as div when disabled", () => {
       render(() => <NumberInput value={1234} disabled />);
 
-      // disabled 상태에서는 input이 아닌 div로 렌더링
+      // renders as div, not input, when disabled
       expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-      // div에 값이 표시됨
+      // value is displayed in the div
       expect(screen.getByText("1,234")).toBeInTheDocument();
     });
 
-    it("readonly 상태에서는 div로 렌더링한다", () => {
+    it("renders as div when readonly", () => {
       render(() => <NumberInput value={5678} readonly />);
 
       expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
       expect(screen.getByText("5,678")).toBeInTheDocument();
     });
 
-    it("disabled 상태에서 스타일이 적용된다", () => {
+    it("applies disabled style", () => {
       const { container } = render(() => <NumberInput value={100} disabled />);
 
       const wrapper = container.firstChild as HTMLElement;
@@ -168,8 +168,8 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("우측 정렬", () => {
-    it("input이 우측 정렬된다", () => {
+  describe("right alignment", () => {
+    it("aligns input to the right", () => {
       render(() => <NumberInput />);
 
       const input = screen.getByRole("textbox");
@@ -177,25 +177,25 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("스타일 옵션", () => {
-    it("size='sm'일 때 작은 패딩이 적용된다", () => {
+  describe("style options", () => {
+    it("applies small padding when size='sm'", () => {
       const { container } = render(() => <NumberInput size="sm" />);
 
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.className).toContain("px-1.5");
     });
 
-    it("size='lg'일 때 큰 패딩이 적용된다", () => {
+    it("applies large padding when size='lg'", () => {
       const { container } = render(() => <NumberInput size="lg" />);
 
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.className).toContain("px-3");
     });
 
-    it("inset 스타일이 적용된다", () => {
+    it("applies inset style", () => {
       const { container } = render(() => <NumberInput inset />);
 
-      // inset일 때 outer div가 relative이고, 내부 content div에 border-none이 적용됨
+      // outer div is relative when inset, inner content div has border-none
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
       const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
@@ -204,7 +204,7 @@ describe("NumberInput", () => {
   });
 
   describe("inset dual-element", () => {
-    it("inset + readonly일 때 content div가 보이고 input이 없다", () => {
+    it("shows content div and no input when inset + readonly", () => {
       const { container } = render(() => <NumberInput inset readonly value={1234} />);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
@@ -216,7 +216,7 @@ describe("NumberInput", () => {
       expect(outer.querySelector("input:not([aria-hidden])")).toBeFalsy();
     });
 
-    it("inset + editable일 때 content div(hidden)와 input이 모두 존재한다", () => {
+    it("shows hidden content div and input when inset + editable", () => {
       const { container } = render(() => <NumberInput inset value={1234} />);
       const outer = container.firstChild as HTMLElement;
 
@@ -228,14 +228,14 @@ describe("NumberInput", () => {
       expect(input).toBeTruthy();
     });
 
-    it("inset + readonly에서 우측 정렬이 적용된다", () => {
+    it("applies right alignment in inset + readonly", () => {
       const { container } = render(() => <NumberInput inset readonly value={100} />);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
       expect(contentDiv.classList.contains("justify-end")).toBe(true);
     });
 
-    it("inset + 빈 값일 때 content div에 NBSP가 표시된다", () => {
+    it("shows NBSP in content div when inset + empty value", () => {
       const { container } = render(() => <NumberInput inset readonly />);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
@@ -243,8 +243,8 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("controlled/uncontrolled 패턴", () => {
-    it("controlled 모드에서 외부 값 변경이 반영된다", () => {
+  describe("controlled/uncontrolled pattern", () => {
+    it("reflects external value changes in controlled mode", () => {
       const [value, setValue] = createSignal<number | undefined>(100);
       render(() => <NumberInput value={value()} onValueChange={setValue} />);
 
@@ -255,7 +255,7 @@ describe("NumberInput", () => {
       expect(input).toHaveValue("200");
     });
 
-    it("uncontrolled 모드에서 내부 상태가 관리된다", () => {
+    it("manages internal state in uncontrolled mode", () => {
       render(() => <NumberInput />);
 
       const input = screen.getByRole("textbox");
@@ -266,7 +266,7 @@ describe("NumberInput", () => {
   });
 
   describe("placeholder", () => {
-    it("placeholder를 표시한다", () => {
+    it("displays placeholder", () => {
       render(() => <NumberInput placeholder="숫자를 입력하세요" />);
 
       const input = screen.getByRole("textbox");
@@ -281,25 +281,25 @@ describe("NumberInput", () => {
       expect(hiddenInput.validationMessage).toBe("This field is required");
     });
 
-    it("required일 때 값이 있으면 유효하다", () => {
+    it("is valid when required and value exists", () => {
       const { container } = render(() => <NumberInput required value={42} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
-    it("min 위반 시 에러 메시지가 설정된다", () => {
+    it("sets error message when min is violated", () => {
       const { container } = render(() => <NumberInput min={10} value={5} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Minimum value is 10");
     });
 
-    it("max 위반 시 에러 메시지가 설정된다", () => {
+    it("sets error message when max is violated", () => {
       const { container } = render(() => <NumberInput max={100} value={150} />);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Maximum value is 100");
     });
 
-    it("validate 함수가 에러를 반환하면 해당 메시지가 설정된다", () => {
+    it("sets error message returned by validate function", () => {
       const { container } = render(() => (
         <NumberInput
           validate={(v) => (v !== undefined && v % 2 === 0 ? undefined : "짝수만 입력하세요")}
@@ -311,8 +311,8 @@ describe("NumberInput", () => {
     });
   });
 
-  describe("Prefix 슬롯", () => {
-    it("NumberInput.Prefix 슬롯이 렌더링된다", () => {
+  describe("Prefix slot", () => {
+    it("renders NumberInput.Prefix slot", () => {
       render(() => (
         <NumberInput>
           <NumberInput.Prefix>
@@ -324,7 +324,7 @@ describe("NumberInput", () => {
       expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
     });
 
-    it("Prefix 슬롯 사용 시 gap 클래스가 적용된다", () => {
+    it("applies gap class when Prefix slot is used", () => {
       const { container } = render(() => (
         <NumberInput>
           <NumberInput.Prefix>
@@ -337,14 +337,14 @@ describe("NumberInput", () => {
       expect(wrapper.className).toContain("gap-");
     });
 
-    it("Prefix 슬롯 없으면 gap 클래스가 없다", () => {
+    it("does not apply gap class without Prefix slot", () => {
       const { container } = render(() => <NumberInput />);
 
       const wrapper = container.querySelector("[data-number-field]") as HTMLElement;
       expect(wrapper.className).not.toContain("gap-");
     });
 
-    it("disabled 상태에서 Prefix 슬롯이 렌더링된다", () => {
+    it("renders Prefix slot when disabled", () => {
       render(() => (
         <NumberInput disabled value={100}>
           <NumberInput.Prefix>
@@ -356,7 +356,7 @@ describe("NumberInput", () => {
       expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
     });
 
-    it("inset 모드에서 Prefix 슬롯이 렌더링된다", () => {
+    it("renders Prefix slot in inset mode", () => {
       render(() => (
         <NumberInput inset value={100}>
           <NumberInput.Prefix>