@simplysm/solid 13.0.0-beta.6 → 13.0.1

package/tests/components/form-control/field/NumberInput.spec.tsx

@@ -1,276 +0,0 @@
-import { describe, it, expect, vi } from "vitest";
-import { render, fireEvent, screen } from "@solidjs/testing-library";
-import { createSignal } from "solid-js";
-import { NumberInput } from "../../../../src/components/form-control/field/NumberInput";
-
-describe("NumberInput", () => {
-  describe("기본 렌더링", () => {
-    it("input 요소를 렌더링한다", () => {
-      render(() => <NumberInput />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toBeInTheDocument();
-    });
-
-    it("inputmode가 numeric으로 설정된다", () => {
-      render(() => <NumberInput />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("inputmode", "numeric");
-    });
-
-    it("input type이 text로 설정된다", () => {
-      render(() => <NumberInput />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("type", "text");
-    });
-  });
-
-  describe("값 변환", () => {
-    it("숫자 값을 문자열로 표시한다", () => {
-      render(() => <NumberInput value={12345} />);
-
-      const input = screen.getByRole("textbox");
-      // comma가 기본적으로 true이므로 콤마가 포함됨
-      expect(input).toHaveValue("12,345");
-    });
-
-    it("소수점이 포함된 숫자를 올바르게 표시한다", () => {
-      render(() => <NumberInput value={1234.56} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveValue("1,234.56");
-    });
-
-    it("입력 중에 올바르게 동작한다", () => {
-      const handleChange = vi.fn();
-      render(() => <NumberInput onValueChange={handleChange} />);
-
-      const input = screen.getByRole("textbox");
-      fireEvent.input(input, { target: { value: "123" } });
-
-      expect(handleChange).toHaveBeenCalledWith(123);
-    });
-
-    it("소수점 입력 중인 상태를 유지한다", () => {
-      const [value, setValue] = createSignal<number | undefined>(undefined);
-      render(() => <NumberInput value={value()} onValueChange={setValue} />);
-
-      const input = screen.getByRole("textbox");
-
-      // "123."을 입력할 때 소수점만 입력된 상태 유지
-      fireEvent.input(input, { target: { value: "123." } });
-
-      // 값은 123으로 변환되지만 표시는 "123."을 유지해야 함
-      expect(input).toHaveValue("123.");
-    });
-
-    it("유효하지 않은 입력은 무시한다", () => {
-      const handleChange = vi.fn();
-      render(() => <NumberInput value={100} onValueChange={handleChange} />);
-
-      const input = screen.getByRole("textbox");
-      // 숫자가 아닌 문자 입력 시도
-      fireEvent.input(input, { target: { value: "abc" } });
-
-      // 유효하지 않은 입력이므로 콜백이 호출되지 않거나 값이 유지됨
-      expect(handleChange).not.toHaveBeenCalled();
-    });
-
-    it("빈 입력은 undefined로 변환한다", () => {
-      const handleChange = vi.fn();
-      render(() => <NumberInput value={100} onValueChange={handleChange} />);
-
-      const input = screen.getByRole("textbox");
-      fireEvent.input(input, { target: { value: "" } });
-
-      expect(handleChange).toHaveBeenCalledWith(undefined);
-    });
-
-    it("음수를 올바르게 처리한다", () => {
-      const handleChange = vi.fn();
-      render(() => <NumberInput onValueChange={handleChange} />);
-
-      const input = screen.getByRole("textbox");
-      fireEvent.input(input, { target: { value: "-123" } });
-
-      expect(handleChange).toHaveBeenCalledWith(-123);
-    });
-  });
-
-  describe("표시 형식", () => {
-    it("comma가 true일 때 천단위 콤마를 표시한다", () => {
-      render(() => <NumberInput value={1234567} comma={true} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveValue("1,234,567");
-    });
-
-    it("comma가 false일 때 콤마 없이 표시한다", () => {
-      render(() => <NumberInput value={1234567} comma={false} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveValue("1234567");
-    });
-
-    it("comma 기본값은 true이다", () => {
-      render(() => <NumberInput value={1234567} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveValue("1,234,567");
-    });
-
-    it("minDigits로 최소 소수점 자릿수를 지정할 수 있다", () => {
-      render(() => <NumberInput value={100} minDigits={2} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveValue("100.00");
-    });
-
-    it("minDigits보다 긴 소수점은 그대로 표시한다", () => {
-      render(() => <NumberInput value={100.12345} minDigits={2} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveValue("100.12345");
-    });
-  });
-
-  describe("disabled/readonly 상태", () => {
-    it("disabled 상태에서는 div로 렌더링한다", () => {
-      render(() => <NumberInput value={1234} disabled />);
-
-      // disabled 상태에서는 input이 아닌 div로 렌더링
-      expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-      // div에 값이 표시됨
-      expect(screen.getByText("1,234")).toBeInTheDocument();
-    });
-
-    it("readonly 상태에서는 div로 렌더링한다", () => {
-      render(() => <NumberInput value={5678} readonly />);
-
-      expect(screen.queryByRole("textbox")).not.toBeInTheDocument();
-      expect(screen.getByText("5,678")).toBeInTheDocument();
-    });
-
-    it("disabled 상태에서 스타일이 적용된다", () => {
-      const { container } = render(() => <NumberInput value={100} disabled />);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("bg-base-100");
-    });
-  });
-
-  describe("우측 정렬", () => {
-    it("input이 우측 정렬된다", () => {
-      render(() => <NumberInput />);
-
-      const input = screen.getByRole("textbox");
-      expect(input.className).toContain("text-right");
-    });
-  });
-
-  describe("스타일 옵션", () => {
-    it("size='sm'일 때 작은 패딩이 적용된다", () => {
-      const { container } = render(() => <NumberInput size="sm" />);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("px-1.5");
-    });
-
-    it("size='lg'일 때 큰 패딩이 적용된다", () => {
-      const { container } = render(() => <NumberInput size="lg" />);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("px-3");
-    });
-
-    it("inset 스타일이 적용된다", () => {
-      const { container } = render(() => <NumberInput inset />);
-
-      // inset일 때 outer div가 relative이고, 내부 content div에 border-none이 적용됨
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv.className).toContain("border-none");
-    });
-
-    it("error 상태에서 에러 스타일이 적용된다", () => {
-      const { container } = render(() => <NumberInput error />);
-
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.className).toContain("border-danger-500");
-    });
-  });
-
-  describe("inset dual-element", () => {
-    it("inset + readonly일 때 content div가 보이고 input이 없다", () => {
-      const { container } = render(() => <NumberInput inset readonly value={1234} />);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.textContent).toBe("1,234");
-
-      expect(outer.querySelector("input")).toBeFalsy();
-    });
-
-    it("inset + editable일 때 content div(hidden)와 input이 모두 존재한다", () => {
-      const { container } = render(() => <NumberInput inset value={1234} />);
-      const outer = container.firstChild as HTMLElement;
-
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.style.visibility).toBe("hidden");
-
-      const input = outer.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-    });
-
-    it("inset + readonly에서 우측 정렬이 적용된다", () => {
-      const { container } = render(() => <NumberInput inset readonly value={100} />);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv.classList.contains("justify-end")).toBe(true);
-    });
-
-    it("inset + 빈 값일 때 content div에 NBSP가 표시된다", () => {
-      const { container } = render(() => <NumberInput inset readonly />);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-number-field-content]") as HTMLElement;
-      expect(contentDiv.textContent).toBe("\u00A0");
-    });
-  });
-
-  describe("controlled/uncontrolled 패턴", () => {
-    it("controlled 모드에서 외부 값 변경이 반영된다", () => {
-      const [value, setValue] = createSignal<number | undefined>(100);
-      render(() => <NumberInput value={value()} onValueChange={setValue} />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveValue("100");
-
-      setValue(200);
-      expect(input).toHaveValue("200");
-    });
-
-    it("uncontrolled 모드에서 내부 상태가 관리된다", () => {
-      render(() => <NumberInput />);
-
-      const input = screen.getByRole("textbox");
-      fireEvent.input(input, { target: { value: "500" } });
-
-      expect(input).toHaveValue("500");
-    });
-  });
-
-  describe("placeholder", () => {
-    it("placeholder를 표시한다", () => {
-      render(() => <NumberInput placeholder="숫자를 입력하세요" />);
-
-      const input = screen.getByRole("textbox");
-      expect(input).toHaveAttribute("placeholder", "숫자를 입력하세요");
-    });
-  });
-});

package/tests/components/form-control/field/TextInput.spec.tsx

@@ -1,258 +0,0 @@
-import { render, fireEvent } from "@solidjs/testing-library";
-import { describe, it, expect, vi } from "vitest";
-import { createSignal } from "solid-js";
-import { TextInput } from "../../../../src/components/form-control/field/TextInput";
-
-describe("TextInput 컴포넌트", () => {
-  describe("기본 렌더링", () => {
-    it("input 요소가 렌더링된다", () => {
-      const { container } = render(() => <TextInput />);
-      const input = container.querySelector("input");
-      expect(input).toBeTruthy();
-    });
-
-    it("기본 type은 text이다", () => {
-      const { container } = render(() => <TextInput />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("text");
-    });
-
-    it("type=password일 때 password input이 렌더링된다", () => {
-      const { container } = render(() => <TextInput type="password" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("password");
-    });
-
-    it("type=email일 때 email input이 렌더링된다", () => {
-      const { container } = render(() => <TextInput type="email" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.type).toBe("email");
-    });
-
-    it("placeholder가 input에 적용된다", () => {
-      const { container } = render(() => <TextInput placeholder="Enter text" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.placeholder).toBe("Enter text");
-    });
-
-    it("title이 input에 적용된다", () => {
-      const { container } = render(() => <TextInput title="Input title" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.title).toBe("Input title");
-    });
-
-    it("autocomplete가 input에 적용된다", () => {
-      const { container } = render(() => <TextInput autocomplete="email" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.autocomplete).toBe("email");
-    });
-  });
-
-  describe("controlled 패턴", () => {
-    it("value prop이 input의 값으로 표시된다", () => {
-      const { container } = render(() => <TextInput value="Hello" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("Hello");
-    });
-
-    it("onValueChange가 입력 시 호출된다", () => {
-      const handleChange = vi.fn();
-      const { container } = render(() => <TextInput value="" onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.input(input, { target: { value: "Test" } });
-
-      expect(handleChange).toHaveBeenCalledWith("Test");
-    });
-
-    it("외부 상태 변경 시 input 값이 업데이트된다", () => {
-      const [value, setValue] = createSignal("Initial");
-      const { container } = render(() => <TextInput value={value()} onValueChange={setValue} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      expect(input.value).toBe("Initial");
-
-      setValue("Updated");
-      expect(input.value).toBe("Updated");
-    });
-  });
-
-  describe("uncontrolled 패턴", () => {
-    it("onValueChange 없이 내부 상태로 값이 관리된다", () => {
-      const { container } = render(() => <TextInput value="Initial" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      expect(input.value).toBe("Initial");
-
-      fireEvent.input(input, { target: { value: "Changed" } });
-      expect(input.value).toBe("Changed");
-    });
-  });
-
-  describe("disabled 상태", () => {
-    it("disabled=true일 때 div로 렌더링된다", () => {
-      const { container } = render(() => <TextInput disabled value="Disabled text" />);
-      const input = container.querySelector("input");
-      const div = container.querySelector("div.sd-text-field");
-
-      expect(input).toBeFalsy();
-      expect(div).toBeTruthy();
-    });
-
-    it("disabled 상태에서 value가 표시된다", () => {
-      const { getByText } = render(() => <TextInput disabled value="Disabled text" />);
-      expect(getByText("Disabled text")).toBeTruthy();
-    });
-
-    it("disabled 스타일이 적용된다", () => {
-      const { container } = render(() => <TextInput disabled value="Text" />);
-      const div = container.querySelector("div.sd-text-field") as HTMLElement;
-      expect(div.classList.contains("bg-base-100")).toBe(true);
-    });
-  });
-
-  describe("readonly 상태", () => {
-    it("readonly=true일 때 div로 렌더링된다", () => {
-      const { container } = render(() => <TextInput readonly value="Readonly text" />);
-      const input = container.querySelector("input");
-      const div = container.querySelector("div.sd-text-field");
-
-      expect(input).toBeFalsy();
-      expect(div).toBeTruthy();
-    });
-
-    it("readonly 상태에서 value가 표시된다", () => {
-      const { getByText } = render(() => <TextInput readonly value="Readonly text" />);
-      expect(getByText("Readonly text")).toBeTruthy();
-    });
-  });
-
-  describe("error 스타일", () => {
-    it("error=true일 때 에러 스타일이 적용된다", () => {
-      const { container } = render(() => <TextInput error />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("border-danger-500")).toBe(true);
-    });
-  });
-
-  describe("format 옵션", () => {
-    it("format이 적용되어 표시된다", () => {
-      const { container } = render(() => <TextInput format="XXX-XXXX-XXXX" value="01012345678" />);
-      const input = container.querySelector("input") as HTMLInputElement;
-      expect(input.value).toBe("010-1234-5678");
-    });
-
-    it("format이 적용된 상태에서 입력 시 원본 값이 onValueChange로 전달된다", () => {
-      const handleChange = vi.fn();
-      const { container } = render(() => <TextInput format="XXX-XXXX-XXXX" value="" onValueChange={handleChange} />);
-      const input = container.querySelector("input") as HTMLInputElement;
-
-      fireEvent.input(input, { target: { value: "010-1234-5678" } });
-
-      // 포맷 문자('-')가 제거된 원본 값이 전달됨
-      expect(handleChange).toHaveBeenCalledWith("01012345678");
-    });
-  });
-
-  describe("size 옵션", () => {
-    it("size=sm일 때 작은 padding이 적용된다", () => {
-      const { container } = render(() => <TextInput size="sm" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-0.5")).toBe(true);
-    });
-
-    it("size=lg일 때 큰 padding이 적용된다", () => {
-      const { container } = render(() => <TextInput size="lg" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("py-2")).toBe(true);
-    });
-  });
-
-  describe("inset 스타일", () => {
-    it("inset=true일 때 테두리가 없고 inset 배경색이 적용된다", () => {
-      const { container } = render(() => <TextInput inset />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("border-none")).toBe(true);
-      expect(wrapper.classList.contains("bg-primary-50")).toBe(true);
-    });
-
-    it("inset + readonly일 때 content div가 보이고 input이 없다", () => {
-      const { container } = render(() => <TextInput inset readonly value="Hello" />);
-      const outer = container.firstChild as HTMLElement;
-      expect(outer.classList.contains("relative")).toBe(true);
-
-      const contentDiv = outer.querySelector("[data-text-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.textContent).toBe("Hello");
-
-      const input = outer.querySelector("input");
-      expect(input).toBeFalsy();
-    });
-
-    it("inset + editable일 때 content div(hidden)와 input이 모두 존재한다", () => {
-      const { container } = render(() => <TextInput inset value="Hello" />);
-      const outer = container.firstChild as HTMLElement;
-
-      const contentDiv = outer.querySelector("[data-text-field-content]") as HTMLElement;
-      expect(contentDiv).toBeTruthy();
-      expect(contentDiv.style.visibility).toBe("hidden");
-
-      const input = outer.querySelector("input") as HTMLInputElement;
-      expect(input).toBeTruthy();
-      expect(input.value).toBe("Hello");
-    });
-
-    it("inset + 빈 값일 때 content div에 NBSP가 표시된다", () => {
-      const { container } = render(() => <TextInput inset readonly />);
-      const outer = container.firstChild as HTMLElement;
-      const contentDiv = outer.querySelector("[data-text-field-content]") as HTMLElement;
-      expect(contentDiv.textContent).toBe("\u00A0");
-    });
-
-    it("inset + readonly ↔ editable 전환 시 content div가 항상 DOM에 존재한다", () => {
-      const [readonly, setReadonly] = createSignal(true);
-      const { container } = render(() => <TextInput inset readonly={readonly()} value="Test" />);
-      const outer = container.firstChild as HTMLElement;
-
-      let contentDiv = outer.querySelector("[data-text-field-content]");
-      expect(contentDiv).toBeTruthy();
-      expect(outer.querySelector("input")).toBeFalsy();
-
-      setReadonly(false);
-      contentDiv = outer.querySelector("[data-text-field-content]");
-      expect(contentDiv).toBeTruthy();
-      expect(outer.querySelector("input")).toBeTruthy();
-    });
-  });
-
-  describe("class 병합", () => {
-    it("사용자 정의 class가 기존 스타일과 병합된다", () => {
-      // eslint-disable-next-line tailwindcss/no-custom-classname
-      const { container } = render(() => <TextInput class="my-custom-class" />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("my-custom-class")).toBe(true);
-    });
-  });
-
-  describe("기본 스타일", () => {
-    it("기본 border 스타일이 적용된다", () => {
-      const { container } = render(() => <TextInput />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("border")).toBe(true);
-      expect(wrapper.classList.contains("border-base-300")).toBe(true);
-    });
-
-    it("focus 시 border 색상이 변경된다", () => {
-      const { container } = render(() => <TextInput />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("focus-within:border-primary-500")).toBe(true);
-    });
-
-    it("다크 모드 스타일이 적용된다", () => {
-      const { container } = render(() => <TextInput />);
-      const wrapper = container.firstChild as HTMLElement;
-      expect(wrapper.classList.contains("dark:border-base-700")).toBe(true);
-      expect(wrapper.classList.contains("dark:bg-base-900")).toBe(true);
-    });
-  });
-});