@simplysm/solid 13.0.71 → 13.0.74

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

@@ -1,45 +1,51 @@
 import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { Time } from "@simplysm/core-common";
 import { TimePicker } from "../../../../src/components/form-control/field/TimePicker";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("TimePicker component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders input type=time when unit=minute", () => {
-      const { container } = render(() => <TimePicker unit="minute" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("time");
     });
 
     it("renders input type=time when unit=second", () => {
-      const { container } = render(() => <TimePicker unit="second" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="second" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("time");
     });
 
     it("defaults unit to minute", () => {
-      const { container } = render(() => <TimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.type).toBe("time");
     });
 
     it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <TimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.autocomplete).toBe("one-time-code");
     });
 
     it("sets step=1 when unit=second", () => {
-      const { container } = render(() => <TimePicker unit="second" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="second" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.step).toBe("1");
     });
 
     it("does not set step when unit=minute", () => {
-      const { container } = render(() => <TimePicker unit="minute" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.step).toBe("");
     });
@@ -48,21 +54,21 @@ describe("TimePicker component", () => {
   describe("value conversion", () => {
     it("displays Time in HH:mm format for minute unit", () => {
       const time = new Time(10, 30, 45);
-      const { container } = render(() => <TimePicker unit="minute" value={time} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" value={time} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("10:30");
     });
 
     it("displays Time in HH:mm:ss format for second unit", () => {
       const time = new Time(10, 30, 45);
-      const { container } = render(() => <TimePicker unit="second" value={time} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="second" value={time} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("10:30:45");
     });
 
     it("passes Time converted from minute input to onValueChange", () => {
       const handleChange = vi.fn();
-      const { container } = render(() => <TimePicker unit="minute" onValueChange={handleChange} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       fireEvent.change(input, { target: { value: "10:30" } });
@@ -76,7 +82,7 @@ describe("TimePicker component", () => {
 
     it("passes Time converted from second input to onValueChange", () => {
       const handleChange = vi.fn();
-      const { container } = render(() => <TimePicker unit="second" onValueChange={handleChange} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="second" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       fireEvent.change(input, { target: { value: "10:30:45" } });
@@ -92,7 +98,7 @@ describe("TimePicker component", () => {
       const handleChange = vi.fn();
       const time = new Time(10, 30, 45);
       const { container } = render(() => (
-        <TimePicker unit="minute" value={time} onValueChange={handleChange} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" value={time} onValueChange={handleChange} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -106,7 +112,7 @@ describe("TimePicker component", () => {
     it("updates input value when external state changes", () => {
       const [value, setValue] = createSignal<Time | undefined>(new Time(10, 0, 0));
       const { container } = render(() => (
-        <TimePicker unit="minute" value={value()} onValueChange={setValue} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -119,7 +125,7 @@ describe("TimePicker component", () => {
 
   describe("uncontrolled pattern", () => {
     it("manages value internally without onValueChange", () => {
-      const { container } = render(() => <TimePicker unit="minute" value={new Time(10, 0, 0)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" value={new Time(10, 0, 0)} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       expect(input.value).toBe("10:00");
@@ -131,7 +137,7 @@ describe("TimePicker component", () => {
 
   describe("disabled state", () => {
     it("renders as div when disabled=true", () => {
-      const { container } = render(() => <TimePicker disabled value={new Time(10, 30, 0)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker disabled value={new Time(10, 30, 0)} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-time-field");
 
@@ -141,13 +147,13 @@ describe("TimePicker component", () => {
 
     it("displays value when disabled", () => {
       const { getByText } = render(() => (
-        <TimePicker unit="minute" disabled value={new Time(10, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" disabled value={new Time(10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("10:30")).toBeTruthy();
     });
 
     it("applies disabled style", () => {
-      const { container } = render(() => <TimePicker disabled value={new Time(10, 30, 0)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker disabled value={new Time(10, 30, 0)} /></I18nProvider></ConfigProvider>);
       const div = container.querySelector("div.sd-time-field") as HTMLElement;
       expect(div.classList.contains("bg-base-100")).toBe(true);
     });
@@ -155,7 +161,7 @@ describe("TimePicker component", () => {
 
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
-      const { container } = render(() => <TimePicker readonly value={new Time(10, 30, 0)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker readonly value={new Time(10, 30, 0)} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-time-field");
 
@@ -165,7 +171,7 @@ describe("TimePicker component", () => {
 
     it("displays value when readonly", () => {
       const { getByText } = render(() => (
-        <TimePicker unit="minute" readonly value={new Time(10, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker unit="minute" readonly value={new Time(10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("10:30")).toBeTruthy();
     });
@@ -173,13 +179,13 @@ describe("TimePicker component", () => {
 
   describe("size option", () => {
     it("applies small padding when size=sm", () => {
-      const { container } = render(() => <TimePicker size="sm" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker size="sm" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("py-0.5")).toBe(true);
     });
 
     it("applies large padding when size=lg", () => {
-      const { container } = render(() => <TimePicker size="lg" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker size="lg" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("py-2")).toBe(true);
     });
@@ -187,7 +193,7 @@ describe("TimePicker component", () => {
 
   describe("inset style", () => {
     it("applies relative to outer and inset style to content when inset=true", () => {
-      const { container } = render(() => <TimePicker inset />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker inset /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
       expect(outer.classList.contains("border-none")).toBe(false);
@@ -198,7 +204,7 @@ describe("TimePicker component", () => {
     });
 
     it("shows content div and no input when inset + readonly", () => {
-      const { container } = render(() => <TimePicker inset readonly value={new Time(14, 30, 0)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker inset readonly value={new Time(14, 30, 0)} /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -210,7 +216,7 @@ describe("TimePicker component", () => {
     });
 
     it("shows hidden content div and input when inset + editable", () => {
-      const { container } = render(() => <TimePicker inset value={new Time(14, 30, 0)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker inset value={new Time(14, 30, 0)} /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
 
       const contentDiv = outer.querySelector("[data-time-field-content]") as HTMLElement;
@@ -221,7 +227,7 @@ describe("TimePicker component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <TimePicker inset readonly />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker inset readonly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-time-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -230,13 +236,13 @@ describe("TimePicker component", () => {
 
   describe("dark mode style", () => {
     it("applies dark mode border style", () => {
-      const { container } = render(() => <TimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
     });
 
     it("applies dark mode background style", () => {
-      const { container } = render(() => <TimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
     });
@@ -245,7 +251,7 @@ describe("TimePicker component", () => {
   describe("class merging", () => {
     it("merges custom class with existing styles", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <TimePicker class="my-custom-class" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("my-custom-class")).toBe(true);
     });
@@ -253,20 +259,20 @@ describe("TimePicker component", () => {
 
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
-      const { container } = render(() => <TimePicker required value={undefined} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker 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(() => <TimePicker required value={new Time(10, 0, 0)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TimePicker required value={new Time(10, 0, 0)} /></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(() => (
-        <TimePicker min={new Time(12, 0, 0)} value={new Time(8, 0, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker min={new Time(12, 0, 0)} value={new Time(8, 0, 0)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).not.toBe("");
@@ -274,7 +280,7 @@ describe("TimePicker component", () => {
 
     it("is valid when min is satisfied", () => {
       const { container } = render(() => (
-        <TimePicker min={new Time(8, 0, 0)} value={new Time(12, 0, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker min={new Time(8, 0, 0)} value={new Time(12, 0, 0)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
@@ -282,7 +288,7 @@ describe("TimePicker component", () => {
 
     it("sets error message when max is violated", () => {
       const { container } = render(() => (
-        <TimePicker max={new Time(12, 0, 0)} value={new Time(18, 0, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker max={new Time(12, 0, 0)} value={new Time(18, 0, 0)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).not.toBe("");
@@ -290,7 +296,7 @@ describe("TimePicker component", () => {
 
     it("is valid when max is satisfied", () => {
       const { container } = render(() => (
-        <TimePicker max={new Time(23, 59, 59)} value={new Time(12, 0, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker max={new Time(23, 59, 59)} value={new Time(12, 0, 0)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
@@ -298,7 +304,7 @@ describe("TimePicker component", () => {
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <TimePicker value={new Time(10, 0, 0)} validate={() => "커스텀 에러"} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker value={new Time(10, 0, 0)} validate={() => "커스텀 에러"} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
@@ -306,7 +312,7 @@ describe("TimePicker component", () => {
 
     it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
-        <TimePicker value={new Time(10, 0, 0)} validate={() => undefined} />
+        <ConfigProvider clientName="test"><I18nProvider><TimePicker value={new Time(10, 0, 0)} validate={() => undefined} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);

package/tests/components/form-control/numpad/Numpad.spec.tsx

@@ -1,18 +1,36 @@
-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 { Numpad } from "../../../../src/components/form-control/numpad/Numpad";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Numpad", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders root element with data-numpad attribute", () => {
-      const { container } = render(() => <Numpad />);
+      const { container } = render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       const root = container.querySelector("[data-numpad]");
       expect(root).toBeTruthy();
     });
 
     it("renders digit buttons 0-9", () => {
-      render(() => <Numpad />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       for (let i = 0; i <= 9; i++) {
         expect(screen.getByText(String(i))).toBeInTheDocument();
@@ -20,18 +38,36 @@ describe("Numpad", () => {
     });
 
     it("renders decimal point button", () => {
-      render(() => <Numpad />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       expect(screen.getByText(".")).toBeInTheDocument();
     });
 
     it("renders NumberInput (input)", () => {
-      render(() => <Numpad />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       const input = screen.getByRole("textbox");
       expect(input).toBeInTheDocument();
     });
 
     it("renders C button with text-danger-500 class", () => {
-      render(() => <Numpad />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       const cButton = screen
         .getAllByRole("button")
         .find((btn) => btn.className.includes("text-danger-500"));
@@ -39,7 +75,13 @@ describe("Numpad", () => {
     });
 
     it("renders BS button with text-warning-500 class", () => {
-      render(() => <Numpad />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       const bsButton = screen
         .getAllByRole("button")
         .find((btn) => btn.className.includes("text-warning-500"));
@@ -47,12 +89,24 @@ describe("Numpad", () => {
     });
 
     it("does not render ENT button by default", () => {
-      render(() => <Numpad />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       expect(screen.queryByText("ENT")).not.toBeInTheDocument();
     });
 
     it("does not render minus button by default", () => {
-      render(() => <Numpad />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       // without useMinusButton, there should be no button with "-" text
       const minusButton = screen.getAllByRole("button").find((btn) => btn.textContent === "-");
       expect(minusButton).toBeFalsy();
@@ -62,7 +116,13 @@ describe("Numpad", () => {
   describe("digit input", () => {
     it("updates value on digit button click", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       fireEvent.click(screen.getByText("1"));
       fireEvent.click(screen.getByText("2"));
@@ -73,7 +133,13 @@ describe("Numpad", () => {
 
     it("appends decimal point on decimal button click", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       fireEvent.click(screen.getByText("1"));
       fireEvent.click(screen.getByText("."));
@@ -84,7 +150,13 @@ describe("Numpad", () => {
 
     it("ignores duplicate decimal point", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       fireEvent.click(screen.getByText("1"));
       fireEvent.click(screen.getByText("."));
@@ -96,7 +168,13 @@ describe("Numpad", () => {
 
     it("allows clicking 0 multiple times", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       fireEvent.click(screen.getByText("1"));
       fireEvent.click(screen.getByText("0"));
@@ -109,7 +187,13 @@ describe("Numpad", () => {
   describe("function buttons", () => {
     it("clears value on C button click", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       // enter value
       fireEvent.click(screen.getByText("5"));
@@ -126,7 +210,13 @@ describe("Numpad", () => {
 
     it("removes last character on BS button click", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       // enter 123
       fireEvent.click(screen.getByText("1"));
@@ -144,7 +234,13 @@ describe("Numpad", () => {
 
     it("returns undefined when all characters are removed with BS", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       // enter 1
       fireEvent.click(screen.getByText("1"));
@@ -161,27 +257,51 @@ describe("Numpad", () => {
 
   describe("ENT button", () => {
     it("renders ENT button when useEnterButton=true", () => {
-      render(() => <Numpad useEnterButton />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad useEnterButton />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
       expect(screen.getByText("ENT")).toBeInTheDocument();
     });
 
     it("calls onEnterButtonClick on ENT button click", () => {
       const handleEnter = vi.fn();
-      render(() => <Numpad useEnterButton onEnterButtonClick={handleEnter} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad useEnterButton onEnterButtonClick={handleEnter} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       fireEvent.click(screen.getByText("ENT"));
       expect(handleEnter).toHaveBeenCalledTimes(1);
     });
 
     it("disables ENT button when required and no value", () => {
-      render(() => <Numpad useEnterButton required />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad useEnterButton required />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       const entButton = screen.getByText("ENT").closest("button")!;
       expect(entButton.disabled).toBe(true);
     });
 
     it("enables ENT button when required and value exists", () => {
-      render(() => <Numpad useEnterButton required value={123} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad useEnterButton required value={123} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       const entButton = screen.getByText("ENT").closest("button")!;
       expect(entButton.disabled).toBe(false);
@@ -190,7 +310,13 @@ describe("Numpad", () => {
 
   describe("minus button", () => {
     it("renders minus button when useMinusButton=true", () => {
-      render(() => <Numpad useMinusButton />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad useMinusButton />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       const minusButton = screen.getAllByRole("button").find((btn) => btn.textContent === "-");
       expect(minusButton).toBeTruthy();
@@ -198,7 +324,13 @@ describe("Numpad", () => {
 
     it("toggles sign on minus button click (positive to negative)", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad useMinusButton onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad useMinusButton onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       // enter 5
       fireEvent.click(screen.getByText("5"));
@@ -212,7 +344,13 @@ describe("Numpad", () => {
 
     it("toggles sign on minus button click (negative to positive)", () => {
       const handleChange = vi.fn();
-      render(() => <Numpad useMinusButton value={-5} onValueChange={handleChange} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad useMinusButton value={-5} onValueChange={handleChange} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       // click minus button
       const minusButton = screen.getAllByRole("button").find((btn) => btn.textContent === "-")!;
@@ -225,7 +363,13 @@ describe("Numpad", () => {
   describe("controlled mode", () => {
     it("reflects external value changes", () => {
       const [value, setValue] = createSignal<number | undefined>(100);
-      render(() => <Numpad value={value()} onValueChange={setValue} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad value={value()} onValueChange={setValue} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100");
@@ -236,7 +380,13 @@ describe("Numpad", () => {
 
     it("clears input when set to undefined externally", () => {
       const [value, setValue] = createSignal<number | undefined>(100);
-      render(() => <Numpad value={value()} onValueChange={setValue} />);
+      render(() => (
+        <ConfigProvider clientName="test">
+          <I18nProvider>
+            <Numpad value={value()} onValueChange={setValue} />
+          </I18nProvider>
+        </ConfigProvider>
+      ));
 
       const input = screen.getByRole("textbox");
       expect(input).toHaveValue("100");