@simplysm/solid 13.0.0-beta.6 → 13.0.1

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

@@ -1,305 +0,0 @@
-import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
-import { createSignal } from "solid-js";
-import { DateOnly } from "@simplysm/core-common";
-import { DatePicker } from "../../../../src/components/form-control/field/DatePicker";
-
-describe("DatePicker 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("unit=year일 때 input type=number가 렌더링된다", () => {
-      const { container } = render(() => <DatePicker unit="year" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("number");
-    });
-
-    it("unit=month일 때 input unit=month가 렌더링된다", () => {
-      const { container } = render(() => <DatePicker unit="month" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("month");
-    });
-
-    it("unit=date일 때 input unit=date가 렌더링된다", () => {
-      const { container } = render(() => <DatePicker unit="date" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("date");
-    });
-
-    it("기본 unit은 date이다", () => {
-      const { container } = render(() => <DatePicker />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("date");
-    });
-  });
-
-  describe("값 변환", () => {
-    it("DateOnly 값이 year 타입에서 yyyy 형식으로 표시된다", () => {
-      const dateOnly = new DateOnly(2025, 3, 15);
-      const { container } = render(() => <DatePicker unit="year" value={dateOnly} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("2025");
-    });
-
-    it("DateOnly 값이 month 타입에서 yyyy-MM 형식으로 표시된다", () => {
-      const dateOnly = new DateOnly(2025, 3, 15);
-      const { container } = render(() => <DatePicker unit="month" value={dateOnly} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("2025-03");
-    });
-
-    it("DateOnly 값이 date 타입에서 yyyy-MM-dd 형식으로 표시된다", () => {
-      const dateOnly = new DateOnly(2025, 3, 15);
-      const { container } = render(() => <DatePicker unit="date" value={dateOnly} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("2025-03-15");
-    });
-
-    it("year 타입 입력 시 DateOnly로 변환되어 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const { container } = render(() => <DatePicker unit="year" onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.change(input, { target: { value: "2025" } });
-
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      const result = handleChange.mock.calls[0][0] as DateOnly;
-      expect(result.year).toBe(2025);
-      expect(result.month).toBe(1);
-      expect(result.day).toBe(1);
-    });
-
-    it("month 타입 입력 시 DateOnly로 변환되어 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const { container } = render(() => <DatePicker unit="month" onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.change(input, { target: { value: "2025-03" } });
-
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      const result = handleChange.mock.calls[0][0] as DateOnly;
-      expect(result.year).toBe(2025);
-      expect(result.month).toBe(3);
-      expect(result.day).toBe(1);
-    });
-
-    it("date 타입 입력 시 DateOnly로 변환되어 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const { container } = render(() => <DatePicker unit="date" onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.change(input, { target: { value: "2025-03-15" } });
-
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      const result = handleChange.mock.calls[0][0] as DateOnly;
-      expect(result.year).toBe(2025);
-      expect(result.month).toBe(3);
-      expect(result.day).toBe(15);
-    });
-
-    it("빈 값 입력 시 undefined가 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const dateOnly = new DateOnly(2025, 3, 15);
-      const { container } = render(() => <DatePicker unit="date" value={dateOnly} onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.change(input, { target: { value: "" } });
-
-      expect(handleChange).toHaveBeenCalledWith(undefined);
-    });
-  });
-
-  describe("min/max 속성", () => {
-    it("min 속성이 date 타입에서 문자열로 변환된다", () => {
-      const minDate = new DateOnly(2025, 1, 1);
-      const { container } = render(() => <DatePicker unit="date" min={minDate} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.min).toBe("2025-01-01");
-    });
-
-    it("max 속성이 date 타입에서 문자열로 변환된다", () => {
-      const maxDate = new DateOnly(2025, 12, 31);
-      const { container } = render(() => <DatePicker unit="date" max={maxDate} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.max).toBe("2025-12-31");
-    });
-
-    it("min 속성이 month 타입에서 yyyy-MM 형식으로 변환된다", () => {
-      const minDate = new DateOnly(2025, 1, 15);
-      const { container } = render(() => <DatePicker unit="month" min={minDate} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.min).toBe("2025-01");
-    });
-
-    it("max 속성이 month 타입에서 yyyy-MM 형식으로 변환된다", () => {
-      const maxDate = new DateOnly(2025, 12, 15);
-      const { container } = render(() => <DatePicker unit="month" max={maxDate} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.max).toBe("2025-12");
-    });
-
-    it("min 속성이 year 타입에서 숫자로 변환된다", () => {
-      const minDate = new DateOnly(2020, 1, 1);
-      const { container } = render(() => <DatePicker unit="year" min={minDate} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.min).toBe("2020");
-    });
-
-    it("max 속성이 year 타입에서 숫자로 변환된다", () => {
-      const maxDate = new DateOnly(2030, 12, 31);
-      const { container } = render(() => <DatePicker unit="year" max={maxDate} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.max).toBe("2030");
-    });
-  });
-
-  describe("controlled 패턴", () => {
-    it("외부 상태 변경 시 input 값이 업데이트된다", () => {
-      const [value, setValue] = createSignal<DateOnly | undefined>(new DateOnly(2025, 1, 1));
-      const { container } = render(() => <DatePicker unit="date" value={value()} onValueChange={setValue} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      expect(input.value).toBe("2025-01-01");
-
-      setValue(new DateOnly(2025, 12, 31));
-      expect(input.value).toBe("2025-12-31");
-    });
-  });
-
-  describe("uncontrolled 패턴", () => {
-    it("onValueChange 없이 내부 상태로 값이 관리된다", () => {
-      const { container } = render(() => <DatePicker unit="date" value={new DateOnly(2025, 1, 1)} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      expect(input.value).toBe("2025-01-01");
-
-      fireEvent.change(input, { target: { value: "2025-06-15" } });
-      expect(input.value).toBe("2025-06-15");
-    });
-  });
-
-  describe("disabled 상태", () => {
-    it("disabled=true일 때 div로 렌더링된다", () => {
-      const { container } = render(() => <DatePicker disabled value={new DateOnly(2025, 3, 15)} />);
-      const input = container.querySelector("input");
-      const div = container.querySelector("div.sd-date-field");
-
-      expect(input).toBeFalsy();
-      expect(div).toBeTruthy();
-    });
-
-    it("disabled 상태에서 value가 표시된다", () => {
-      const { getByText } = render(() => <DatePicker unit="date" disabled value={new DateOnly(2025, 3, 15)} />);
-      expect(getByText("2025-03-15")).toBeTruthy();
-    });
-
-    it("disabled 스타일이 적용된다", () => {
-      const { container } = render(() => <DatePicker disabled value={new DateOnly(2025, 3, 15)} />);
-      const div = container.querySelector("div.sd-date-field") as HTMLElement;
-      expect(div.classList.contains("bg-base-100")).toBe(true);
-    });
-  });
-
-  describe("readonly 상태", () => {
-    it("readonly=true일 때 div로 렌더링된다", () => {
-      const { container } = render(() => <DatePicker readonly value={new DateOnly(2025, 3, 15)} />);
-      const input = container.querySelector("input");
-      const div = container.querySelector("div.sd-date-field");
-
-      expect(input).toBeFalsy();
-      expect(div).toBeTruthy();
-    });
-
-    it("readonly 상태에서 value가 표시된다", () => {
-      const { getByText } = render(() => <DatePicker unit="date" readonly value={new DateOnly(2025, 3, 15)} />);
-      expect(getByText("2025-03-15")).toBeTruthy();
-    });
-  });
-
-  describe("error 스타일", () => {
-    it("error=true일 때 에러 스타일이 적용된다", () => {
-      const { container } = render(() => <DatePicker error />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("border-danger-500")).toBe(true);
-    });
-  });
-
-  describe("size 옵션", () => {
-    it("size=sm일 때 작은 padding이 적용된다", () => {
-      const { container } = render(() => <DatePicker size="sm" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-0.5")).toBe(true);
-    });
-
-    it("size=lg일 때 큰 padding이 적용된다", () => {
-      const { container } = render(() => <DatePicker size="lg" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
-  describe("inset 스타일", () => {
-    it("inset=true일 때 테두리가 없고 inset 배경색이 적용된다", () => {
-      const { container } = render(() => <DatePicker inset />);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("border-none")).toBe(true);
-      expect(outer.classList.contains("bg-primary-50")).toBe(true);
-    });
-
-    it("inset + readonly일 때 content div가 보이고 input이 없다", () => {
-      const { container } = render(() => <DatePicker inset readonly value={new DateOnly(2025, 3, 15)} />);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-
-      const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.textContent).toBe("2025-03-15");
-
-      expect(outer.querySelector("input")).toBeFalsy();
-    });
-
-    it("inset + editable일 때 content div(hidden)와 input이 모두 존재한다", () => {
-      const { container } = render(() => <DatePicker inset value={new DateOnly(2025, 3, 15)} />);
-      const outer = container.firstChild as HTMLElement;
-
-      const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.style.visibility).toBe("hidden");
-
-      const input = outer.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.value).toBe("2025-03-15");
-    });
-
-    it("inset + 빈 값일 때 content div에 NBSP가 표시된다", () => {
-      const { container } = render(() => <DatePicker inset readonly />);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-date-field-content]") as HTMLElement;
-      expect(contentDiv.textContent).toBe("\u00A0");
-    });
-  });
-
-  describe("다크 모드 스타일", () => {
-    it("다크 모드 border 스타일이 적용된다", () => {
-      const { container } = render(() => <DatePicker />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-    });
-
-    it("다크 모드 background 스타일이 적용된다", () => {
-      const { container } = render(() => <DatePicker />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:bg-base-900")).toBe(true);
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 기존 스타일과 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <DatePicker class="my-custom-class" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-});

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

@@ -1,287 +0,0 @@
-import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
-import { createSignal } from "solid-js";
-import { DateTime } from "@simplysm/core-common";
-import { DateTimePicker } from "../../../../src/components/form-control/field/DateTimePicker";
-
-describe("DateTimePicker 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("unit=minute일 때 input type=datetime-local이 렌더링된다", () => {
-      const { container } = render(() => <DateTimePicker unit="minute" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("unit=second일 때 input type=datetime-local이 렌더링된다", () => {
-      const { container } = render(() => <DateTimePicker unit="second" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("기본 unit은 minute이다", () => {
-      const { container } = render(() => <DateTimePicker />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("datetime-local");
-    });
-
-    it("unit=second일 때 step=1이 설정된다", () => {
-      const { container } = render(() => <DateTimePicker unit="second" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.step).toBe("1");
-    });
-
-    it("unit=minute일 때 step이 설정되지 않는다", () => {
-      const { container } = render(() => <DateTimePicker unit="minute" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.step).toBe("");
-    });
-  });
-
-  describe("값 변환", () => {
-    it("DateTime 값이 minute 단위에서 yyyy-MM-ddTHH:mm 형식으로 표시된다", () => {
-      const dateTime = new DateTime(2025, 3, 15, 10, 30, 45);
-      const { container } = render(() => <DateTimePicker unit="minute" value={dateTime} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("2025-03-15T10:30");
-    });
-
-    it("DateTime 값이 second 단위에서 yyyy-MM-ddTHH:mm:ss 형식으로 표시된다", () => {
-      const dateTime = new DateTime(2025, 3, 15, 10, 30, 45);
-      const { container } = render(() => <DateTimePicker unit="second" value={dateTime} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("2025-03-15T10:30:45");
-    });
-
-    it("minute 단위 입력 시 DateTime으로 변환되어 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const { container } = render(() => <DateTimePicker unit="minute" onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.change(input, { target: { value: "2025-03-15T10:30" } });
-
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      const result = handleChange.mock.calls[0][0] as DateTime;
-      expect(result.year).toBe(2025);
-      expect(result.month).toBe(3);
-      expect(result.day).toBe(15);
-      expect(result.hour).toBe(10);
-      expect(result.minute).toBe(30);
-      expect(result.second).toBe(0);
-    });
-
-    it("second 단위 입력 시 DateTime으로 변환되어 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const { container } = render(() => <DateTimePicker unit="second" onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.change(input, { target: { value: "2025-03-15T10:30:45" } });
-
-      expect(handleChange).toHaveBeenCalledTimes(1);
-      const result = handleChange.mock.calls[0][0] as DateTime;
-      expect(result.year).toBe(2025);
-      expect(result.month).toBe(3);
-      expect(result.day).toBe(15);
-      expect(result.hour).toBe(10);
-      expect(result.minute).toBe(30);
-      expect(result.second).toBe(45);
-    });
-
-    it("빈 값 입력 시 undefined가 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const dateTime = new DateTime(2025, 3, 15, 10, 30, 45);
-      const { container } = render(() => (
-        <DateTimePicker unit="minute" value={dateTime} onValueChange={handleChange} />
-      ));
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.change(input, { target: { value: "" } });
-
-      expect(handleChange).toHaveBeenCalledWith(undefined);
-    });
-  });
-
-  describe("min/max 속성", () => {
-    it("min 속성이 minute 단위에서 문자열로 변환된다", () => {
-      const minDateTime = new DateTime(2025, 1, 1, 0, 0, 0);
-      const { container } = render(() => <DateTimePicker unit="minute" min={minDateTime} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.min).toBe("2025-01-01T00:00");
-    });
-
-    it("max 속성이 minute 단위에서 문자열로 변환된다", () => {
-      const maxDateTime = new DateTime(2025, 12, 31, 23, 59, 0);
-      const { container } = render(() => <DateTimePicker unit="minute" max={maxDateTime} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.max).toBe("2025-12-31T23:59");
-    });
-
-    it("min 속성이 second 단위에서 초 단위까지 포함된다", () => {
-      const minDateTime = new DateTime(2025, 1, 1, 0, 0, 30);
-      const { container } = render(() => <DateTimePicker unit="second" min={minDateTime} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.min).toBe("2025-01-01T00:00:30");
-    });
-
-    it("max 속성이 second 단위에서 초 단위까지 포함된다", () => {
-      const maxDateTime = new DateTime(2025, 12, 31, 23, 59, 59);
-      const { container } = render(() => <DateTimePicker unit="second" max={maxDateTime} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.max).toBe("2025-12-31T23:59:59");
-    });
-  });
-
-  describe("controlled 패턴", () => {
-    it("외부 상태 변경 시 input 값이 업데이트된다", () => {
-      const [value, setValue] = createSignal<DateTime | undefined>(new DateTime(2025, 1, 1, 10, 0, 0));
-      const { container } = render(() => <DateTimePicker unit="minute" value={value()} onValueChange={setValue} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      expect(input.value).toBe("2025-01-01T10:00");
-
-      setValue(new DateTime(2025, 12, 31, 23, 59, 0));
-      expect(input.value).toBe("2025-12-31T23:59");
-    });
-  });
-
-  describe("uncontrolled 패턴", () => {
-    it("onValueChange 없이 내부 상태로 값이 관리된다", () => {
-      const { container } = render(() => <DateTimePicker unit="minute" value={new DateTime(2025, 1, 1, 10, 0, 0)} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      expect(input.value).toBe("2025-01-01T10:00");
-
-      fireEvent.change(input, { target: { value: "2025-06-15T14:30" } });
-      expect(input.value).toBe("2025-06-15T14:30");
-    });
-  });
-
-  describe("disabled 상태", () => {
-    it("disabled=true일 때 div로 렌더링된다", () => {
-      const { container } = render(() => <DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} />);
-      const input = container.querySelector("input");
-      const div = container.querySelector("div.sd-datetime-field");
-
-      expect(input).toBeFalsy();
-      expect(div).toBeTruthy();
-    });
-
-    it("disabled 상태에서 value가 표시된다", () => {
-      const { getByText } = render(() => (
-        <DateTimePicker unit="minute" disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} />
-      ));
-      expect(getByText("2025-03-15T10:30")).toBeTruthy();
-    });
-
-    it("disabled 스타일이 적용된다", () => {
-      const { container } = render(() => <DateTimePicker disabled value={new DateTime(2025, 3, 15, 10, 30, 0)} />);
-      const div = container.querySelector("div.sd-datetime-field") as HTMLElement;
-      expect(div.classList.contains("bg-base-100")).toBe(true);
-    });
-  });
-
-  describe("readonly 상태", () => {
-    it("readonly=true일 때 div로 렌더링된다", () => {
-      const { container } = render(() => <DateTimePicker readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} />);
-      const input = container.querySelector("input");
-      const div = container.querySelector("div.sd-datetime-field");
-
-      expect(input).toBeFalsy();
-      expect(div).toBeTruthy();
-    });
-
-    it("readonly 상태에서 value가 표시된다", () => {
-      const { getByText } = render(() => (
-        <DateTimePicker unit="minute" readonly value={new DateTime(2025, 3, 15, 10, 30, 0)} />
-      ));
-      expect(getByText("2025-03-15T10:30")).toBeTruthy();
-    });
-  });
-
-  describe("error 스타일", () => {
-    it("error=true일 때 에러 스타일이 적용된다", () => {
-      const { container } = render(() => <DateTimePicker error />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("border-danger-500")).toBe(true);
-    });
-  });
-
-  describe("size 옵션", () => {
-    it("size=sm일 때 작은 padding이 적용된다", () => {
-      const { container } = render(() => <DateTimePicker size="sm" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-0.5")).toBe(true);
-    });
-
-    it("size=lg일 때 큰 padding이 적용된다", () => {
-      const { container } = render(() => <DateTimePicker size="lg" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
-  describe("inset 스타일", () => {
-    it("inset=true일 때 테두리가 없고 inset 배경색이 적용된다", () => {
-      const { container } = render(() => <DateTimePicker inset />);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("border-none")).toBe(true);
-      expect(outer.classList.contains("bg-primary-50")).toBe(true);
-    });
-
-    it("inset + readonly일 때 content div가 보이고 input이 없다", () => {
-      const { container } = render(() => (
-        <DateTimePicker inset readonly value={new DateTime(2025, 3, 15, 14, 30, 0)} />
-      ));
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-
-      const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.textContent).toBe("2025-03-15T14:30");
-
-      expect(outer.querySelector("input")).toBeFalsy();
-    });
-
-    it("inset + editable일 때 content div(hidden)와 input이 모두 존재한다", () => {
-      const { container } = render(() => <DateTimePicker inset value={new DateTime(2025, 3, 15, 14, 30, 0)} />);
-      const outer = container.firstChild as HTMLElement;
-
-      const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.style.visibility).toBe("hidden");
-
-      expect(outer.querySelector("input")).toBeTruthy();
-    });
-
-    it("inset + 빈 값일 때 content div에 NBSP가 표시된다", () => {
-      const { container } = render(() => <DateTimePicker inset readonly />);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-datetime-field-content]") as HTMLElement;
-      expect(contentDiv.textContent).toBe("\u00A0");
-    });
-  });
-
-  describe("다크 모드 스타일", () => {
-    it("다크 모드 border 스타일이 적용된다", () => {
-      const { container } = render(() => <DateTimePicker />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-    });
-
-    it("다크 모드 background 스타일이 적용된다", () => {
-      const { container } = render(() => <DateTimePicker />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:bg-base-900")).toBe(true);
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 기존 스타일과 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <DateTimePicker class="my-custom-class" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-});