@simplysm/solid 13.0.69 → 13.0.70

package/tests/components/form-control/combobox/Combobox.spec.tsx

@@ -0,0 +1,253 @@
+import { render, fireEvent, waitFor } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach } from "vitest";
+import { Combobox } from "../../../../src/components/form-control/combobox/Combobox";
+
+describe("Combobox 컴포넌트", () => {
+  const mockLoadItems = vi.fn(() => Promise.resolve([]));
+
+  beforeEach(() => {
+    mockLoadItems.mockClear();
+  });
+
+  describe("basic rendering", () => {
+    it("renders trigger", () => {
+      const { getByRole } = render(() => (
+        <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />
+      ));
+      expect(getByRole("combobox")).not.toBeNull();
+    });
+
+    it("displays placeholder", () => {
+      const { container } = render(() => (
+        <Combobox
+          loadItems={mockLoadItems}
+          placeholder="검색하세요"
+          renderValue={(v) => <>{v}</>}
+        />
+      ));
+      const input = container.querySelector("input");
+      expect(input?.getAttribute("placeholder")).toBe("검색하세요");
+    });
+
+    it("input의 autocomplete 기본값은 one-time-code이다", () => {
+      const { container } = render(() => (
+        <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />
+      ));
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.autocomplete).toBe("one-time-code");
+    });
+
+    it("disabled일 때 aria-disabled가 설정된다", () => {
+      const { getByRole } = render(() => (
+        <Combobox loadItems={mockLoadItems} disabled renderValue={(v) => <>{v}</>} />
+      ));
+      expect(getByRole("combobox").getAttribute("aria-disabled")).toBe("true");
+    });
+  });
+
+  describe("dropdown opening/closing", () => {
+    it("입력 시 드롭다운이 열린다", async () => {
+      const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
+      const { container } = render(() => (
+        <Combobox loadItems={loadItems} renderValue={(v: { name: string }) => <>{v.name}</>} />
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "사" } });
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+    });
+
+    it("아이템 선택 시 드롭다운이 닫힌다", async () => {
+      const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
+      const { container, getByRole } = render(() => (
+        <Combobox loadItems={loadItems} renderValue={(v: { name: string }) => <>{v.name}</>} />
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "사" } });
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-combobox-item]")).not.toBeNull();
+      });
+
+      const item = document.querySelector("[data-combobox-item]") as HTMLElement;
+      fireEvent.click(item);
+
+      await waitFor(() => {
+        expect(getByRole("combobox").getAttribute("aria-expanded")).toBe("false");
+      });
+    });
+
+    it("Escape 키로 드롭다운이 닫힌다", async () => {
+      const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
+      const { container, getByRole } = render(() => (
+        <Combobox loadItems={loadItems} renderValue={(v: { name: string }) => <>{v.name}</>} />
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "사" } });
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
+      });
+
+      fireEvent.keyDown(getByRole("combobox"), { key: "Escape" });
+
+      await waitFor(() => {
+        expect(getByRole("combobox").getAttribute("aria-expanded")).toBe("false");
+      });
+    });
+  });
+
+  describe("값 선택", () => {
+    it("아이템 선택 시 onValueChange가 호출된다", async () => {
+      const handleChange = vi.fn();
+      const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "사과" }]));
+
+      const { container } = render(() => (
+        <Combobox
+          loadItems={loadItems}
+          onValueChange={handleChange}
+          renderValue={(v: { name: string }) => <>{v.name}</>}
+        />
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "사" } });
+
+      await waitFor(() => {
+        expect(document.querySelector("[data-combobox-item]")).not.toBeNull();
+      });
+
+      const item = document.querySelector("[data-combobox-item]") as HTMLElement;
+      fireEvent.click(item);
+
+      expect(handleChange).toHaveBeenCalledWith({ id: 1, name: "사과" });
+    });
+  });
+
+  describe("디바운스", () => {
+    it("입력 후 디바운스 시간이 지나면 loadItems가 호출된다", async () => {
+      const loadItems = vi.fn(() => Promise.resolve([{ id: 1, name: "결과" }]));
+
+      const { container } = render(() => (
+        <Combobox
+          loadItems={loadItems}
+          debounceMs={50}
+          renderValue={(v: { name: string }) => <>{v.name}</>}
+        />
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "검색어" } });
+
+      // 디바운스 후 loadItems가 호출됨
+      await waitFor(
+        () => {
+          expect(loadItems).toHaveBeenCalledWith("검색어");
+        },
+        { timeout: 200 },
+      );
+    });
+  });
+
+  describe("allowCustomValue", () => {
+    it("allowCustomValue가 true일 때 Enter로 커스텀 값 입력 가능", () => {
+      const handleChange = vi.fn();
+      const loadItems = vi.fn(() => Promise.resolve([]));
+
+      const { container, getByRole } = render(() => (
+        <Combobox
+          loadItems={loadItems}
+          onValueChange={handleChange}
+          allowCustomValue
+          renderValue={(v) => <>{v}</>}
+        />
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "새로운 값" } });
+      fireEvent.keyDown(getByRole("combobox"), { key: "Enter" });
+
+      expect(handleChange).toHaveBeenCalledWith("새로운 값");
+    });
+
+    it("parseCustomValue로 커스텀 값을 변환할 수 있다", () => {
+      const handleChange = vi.fn();
+      const loadItems = vi.fn(() => Promise.resolve([]));
+
+      const { container, getByRole } = render(() => (
+        <Combobox
+          loadItems={loadItems}
+          onValueChange={handleChange}
+          allowCustomValue
+          parseCustomValue={(text) => ({ name: text, custom: true })}
+          renderValue={(v: { name: string }) => <>{v.name}</>}
+        />
+      ));
+
+      const input = container.querySelector("input")!;
+      fireEvent.input(input, { target: { value: "테스트" } });
+      fireEvent.keyDown(getByRole("combobox"), { key: "Enter" });
+
+      expect(handleChange).toHaveBeenCalledWith({ name: "테스트", custom: true });
+    });
+  });
+
+  describe("validation", () => {
+    it("sets error message when required and value is empty", () => {
+      const { container } = render(() => (
+        <Combobox
+          loadItems={mockLoadItems}
+          required
+          value={undefined}
+          renderValue={(v) => <>{v}</>}
+        />
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("This field is required");
+    });
+
+    it("required일 때 값이 있으면 유효하다", () => {
+      const { container } = render(() => (
+        <Combobox
+          loadItems={mockLoadItems}
+          required
+          value="선택된 값"
+          renderValue={(v) => <>{v}</>}
+        />
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+
+    it("validate 함수가 에러를 반환하면 해당 메시지가 설정된다", () => {
+      const { container } = render(() => (
+        <Combobox
+          loadItems={mockLoadItems}
+          validate={(v) => (v === "invalid-val" ? "허용되지 않는 값입니다" : undefined)}
+          value="invalid-val"
+          renderValue={(v) => <>{v}</>}
+        />
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("허용되지 않는 값입니다");
+    });
+
+    it("validate 함수가 undefined를 반환하면 유효하다", () => {
+      const { container } = render(() => (
+        <Combobox
+          loadItems={mockLoadItems}
+          validate={(v) => (v === "invalid-val" ? "허용되지 않는 값입니다" : undefined)}
+          value="valid-val"
+          renderValue={(v) => <>{v}</>}
+        />
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+  });
+});

package/tests/components/form-control/combobox/ComboboxItem.spec.tsx

@@ -0,0 +1,88 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import {
+  ComboboxContext,
+  type ComboboxContextValue,
+} from "../../../../src/components/form-control/combobox/ComboboxContext";
+import { ComboboxItem } from "../../../../src/components/form-control/combobox/ComboboxItem";
+
+const createMockContext = (
+  overrides: Partial<ComboboxContextValue> = {},
+): ComboboxContextValue => ({
+  isSelected: () => false,
+  selectValue: vi.fn(),
+  closeDropdown: vi.fn(),
+  setItemTemplate: vi.fn(),
+  ...overrides,
+});
+
+describe("ComboboxItem 컴포넌트", () => {
+  it("아이템이 렌더링된다", () => {
+    const { getByRole } = render(() => (
+      <ComboboxContext.Provider value={createMockContext()}>
+        <ComboboxItem value="apple">사과</ComboboxItem>
+      </ComboboxContext.Provider>
+    ));
+
+    expect(getByRole("option")).not.toBeNull();
+    expect(getByRole("option").textContent).toContain("사과");
+  });
+
+  it("클릭 시 selectValue가 호출된다", () => {
+    const selectValue = vi.fn();
+    const { getByRole } = render(() => (
+      <ComboboxContext.Provider value={createMockContext({ selectValue })}>
+        <ComboboxItem value="apple">사과</ComboboxItem>
+      </ComboboxContext.Provider>
+    ));
+
+    fireEvent.click(getByRole("option"));
+    expect(selectValue).toHaveBeenCalledWith("apple");
+  });
+
+  it("선택된 상태일 때 aria-selected가 true", () => {
+    const { getByRole } = render(() => (
+      <ComboboxContext.Provider value={createMockContext({ isSelected: () => true })}>
+        <ComboboxItem value="apple">사과</ComboboxItem>
+      </ComboboxContext.Provider>
+    ));
+
+    expect(getByRole("option").getAttribute("aria-selected")).toBe("true");
+  });
+
+  it("disabled일 때 클릭이 동작하지 않는다", () => {
+    const selectValue = vi.fn();
+    const { getByRole } = render(() => (
+      <ComboboxContext.Provider value={createMockContext({ selectValue })}>
+        <ComboboxItem value="apple" disabled>
+          사과
+        </ComboboxItem>
+      </ComboboxContext.Provider>
+    ));
+
+    fireEvent.click(getByRole("option"));
+    expect(selectValue).not.toHaveBeenCalled();
+  });
+
+  it("클릭 시 closeDropdown이 호출된다", () => {
+    const closeDropdown = vi.fn();
+    const { getByRole } = render(() => (
+      <ComboboxContext.Provider value={createMockContext({ closeDropdown })}>
+        <ComboboxItem value="apple">사과</ComboboxItem>
+      </ComboboxContext.Provider>
+    ));
+
+    fireEvent.click(getByRole("option"));
+    expect(closeDropdown).toHaveBeenCalled();
+  });
+
+  it("data-combobox-item 속성이 설정된다", () => {
+    render(() => (
+      <ComboboxContext.Provider value={createMockContext()}>
+        <ComboboxItem value="apple">사과</ComboboxItem>
+      </ComboboxContext.Provider>
+    ));
+
+    expect(document.querySelector("[data-combobox-item]")).not.toBeNull();
+  });
+});

package/tests/components/form-control/date-range-picker/DateRangePicker.spec.tsx

@@ -0,0 +1,208 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { DateOnly } from "@simplysm/core-common";
+import { DateRangePicker } from "../../../../src/components/form-control/date-range-picker/DateRangePicker";
+import { I18nProvider } from "../../../../src/providers/i18n/I18nContext";
+import { ConfigProvider } from "../../../../src/providers/ConfigContext";
+
+describe("DateRangePicker 컴포넌트", () => {
+  beforeEach(() => {
+    localStorage.setItem("test.i18n-locale", JSON.stringify("en"));
+  });
+
+  afterEach(() => {
+    localStorage.removeItem("test.i18n-locale");
+  });
+
+  describe("basic rendering", () => {
+    it("Select와 DatePicker가 렌더링된다", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker />
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      expect(wrapper).toBeTruthy();
+
+      const select = wrapper?.querySelector("[data-select]");
+      expect(select).toBeTruthy();
+
+      const inputs = wrapper?.querySelectorAll("input");
+      expect(inputs?.length).toBeGreaterThan(0);
+    });
+
+    it("기본 periodType은 'range'이다", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker />
+        </I18nProvider></ConfigProvider>
+      ));
+      const wrapper = container.querySelector("[data-date-range-picker]");
+
+      // 범위 모드에서는 DatePicker 2개가 렌더링됨
+      const inputs = wrapper?.querySelectorAll("input[type='date']");
+      expect(inputs?.length).toBe(2);
+    });
+  });
+
+  describe("'range' 모드 렌더링", () => {
+    it("DatePicker 2개와 '~' 구분자가 렌더링된다", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker periodType="range" />
+        </I18nProvider></ConfigProvider>
+      ));
+      const wrapper = container.querySelector("[data-date-range-picker]");
+
+      const inputs = wrapper?.querySelectorAll("input[type='date']");
+      expect(inputs?.length).toBe(2);
+
+      // "~" 구분자 확인
+      expect(wrapper?.textContent).toContain("~");
+    });
+  });
+
+  describe("'day' 모드 렌더링", () => {
+    it("DatePicker 1개(type=date)가 렌더링되고 '~'가 없다", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker periodType="day" />
+        </I18nProvider></ConfigProvider>
+      ));
+      const wrapper = container.querySelector("[data-date-range-picker]");
+
+      const dateInputs = wrapper?.querySelectorAll("input[type='date']");
+      expect(dateInputs?.length).toBe(1);
+
+      // "~" 구분자가 없어야 함
+      const textNodes = wrapper?.textContent ?? "";
+      expect(textNodes).not.toContain("~");
+    });
+  });
+
+  describe("'month' 모드 렌더링", () => {
+    it("DatePicker 1개(type=month)가 렌더링되고 '~'가 없다", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker periodType="month" />
+        </I18nProvider></ConfigProvider>
+      ));
+      const wrapper = container.querySelector("[data-date-range-picker]");
+
+      const monthInputs = wrapper?.querySelectorAll("input[type='month']");
+      expect(monthInputs?.length).toBe(1);
+
+      // date 타입 input이 없어야 함
+      const dateInputs = wrapper?.querySelectorAll("input[type='date']");
+      expect(dateInputs?.length).toBe(0);
+
+      // "~" 구분자가 없어야 함
+      expect(wrapper?.textContent).not.toContain("~");
+    });
+  });
+
+  describe("from 변경 - 'day' 모드", () => {
+    it("from 변경 시 onToChange도 같은 값으로 호출된다", () => {
+      const onFromChange = vi.fn();
+      const onToChange = vi.fn();
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker
+          periodType="day"
+          from={new DateOnly(2025, 1, 1)}
+          onFromChange={onFromChange}
+          to={new DateOnly(2025, 1, 1)}
+          onToChange={onToChange}
+        />
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      const input = wrapper?.querySelector("input[type='date']") as HTMLInputElement;
+
+      // input에 새 값을 입력하여 from 변경 트리거
+      input.value = "2025-06-15";
+      input.dispatchEvent(new Event("change", { bubbles: true }));
+
+      // "day" 모드에서는 from 변경 시 to도 같은 값으로 설정됨
+      const expectedDate = new DateOnly(2025, 6, 15);
+      expect(onToChange).toHaveBeenCalledWith(expectedDate);
+    });
+  });
+
+  describe("from 변경 - 'range' 모드", () => {
+    it("from > to이면 onToChange(from)이 호출된다", () => {
+      const onFromChange = vi.fn();
+      const onToChange = vi.fn();
+      const originalTo = new DateOnly(2025, 3, 1);
+      const newFrom = new DateOnly(2025, 6, 15); // to보다 큰 값
+
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker
+          periodType="range"
+          from={new DateOnly(2025, 1, 1)}
+          onFromChange={onFromChange}
+          to={originalTo}
+          onToChange={onToChange}
+        />
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      const inputs = wrapper?.querySelectorAll("input[type='date']");
+      const fromInput = inputs?.[0] as HTMLInputElement;
+
+      // from input에 to보다 큰 날짜 입력
+      expect(fromInput).toBeDefined();
+      fromInput.value = "2025-06-15";
+      fromInput.dispatchEvent(new Event("change", { bubbles: true }));
+
+      // from > to이므로 to도 from 값으로 변경되어야 함
+      expect(onToChange).toHaveBeenCalledWith(newFrom);
+    });
+  });
+
+  describe("disabled state", () => {
+    it("Select에 aria-disabled가 적용된다", () => {
+      const { container } = render(() => <DateRangePicker disabled />);
+      const wrapper = container.querySelector("[data-date-range-picker]");
+
+      const select = wrapper?.querySelector("[data-select]");
+      const combobox = select?.querySelector("[role='combobox']") ?? select;
+
+      expect(
+        combobox?.getAttribute("aria-disabled") === "true" ||
+          select?.getAttribute("aria-disabled") === "true",
+      ).toBe(true);
+    });
+  });
+
+  describe("period type labels", () => {
+    it("displays 'Range' label for default periodType 'range'", () => {
+      const { container } = render(() => (
+        <ConfigProvider clientName="test"><I18nProvider>
+          <DateRangePicker />
+        </I18nProvider></ConfigProvider>
+      ));
+
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      const select = wrapper?.querySelector("[data-select]");
+
+      expect(select?.textContent).toContain("Range");
+    });
+  });
+
+  describe("class merging", () => {
+    it("applies custom class to wrapper", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <DateRangePicker class="my-custom-class" />);
+      const wrapper = container.querySelector("[data-date-range-picker]") as HTMLElement;
+
+      expect(wrapper).toBeTruthy();
+      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+});