@simplysm/solid 13.0.71 → 13.0.74

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

@@ -1,54 +1,60 @@
 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 { TextInput } from "../../../../src/components/form-control/field/TextInput";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("TextInput component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders input element", () => {
-      const { container } = render(() => <TextInput />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input");
       expect(input).toBeTruthy();
     });
 
     it("defaults type to text", () => {
-      const { container } = render(() => <TextInput />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.type).toBe("text");
     });
 
     it("renders password input when type=password", () => {
-      const { container } = render(() => <TextInput type="password" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput type="password" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.type).toBe("password");
     });
 
     it("renders email input when type=email", () => {
-      const { container } = render(() => <TextInput type="email" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput type="email" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.type).toBe("email");
     });
 
     it("applies placeholder to input", () => {
-      const { container } = render(() => <TextInput placeholder="Enter text" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput placeholder="Enter text" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.placeholder).toBe("Enter text");
     });
 
     it("applies title to input", () => {
-      const { container } = render(() => <TextInput title="Input title" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput title="Input title" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.title).toBe("Input title");
     });
 
     it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <TextInput />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.autocomplete).toBe("one-time-code");
     });
 
     it("applies explicitly specified autocomplete value", () => {
-      const { container } = render(() => <TextInput autocomplete="email" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput autocomplete="email" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.autocomplete).toBe("email");
     });
