@simplysm/solid 13.0.71 → 13.0.74

package/tests/components/feedback/notification/NotificationContext.spec.tsx

@@ -3,6 +3,7 @@ import { createRoot } from "solid-js";
 import { render, waitFor } from "@solidjs/testing-library";
 import { NotificationProvider } from "../../../../src/components/feedback/notification/NotificationProvider";
 import { ConfigContext } from "../../../../src/providers/ConfigContext";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
 import {
   useNotification,
   type NotificationContextValue,
@@ -27,12 +28,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -45,12 +48,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -70,12 +75,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -96,12 +103,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -125,12 +134,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -153,12 +164,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -179,12 +192,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -201,12 +216,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -232,12 +249,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -254,12 +273,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -279,12 +300,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -308,12 +331,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 
@@ -337,12 +362,14 @@ describe("NotificationProvider", () => {
 
     render(() => (
       <ConfigContext.Provider value={{ clientName: "testApp" }}>
-        <NotificationProvider>
-          {(() => {
-            notification = useNotification();
-            return null;
-          })()}
-        </NotificationProvider>
+        <I18nProvider>
+          <NotificationProvider>
+            {(() => {
+              notification = useNotification();
+              return null;
+            })()}
+          </NotificationProvider>
+        </I18nProvider>
       </ConfigContext.Provider>
     ));
 

package/tests/components/form-control/checkbox/Checkbox.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 { Checkbox } from "../../../../src/components/form-control/checkbox/Checkbox";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("Checkbox component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
   describe("basic rendering", () => {
     it("renders with checkbox role", () => {
-      const { getByRole } = render(() => <Checkbox />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
       expect(getByRole("checkbox")).toBeTruthy();
     });
 
     it("renders children as label", () => {
-      const { getByText } = render(() => <Checkbox>동의합니다</Checkbox>);
+      const { getByText } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox>동의합니다</Checkbox></I18nProvider></ConfigProvider>);
       expect(getByText("동의합니다")).toBeTruthy();
     });
 
     it("defaults to unchecked", () => {
-      const { getByRole } = render(() => <Checkbox />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
       expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
     });
   });
 
   describe("click behavior", () => {
     it("toggles checked state on click", () => {
-      const { getByRole } = render(() => <Checkbox />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
       const checkbox = getByRole("checkbox");
 
       fireEvent.click(checkbox);
@@ -34,7 +39,7 @@ describe("Checkbox component", () => {
     });
 
     it("does not change when disabled", () => {
-      const { getByRole } = render(() => <Checkbox disabled />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox disabled /></I18nProvider></ConfigProvider>);
       const checkbox = getByRole("checkbox");
 
       fireEvent.click(checkbox);
@@ -44,7 +49,7 @@ describe("Checkbox component", () => {
 
   describe("keyboard behavior", () => {
     it("toggles with Space key", () => {
-      const { getByRole } = render(() => <Checkbox />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
       const checkbox = getByRole("checkbox");
 
       fireEvent.keyDown(checkbox, { key: " " });
@@ -57,13 +62,13 @@ describe("Checkbox component", () => {
 
   describe("controlled pattern", () => {
     it("reflects value prop as checked state", () => {
-      const { getByRole } = render(() => <Checkbox value={true} />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox value={true} /></I18nProvider></ConfigProvider>);
       expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
     });
 
     it("calls onValueChange on click", () => {
       const handleChange = vi.fn();
-      const { getByRole } = render(() => <Checkbox value={false} onValueChange={handleChange} />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox value={false} onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
 
       fireEvent.click(getByRole("checkbox"));
       expect(handleChange).toHaveBeenCalledWith(true);
@@ -71,7 +76,7 @@ describe("Checkbox component", () => {
 
     it("updates when external state changes", () => {
       const [value, setValue] = createSignal(false);
-      const { getByRole } = render(() => <Checkbox value={value()} onValueChange={setValue} />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>);
 
       expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
 
@@ -82,21 +87,21 @@ describe("Checkbox component", () => {
 
   describe("style variants", () => {
     it("applies different styles per size", () => {
-      const { getByRole: getDefault } = render(() => <Checkbox />);
-      const { getByRole: getSm } = render(() => <Checkbox size="sm" />);
+      const { getByRole: getDefault } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
+      const { getByRole: getSm } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox size="sm" /></I18nProvider></ConfigProvider>);
 
       expect(getDefault("checkbox").className).not.toBe(getSm("checkbox").className);
     });
 
     it("applies different styles when inset", () => {
-      const { getByRole: getDefault } = render(() => <Checkbox />);
-      const { getByRole: getInset } = render(() => <Checkbox inset />);
+      const { getByRole: getDefault } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox /></I18nProvider></ConfigProvider>);
+      const { getByRole: getInset } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox inset /></I18nProvider></ConfigProvider>);
 
       expect(getDefault("checkbox").className).not.toBe(getInset("checkbox").className);
     });
 
     it("applies disabled style", () => {
-      const { getByRole } = render(() => <Checkbox disabled />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox disabled /></I18nProvider></ConfigProvider>);
       expect(getByRole("checkbox").classList.contains("opacity-30")).toBe(true);
     });
   });
@@ -104,32 +109,32 @@ describe("Checkbox component", () => {
   describe("class merging", () => {
     it("merges custom classes", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { getByRole } = render(() => <Checkbox class="my-custom-class" />);
+      const { getByRole } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox class="my-custom-class" /></I18nProvider></ConfigProvider>);
       expect(getByRole("checkbox").classList.contains("my-custom-class")).toBe(true);
     });
   });
 
   describe("validation", () => {
     it("sets error message when required and unchecked", () => {
-      const { container } = render(() => <Checkbox required value={false} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox 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 checked", () => {
-      const { container } = render(() => <Checkbox required value={true} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox 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(() => <Checkbox value={true} validate={() => "커스텀 에러"} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox 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(() => <Checkbox value={true} validate={() => undefined} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><Checkbox 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/CheckboxGroup.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 { CheckboxGroup } from "../../../../src/components/form-control/checkbox/CheckboxGroup";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("CheckboxGroup component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
   describe("basic rendering", () => {
     it("renders the container", () => {
       const { container } = render(() => (
-        <CheckboxGroup>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(container.querySelector("div")).toBeTruthy();
     });
 
     it("renders items as checkboxes", () => {
       const { getAllByRole } = render(() => (
-        <CheckboxGroup>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-          <CheckboxGroup.Item value="b">B</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+            <CheckboxGroup.Item value="b">B</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getAllByRole("checkbox").length).toBe(2);
     });
@@ -28,10 +37,12 @@ describe("CheckboxGroup component", () => {
   describe("controlled pattern", () => {
     it("reflects value prop as selected state", () => {
       const { getAllByRole } = render(() => (
-        <CheckboxGroup value={["a"]}>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-          <CheckboxGroup.Item value="b">B</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup value={["a"]}>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+            <CheckboxGroup.Item value="b">B</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       const checkboxes = getAllByRole("checkbox");
       expect(checkboxes[0].getAttribute("aria-checked")).toBe("true");
@@ -41,9 +52,11 @@ describe("CheckboxGroup component", () => {
     it("calls onValueChange on toggle", () => {
       const handleChange = vi.fn();
       const { getAllByRole } = render(() => (
-        <CheckboxGroup value={[]} onValueChange={handleChange}>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup value={[]} onValueChange={handleChange}>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       fireEvent.click(getAllByRole("checkbox")[0]);
       expect(handleChange).toHaveBeenCalledWith(["a"]);
@@ -52,9 +65,11 @@ describe("CheckboxGroup component", () => {
     it("updates when external state changes", () => {
       const [value, setValue] = createSignal<string[]>([]);
       const { getAllByRole } = render(() => (
-        <CheckboxGroup value={value()} onValueChange={setValue}>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup value={value()} onValueChange={setValue}>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getAllByRole("checkbox")[0].getAttribute("aria-checked")).toBe("false");
       setValue(["a"]);
@@ -71,36 +86,44 @@ describe("CheckboxGroup component", () => {
 
     it("sets error message when required and no item selected", () => {
       const { container } = render(() => (
-        <CheckboxGroup required value={[]}>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup required value={[]}>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
     });
 
     it("is valid when required and item is selected", () => {
       const { container } = render(() => (
-        <CheckboxGroup required value={["a"]}>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup required value={["a"]}>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <CheckboxGroup value={["a"]} validate={() => "커스텀 에러"}>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup value={["a"]} validate={() => "커스텀 에러"}>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
     });
 
     it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
-        <CheckboxGroup value={["a"]} validate={() => undefined}>
-          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
-        </CheckboxGroup>
+        <ConfigProvider clientName="test"><I18nProvider>
+          <CheckboxGroup value={["a"]} validate={() => undefined}>
+            <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          </CheckboxGroup>
+        </I18nProvider></ConfigProvider>
       ));
       expect(getGroupHiddenInput(container).validity.valid).toBe(true);
     });