@simplysm/solid 13.0.72 → 13.0.75

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

@@ -1,33 +1,39 @@
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { render, fireEvent, screen } from "@solidjs/testing-library";
 import { createSignal } from "solid-js";
 import { NumberInput } from "../../../../src/components/form-control/field/NumberInput";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("NumberInput", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders input element", () => {
-      render(() => <NumberInput />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toBeInTheDocument();
     });
 
     it("sets inputmode to numeric", () => {
-      render(() => <NumberInput />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveAttribute("inputmode", "numeric");
     });
 
     it("sets input type to text", () => {
-      render(() => <NumberInput />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveAttribute("type", "text");
     });
 
     it("defaults autocomplete to one-time-code", () => {
-      render(() => <NumberInput />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveAttribute("autocomplete", "one-time-code");
@@ -36,7 +42,7 @@ describe("NumberInput", () => {
 
   describe("value conversion", () => {
     it("displays numeric value as string", () => {
-      render(() => <NumberInput value={12345} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={12345} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       // comma is true by default, so commas are included
@@ -44,7 +50,7 @@ describe("NumberInput", () => {
     });
 
     it("displays decimal numbers correctly", () => {
-      render(() => <NumberInput value={1234.56} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234.56} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234.56");
@@ -52,7 +58,7 @@ describe("NumberInput", () => {
 
     it("works correctly during input", () => {
       const handleChange = vi.fn();
-      render(() => <NumberInput onValueChange={handleChange} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       fireEvent.input(input, { target: { value: "123" } });
@@ -62,7 +68,7 @@ describe("NumberInput", () => {
 
     it("preserves trailing decimal point during input", () => {
       const [value, setValue] = createSignal<number | undefined>(undefined);
-      render(() => <NumberInput value={value()} onValueChange={setValue} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
 
@@ -75,7 +81,7 @@ describe("NumberInput", () => {
 
     it("ignores invalid input", () => {
       const handleChange = vi.fn();
-      render(() => <NumberInput value={100} onValueChange={handleChange} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       // attempt to input non-numeric characters
@@ -87,7 +93,7 @@ describe("NumberInput", () => {
 
     it("converts empty input to undefined", () => {
       const handleChange = vi.fn();
-      render(() => <NumberInput value={100} onValueChange={handleChange} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       fireEvent.input(input, { target: { value: "" } });
@@ -97,7 +103,7 @@ describe("NumberInput", () => {
 
     it("handles negative numbers correctly", () => {
       const handleChange = vi.fn();
-      render(() => <NumberInput onValueChange={handleChange} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       fireEvent.input(input, { target: { value: "-123" } });
@@ -108,35 +114,35 @@ describe("NumberInput", () => {
 
   describe("display format", () => {
     it("displays thousands comma when comma=true", () => {
-      render(() => <NumberInput value={1234567} comma={true} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} comma={true} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
     it("displays without comma when comma=false", () => {
-      render(() => <NumberInput value={1234567} comma={false} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} comma={false} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1234567");
     });
 
     it("defaults comma to true", () => {
-      render(() => <NumberInput value={1234567} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234567} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("1,234,567");
     });
 
     it("sets minimum decimal digits with minDigits", () => {
-      render(() => <NumberInput value={100} minDigits={2} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} minDigits={2} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100.00");
     });
 
     it("displays decimals longer than minDigits as-is", () => {
-      render(() => <NumberInput value={100.12345} minDigits={2} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100.12345} minDigits={2} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100.12345");
@@ -145,7 +151,7 @@ describe("NumberInput", () => {
 
   describe("disabled/readonly state", () => {
     it("renders as div when disabled", () => {
-      render(() => <NumberInput value={1234} disabled />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={1234} disabled /></I18nProvider></ConfigProvider>);
 
       // renders as div, not input, when disabled
       expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
@@ -154,14 +160,14 @@ describe("NumberInput", () => {
     });
 
     it("renders as div when readonly", () => {
-      render(() => <NumberInput value={5678} readonly />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={5678} readonly /></I18nProvider></ConfigProvider>);
 
       expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
       expect(screen.getByText("5,678")).toBeInTheDocument();
     });
 
     it("applies disabled style", () => {
-      const { container } = render(() => <NumberInput value={100} disabled />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={100} disabled /></I18nProvider></ConfigProvider>);
 
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.className).toContain("bg-base-100");
@@ -170,7 +176,7 @@ describe("NumberInput", () => {
 
   describe("right alignment", () => {
     it("aligns input to the right", () => {
-      render(() => <NumberInput />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input.className).toContain("text-right");
@@ -179,21 +185,21 @@ describe("NumberInput", () => {
 
   describe("style options", () => {
     it("applies small padding when size='sm'", () => {
-      const { container } = render(() => <NumberInput size="sm" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput size="sm" /></I18nProvider></ConfigProvider>);
 
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.className).toContain("px-1.5");
     });
 
     it("applies large padding when size='lg'", () => {
-      const { container } = render(() => <NumberInput size="lg" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput size="lg" /></I18nProvider></ConfigProvider>);
 
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.className).toContain("px-3");
     });
 
     it("applies inset style", () => {
-      const { container } = render(() => <NumberInput inset />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset /></I18nProvider></ConfigProvider>);
 
       // outer div is relative when inset, inner content div has border-none
       const outer = container.firstChild as HTMLElement;
@@ -205,7 +211,7 @@ describe("NumberInput", () => {
 
   describe("inset dual-element", () => {
     it("shows content div and no input when inset + readonly", () => {
-      const { container } = render(() => <NumberInput inset readonly value={1234} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly value={1234} /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -217,7 +223,7 @@ describe("NumberInput", () => {
     });
 
     it("shows hidden content div and input when inset + editable", () => {
-      const { container } = render(() => <NumberInput inset value={1234} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset value={1234} /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
 
       const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
@@ -229,14 +235,14 @@ describe("NumberInput", () => {
     });
 
     it("applies right alignment in inset + readonly", () => {
-      const { container } = render(() => <NumberInput inset readonly value={100} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly value={100} /></I18nProvider></ConfigProvider>);
       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("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <NumberInput inset readonly />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput inset readonly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -246,7 +252,7 @@ describe("NumberInput", () => {
   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} />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100");
@@ -256,7 +262,7 @@ describe("NumberInput", () => {
     });
 
     it("manages internal state in uncontrolled mode", () => {
-      render(() => <NumberInput />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       fireEvent.input(input, { target: { value: "500" } });
@@ -267,7 +273,7 @@ describe("NumberInput", () => {
 
   describe("placeholder", () => {
     it("displays placeholder", () => {
-      render(() => <NumberInput placeholder="숫자를 입력하세요" />);
+      render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput placeholder="숫자를 입력하세요" /></I18nProvider></ConfigProvider>);
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveAttribute("placeholder", "숫자를 입력하세요");
@@ -276,35 +282,35 @@ describe("NumberInput", () => {
 
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
-      const { container } = render(() => <NumberInput required value={undefined} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput required value={undefined} /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
-      expect(hiddenInput.validationMessage).toBe("This field is required");
+      expect(hiddenInput.validationMessage).toBe("This is a required field");
     });
 
     it("is valid when required and value exists", () => {
-      const { container } = render(() => <NumberInput required value={42} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput required value={42} /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
     it("sets error message when min is violated", () => {
-      const { container } = render(() => <NumberInput min={10} value={5} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput min={10} value={5} /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Minimum value is 10");
     });
 
     it("sets error message when max is violated", () => {
-      const { container } = render(() => <NumberInput max={100} value={150} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput max={100} value={150} /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Maximum value is 100");
     });
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <NumberInput
+        <ConfigProvider clientName="test"><I18nProvider><NumberInput
           validate={(v) => (v !== undefined && v % 2 === 0 ? undefined : "짝수만 입력하세요")}
           value={3}
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("짝수만 입력하세요");
@@ -314,11 +320,11 @@ describe("NumberInput", () => {
   describe("Prefix slot", () => {
     it("renders NumberInput.Prefix slot", () => {
       render(() => (
-        <NumberInput>
+        <ConfigProvider clientName="test"><I18nProvider><NumberInput>
           <NumberInput.Prefix>
             <span data-testid="prefix">₩</span>
           </NumberInput.Prefix>
-        </NumberInput>
+        </NumberInput></I18nProvider></ConfigProvider>
       ));
 
       expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
@@ -326,11 +332,11 @@ describe("NumberInput", () => {
 
     it("applies gap class when Prefix slot is used", () => {
       const { container } = render(() => (
-        <NumberInput>
+        <ConfigProvider clientName="test"><I18nProvider><NumberInput>
           <NumberInput.Prefix>
             <span>₩</span>
           </NumberInput.Prefix>
-        </NumberInput>
+        </NumberInput></I18nProvider></ConfigProvider>
       ));
 
       const wrapper = container.querySelector("[data-number-field]") as HTMLElement;
@@ -338,7 +344,7 @@ describe("NumberInput", () => {
     });
 
     it("does not apply gap class without Prefix slot", () => {
-      const { container } = render(() => <NumberInput />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><NumberInput /></I18nProvider></ConfigProvider>);
 
       const wrapper = container.querySelector("[data-number-field]") as HTMLElement;
       expect(wrapper.className).not.toContain("gap-");
@@ -346,11 +352,11 @@ describe("NumberInput", () => {
 
     it("renders Prefix slot when disabled", () => {
       render(() => (
-        <NumberInput disabled value={100}>
+        <ConfigProvider clientName="test"><I18nProvider><NumberInput disabled value={100}>
           <NumberInput.Prefix>
             <span data-testid="prefix">₩</span>
           </NumberInput.Prefix>
-        </NumberInput>
+        </NumberInput></I18nProvider></ConfigProvider>
       ));
 
       expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
@@ -358,11 +364,11 @@ describe("NumberInput", () => {
 
     it("renders Prefix slot in inset mode", () => {
       render(() => (
-        <NumberInput inset value={100}>
+        <ConfigProvider clientName="test"><I18nProvider><NumberInput inset value={100}>
           <NumberInput.Prefix>
             <span data-testid="prefix">₩</span>
           </NumberInput.Prefix>
-        </NumberInput>
+        </NumberInput></I18nProvider></ConfigProvider>
       ));
 
       expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();