@simplysm/solid 13.0.71 → 13.0.74

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

@@ -1,45 +1,51 @@
 import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
+import { describe, it, expect, vi, beforeEach } from "vitest";
 import { createSignal } from "solid-js";
 import { DateTime } from "@simplysm/core-common";
 import { DateTimePicker } from "../../../../src/components/form-control/field/DateTimePicker";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
 
 describe("DateTimePicker component", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
   describe("basic rendering", () => {
     it("renders input type=datetime-local when unit=minute", () => {
-      const { container } = render(() => <DateTimePicker unit="minute" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("datetime-local");
     });
 
     it("renders input type=datetime-local when unit=second", () => {
-      const { container } = render(() => <DateTimePicker unit="second" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input).toBeTruthy();
       expect(input.type).toBe("datetime-local");
     });
 
     it("defaults unit to minute", () => {
-      const { container } = render(() => <DateTimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.type).toBe("datetime-local");
     });
 
     it("defaults autocomplete to one-time-code", () => {
-      const { container } = render(() => <DateTimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.autocomplete).toBe("one-time-code");
     });
 
     it("sets step=1 when unit=second", () => {
-      const { container } = render(() => <DateTimePicker unit="second" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.step).toBe("1");
     });
 
     it("does not set step when unit=minute", () => {
-      const { container } = render(() => <DateTimePicker unit="minute" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.step).toBe("");
     });
@@ -48,14 +54,14 @@ describe("DateTimePicker component", () => {
   describe("value conversion", () => {
     it("displays DateTime in yyyy-MM-ddTHH:mm format for minute unit", () => {
       const dateTime = new DateTime(2025, 3, 15, 10, 30, 45);
-      const { container } = render(() => <DateTimePicker unit="minute" value={dateTime} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" value={dateTime} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("2025-03-15T10:30");
     });
 
     it("displays DateTime in yyyy-MM-ddTHH:mm:ss format for second unit", () => {
       const dateTime = new DateTime(2025, 3, 15, 10, 30, 45);
-      const { container } = render(() => <DateTimePicker unit="second" value={dateTime} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" value={dateTime} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.value).toBe("2025-03-15T10:30:45");
     });
@@ -63,7 +69,7 @@ describe("DateTimePicker component", () => {
     it("passes DateTime converted from minute input to onValueChange", () => {
       const handleChange = vi.fn();
       const { container } = render(() => (
-        <DateTimePicker unit="minute" onValueChange={handleChange} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" onValueChange={handleChange} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -82,7 +88,7 @@ describe("DateTimePicker component", () => {
     it("passes DateTime converted from second input to onValueChange", () => {
       const handleChange = vi.fn();
       const { container } = render(() => (
-        <DateTimePicker unit="second" onValueChange={handleChange} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" onValueChange={handleChange} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -102,7 +108,7 @@ describe("DateTimePicker component", () => {
       const handleChange = vi.fn();
       const dateTime = new DateTime(2025, 3, 15, 10, 30, 45);
       const { container } = render(() => (
-        <DateTimePicker unit="minute" value={dateTime} onValueChange={handleChange} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" value={dateTime} onValueChange={handleChange} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -115,28 +121,28 @@ describe("DateTimePicker component", () => {
   describe("min/max props", () => {
     it("converts min to string for minute unit", () => {
       const minDateTime = new DateTime(2025, 1, 1, 0, 0, 0);
-      const { container } = render(() => <DateTimePicker unit="minute" min={minDateTime} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" min={minDateTime} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.min).toBe("2025-01-01T00:00");
     });
 
     it("converts max to string for minute unit", () => {
       const maxDateTime = new DateTime(2025, 12, 31, 23, 59, 0);
-      const { container } = render(() => <DateTimePicker unit="minute" max={maxDateTime} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" max={maxDateTime} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.max).toBe("2025-12-31T23:59");
     });
 
     it("includes seconds in min for second unit", () => {
       const minDateTime = new DateTime(2025, 1, 1, 0, 0, 30);
-      const { container } = render(() => <DateTimePicker unit="second" min={minDateTime} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" min={minDateTime} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.min).toBe("2025-01-01T00:00:30");
     });
 
     it("includes seconds in max for second unit", () => {
       const maxDateTime = new DateTime(2025, 12, 31, 23, 59, 59);
-      const { container } = render(() => <DateTimePicker unit="second" max={maxDateTime} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="second" max={maxDateTime} /></I18nProvider></ConfigProvider>);
       const input = container.querySelector("input") as HTMLInputElement;
       expect(input.max).toBe("2025-12-31T23:59:59");
     });
@@ -148,7 +154,7 @@ describe("DateTimePicker component", () => {
         new DateTime(2025, 1, 1, 10, 0, 0),
       );
       const { container } = render(() => (
-        <DateTimePicker unit="minute" value={value()} onValueChange={setValue} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" value={value()} onValueChange={setValue} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -162,7 +168,7 @@ describe("DateTimePicker component", () => {
   describe("uncontrolled pattern", () => {
     it("manages value internally without onValueChange", () => {
       const { container } = render(() => (
-        <DateTimePicker unit="minute" value={new DateTime(2025, 1, 1, 10, 0, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" value={new DateTime(2025, 1, 1, 10, 0, 0)} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input") as HTMLInputElement;
 
@@ -176,7 +182,7 @@ describe("DateTimePicker component", () => {
   describe("disabled state", () => {
     it("renders as div when disabled=true", () => {
       const { container } = render(() => (
-        <DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-datetime-field");
@@ -187,14 +193,14 @@ describe("DateTimePicker component", () => {
 
     it("displays value when disabled", () => {
       const { getByText } = render(() => (
-        <DateTimePicker unit="minute" disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15T10:30")).toBeTruthy();
     });
 
     it("applies disabled style", () => {
       const { container } = render(() => (
-        <DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const div = container.querySelector("div.sd-datetime-field") as HTMLElement;
       expect(div.classList.contains("bg-base-100")).toBe(true);
@@ -204,7 +210,7 @@ describe("DateTimePicker component", () => {
   describe("readonly state", () => {
     it("renders as div when readonly=true", () => {
       const { container } = render(() => (
-        <DateTimePicker readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const input = container.querySelector("input:not([aria-hidden])");
       const div = container.querySelector("div.sd-datetime-field");
@@ -215,7 +221,7 @@ describe("DateTimePicker component", () => {
 
     it("displays value when readonly", () => {
       const { getByText } = render(() => (
-        <DateTimePicker unit="minute" readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker unit="minute" readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       expect(getByText("2025-03-15T10:30")).toBeTruthy();
     });
@@ -223,13 +229,13 @@ describe("DateTimePicker component", () => {
 
   describe("size option", () => {
     it("applies small padding when size=sm", () => {
-      const { container } = render(() => <DateTimePicker size="sm" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker 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(() => <DateTimePicker size="lg" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker size="lg" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("py-2")).toBe(true);
     });
@@ -237,7 +243,7 @@ describe("DateTimePicker component", () => {
 
   describe("inset style", () => {
     it("applies relative to outer and inset style to content when inset=true", () => {
-      const { container } = render(() => <DateTimePicker inset />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
       expect(outer.classList.contains("border-none")).toBe(false);
@@ -249,7 +255,7 @@ describe("DateTimePicker component", () => {
 
     it("shows content div and no input when inset + readonly", () => {
       const { container } = render(() => (
-        <DateTimePicker inset readonly value={new DateTime(2025, 3, 15, 14, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readonly value={new DateTime(2025, 3, 15, 14, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const outer = container.firstChild as HTMLElement;
       expect(outer.classList.contains("relative")).toBe(true);
@@ -263,7 +269,7 @@ describe("DateTimePicker component", () => {
 
     it("shows hidden content div and input when inset + editable", () => {
       const { container } = render(() => (
-        <DateTimePicker inset value={new DateTime(2025, 3, 15, 14, 30, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset value={new DateTime(2025, 3, 15, 14, 30, 0)} /></I18nProvider></ConfigProvider>
       ));
       const outer = container.firstChild as HTMLElement;
 
@@ -275,7 +281,7 @@ describe("DateTimePicker component", () => {
     });
 
     it("shows NBSP in content div when inset + empty value", () => {
-      const { container } = render(() => <DateTimePicker inset readonly />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker inset readonly /></I18nProvider></ConfigProvider>);
       const outer = container.firstChild as HTMLElement;
       const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
       expect(contentDiv.textContent).toBe("\u00A0");
@@ -284,13 +290,13 @@ describe("DateTimePicker component", () => {
 
   describe("dark mode style", () => {
     it("applies dark mode border style", () => {
-      const { container } = render(() => <DateTimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></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(() => <DateTimePicker />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("dark:bg-primary-950/30")).toBe(true);
     });
@@ -299,7 +305,7 @@ describe("DateTimePicker component", () => {
   describe("class merging", () => {
     it("merges custom class with existing styles", () => {
       // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <DateTimePicker class="my-custom-class" />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker class="my-custom-class" /></I18nProvider></ConfigProvider>);
       const wrapper = container.firstChild as HTMLElement;
       expect(wrapper.classList.contains("my-custom-class")).toBe(true);
     });
@@ -307,14 +313,14 @@ describe("DateTimePicker component", () => {
 
   describe("validation", () => {
     it("sets error message when required and value is empty", () => {
-      const { container } = render(() => <DateTimePicker required value={undefined} />);
+      const { container } = render(() => <ConfigProvider clientName="test"><I18nProvider><DateTimePicker 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(() => (
-        <DateTimePicker required value={new DateTime(2024, 1, 1, 0, 0, 0)} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker required value={new DateTime(2024, 1, 1, 0, 0, 0)} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
@@ -322,10 +328,10 @@ describe("DateTimePicker component", () => {
 
     it("sets error message when min is violated", () => {
       const { container } = render(() => (
-        <DateTimePicker
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker
           min={new DateTime(2024, 6, 1, 0, 0, 0)}
           value={new DateTime(2024, 1, 1, 0, 0, 0)}
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).not.toBe("");
@@ -333,10 +339,10 @@ describe("DateTimePicker component", () => {
 
     it("is valid when min is satisfied", () => {
       const { container } = render(() => (
-        <DateTimePicker
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker
           min={new DateTime(2024, 1, 1, 0, 0, 0)}
           value={new DateTime(2024, 6, 1, 0, 0, 0)}
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
@@ -344,10 +350,10 @@ describe("DateTimePicker component", () => {
 
     it("sets error message when max is violated", () => {
       const { container } = render(() => (
-        <DateTimePicker
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker
           max={new DateTime(2024, 6, 1, 0, 0, 0)}
           value={new DateTime(2024, 12, 1, 0, 0, 0)}
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).not.toBe("");
@@ -355,10 +361,10 @@ describe("DateTimePicker component", () => {
 
     it("is valid when max is satisfied", () => {
       const { container } = render(() => (
-        <DateTimePicker
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker
           max={new DateTime(2024, 12, 31, 23, 59, 59)}
           value={new DateTime(2024, 6, 1, 0, 0, 0)}
-        />
+        /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);
@@ -366,7 +372,7 @@ describe("DateTimePicker component", () => {
 
     it("sets error message returned by validate function", () => {
       const { container } = render(() => (
-        <DateTimePicker value={new DateTime(2024, 1, 1, 0, 0, 0)} validate={() => "커스텀 에러"} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker value={new DateTime(2024, 1, 1, 0, 0, 0)} validate={() => "커스텀 에러"} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validationMessage).toBe("커스텀 에러");
@@ -374,7 +380,7 @@ describe("DateTimePicker component", () => {
 
     it("is valid when validate function returns undefined", () => {
       const { container } = render(() => (
-        <DateTimePicker value={new DateTime(2024, 1, 1, 0, 0, 0)} validate={() => undefined} />
+        <ConfigProvider clientName="test"><I18nProvider><DateTimePicker value={new DateTime(2024, 1, 1, 0, 0, 0)} validate={() => undefined} /></I18nProvider></ConfigProvider>
       ));
       const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
       expect(hiddenInput.validity.valid).toBe(true);