@@ -56,14 +62,14 @@ describe("TextInput component", () => {
 
   describe("controlled pattern", () => {
     it("displays value prop in input", () => {
-      const { container } = render(() => <TextInput value="Hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput value="Hello" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("Hello");
     });
 
     it("calls onValueChange on input", () => {
       const handleChange = vi.fn();
-      const { container } = render(() => <TextInput value="" onValueChange={handleChange} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput value="" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       fireEvent.input(input, { target: { value: "Test" } });
@@ -73,7 +79,7 @@ describe("TextInput component", () => {
 
     it("updates input value when external state changes", () => {
       const [value, setValue] = createSignal("Initial");
-      const { container } = render(() => <TextInput value={value()} onValueChange={setValue} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       expect(input.value).toBe("Initial");
@@ -85,7 +91,7 @@ describe("TextInput component", () => {
 
   describe("uncontrolled pattern", () => {
     it("manages value internally without onValueChange", () => {
-      const { container } = render(() => <TextInput value="Initial" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput value="Initial" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       expect(input.value).toBe("Initial");
@@ -97,7 +103,7 @@ describe("TextInput component", () => {
 
   describe("disabled state", () => {
     it("renders as div when disabled=true", () => {
-      const { container } = render(() => <TextInput disabled value="Disabled text" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput disabled value="Disabled text" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-text-field");
 
@@ -106,12 +112,12 @@ describe("TextInput component", () => {
     });
 
     it("displays value when disabled", () => {
-      const { getByText } = render(() => <TextInput disabled value="Disabled text" />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput disabled value="Disabled text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Disabled text")).toBeTruthy();
     });
 
     it("applies disabled style", () => {
-      const { container } = render(() => <TextInput disabled value="Text" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput disabled value="Text" /></I18nProvider></ConfigProvider>);
       const div = container.querySelector("div.sd-text-field") as HTMLElement;
       expect(div.classList.contains("bg-base-100")).toBe(true);
     });
@@ -119,7 +125,7 @@ describe("TextInput component", () => {
 
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
-      const { container } = render(() => <TextInput readonly value="Readonly text" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-text-field");
 
@@ -128,14 +134,14 @@ describe("TextInput component", () => {
     });
 
     it("displays value when readonly", () => {
-      const { getByText } = render(() => <TextInput readonly value="Readonly text" />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Readonly text")).toBeTruthy();
     });
   });
 
   describe("format option", () => {
     it("displays value with format applied", () => {
-      const { container } = render(() => <TextInput format="XXX-XXXX-XXXX" value="01012345678" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput format="XXX-XXXX-XXXX" value="01012345678" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("010-1234-5678");
     });
@@ -143,7 +149,7 @@ describe("TextInput component", () => {
     it("passes raw value to onValueChange when format is applied", () => {
       const handleChange = vi.fn();
       const { container } = render(() => (
-        <TextInput format="XXX-XXXX-XXXX" value="" onValueChange={handleChange} />
+        <ConfigProvider clientName="test"><I18nProvider><TextInput format="XXX-XXXX-XXXX" value="" onValueChange={handleChange} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -156,13 +162,13 @@ describe("TextInput component", () => {
 
   describe("size option", () => {
     it("applies small padding when size=sm", () => {
-      const { container } = render(() => <TextInput size="sm" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput 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(() => <TextInput size="lg" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput size="lg" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("py-2")).toBe(true);
     });
@@ -170,7 +176,7 @@ describe("TextInput component", () => {
 
   describe("inset style", () => {
     it("removes border and applies inset background when inset=true", () => {
-      const { container } = render(() => <TextInput inset />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-text-field-content]") as HTMLElement;
       expect(contentDiv.classList.contains("border-none")).toBe(true);
@@ -178,7 +184,7 @@ describe("TextInput component", () => {
     });
 
     it("shows content div and no input when inset + readonly", () => {
-      const { container } = render(() => <TextInput inset readonly value="Hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readonly value="Hello" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -191,7 +197,7 @@ describe("TextInput component", () => {
     });
 
     it("shows hidden content div and input when inset + editable", () => {
-      const { container } = render(() => <TextInput inset value="Hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset value="Hello" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
 
       const contentDiv = outer.querySelector("[data-text-field-content]") as HTMLElement;
@@ -204,7 +210,7 @@ describe("TextInput component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <TextInput inset readonly />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readonly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-text-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -212,7 +218,7 @@ describe("TextInput component", () => {
 
     it("content div is always in DOM when toggling inset + readonly/editable", () => {
       const [readonly, setReadonly] = createSignal(true);
-      const { container } = render(() => <TextInput inset readonly={readonly()} value="Test" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput inset readonly={readonly()} value="Test" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
 
       let contentDiv = outer.querySelector("[data-text-field-content]");
@@ -229,7 +235,7 @@ describe("TextInput component", () => {
   describe("class merging", () => {
     it("merges custom class with existing styles", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <TextInput class="my-custom-class" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput class="my-custom-class" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("my-custom-class")).toBe(true);
     });
@@ -237,20 +243,20 @@ describe("TextInput component", () => {
 
   describe("default style", () => {
     it("applies default border style", () => {
-      const { container } = render(() => <TextInput />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("border")).toBe(true);
       expect(wrapper.classList.contains("border-base-200")).toBe(true);
     });
 
     it("changes border color on focus", () => {
-      const { container } = render(() => <TextInput />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("focus-within:border-primary-500")).toBe(true);
     });
 
     it("applies dark mode style", () => {
-      const { container } = render(() => <TextInput />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
       expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
@@ -259,41 +265,41 @@ describe("TextInput component", () => {
 
   describe("validation", () => {
     it("sets error message in hidden input when required and empty", () => {
-      const { container } = render(() => <TextInput required value="" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput required value="" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required field");
     });
 
     it("is valid when required and value exists", () => {
-      const { container } = render(() => <TextInput required value="hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput required value="hello" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
     it("sets error message when minLength is violated", () => {
-      const { container } = render(() => <TextInput minLength={3} value="ab" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput minLength={3} value="ab" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Enter at least 3 characters");
     });
 
     it("sets error message when maxLength is violated", () => {
-      const { container } = render(() => <TextInput maxLength={5} value="abcdef" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput maxLength={5} value="abcdef" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Enter up to 5 characters");
     });
 
     it("sets error message when pattern is violated", () => {
-      const { container } = render(() => <TextInput pattern="^[0-9]+$" value="abc" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><TextInput pattern="^[0-9]+$" value="abc" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("The input format is invalid");
     });
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <TextInput
+        <ConfigProvider clientName="test"><I18nProvider><TextInput
           validate={(v) => (v.includes("@") ? undefined : "이메일 형식이 아닙니다")}
           value="hello"
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("이메일 형식이 아닙니다");
@@ -301,11 +307,11 @@ describe("TextInput component", () => {
 
     it("runs validate function after base validators pass", () => {
       const { container } = render(() => (
-        <TextInput
+        <ConfigProvider clientName="test"><I18nProvider><TextInput
           required
           validate={(v) => (v.includes("@") ? undefined : "이메일 형식이 아닙니다")}
           value=""
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required field");
@@ -315,11 +321,11 @@ describe("TextInput component", () => {
   describe("Prefix slot", () => {
     it("renders TextInput.Prefix slot", () => {
       render(() => (
-        <TextInput>
+        <ConfigProvider clientName="test"><I18nProvider><TextInput>
           <TextInput.Prefix>
             <span data-testid="prefix">P</span>
           </TextInput.Prefix>
-        </TextInput>
+        </TextInput></I18nProvider></ConfigProvider>
       ));
 
       expect(document.querySelector('[data-testid="prefix"]')).not.toBeNull();
@@ -327,11 +333,11 @@ describe("TextInput component", () => {
 
     it("applies gap class when Prefix slot is used", () => {
       const { container } = render(() => (
-        <TextInput>
+        <ConfigProvider clientName="test"><I18nProvider><TextInput>
           <TextInput.Prefix>
             <span>P</span>
           </TextInput.Prefix>
-        </TextInput>
+        </TextInput></I18nProvider></ConfigProvider>
       ));
 
       const wrapper = container.querySelector("[data-text-field]") as HTMLElement;

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

@@ -1,24 +1,30 @@
 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 { Textarea } from "../../../../src/components/form-control/field/Textarea";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Textarea component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders textarea element", () => {
-      const { container } = render(() => <Textarea />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea");
       expect(textarea).toBeTruthy();
     });
 
     it("applies placeholder to textarea", () => {
-      const { container } = render(() => <Textarea placeholder="내용을 입력하세요" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea placeholder="내용을 입력하세요" /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
       expect(textarea.placeholder).toBe("내용을 입력하세요");
     });
 
     it("applies title to textarea", () => {
-      const { container } = render(() => <Textarea title="Textarea title" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea title="Textarea title" /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
       expect(textarea.title).toBe("Textarea title");
     });
@@ -26,14 +32,14 @@ describe("Textarea component", () => {
 
   describe("controlled pattern", () => {
     it("displays value prop in textarea", () => {
-      const { container } = render(() => <Textarea value="Hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value="Hello" /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
       expect(textarea.value).toBe("Hello");
     });
 
     it("calls onValueChange on input", () => {
       const handleChange = vi.fn();
-      const { container } = render(() => <Textarea value="" onValueChange={handleChange} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value="" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
 
       fireEvent.input(textarea, { target: { value: "Test" } });
@@ -43,7 +49,7 @@ describe("Textarea component", () => {
 
     it("updates textarea value when external state changes", () => {
       const [value, setValue] = createSignal("Initial");
-      const { container } = render(() => <Textarea value={value()} onValueChange={setValue} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
 
       expect(textarea.value).toBe("Initial");
@@ -55,7 +61,7 @@ describe("Textarea component", () => {
 
   describe("uncontrolled pattern", () => {
     it("manages value internally without onValueChange", () => {
-      const { container } = render(() => <Textarea value="Initial" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value="Initial" /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea") as HTMLTextAreaElement;
 
       expect(textarea.value).toBe("Initial");
@@ -67,18 +73,18 @@ describe("Textarea component", () => {
 
   describe("disabled state", () => {
     it("does not render textarea when disabled=true", () => {
-      const { container } = render(() => <Textarea disabled value="Disabled text" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea disabled value="Disabled text" /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea");
       expect(textarea).toBeFalsy();
     });
 
     it("displays value when disabled", () => {
-      const { getByText } = render(() => <Textarea disabled value="Disabled text" />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea disabled value="Disabled text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Disabled text")).toBeTruthy();
     });
 
     it("applies disabled style", () => {
-      const { container } = render(() => <Textarea disabled value="Text" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea disabled value="Text" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("bg-base-100")).toBe(true);
     });
@@ -86,26 +92,26 @@ describe("Textarea component", () => {
 
   describe("readonly state", () => {
     it("does not render textarea when readonly=true", () => {
-      const { container } = render(() => <Textarea readonly value="Readonly text" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
       const textarea = container.querySelector("textarea");
       expect(textarea).toBeFalsy();
     });
 
     it("displays value when readonly", () => {
-      const { getByText } = render(() => <Textarea readonly value="Readonly text" />);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea readonly value="Readonly text" /></I18nProvider></ConfigProvider>);
       expect(getByText("Readonly text")).toBeTruthy();
     });
   });
 
   describe("size option", () => {
     it("applies small padding when size=sm", () => {
-      const { container } = render(() => <Textarea size="sm" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea 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(() => <Textarea size="lg" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea size="lg" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("py-2")).toBe(true);
     });
@@ -113,7 +119,7 @@ describe("Textarea component", () => {
 
   describe("inset style", () => {
     it("removes border and applies inset background when inset=true", () => {
-      const { container } = render(() => <Textarea inset />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("relative")).toBe(true);
       const content = wrapper.querySelector("[data-textarea-field-content]") as HTMLElement;
@@ -122,7 +128,7 @@ describe("Textarea component", () => {
     });
 
     it("shows content div and no textarea when inset + readonly", () => {
-      const { container } = render(() => <Textarea inset readonly value="Hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset readonly value="Hello" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
 
@@ -134,7 +140,7 @@ describe("Textarea component", () => {
     });
 
     it("shows hidden content div and textarea when inset + editable", () => {
-      const { container } = render(() => <Textarea inset value="Hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset value="Hello" /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
 
       const contentDiv = outer.querySelector("[data-textarea-field-content]") as HTMLElement;
@@ -147,7 +153,7 @@ describe("Textarea component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <Textarea inset readonly />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea inset readonly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-textarea-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toContain("\u00A0");
@@ -157,7 +163,7 @@ describe("Textarea component", () => {
   describe("class merging", () => {
     it("merges custom class with existing styles", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <Textarea class="my-custom-class" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea class="my-custom-class" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("my-custom-class")).toBe(true);
     });
@@ -165,7 +171,7 @@ describe("Textarea component", () => {
 
   describe("auto height adjustment", () => {
     it("renders hidden div for height measurement", () => {
-      const { container } = render(() => <Textarea value="Test" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea value="Test" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       const hiddenDiv = wrapper.querySelector("[data-hidden-content]") as HTMLElement;
       expect(hiddenDiv).toBeTruthy();
@@ -175,35 +181,35 @@ describe("Textarea component", () => {
 
   describe("validation", () => {
     it("sets error message in hidden input when required and empty", () => {
-      const { container } = render(() => <Textarea required value="" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea required value="" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required field");
     });
 
     it("is valid when required and value exists", () => {
-      const { container } = render(() => <Textarea required value="hello" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea required value="hello" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
     it("sets error message when minLength is violated", () => {
-      const { container } = render(() => <Textarea minLength={3} value="ab" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea minLength={3} value="ab" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Enter at least 3 characters");
     });
 
     it("sets error message when maxLength is violated", () => {
-      const { container } = render(() => <Textarea maxLength={5} value="abcdef" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Textarea maxLength={5} value="abcdef" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("Enter up to 5 characters");
     });
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <Textarea
+        <ConfigProvider clientName="test"><I18nProvider><Textarea
           validate={(v) => (v.includes("@") ? undefined : "이메일 형식이 아닙니다")}
           value="hello"
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("이메일 형식이 아닙니다");
@@ -211,11 +217,11 @@ describe("Textarea component", () => {
 
     it("runs validate function after base validators pass", () => {
       const { container } = render(() => (
-        <Textarea
+        <ConfigProvider clientName="test"><I18nProvider><Textarea
           required
           validate={(v) => (v.includes("@") ? undefined : "이메일 형식이 아닙니다")}
           value=""
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required field");