@simplysm/solid 13.0.69 → 13.0.71

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

@@ -0,0 +1,137 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { Checkbox } from "../../../../src/components/form-control/checkbox/Checkbox";
+
+describe("Checkbox component", () => {
+  describe("basic rendering", () => {
+    it("renders with checkbox role", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      expect(getByRole("checkbox")).toBeTruthy();
+    });
+
+    it("renders children as label", () => {
+      const { getByText } = render(() => <Checkbox>동의합니다</Checkbox>);
+      expect(getByText("동의합니다")).toBeTruthy();
+    });
+
+    it("defaults to unchecked", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("click behavior", () => {
+    it("toggles checked state on click", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      const checkbox = getByRole("checkbox");
+
+      fireEvent.click(checkbox);
+      expect(checkbox.getAttribute("aria-checked")).toBe("true");
+
+      fireEvent.click(checkbox);
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    });
+
+    it("does not change when disabled", () => {
+      const { getByRole } = render(() => <Checkbox disabled />);
+      const checkbox = getByRole("checkbox");
+
+      fireEvent.click(checkbox);
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("keyboard behavior", () => {
+    it("toggles with Space key", () => {
+      const { getByRole } = render(() => <Checkbox />);
+      const checkbox = getByRole("checkbox");
+
+      fireEvent.keyDown(checkbox, { key: " " });
+      expect(checkbox.getAttribute("aria-checked")).toBe("true");
+
+      fireEvent.keyDown(checkbox, { key: " " });
+      expect(checkbox.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("controlled pattern", () => {
+    it("reflects value prop as checked state", () => {
+      const { getByRole } = render(() => <Checkbox value={true} />);
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("calls onValueChange on click", () => {
+      const handleChange = vi.fn();
+      const { getByRole } = render(() => <Checkbox value={false} onValueChange={handleChange} />);
+
+      fireEvent.click(getByRole("checkbox"));
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it("updates when external state changes", () => {
+      const [value, setValue] = createSignal(false);
+      const { getByRole } = render(() => <Checkbox value={value()} onValueChange={setValue} />);
+
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("false");
+
+      setValue(true);
+      expect(getByRole("checkbox").getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("style variants", () => {
+    it("applies different styles per size", () => {
+      const { getByRole: getDefault } = render(() => <Checkbox />);
+      const { getByRole: getSm } = render(() => <Checkbox size="sm" />);
+
+      expect(getDefault("checkbox").className).not.toBe(getSm("checkbox").className);
+    });
+
+    it("applies different styles when inset", () => {
+      const { getByRole: getDefault } = render(() => <Checkbox />);
+      const { getByRole: getInset } = render(() => <Checkbox inset />);
+
+      expect(getDefault("checkbox").className).not.toBe(getInset("checkbox").className);
+    });
+
+    it("applies disabled style", () => {
+      const { getByRole } = render(() => <Checkbox disabled />);
+      expect(getByRole("checkbox").classList.contains("opacity-30")).toBe(true);
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // eslint-disable-next-line tailwindcss/no-custom-classname
+      const { getByRole } = render(() => <Checkbox class="my-custom-class" />);
+      expect(getByRole("checkbox").classList.contains("my-custom-class")).toBe(true);
+    });
+  });
+
+  describe("validation", () => {
+    it("sets error message when required and unchecked", () => {
+      const { container } = render(() => <Checkbox required value={false} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("This is a required selection");
+    });
+
+    it("is valid when required and checked", () => {
+      const { container } = render(() => <Checkbox required value={true} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+
+    it("sets error message returned by validate function", () => {
+      const { container } = render(() => <Checkbox value={true} validate={() => "커스텀 에러"} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("커스텀 에러");
+    });
+
+    it("is valid when validate function returns undefined", () => {
+      const { container } = render(() => <Checkbox value={true} validate={() => undefined} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,108 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { CheckboxGroup } from "../../../../src/components/form-control/checkbox/CheckboxGroup";
+
+describe("CheckboxGroup component", () => {
+  describe("basic rendering", () => {
+    it("renders the container", () => {
+      const { container } = render(() => (
+        <CheckboxGroup>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      expect(container.querySelector("div")).toBeTruthy();
+    });
+
+    it("renders items as checkboxes", () => {
+      const { getAllByRole } = render(() => (
+        <CheckboxGroup>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          <CheckboxGroup.Item value="b">B</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      expect(getAllByRole("checkbox").length).toBe(2);
+    });
+  });
+
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
+      const { getAllByRole } = render(() => (
+        <CheckboxGroup value={["a"]}>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+          <CheckboxGroup.Item value="b">B</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      const checkboxes = getAllByRole("checkbox");
+      expect(checkboxes[0].getAttribute("aria-checked")).toBe("true");
+      expect(checkboxes[1].getAttribute("aria-checked")).toBe("false");
+    });
+
+    it("calls onValueChange on toggle", () => {
+      const handleChange = vi.fn();
+      const { getAllByRole } = render(() => (
+        <CheckboxGroup value={[]} onValueChange={handleChange}>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      fireEvent.click(getAllByRole("checkbox")[0]);
+      expect(handleChange).toHaveBeenCalledWith(["a"]);
+    });
+
+    it("updates when external state changes", () => {
+      const [value, setValue] = createSignal<string[]>([]);
+      const { getAllByRole } = render(() => (
+        <CheckboxGroup value={value()} onValueChange={setValue}>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      expect(getAllByRole("checkbox")[0].getAttribute("aria-checked")).toBe("false");
+      setValue(["a"]);
+      expect(getAllByRole("checkbox")[0].getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("validation", () => {
+    // The group's hidden input is positioned after the children's hidden inputs
+    const getGroupHiddenInput = (container: HTMLElement) => {
+      const inputs = container.querySelectorAll("input[aria-hidden='true']");
+      return inputs[inputs.length - 1] as HTMLInputElement;
+    };
+
+    it("sets error message when required and no item selected", () => {
+      const { container } = render(() => (
+        <CheckboxGroup required value={[]}>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
+    });
+
+    it("is valid when required and item is selected", () => {
+      const { container } = render(() => (
+        <CheckboxGroup required value={["a"]}>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      expect(getGroupHiddenInput(container).validity.valid).toBe(true);
+    });
+
+    it("sets error message returned by validate function", () => {
+      const { container } = render(() => (
+        <CheckboxGroup value={["a"]} validate={() => "커스텀 에러"}>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
+    });
+
+    it("is valid when validate function returns undefined", () => {
+      const { container } = render(() => (
+        <CheckboxGroup value={["a"]} validate={() => undefined}>
+          <CheckboxGroup.Item value="a">A</CheckboxGroup.Item>
+        </CheckboxGroup>
+      ));
+      expect(getGroupHiddenInput(container).validity.valid).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,138 @@
+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 component", () => {
+  describe("basic rendering", () => {
+    it("renders with radio role", () => {
+      const { getByRole } = render(() => <Radio />);
+      expect(getByRole("radio")).toBeTruthy();
+    });
+
+    it("renders children as label", () => {
+      const { getByText } = render(() => <Radio>옵션 A</Radio>);
+      expect(getByText("옵션 A")).toBeTruthy();
+    });
+
+    it("defaults to unchecked", () => {
+      const { getByRole } = render(() => <Radio />);
+      expect(getByRole("radio").getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("click behavior", () => {
+    it("selects on click", () => {
+      const { getByRole } = render(() => <Radio />);
+      const radio = getByRole("radio");
+
+      fireEvent.click(radio);
+      expect(radio.getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("does not deselect when already selected", () => {
+      const { getByRole } = render(() => <Radio value={true} />);
+      const radio = getByRole("radio");
+
+      fireEvent.click(radio);
+      expect(radio.getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("does not change when disabled", () => {
+      const { getByRole } = render(() => <Radio disabled />);
+      const radio = getByRole("radio");
+
+      fireEvent.click(radio);
+      expect(radio.getAttribute("aria-checked")).toBe("false");
+    });
+  });
+
+  describe("keyboard behavior", () => {
+    it("selects with Space key", () => {
+      const { getByRole } = render(() => <Radio />);
+      const radio = getByRole("radio");
+
+      fireEvent.keyDown(radio, { key: " " });
+      expect(radio.getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("controlled pattern", () => {
+    it("reflects value prop as checked state", () => {
+      const { getByRole } = render(() => <Radio value={true} />);
+      expect(getByRole("radio").getAttribute("aria-checked")).toBe("true");
+    });
+
+    it("calls onValueChange on click", () => {
+      const handleChange = vi.fn();
+      const { getByRole } = render(() => <Radio value={false} onValueChange={handleChange} />);
+
+      fireEvent.click(getByRole("radio"));
+      expect(handleChange).toHaveBeenCalledWith(true);
+    });
+
+    it("updates when external state changes", () => {
+      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("style variants", () => {
+    it("indicator is circular", () => {
+      const { getByRole } = render(() => <Radio />);
+      const indicator = getByRole("radio").querySelector("div") as HTMLElement;
+      expect(indicator.classList.contains("rounded-full")).toBe(true);
+    });
+
+    it("applies different styles per size", () => {
+      const { getByRole: getDefault } = render(() => <Radio />);
+      const { getByRole: getSm } = render(() => <Radio size="sm" />);
+
+      expect(getDefault("radio").className).not.toBe(getSm("radio").className);
+    });
+
+    it("applies disabled style", () => {
+      const { getByRole } = render(() => <Radio disabled />);
+      expect(getByRole("radio").classList.contains("opacity-30")).toBe(true);
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // 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);
+    });
+  });
+
+  describe("validation", () => {
+    it("sets error message when required and not selected", () => {
+      const { container } = render(() => <Radio required value={false} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("This is a required selection");
+    });
+
+    it("is valid when required and selected", () => {
+      const { container } = render(() => <Radio required value={true} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+
+    it("sets error message returned by validate function", () => {
+      const { container } = render(() => <Radio value={true} validate={() => "커스텀 에러"} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("커스텀 에러");
+    });
+
+    it("is valid when validate function returns undefined", () => {
+      const { container } = render(() => <Radio value={true} validate={() => undefined} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,108 @@
+import { render, fireEvent } from "@solidjs/testing-library";
+import { describe, it, expect, vi } from "vitest";
+import { createSignal } from "solid-js";
+import { RadioGroup } from "../../../../src/components/form-control/checkbox/RadioGroup";
+
+describe("RadioGroup component", () => {
+  describe("basic rendering", () => {
+    it("renders the container", () => {
+      const { container } = render(() => (
+        <RadioGroup>
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      expect(container.querySelector("div")).toBeTruthy();
+    });
+
+    it("renders items as radios", () => {
+      const { getAllByRole } = render(() => (
+        <RadioGroup>
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+          <RadioGroup.Item value="b">B</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      expect(getAllByRole("radio").length).toBe(2);
+    });
+  });
+
+  describe("controlled pattern", () => {
+    it("reflects value prop as selected state", () => {
+      const { getAllByRole } = render(() => (
+        <RadioGroup value="a">
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+          <RadioGroup.Item value="b">B</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      const radios = getAllByRole("radio");
+      expect(radios[0].getAttribute("aria-checked")).toBe("true");
+      expect(radios[1].getAttribute("aria-checked")).toBe("false");
+    });
+
+    it("calls onValueChange on selection", () => {
+      const handleChange = vi.fn();
+      const { getAllByRole } = render(() => (
+        <RadioGroup value={undefined} onValueChange={handleChange}>
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      fireEvent.click(getAllByRole("radio")[0]);
+      expect(handleChange).toHaveBeenCalledWith("a");
+    });
+
+    it("updates when external state changes", () => {
+      const [value, setValue] = createSignal<string | undefined>(undefined);
+      const { getAllByRole } = render(() => (
+        <RadioGroup value={value()} onValueChange={setValue}>
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      expect(getAllByRole("radio")[0].getAttribute("aria-checked")).toBe("false");
+      setValue("a");
+      expect(getAllByRole("radio")[0].getAttribute("aria-checked")).toBe("true");
+    });
+  });
+
+  describe("validation", () => {
+    // The group's hidden input is positioned after the children's hidden inputs
+    const getGroupHiddenInput = (container: HTMLElement) => {
+      const inputs = container.querySelectorAll("input[aria-hidden='true']");
+      return inputs[inputs.length - 1] as HTMLInputElement;
+    };
+
+    it("sets error message when required and no item selected", () => {
+      const { container } = render(() => (
+        <RadioGroup required value={undefined}>
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      expect(getGroupHiddenInput(container).validationMessage).toBe("Please select an item");
+    });
+
+    it("is valid when required and item is selected", () => {
+      const { container } = render(() => (
+        <RadioGroup required value="a">
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      expect(getGroupHiddenInput(container).validity.valid).toBe(true);
+    });
+
+    it("sets error message returned by validate function", () => {
+      const { container } = render(() => (
+        <RadioGroup value="a" validate={() => "커스텀 에러"}>
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      expect(getGroupHiddenInput(container).validationMessage).toBe("커스텀 에러");
+    });
+
+    it("is valid when validate function returns undefined", () => {
+      const { container } = render(() => (
+        <RadioGroup value="a" validate={() => undefined}>
+          <RadioGroup.Item value="a">A</RadioGroup.Item>
+        </RadioGroup>
+      ));
+      expect(getGroupHiddenInput(container).validity.valid).toBe(true);
+    });
+  });
+});

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

@@ -0,0 +1,94 @@
+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 component", () => {
+  describe("basic rendering", () => {
+    it("renders input type=color", () => {
+      const { container } = render(() => <ColorPicker />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input).toBeTruthy();
+      expect(input.type).toBe("color");
+    });
+
+    it("defaults to #000000", () => {
+      const { container } = render(() => <ColorPicker />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.value).toBe("#000000");
+    });
+  });
+
+  describe("controlled pattern", () => {
+    it("calls onValueChange on color change", () => {
+      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("updates input value when external state changes", () => {
+      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 state", () => {
+    it("disables input when disabled=true", () => {
+      const { container } = render(() => <ColorPicker disabled />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.disabled).toBe(true);
+    });
+
+    it("applies disabled style", () => {
+      const { container } = render(() => <ColorPicker disabled />);
+      const input = container.querySelector("input") as HTMLInputElement;
+      expect(input.classList.contains("cursor-default")).toBe(true);
+    });
+  });
+
+  describe("class merging", () => {
+    it("merges custom classes", () => {
+      // 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);
+    });
+  });
+
+  describe("validation", () => {
+    it("sets error message when required and value is empty", () => {
+      const { container } = render(() => <ColorPicker required value={undefined} />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("This field is required");
+    });
+
+    it("is valid when required and value exists", () => {
+      const { container } = render(() => <ColorPicker required value="#ff0000" />);
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validity.valid).toBe(true);
+    });
+
+    it("sets error message returned by validate function", () => {
+      const { container } = render(() => (
+        <ColorPicker
+          validate={(v) => (v === "#000000" ? "검정색은 사용할 수 없습니다" : undefined)}
+          value="#000000"
+        />
+      ));
+      const hiddenInput = container.querySelector("input[aria-hidden='true']") as HTMLInputElement;
+      expect(hiddenInput.validationMessage).toBe("검정색은 사용할 수 없습니다");
+    });
+  });
+});