@simplysm/solid 13.0.0-beta.6 → 13.0.2

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

@@ -1,112 +0,0 @@
-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

@@ -1,67 +0,0 @@
-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

@@ -1,174 +0,0 @@
-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

@@ -1,85 +0,0 @@
-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

@@ -1,172 +0,0 @@
-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);
-    });
-  });
-});