@simplysm/solid 13.0.0-beta.6 → 13.0.1

package/tests/components/form-control/select/Select.spec.tsx

@@ -1,239 +0,0 @@
-import { render, fireEvent, waitFor } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
-import { createSignal } from "solid-js";
-import { Select } from "../../../../src/components/form-control/select/Select";
-
-describe("Select 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("트리거가 렌더링된다", () => {
-      const { getByRole } = render(() => (
-        <Select renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      expect(getByRole("combobox")).not.toBeNull();
-    });
-
-    it("placeholder가 표시된다", () => {
-      const { getByText } = render(() => (
-        <Select placeholder="선택하세요" renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      expect(getByText("선택하세요")).not.toBeNull();
-    });
-  });
-
-  describe("드롭다운 열기/닫기", () => {
-    it("트리거 클릭 시 드롭다운이 열린다", async () => {
-      const { getByRole } = render(() => (
-        <Select renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      fireEvent.click(getByRole("combobox"));
-
-      await waitFor(() => {
-        const dropdown = document.querySelector("[data-dropdown]");
-        expect(dropdown).not.toBeNull();
-        // 드롭다운 내용 확인
-        const selectItem = dropdown?.querySelector("[data-select-item]");
-        expect(selectItem).not.toBeNull();
-      });
-    });
-
-    it("아이템 선택 시 값이 변경되고 드롭다운 닫힘이 트리거된다 (단일 선택)", async () => {
-      const [value, setValue] = createSignal<string | undefined>();
-      const { getByRole } = render(() => (
-        <Select value={value()} onValueChange={setValue} renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      fireEvent.click(getByRole("combobox"));
-
-      await waitFor(() => {
-        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
-      });
-
-      const selectItem = document.querySelector("[data-select-item]") as HTMLElement;
-      fireEvent.click(selectItem);
-
-      // 값이 변경됨
-      expect(value()).toBe("apple");
-      // aria-expanded가 false가 됨 (닫힘 트리거됨)
-      expect(getByRole("combobox").getAttribute("aria-expanded")).toBe("false");
-    });
-  });
-
-  describe("단일 선택", () => {
-    it("아이템 선택 시 onValueChange가 호출된다", async () => {
-      const handleChange = vi.fn();
-      const { getByRole } = render(() => (
-        <Select onValueChange={handleChange} renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      fireEvent.click(getByRole("combobox"));
-
-      await waitFor(() => {
-        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
-      });
-
-      const selectItem = document.querySelector("[data-select-item]") as HTMLElement;
-      fireEvent.click(selectItem);
-      expect(handleChange).toHaveBeenCalledWith("apple");
-    });
-
-    it("선택된 값이 트리거에 표시된다", () => {
-      const [value, setValue] = createSignal<string | undefined>("apple");
-
-      const { getByRole } = render(() => (
-        <Select value={value()} onValueChange={setValue} renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-          <Select.Item value="banana">바나나</Select.Item>
-        </Select>
-      ));
-
-      expect(getByRole("combobox").textContent).toContain("apple");
-    });
-  });
-
-  describe("다중 선택", () => {
-    it("multiple 모드에서 여러 아이템 선택 가능", async () => {
-      const [value, setValue] = createSignal<string[]>([]);
-      const { getByRole } = render(() => (
-        <Select multiple value={value()} onValueChange={(v) => setValue(v as string[])} renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-          <Select.Item value="banana">바나나</Select.Item>
-        </Select>
-      ));
-
-      fireEvent.click(getByRole("combobox"));
-
-      await waitFor(() => {
-        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
-      });
-
-      const selectItems = document.querySelectorAll("[data-select-item]");
-      fireEvent.click(selectItems[0]);
-      expect(value()).toEqual(["apple"]);
-
-      fireEvent.click(selectItems[1]);
-      expect(value()).toEqual(["apple", "banana"]);
-    });
-
-    it("다중 선택 모드에서 아이템 선택해도 드롭다운이 닫히지 않는다", async () => {
-      const { getByRole } = render(() => (
-        <Select multiple renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      fireEvent.click(getByRole("combobox"));
-
-      await waitFor(() => {
-        expect(document.querySelector("[data-dropdown]")).not.toBeNull();
-      });
-
-      const selectItem = document.querySelector("[data-select-item]") as HTMLElement;
-      fireEvent.click(selectItem);
-
-      // 드롭다운이 여전히 열려 있음
-      expect(document.querySelector("[data-dropdown]")).not.toBeNull();
-    });
-  });
-
-  describe("서브 컴포넌트", () => {
-    it("Select.Action이 렌더링된다", () => {
-      const handleClick = vi.fn();
-      const { getByText } = render(() => (
-        <Select renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-          <Select.Action onClick={handleClick}>+</Select.Action>
-        </Select>
-      ));
-
-      expect(getByText("+")).not.toBeNull();
-      fireEvent.click(getByText("+"));
-      expect(handleClick).toHaveBeenCalled();
-    });
-
-    it("Select.Header가 드롭다운 상단에 렌더링된다", async () => {
-      const { getByRole } = render(() => (
-        <Select renderValue={(v) => <>{v}</>}>
-          <Select.Header>
-            <div data-testid="header">헤더 영역</div>
-          </Select.Header>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      fireEvent.click(getByRole("combobox"));
-
-      await waitFor(() => {
-        const dropdown = document.querySelector("[data-dropdown]");
-        expect(dropdown).not.toBeNull();
-        const header = dropdown?.querySelector("[data-select-header]");
-        expect(header).not.toBeNull();
-      });
-    });
-  });
-
-  describe("disabled 상태", () => {
-    it("disabled일 때 트리거 클릭이 동작하지 않는다", () => {
-      const { getByRole } = render(() => (
-        <Select disabled renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      fireEvent.click(getByRole("combobox"));
-
-      expect(document.querySelector("[data-dropdown]")).toBeNull();
-    });
-
-    it("disabled일 때 aria-disabled가 설정된다", () => {
-      const { getByRole } = render(() => (
-        <Select disabled renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      expect(getByRole("combobox").getAttribute("aria-disabled")).toBe("true");
-    });
-  });
-
-  describe("접근성", () => {
-    it("role=combobox가 설정된다", () => {
-      const { getByRole } = render(() => (
-        <Select renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      expect(getByRole("combobox")).not.toBeNull();
-    });
-
-    it("열림 시 aria-expanded=true", async () => {
-      const { getByRole } = render(() => (
-        <Select renderValue={(v) => <>{v}</>}>
-          <Select.Item value="apple">사과</Select.Item>
-        </Select>
-      ));
-
-      const trigger = getByRole("combobox");
-      expect(trigger.getAttribute("aria-expanded")).toBe("false");
-
-      fireEvent.click(trigger);
-
-      await waitFor(() => {
-        expect(trigger.getAttribute("aria-expanded")).toBe("true");
-      });
-    });
-  });
-});

package/tests/components/form-control/select/SelectItem.spec.tsx

@@ -1,149 +0,0 @@
-import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
-import { SelectItem } from "../../../../src/components/form-control/select/SelectItem";
-import { SelectContext, type SelectContextValue } from "../../../../src/components/form-control/select/SelectContext";
-
-// 테스트용 Provider
-function TestProvider(props: { children: unknown; value: SelectContextValue }) {
-  return <SelectContext.Provider value={props.value}>{props.children}</SelectContext.Provider>;
-}
-
-describe("SelectItem 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("children이 렌더링된다", () => {
-      const mockContext: SelectContextValue = {
-        multiple: () => false,
-        isSelected: () => false,
-        toggleValue: vi.fn(),
-        closeDropdown: vi.fn(),
-      };
-
-      const { getByText } = render(() => (
-        <TestProvider value={mockContext}>
-          <SelectItem value="apple">사과</SelectItem>
-        </TestProvider>
-      ));
-
-      expect(getByText("사과")).not.toBeNull();
-    });
-
-    it("data-select-item 속성이 설정된다", () => {
-      const mockContext: SelectContextValue = {
-        multiple: () => false,
-        isSelected: () => false,
-        toggleValue: vi.fn(),
-        closeDropdown: vi.fn(),
-      };
-
-      render(() => (
-        <TestProvider value={mockContext}>
-          <SelectItem value="apple">사과</SelectItem>
-        </TestProvider>
-      ));
-
-      expect(document.querySelector("[data-select-item]")).not.toBeNull();
-    });
-  });
-
-  describe("선택 동작", () => {
-    it("클릭 시 toggleValue가 호출된다", () => {
-      const toggleValue = vi.fn();
-      const mockContext: SelectContextValue = {
-        multiple: () => false,
-        isSelected: () => false,
-        toggleValue,
-        closeDropdown: vi.fn(),
-      };
-
-      const { getByText } = render(() => (
-        <TestProvider value={mockContext}>
-          <SelectItem value="apple">사과</SelectItem>
-        </TestProvider>
-      ));
-
-      fireEvent.click(getByText("사과"));
-      expect(toggleValue).toHaveBeenCalledWith("apple");
-    });
-
-    it("단일 선택 모드에서 클릭 시 closeDropdown이 호출된다", () => {
-      const closeDropdown = vi.fn();
-      const mockContext: SelectContextValue = {
-        multiple: () => false,
-        isSelected: () => false,
-        toggleValue: vi.fn(),
-        closeDropdown,
-      };
-
-      const { getByText } = render(() => (
-        <TestProvider value={mockContext}>
-          <SelectItem value="apple">사과</SelectItem>
-        </TestProvider>
-      ));
-
-      fireEvent.click(getByText("사과"));
-      expect(closeDropdown).toHaveBeenCalled();
-    });
-
-    it("다중 선택 모드에서 클릭 시 closeDropdown이 호출되지 않는다", () => {
-      const closeDropdown = vi.fn();
-      const mockContext: SelectContextValue = {
-        multiple: () => true,
-        isSelected: () => false,
-        toggleValue: vi.fn(),
-        closeDropdown,
-      };
-
-      const { getByText } = render(() => (
-        <TestProvider value={mockContext}>
-          <SelectItem value="apple">사과</SelectItem>
-        </TestProvider>
-      ));
-
-      fireEvent.click(getByText("사과"));
-      expect(closeDropdown).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("선택 상태", () => {
-    it("선택된 아이템에 aria-selected=true가 설정된다", () => {
-      const mockContext: SelectContextValue = {
-        multiple: () => false,
-        isSelected: (v) => v === "apple",
-        toggleValue: vi.fn(),
-        closeDropdown: vi.fn(),
-      };
-
-      render(() => (
-        <TestProvider value={mockContext}>
-          <SelectItem value="apple">사과</SelectItem>
-        </TestProvider>
-      ));
-
-      const item = document.querySelector("[data-select-item]");
-      expect(item?.getAttribute("aria-selected")).toBe("true");
-    });
-  });
-
-  describe("disabled 상태", () => {
-    it("disabled일 때 클릭해도 toggleValue가 호출되지 않는다", () => {
-      const toggleValue = vi.fn();
-      const mockContext: SelectContextValue = {
-        multiple: () => false,
-        isSelected: () => false,
-        toggleValue,
-        closeDropdown: vi.fn(),
-      };
-
-      const { getByText } = render(() => (
-        <TestProvider value={mockContext}>
-          <SelectItem value="apple" disabled>
-            사과
-          </SelectItem>
-        </TestProvider>
-      ));
-
-      fireEvent.click(getByText("사과"));
-      expect(toggleValue).not.toHaveBeenCalled();
-    });
-  });
-});

package/tests/components/layout/FormGroup.spec.tsx

@@ -1,104 +0,0 @@
-import { render } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
-import { FormGroup } from "../../../src/components/layout/FormGroup";
-
-describe("FormGroup 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("children이 FormGroup 내부에 표시된다", () => {
-      const { getByText } = render(() => <FormGroup>Content</FormGroup>);
-      expect(getByText("Content")).toBeTruthy();
-    });
-
-    it("div 요소로 렌더링된다", () => {
-      const { container } = render(() => <FormGroup>Content</FormGroup>);
-      const group = container.firstChild as HTMLElement;
-      expect(group.tagName).toBe("DIV");
-    });
-  });
-
-  describe("inline 속성", () => {
-    it("inline prop에 따라 스타일이 달라진다", () => {
-      const { container: defaultContainer } = render(() => <FormGroup>Content</FormGroup>);
-      const { container: inlineContainer } = render(() => <FormGroup inline>Content</FormGroup>);
-
-      const defaultClass = (defaultContainer.firstChild as HTMLElement).className;
-      const inlineClass = (inlineContainer.firstChild as HTMLElement).className;
-
-      expect(defaultClass).not.toBe(inlineClass);
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <FormGroup class="my-form-group">Content</FormGroup>);
-      const group = container.firstChild as HTMLElement;
-      expect(group.classList.contains("my-form-group")).toBe(true);
-    });
-  });
-});
-
-describe("FormGroup.Item 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("children이 Item 내부에 표시된다", () => {
-      const { getByText } = render(() => (
-        <FormGroup>
-          <FormGroup.Item>Field Content</FormGroup.Item>
-        </FormGroup>
-      ));
-      expect(getByText("Field Content")).toBeTruthy();
-    });
-
-    it("div 요소로 렌더링된다", () => {
-      const { container } = render(() => (
-        <FormGroup>
-          <FormGroup.Item>Content</FormGroup.Item>
-        </FormGroup>
-      ));
-      const item = container.querySelector("[data-form-group-item]");
-      expect(item?.tagName).toBe("DIV");
-    });
-  });
-
-  describe("label 속성", () => {
-    it("label이 표시된다", () => {
-      const { getByText } = render(() => (
-        <FormGroup>
-          <FormGroup.Item label="Name">Input</FormGroup.Item>
-        </FormGroup>
-      ));
-      expect(getByText("Name")).toBeTruthy();
-    });
-
-    it("label이 JSX.Element일 수 있다", () => {
-      const { getByText } = render(() => (
-        <FormGroup>
-          <FormGroup.Item label={<span>Custom Label</span>}>Input</FormGroup.Item>
-        </FormGroup>
-      ));
-      expect(getByText("Custom Label")).toBeTruthy();
-    });
-
-    it("label이 없을 때 label 요소가 렌더링되지 않는다", () => {
-      const { container } = render(() => (
-        <FormGroup>
-          <FormGroup.Item>Input</FormGroup.Item>
-        </FormGroup>
-      ));
-      expect(container.querySelector("label")).toBeNull();
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 Item에 적용된다", () => {
-      const { container } = render(() => (
-        <FormGroup>
-          {/* eslint-disable-next-line tailwindcss/no-custom-classname */}
-          <FormGroup.Item class="my-item">Content</FormGroup.Item>
-        </FormGroup>
-      ));
-      const item = container.querySelector("[data-form-group-item]");
-      expect(item?.classList.contains("my-item")).toBe(true);
-    });
-  });
-});

package/tests/components/layout/FormTable.spec.tsx

@@ -1,43 +0,0 @@
-import { render } from "@solidjs/testing-library";
-import { describe, it, expect } from "vitest";
-import { FormTable } from "../../../src/components/layout/FormTable";
-
-describe("FormTable 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("children이 FormTable 내부에 표시된다", () => {
-      const { container } = render(() => (
-        <FormTable>
-          <tbody>
-            <tr>
-              <td>Content</td>
-            </tr>
-          </tbody>
-        </FormTable>
-      ));
-      expect(container.querySelector("td")?.textContent).toBe("Content");
-    });
-
-    it("table 요소로 렌더링된다", () => {
-      const { container } = render(() => <FormTable>Content</FormTable>);
-      const table = container.firstChild as HTMLElement;
-      expect(table.tagName).toBe("TABLE");
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <FormTable class="my-form-table">Content</FormTable>);
-      const table = container.firstChild as HTMLElement;
-      expect(table.classList.contains("my-form-table")).toBe(true);
-    });
-  });
-
-  describe("HTML 속성 전달", () => {
-    it("data-* 속성이 전달된다", () => {
-      const { container } = render(() => <FormTable data-testid="test-table">Content</FormTable>);
-      const table = container.firstChild as HTMLElement;
-      expect(table.getAttribute("data-testid")).toBe("test-table");
-    });
-  });
-});