@simplysm/solid 13.0.72 → 13.0.74

package/tests/components/form-control/checkbox/Radio.spec.tsx

@@ -1,29 +1,34 @@
 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 { Radio } from "../../../../src/components/form-control/checkbox/Radio";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Radio component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
   describe("basic rendering", () => {
     it("renders with radio role", () => {
-      const { getByRole } = render(() => <Radio />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
       expect(getByRole("radio")).toBeTruthy();
     });
 
     it("renders children as label", () => {
-      const { getByText } = render(() => <Radio>옵션 A</Radio>);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio>옵션 A</Radio></I18nProvider></ConfigProvider>);
       expect(getByText("옵션 A")).toBeTruthy();
     });
 
     it("defaults to unchecked", () => {
-      const { getByRole } = render(() => <Radio />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
       expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
     });
   });
 
   describe("click behavior", () => {
     it("selects on click", () => {
-      const { getByRole } = render(() => <Radio />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
       const radio = getByRole("radio");
 
       fireEvent.click(radio);
@@ -31,7 +36,7 @@ describe("Radio component", () => {
     });
 
     it("does not deselect when already selected", () => {
-      const { getByRole } = render(() => <Radio value={true} />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio value={true} /></I18nProvider></ConfigProvider>);
       const radio = getByRole("radio");
 
       fireEvent.click(radio);
@@ -39,7 +44,7 @@ describe("Radio component", () => {
     });
 
     it("does not change when disabled", () => {
-      const { getByRole } = render(() => <Radio disabled />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio disabled /></I18nProvider></ConfigProvider>);
       const radio = getByRole("radio");
 
       fireEvent.click(radio);
@@ -49,7 +54,7 @@ describe("Radio component", () => {
 
   describe("keyboard behavior", () => {
     it("selects with Space key", () => {
-      const { getByRole } = render(() => <Radio />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
       const radio = getByRole("radio");
 
       fireEvent.keyDown(radio, { key: " " });
@@ -59,13 +64,13 @@ describe("Radio component", () => {
 
   describe("controlled pattern", () => {
     it("reflects value prop as checked state", () => {
-      const { getByRole } = render(() => <Radio value={true} />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio value={true} /></I18nProvider></ConfigProvider>);
       expect(getByRole("radio").getAttribute("aria-checked")).toBe("true");
     });
 
     it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
-      const { getByRole } = render(() => <Radio value={false} onValueChange={handleChange} />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio value={false} onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
 
       fireEvent.click(getByRole("radio"));
       expect(handleChange).toHaveBeenCalledWith(true);
@@ -73,7 +78,7 @@ describe("Radio component", () => {
 
     it("updates when external state changes", () => {
       const [value, setValue] = createSignal(false);
-      const { getByRole } = render(() => <Radio value={value()} onValueChange={setValue} />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>);
 
       expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
 
@@ -84,20 +89,20 @@ describe("Radio component", () => {
 
   describe("style variants", () => {
     it("indicator is circular", () => {
-      const { getByRole } = render(() => <Radio />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
       const indicator = getByRole("radio").querySelector("div") as HTMLElement;
       expect(indicator.classList.contains("rounded-full")).toBe(true);
     });
 
     it("applies different styles per size", () => {
-      const { getByRole: getDefault } = render(() => <Radio />);
-      const { getByRole: getSm } = render(() => <Radio size="sm" />);
+      const { getByRole: getDefault } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio /></I18nProvider></ConfigProvider>);
+      const { getByRole: getSm } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio size="sm" /></I18nProvider></ConfigProvider>);
 
       expect(getDefault("radio").className).not.toBe(getSm("radio").className);
     });
 
     it("applies disabled style", () => {
-      const { getByRole } = render(() => <Radio disabled />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio disabled /></I18nProvider></ConfigProvider>);
       expect(getByRole("radio").classList.contains("opacity-30")).toBe(true);
     });
   });
@@ -105,32 +110,32 @@ describe("Radio component", () => {
   describe("class merging", () => {
     it("merges custom classes", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { getByRole } = render(() => <Radio class="my-custom-class" />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio class="my-custom-class" /></I18nProvider></ConfigProvider>);
       expect(getByRole("radio").classList.contains("my-custom-class")).toBe(true);
     });
   });
 
   describe("validation", () => {
     it("sets error message when required and not selected", () => {
-      const { container } = render(() => <Radio required value={false} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio required value={false} /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("This is a required selection");
     });
 
     it("is valid when required and selected", () => {
-      const { container } = render(() => <Radio required value={true} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio required value={true} /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
     it("sets error message returned by validate function", () => {
-      const { container } = render(() => <Radio value={true} validate={() => "커스텀 에러"} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio value={true} validate={() => "커스텀 에러"} /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
     });
 
     it("is valid when validate function returns undefined", () => {
-      const { container } = render(() => <Radio value={true} validate={() => undefined} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Radio value={true} 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/checkbox/RadioGroup.spec.tsx

@@ -1,25 +1,34 @@
 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 { RadioGroup } from "../../../../src/components/form-control/checkbox/RadioGroup";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("RadioGroup component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
   describe("basic rendering", () => {
     it("renders the container", () => {
       const { container } = render(() => (
-        <RadioGroup>
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup>
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(container.querySelector("div")).toBeTruthy();
     });
 
     it("renders items as radios", () => {
       const { getAllByRole } = render(() => (
-        <RadioGroup>
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-          <RadioGroup.Item value="b">B</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup>
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+            <RadioGroup.Item value="b">B</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getAllByRole("radio").length).toBe(2);
     });
@@ -28,10 +37,12 @@ describe("RadioGroup component", () => {
   describe("controlled pattern", () => {
     it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
-        <RadioGroup value="a">
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-          <RadioGroup.Item value="b">B</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup value="a">
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+            <RadioGroup.Item value="b">B</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       const radios = getAllByRole("radio");
       expect(radios[0].getAttribute("aria-checked")).toBe("true");
@@ -41,9 +52,11 @@ describe("RadioGroup component", () => {
     it("calls onValueChange on selection", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
-        <RadioGroup value={undefined} onValueChange={handleChange}>
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup value={undefined} onValueChange={handleChange}>
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       fireEvent.click(getAllByRole("radio")[0]);
       expect(handleChange).toHaveBeenCalledWith("a");
@@ -52,9 +65,11 @@ describe("RadioGroup component", () => {
     it("updates when external state changes", () => {
       const [value, setValue] = createSignal<string | undefined>(undefined);
       const { getAllByRole } = render(() => (
-        <RadioGroup value={value()} onValueChange={setValue}>
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup value={value()} onValueChange={setValue}>
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getAllByRole("radio")[0].getAttribute("aria-checked")).toBe("false");
       setValue("a");
@@ -71,36 +86,44 @@ describe("RadioGroup component", () => {
 
     it("sets error message when required and no item selected", () => {
       const { container } = render(() => (
-        <RadioGroup required value={undefined}>
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup required value={undefined}>
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
     });
 
     it("is valid when required and item is selected", () => {
       const { container } = render(() => (
-        <RadioGroup required value="a">
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup required value="a">
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <RadioGroup value="a" validate={() => "커스텀 에러"}>
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup value="a" validate={() => "커스텀 에러"}>
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
     });
 
     it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
-        <RadioGroup value="a" validate={() => undefined}>
-          <RadioGroup.Item value="a">A</RadioGroup.Item>
-        </RadioGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <RadioGroup value="a" validate={() => undefined}>
+            <RadioGroup.Item value="a">A</RadioGroup.Item>
+          </RadioGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });

package/tests/components/form-control/color-picker/ColorPicker.spec.tsx

@@ -1,19 +1,24 @@
 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 { ColorPicker } from "../../../../src/components/form-control/color-picker/ColorPicker";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("ColorPicker component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
   describe("basic rendering", () => {
     it("renders input type=color", () => {
-      const { container } = render(() => <ColorPicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("color");
     });
 
     it("defaults to #000000", () => {
-      const { container } = render(() => <ColorPicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("#000000");
     });
@@ -23,7 +28,9 @@ describe("ColorPicker component", () => {
     it("calls onValueChange on color change", () => {
       const handleChange = vi.fn();
       const { container } = render(() => (
-        <ColorPicker value="#000000" onValueChange={handleChange} />
+        <ConfigProvider clientName="test"><I18nProvider>
+          <ColorPicker value="#000000" onValueChange={handleChange} />
+        </I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -34,7 +41,7 @@ describe("ColorPicker component", () => {
 
     it("updates input value when external state changes", () => {
       const [value, setValue] = createSignal("#ff0000");
-      const { container } = render(() => <ColorPicker value={value()} onValueChange={setValue} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       expect(input.value).toBe("#ff0000");
@@ -46,13 +53,13 @@ describe("ColorPicker component", () => {
 
   describe("disabled state", () => {
     it("disables input when disabled=true", () => {
-      const { container } = render(() => <ColorPicker disabled />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker disabled /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.disabled).toBe(true);
     });
 
     it("applies disabled style", () => {
-      const { container } = render(() => <ColorPicker disabled />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker disabled /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.classList.contains("cursor-default")).toBe(true);
     });
@@ -61,7 +68,7 @@ describe("ColorPicker component", () => {
   describe("class merging", () => {
     it("merges custom classes", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <ColorPicker class="my-custom-class" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.classList.contains("my-custom-class")).toBe(true);
     });
@@ -69,23 +76,25 @@ describe("ColorPicker component", () => {
 
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
-      const { container } = render(() => <ColorPicker required value={undefined} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker 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(() => <ColorPicker required value="#ff0000" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><ColorPicker required value="#ff0000" /></I18nProvider></ConfigProvider>);
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
     });
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <ColorPicker
-          validate={(v) => (v === "#000000" ? "검정색은 사용할 수 없습니다" : undefined)}
-          value="#000000"
-        />
+        <ConfigProvider clientName="test"><I18nProvider>
+          <ColorPicker
+            validate={(v) => (v === "#000000" ? "검정색은 사용할 수 없습니다" : undefined)}
+            value="#000000"
+          />
+        </I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("검정색은 사용할 수 없습니다");