@simplysm/solid 13.0.0-beta.6

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

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

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

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

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