@simplysm/solid 13.0.0-beta.6

package/tests/components/form-control/checkbox/Radio.spec.tsx

@@ -0,0 +1,112 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { Radio } from "../../../../src/components/form-control/checkbox/Radio";
+
+describe("Radio 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("radio role로 렌더링된다", () => {
+      const { getByRole } = render(() => <Radio />);
+      expect(getByRole("radio")).toBeTruthy();
+    });
+
+    it("children이 라벨로 표시된다", () => {
+      const { getByText } = render(() => <Radio>옵션 A</Radio>);
+      expect(getByText("옵션 A")).toBeTruthy();
+    });
+
+    it("기본값은 unchecked이다", () => {
+      const { getByRole } = render(() => <Radio />);
+      expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("클릭 동작", () => {
+    it("클릭하면 선택된다", () => {
+      const { getByRole } = render(() => <Radio />);
+      const radio = getByRole("radio");
+
+      fireEvent.click(radio);
+      expect(radio.getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("이미 선택된 상태에서 다시 클릭해도 선택 해제되지 않는다", () => {
+      const { getByRole } = render(() => <Radio value={true} />);
+      const radio = getByRole("radio");
+
+      fireEvent.click(radio);
+      expect(radio.getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("disabled 상태에서는 클릭해도 변경되지 않는다", () => {
+      const { getByRole } = render(() => <Radio disabled />);
+      const radio = getByRole("radio");
+
+      fireEvent.click(radio);
+      expect(radio.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("키보드 동작", () => {
+    it("Space 키로 선택된다", () => {
+      const { getByRole } = render(() => <Radio />);
+      const radio = getByRole("radio");
+
+      fireEvent.keyDown(radio, { key: " " });
+      expect(radio.getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("controlled 패턴", () => {
+    it("value prop이 checked 상태로 반영된다", () => {
+      const { getByRole } = render(() => <Radio value={true} />);
+      expect(getByRole("radio").getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("onValueChange가 클릭 시 호출된다", () => {
+      const handleChange = vi.fn();
+      const { getByRole } = render(() => <Radio value={false} onValueChange={handleChange} />);
+
+      fireEvent.click(getByRole("radio"));
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it("외부 상태 변경 시 업데이트된다", () => {
+      const [value, setValue] = createSignal(false);
+      const { getByRole } = render(() => <Radio value={value()} onValueChange={setValue} />);
+
+      expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
+
+      setValue(true);
+      expect(getByRole("radio").getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("스타일 변형", () => {
+    it("인디케이터가 원형이다", () => {
+      const { getByRole } = render(() => <Radio />);
+      const indicator = getByRole("radio").querySelector("div") as HTMLElement;
+      expect(indicator.classList.contains("rounded-full")).toBe(true);
+    });
+
+    it("size prop에 따라 스타일이 달라진다", () => {
+      const { getByRole: getDefault } = render(() => <Radio />);
+      const { getByRole: getSm } = render(() => <Radio size="sm" />);
+
+      expect(getDefault("radio").className).not.toBe(getSm("radio").className);
+    });
+
+    it("disabled 스타일이 적용된다", () => {
+      const { getByRole } = render(() => <Radio disabled />);
+      expect(getByRole("radio").classList.contains("opacity-50")).toBe(true);
+    });
+  });
+
+  describe("class 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { getByRole } = render(() => <Radio class="my-custom-class" />);
+      expect(getByRole("radio").classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+});

package/tests/components/form-control/color-picker/ColorPicker.spec.tsx

@@ -0,0 +1,67 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { ColorPicker } from "../../../../src/components/form-control/color-picker/ColorPicker";
+
+describe("ColorPicker 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("input type=color가 렌더링된다", () => {
+      const { container } = render(() => <ColorPicker />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input).toBeTruthy();
+      expect(input.type).toBe("color");
+    });
+
+    it("기본값은 #000000이다", () => {
+      const { container } = render(() => <ColorPicker />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.value).toBe("#000000");
+    });
+  });
+
+  describe("controlled 패턴", () => {
+    it("onValueChange가 색상 변경 시 호출된다", () => {
+      const handleChange = vi.fn();
+      const { container } = render(() => <ColorPicker value="#000000" onValueChange={handleChange} />);
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      fireEvent.input(input, { target: { value: "#ff5500" } });
+
+      expect(handleChange).toHaveBeenCalledWith("#ff5500");
+    });
+
+    it("외부 상태 변경 시 input 값이 업데이트된다", () => {
+      const [value, setValue] = createSignal("#ff0000");
+      const { container } = render(() => <ColorPicker value={value()} onValueChange={setValue} />);
+      const input = container.querySelector("input") as HTMLInputElement;
+
+      expect(input.value).toBe("#ff0000");
+
+      setValue("#00ff00");
+      expect(input.value).toBe("#00ff00");
+    });
+  });
+
+  describe("disabled 상태", () => {
+    it("disabled=true일 때 input이 비활성화된다", () => {
+      const { container } = render(() => <ColorPicker disabled />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.disabled).toBe(true);
+    });
+
+    it("disabled 스타일이 적용된다", () => {
+      const { container } = render(() => <ColorPicker disabled />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.classList.contains("cursor-default")).toBe(true);
+    });
+  });
+
+  describe("class 병합", () => {
+    it("사용자 정의 class가 병합된다", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { container } = render(() => <ColorPicker class="my-custom-class" />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,174 @@
+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("기본 렌더링", () => {
+    it("트리거가 렌더링된다", () => {
+      const { getByRole } = render(() => <Combobox loadItems={mockLoadItems} renderValue={(v) => <>{v}</>} />);
+      expect(getByRole("combobox")).not.toBeNull();
+    });
+
+    it("placeholder가 표시된다", () => {
+      const { container } = render(() => (
+        <Combobox loadItems={mockLoadItems} placeholder="검색하세요" renderValue={(v) => <>{v}</>} />
+      ));
+      const input = container.querySelector("input");
+      expect(input?.getAttribute("placeholder")).toBe("검색하세요");
+    });
+
+    it("disabled일 때 aria-disabled가 설정된다", () => {
+      const { getByRole } = render(() => <Combobox loadItems={mockLoadItems} disabled renderValue={(v) => <>{v}</>} />);
+      expect(getByRole("combobox").getAttribute("aria-disabled")).toBe("true");
+    });
+  });
+
+  describe("드롭다운 열기/닫기", () => {
+    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 });
+    });
+  });
+});

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

@@ -0,0 +1,85 @@
+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(),
+  ...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,172 @@
+import { render } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { DateOnly } from "@simplysm/core-common";
+import { DateRangePicker } from "../../../../src/components/form-control/date-range-picker/DateRangePicker";
+
+describe("DateRangePicker 컴포넌트", () => {
+  describe("기본 렌더링", () => {
+    it("Select와 DatePicker가 렌더링된다", () => {
+      const { container } = render(() => <DateRangePicker />);
+
+      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(() => <DateRangePicker />);
+      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(() => <DateRangePicker periodType="range" />);
+      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(() => <DateRangePicker periodType="day" />);
+      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(() => <DateRangePicker periodType="month" />);
+      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(() => (
+        <DateRangePicker
+          periodType="day"
+          from={new DateOnly(2025, 1, 1)}
+          onFromChange={onFromChange}
+          to={new DateOnly(2025, 1, 1)}
+          onToChange={onToChange}
+        />
+      ));
+
+      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(() => (
+        <DateRangePicker
+          periodType="range"
+          from={new DateOnly(2025, 1, 1)}
+          onFromChange={onFromChange}
+          to={originalTo}
+          onToChange={onToChange}
+        />
+      ));
+
+      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 상태", () => {
+    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("periodLabels", () => {
+    it("periodLabels로 라벨을 커스터마이즈할 수 있다", () => {
+      const { container } = render(() => (
+        <DateRangePicker periodLabels={{ day: "Day", month: "Month", range: "Range" }} />
+      ));
+
+      const wrapper = container.querySelector("[data-date-range-picker]");
+      const select = wrapper?.querySelector("[data-select]");
+
+      // 기본 periodType은 "range"이므로 renderValue에 "Range"가 표시되어야 함
+      expect(select?.textContent).toContain("Range");
+    });
+  });
+
+  describe("class 병합", () => {
+    it("커스텀 class가 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);
+    });
+  });
+});