@simplysm/solid 13.0.71 → 13.0.74

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

@@ -1,40 +1,46 @@
 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 { DateOnly } from "@simplysm/core-common";
 import { DatePicker } from "../../../../src/components/form-control/field/DatePicker";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DatePicker component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders input type=number when unit=year", () => {
-      const { container } = render(() => <DatePicker unit="year" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="year" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("number");
     });
 
     it("renders input type=month when unit=month", () => {
-      const { container } = render(() => <DatePicker unit="month" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="month" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("month");
     });
 
     it("renders input type=date when unit=date", () => {
-      const { container } = render(() => <DatePicker unit="date" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("date");
     });
 
     it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <DatePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.autocomplete).toBe("one-time-code");
     });
 
     it("defaults unit to date", () => {
-      const { container } = render(() => <DatePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.type).toBe("date");
     });
@@ -43,28 +49,28 @@ describe("DatePicker component", () => {
   describe("value conversion", () => {
     it("displays DateOnly in yyyy format for year type", () => {
       const dateOnly = new DateOnly(2025, 3, 15);
-      const { container } = render(() => <DatePicker unit="year" value={dateOnly} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="year" value={dateOnly} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("2025");
     });
 
     it("displays DateOnly in yyyy-MM format for month type", () => {
       const dateOnly = new DateOnly(2025, 3, 15);
-      const { container } = render(() => <DatePicker unit="month" value={dateOnly} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="month" value={dateOnly} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("2025-03");
     });
 
     it("displays DateOnly in yyyy-MM-dd format for date type", () => {
       const dateOnly = new DateOnly(2025, 3, 15);
-      const { container } = render(() => <DatePicker unit="date" value={dateOnly} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" value={dateOnly} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("2025-03-15");
     });
 
     it("passes DateOnly converted from year input to onValueChange", () => {
       const handleChange = vi.fn();
-      const { container } = render(() => <DatePicker unit="year" onValueChange={handleChange} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="year" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       fireEvent.change(input, { target: { value: "2025" } });
@@ -78,7 +84,7 @@ describe("DatePicker component", () => {
 
     it("passes DateOnly converted from month input to onValueChange", () => {
       const handleChange = vi.fn();
-      const { container } = render(() => <DatePicker unit="month" onValueChange={handleChange} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="month" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       fireEvent.change(input, { target: { value: "2025-03" } });
@@ -92,7 +98,7 @@ describe("DatePicker component", () => {
 
     it("passes DateOnly converted from date input to onValueChange", () => {
       const handleChange = vi.fn();
-      const { container } = render(() => <DatePicker unit="date" onValueChange={handleChange} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" onValueChange={handleChange} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
 
       fireEvent.change(input, { target: { value: "2025-03-15" } });
@@ -108,7 +114,7 @@ describe("DatePicker component", () => {
       const handleChange = vi.fn();
       const dateOnly = new DateOnly(2025, 3, 15);
       const { container } = render(() => (
-        <DatePicker unit="date" value={dateOnly} onValueChange={handleChange} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" value={dateOnly} onValueChange={handleChange} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -121,42 +127,42 @@ describe("DatePicker component", () => {
   describe("min/max props", () => {
     it("converts min to string for date type", () => {
       const minDate = new DateOnly(2025, 1, 1);
-      const { container } = render(() => <DatePicker unit="date" min={minDate} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" min={minDate} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.min).toBe("2025-01-01");
     });
 
     it("converts max to string for date type", () => {
       const maxDate = new DateOnly(2025, 12, 31);
-      const { container } = render(() => <DatePicker unit="date" max={maxDate} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" max={maxDate} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.max).toBe("2025-12-31");
     });
 
     it("converts min to yyyy-MM format for month type", () => {
       const minDate = new DateOnly(2025, 1, 15);
-      const { container } = render(() => <DatePicker unit="month" min={minDate} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="month" min={minDate} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.min).toBe("2025-01");
     });
 
     it("converts max to yyyy-MM format for month type", () => {
       const maxDate = new DateOnly(2025, 12, 15);
-      const { container } = render(() => <DatePicker unit="month" max={maxDate} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="month" max={maxDate} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.max).toBe("2025-12");
     });
 
     it("converts min to number for year type", () => {
       const minDate = new DateOnly(2020, 1, 1);
-      const { container } = render(() => <DatePicker unit="year" min={minDate} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="year" min={minDate} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.min).toBe("2020");
     });
 
     it("converts max to number for year type", () => {
       const maxDate = new DateOnly(2030, 12, 31);
-      const { container } = render(() => <DatePicker unit="year" max={maxDate} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="year" max={maxDate} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.max).toBe("2030");
     });
@@ -166,7 +172,7 @@ describe("DatePicker component", () => {
     it("updates input value when external state changes", () => {
       const [value, setValue] = createSignal<DateOnly | undefined>(new DateOnly(2025, 1, 1));
       const { container } = render(() => (
-        <DatePicker unit="date" value={value()} onValueChange={setValue} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -180,7 +186,7 @@ describe("DatePicker component", () => {
   describe("uncontrolled pattern", () => {
     it("manages value internally without onValueChange", () => {
       const { container } = render(() => (
-        <DatePicker unit="date" value={new DateOnly(2025, 1, 1)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" value={new DateOnly(2025, 1, 1)} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -193,7 +199,7 @@ describe("DatePicker component", () => {
 
   describe("disabled state", () => {
     it("renders as div when disabled=true", () => {
-      const { container } = render(() => <DatePicker disabled value={new DateOnly(2025, 3, 15)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker disabled value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-date-field");
 
@@ -203,13 +209,13 @@ describe("DatePicker component", () => {
 
     it("displays value when disabled", () => {
       const { getByText } = render(() => (
-        <DatePicker unit="date" disabled value={new DateOnly(2025, 3, 15)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" disabled value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15")).toBeTruthy();
     });
 
     it("applies disabled style", () => {
-      const { container } = render(() => <DatePicker disabled value={new DateOnly(2025, 3, 15)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker disabled value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
       const div = container.querySelector("div.sd-date-field") as HTMLElement;
       expect(div.classList.contains("bg-base-100")).toBe(true);
     });
@@ -217,7 +223,7 @@ describe("DatePicker component", () => {
 
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
-      const { container } = render(() => <DatePicker readonly value={new DateOnly(2025, 3, 15)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-date-field");
 
@@ -227,7 +233,7 @@ describe("DatePicker component", () => {
 
     it("displays value when readonly", () => {
       const { getByText } = render(() => (
-        <DatePicker unit="date" readonly value={new DateOnly(2025, 3, 15)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker unit="date" readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15")).toBeTruthy();
     });
@@ -235,13 +241,13 @@ describe("DatePicker component", () => {
 
   describe("size option", () => {
     it("applies small padding when size=sm", () => {
-      const { container } = render(() => <DatePicker size="sm" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker 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(() => <DatePicker size="lg" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker size="lg" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("py-2")).toBe(true);
     });
@@ -249,7 +255,7 @@ describe("DatePicker component", () => {
 
   describe("inset style", () => {
     it("applies relative to outer and inset style to content when inset=true", () => {
-      const { container } = render(() => <DatePicker inset />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
       expect(outer.classList.contains("border-none")).toBe(false);
@@ -261,7 +267,7 @@ describe("DatePicker component", () => {
 
     it("shows content div and no input when inset + readonly", () => {
       const { container } = render(() => (
-        <DatePicker inset readonly value={new DateOnly(2025, 3, 15)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readonly value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>
       ));
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
@@ -274,7 +280,7 @@ describe("DatePicker component", () => {
     });
 
     it("shows hidden content div and input when inset + editable", () => {
-      const { container } = render(() => <DatePicker inset value={new DateOnly(2025, 3, 15)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset value={new DateOnly(2025, 3, 15)} /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
 
       const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
@@ -287,7 +293,7 @@ describe("DatePicker component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <DatePicker inset readonly />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker inset readonly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -296,13 +302,13 @@ describe("DatePicker component", () => {
 
   describe("dark mode style", () => {
     it("applies dark mode border style", () => {
-      const { container } = render(() => <DatePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></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(() => <DatePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
     });
@@ -311,7 +317,7 @@ describe("DatePicker component", () => {
   describe("class merging", () => {
     it("merges custom class with existing styles", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <DatePicker class="my-custom-class" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("my-custom-class")).toBe(true);
     });
@@ -319,20 +325,20 @@ describe("DatePicker component", () => {
 
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
-      const { container } = render(() => <DatePicker required value={undefined} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker 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(() => <DatePicker required value={new DateOnly(2024, 1, 1)} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DatePicker required value={new DateOnly(2024, 1, 1)} /></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(() => (
-        <DatePicker min={new DateOnly(2024, 6, 1)} value={new DateOnly(2024, 1, 1)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker min={new DateOnly(2024, 6, 1)} value={new DateOnly(2024, 1, 1)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).not.toBe("");
@@ -340,7 +346,7 @@ describe("DatePicker component", () => {
 
     it("is valid when min is satisfied", () => {
       const { container } = render(() => (
-        <DatePicker min={new DateOnly(2024, 1, 1)} value={new DateOnly(2024, 6, 1)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker min={new DateOnly(2024, 1, 1)} value={new DateOnly(2024, 6, 1)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
@@ -348,7 +354,7 @@ describe("DatePicker component", () => {
 
     it("sets error message when max is violated", () => {
       const { container } = render(() => (
-        <DatePicker max={new DateOnly(2024, 6, 1)} value={new DateOnly(2024, 12, 1)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker max={new DateOnly(2024, 6, 1)} value={new DateOnly(2024, 12, 1)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).not.toBe("");
@@ -356,7 +362,7 @@ describe("DatePicker component", () => {
 
     it("is valid when max is satisfied", () => {
       const { container } = render(() => (
-        <DatePicker max={new DateOnly(2024, 12, 31)} value={new DateOnly(2024, 6, 1)} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker max={new DateOnly(2024, 12, 31)} value={new DateOnly(2024, 6, 1)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
@@ -364,7 +370,7 @@ describe("DatePicker component", () => {
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <DatePicker value={new DateOnly(2024, 1, 1)} validate={() => "커스텀 에러"} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker value={new DateOnly(2024, 1, 1)} validate={() => "커스텀 에러"} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
@@ -372,7 +378,7 @@ describe("DatePicker component", () => {
 
     it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
-        <DatePicker value={new DateOnly(2024, 1, 1)} validate={() => undefined} />
+        <ConfigProvider clientName="test"><I18nProvider><DatePicker value={new DateOnly(2024, 1, 1)} validate={() => undefined} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);