@simplysm/solid 13.0.0-beta.6

package/tests/helpers/mergeStyles.spec.ts

@@ -0,0 +1,163 @@
+import { describe, it, expect } from "vitest";
+import { mergeStyles } from "../../src/helpers/mergeStyles";
+
+describe("mergeStyles", () => {
+  describe("object 스타일 병합", () => {
+    it("여러 object 스타일을 병합", () => {
+      const result = mergeStyles({ color: "red" }, { background: "blue" });
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+
+    it("동일 속성은 나중 값이 우선", () => {
+      const result = mergeStyles({ color: "red" }, { color: "blue" });
+
+      expect(result).toEqual({ color: "blue" });
+    });
+
+    it("여러 속성을 가진 object 병합", () => {
+      const result = mergeStyles({ "color": "red", "font-size": "14px" }, { background: "blue", padding: "10px" });
+
+      expect(result).toEqual({
+        "color": "red",
+        "font-size": "14px",
+        "background": "blue",
+        "padding": "10px",
+      });
+    });
+  });
+
+  describe("string 스타일 파싱 및 병합", () => {
+    it("단일 string 스타일 파싱", () => {
+      const result = mergeStyles("color: red;");
+
+      expect(result).toEqual({ color: "red" });
+    });
+
+    it("여러 선언이 있는 string 스타일 파싱", () => {
+      const result = mergeStyles("color: red; background: blue;");
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+
+    it("여러 string 스타일 병합", () => {
+      const result = mergeStyles("color: red;", "background: blue;");
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+
+    it("세미콜론 없는 마지막 선언도 파싱", () => {
+      const result = mergeStyles("color: red; background: blue");
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+  });
+
+  describe("kebab-case to camelCase 변환", () => {
+    it("kebab-case 속성을 camelCase로 변환", () => {
+      const result = mergeStyles("background-color: red;");
+
+      expect(result).toEqual({ backgroundColor: "red" });
+    });
+
+    it("여러 하이픈이 있는 속성 변환", () => {
+      const result = mergeStyles("border-top-width: 1px;");
+
+      expect(result).toEqual({ borderTopWidth: "1px" });
+    });
+
+    it("font-size, max-width 등 일반적인 속성 변환", () => {
+      const result = mergeStyles("font-size: 14px; max-width: 100%;");
+
+      expect(result).toEqual({ fontSize: "14px", maxWidth: "100%" });
+    });
+  });
+
+  describe("mixed 스타일 병합 (string + object)", () => {
+    it("string과 object를 함께 병합", () => {
+      const result = mergeStyles({ color: "red" }, "background: blue;");
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+
+    it("object와 string 순서 상관없이 병합", () => {
+      const result = mergeStyles("color: red;", { background: "blue" });
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+
+    it("string이 object를 덮어쓸 수 있음", () => {
+      const result = mergeStyles({ color: "red" }, "color: blue;");
+
+      expect(result).toEqual({ color: "blue" });
+    });
+  });
+
+  describe("undefined 값 처리", () => {
+    it("undefined는 무시", () => {
+      const result = mergeStyles(undefined, { color: "red" });
+
+      expect(result).toEqual({ color: "red" });
+    });
+
+    it("여러 undefined가 있어도 정상 동작", () => {
+      const result = mergeStyles(undefined, { color: "red" }, undefined, "background: blue;", undefined);
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+
+    it("모두 undefined면 빈 객체 반환", () => {
+      const result = mergeStyles(undefined, undefined);
+
+      expect(result).toEqual({});
+    });
+  });
+
+  describe("빈 문자열 처리", () => {
+    it("빈 문자열은 빈 객체와 동일하게 처리", () => {
+      const result = mergeStyles("", { color: "red" });
+
+      expect(result).toEqual({ color: "red" });
+    });
+
+    it("공백만 있는 문자열도 정상 처리", () => {
+      const result = mergeStyles("   ", { color: "red" });
+
+      expect(result).toEqual({ color: "red" });
+    });
+  });
+
+  describe("값 덮어쓰기 (나중 값 우선)", () => {
+    it("여러 스타일에서 동일 속성이 있으면 마지막 값 적용", () => {
+      const result = mergeStyles({ color: "red" }, { color: "green" }, { color: "blue" });
+
+      expect(result).toEqual({ color: "blue" });
+    });
+
+    it("string과 object 혼합 시에도 순서대로 덮어쓰기", () => {
+      const result = mergeStyles("color: red;", { color: "green" }, "color: blue;");
+
+      expect(result).toEqual({ color: "blue" });
+    });
+  });
+
+  describe("엣지 케이스", () => {
+    it("콜론이 값에 포함된 경우 (URL 등)", () => {
+      const result = mergeStyles("background-image: url(http://example.com);");
+
+      expect(result).toEqual({ backgroundImage: "url(http://example.com)" });
+    });
+
+    it("빈 선언은 무시", () => {
+      const result = mergeStyles("color: red; ; background: blue;");
+
+      expect(result).toEqual({ color: "red", background: "blue" });
+    });
+
+    it("속성만 있고 값이 없으면 무시", () => {
+      const result = mergeStyles("color:; background: blue;");
+
+      expect(result).toEqual({ background: "blue" });
+    });
+  });
+});

package/tests/helpers/splitSlots.spec.tsx

@@ -0,0 +1,188 @@
+import { describe, it, expect } from "vitest";
+import { children, createRoot } from "solid-js";
+import { splitSlots } from "../../src/helpers/splitSlots";
+
+describe("splitSlots", () => {
+  describe("기본 동작", () => {
+    it("빈 children일 때 모든 slot 배열과 content가 비어있음", () => {
+      createRoot((dispose) => {
+        const resolved = children(() => null);
+        const [slots, content] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot).toEqual([]);
+        expect(content()).toEqual([]);
+
+        dispose();
+      });
+    });
+
+    it("slot 키에 매칭되는 요소가 해당 배열에 추가됨", () => {
+      createRoot((dispose) => {
+        const el = document.createElement("div");
+        el.dataset["testSlot"] = "";
+
+        const resolved = children(() => el);
+        const [slots, content] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot).toHaveLength(1);
+        expect(slots().testSlot[0]).toBe(el);
+        expect(content()).toEqual([]);
+
+        dispose();
+      });
+    });
+
+    it("매칭되지 않는 요소는 content에 추가됨", () => {
+      createRoot((dispose) => {
+        const el = document.createElement("div");
+
+        const resolved = children(() => el);
+        const [slots, content] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot).toEqual([]);
+        expect(content()).toHaveLength(1);
+        expect(content()[0]).toBe(el);
+
+        dispose();
+      });
+    });
+
+    it("여러 개의 같은 slot 키 요소가 모두 배열에 추가됨", () => {
+      createRoot((dispose) => {
+        const el1 = document.createElement("div");
+        el1.dataset["testSlot"] = "";
+        const el2 = document.createElement("div");
+        el2.dataset["testSlot"] = "";
+
+        const resolved = children(() => [el1, el2]);
+        const [slots, content] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot).toHaveLength(2);
+        expect(slots().testSlot[0]).toBe(el1);
+        expect(slots().testSlot[1]).toBe(el2);
+        expect(content()).toEqual([]);
+
+        dispose();
+      });
+    });
+  });
+
+  describe("여러 slot 키 처리", () => {
+    it("각 slot 키에 맞는 요소가 분류됨", () => {
+      createRoot((dispose) => {
+        const header = document.createElement("div");
+        header.dataset["selectHeader"] = "";
+        const button = document.createElement("button");
+        button.dataset["selectAction"] = "";
+        const item = document.createElement("span");
+
+        const resolved = children(() => [header, button, item]);
+        const [slots, content] = splitSlots(resolved, ["selectHeader", "selectAction"] as const);
+
+        expect(slots().selectHeader).toHaveLength(1);
+        expect(slots().selectHeader[0]).toBe(header);
+        expect(slots().selectAction).toHaveLength(1);
+        expect(slots().selectAction[0]).toBe(button);
+        expect(content()).toHaveLength(1);
+        expect(content()[0]).toBe(item);
+
+        dispose();
+      });
+    });
+
+    it("정의되지 않은 slot 키의 data 속성은 content로 분류됨", () => {
+      createRoot((dispose) => {
+        const el = document.createElement("div");
+        el.dataset["unknownSlot"] = "";
+
+        const resolved = children(() => el);
+        const [slots, content] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot).toEqual([]);
+        expect(content()).toHaveLength(1);
+        expect(content()[0]).toBe(el);
+
+        dispose();
+      });
+    });
+  });
+
+  describe("non-HTMLElement 처리", () => {
+    it("텍스트 노드는 content로 분류됨", () => {
+      createRoot((dispose) => {
+        const textNode = document.createTextNode("hello");
+
+        const resolved = children(() => textNode);
+        const [slots, content] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot).toEqual([]);
+        expect(content()).toHaveLength(1);
+
+        dispose();
+      });
+    });
+
+    it("혼합된 요소들이 올바르게 분류됨", () => {
+      createRoot((dispose) => {
+        const slotEl = document.createElement("div");
+        slotEl.dataset["testSlot"] = "";
+        const normalEl = document.createElement("span");
+        const textNode = document.createTextNode("text");
+
+        const resolved = children(() => [slotEl, normalEl, textNode]);
+        const [slots, content] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot).toHaveLength(1);
+        expect(slots().testSlot[0]).toBe(slotEl);
+        expect(content()).toHaveLength(2);
+
+        dispose();
+      });
+    });
+  });
+
+  describe("single() 확장 메서드 사용", () => {
+    it("단일 요소일 때 single()이 해당 요소를 반환", () => {
+      createRoot((dispose) => {
+        const el = document.createElement("div");
+        el.dataset["testSlot"] = "";
+
+        const resolved = children(() => el);
+        const [slots] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot.single()).toBe(el);
+
+        dispose();
+      });
+    });
+
+    it("요소가 없을 때 single()이 undefined를 반환", () => {
+      createRoot((dispose) => {
+        const resolved = children(() => null);
+        const [slots] = splitSlots(resolved, ["testSlot"] as const);
+
+        expect(slots().testSlot.single()).toBeUndefined();
+
+        dispose();
+      });
+    });
+  });
+
+  describe("data 속성 네이밍", () => {
+    it("camelCase slot 키가 data 속성과 매칭됨 (listItemChildren -> data-list-item-children)", () => {
+      createRoot((dispose) => {
+        const el = document.createElement("div");
+        // HTML에서 data-list-item-children은 dataset.listItemChildren으로 접근
+        el.dataset["listItemChildren"] = "";
+
+        const resolved = children(() => el);
+        const [slots] = splitSlots(resolved, ["listItemChildren"] as const);
+
+        expect(slots().listItemChildren).toHaveLength(1);
+        expect(slots().listItemChildren[0]).toBe(el);
+
+        dispose();
+      });
+    });
+  });
+});

package/tests/hooks/createControllableSignal.spec.ts

@@ -0,0 +1,194 @@
+import { describe, it, expect, vi } from "vitest";
+import { createRoot } from "solid-js";
+import { createControllableSignal } from "../../src/hooks/createControllableSignal";
+
+describe("createControllableSignal hook", () => {
+  describe("Controlled 모드 (onChange 제공)", () => {
+    it("onChange가 제공될 때 setValue 호출 시 onChange가 호출된다", () => {
+      const onChange = vi.fn();
+
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => false,
+          onChange: () => onChange,
+        });
+
+        expect(value()).toBe(false);
+
+        setValue(true);
+
+        expect(onChange).toHaveBeenCalledWith(true);
+        dispose();
+      });
+    });
+
+    it("onChange가 제공될 때 value()는 외부에서 제공한 값을 반환한다", () => {
+      const onChange = vi.fn();
+      let externalValue = false;
+
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => externalValue,
+          onChange: () => onChange,
+        });
+
+        expect(value()).toBe(false);
+
+        // controlled 모드에서는 내부 상태가 변경되지 않음
+        setValue(true);
+
+        // 외부 값이 변경되지 않았으므로 여전히 false
+        expect(value()).toBe(false);
+
+        // 외부 값 변경 시뮬레이션
+        externalValue = true;
+        expect(value()).toBe(true);
+
+        dispose();
+      });
+    });
+  });
+
+  describe("Uncontrolled 모드 (onChange 미제공)", () => {
+    it("onChange가 없을 때 setValue 호출 시 내부 상태가 변경된다", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => false,
+          onChange: () => undefined,
+        });
+
+        expect(value()).toBe(false);
+
+        setValue(true);
+
+        expect(value()).toBe(true);
+        dispose();
+      });
+    });
+
+    it("onChange가 없을 때 초기값으로 value()가 설정된다", () => {
+      createRoot((dispose) => {
+        const [value] = createControllableSignal({
+          value: () => "initial",
+          onChange: () => undefined,
+        });
+
+        expect(value()).toBe("initial");
+        dispose();
+      });
+    });
+  });
+
+  describe("함수형 setter", () => {
+    it("함수를 전달할 때 이전 값을 인자로 받아 새 값을 계산한다", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => 5,
+          onChange: () => undefined,
+        });
+
+        expect(value()).toBe(5);
+
+        setValue((prev) => prev + 10);
+
+        expect(value()).toBe(15);
+        dispose();
+      });
+    });
+
+    it("controlled 모드에서도 함수형 setter가 동작한다", () => {
+      const onChange = vi.fn();
+
+      createRoot((dispose) => {
+        const [, setValue] = createControllableSignal({
+          value: () => 10,
+          onChange: () => onChange,
+        });
+
+        setValue((prev: number) => prev * 2);
+
+        expect(onChange).toHaveBeenCalledWith(20);
+        dispose();
+      });
+    });
+
+    it("토글 패턴이 올바르게 동작한다", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => false,
+          onChange: () => undefined,
+        });
+
+        expect(value()).toBe(false);
+
+        setValue((v: boolean) => !v);
+        expect(value()).toBe(true);
+
+        setValue((v: boolean) => !v);
+        expect(value()).toBe(false);
+
+        dispose();
+      });
+    });
+  });
+
+  describe("다양한 타입 지원", () => {
+    it("숫자 타입을 지원한다", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => 0,
+          onChange: () => undefined,
+        });
+
+        setValue(42);
+        expect(value()).toBe(42);
+        dispose();
+      });
+    });
+
+    it("문자열 타입을 지원한다", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => "hello",
+          onChange: () => undefined,
+        });
+
+        setValue("world");
+        expect(value()).toBe("world");
+        dispose();
+      });
+    });
+
+    it("객체 타입을 지원한다", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => ({ count: 0 }),
+          onChange: () => undefined,
+        });
+
+        setValue({ count: 10 });
+        expect(value()).toEqual({ count: 10 });
+        dispose();
+      });
+    });
+
+    it("함수를 객체로 감싸서 저장할 수 있다", () => {
+      createRoot((dispose) => {
+        const fn1 = () => "first";
+        const fn2 = () => "second";
+
+        const [value, setValue] = createControllableSignal({
+          value: () => ({ fn: fn1 }),
+          onChange: () => undefined,
+        });
+
+        expect(value().fn()).toBe("first");
+
+        setValue({ fn: fn2 });
+        expect(value().fn()).toBe("second");
+
+        dispose();
+      });
+    });
+  });
+});

package/tests/hooks/createIMEHandler.spec.ts

@@ -0,0 +1,80 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createRoot } from "solid-js";
+import { createIMEHandler } from "../../src/hooks/createIMEHandler";
+
+describe("createIMEHandler", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("비조합 상태에서 handleInput 호출 시 즉시 setValue", () => {
+    const setValue = vi.fn();
+
+    createRoot((dispose) => {
+      const ime = createIMEHandler(setValue);
+
+      ime.handleInput("hello", false);
+
+      expect(setValue).toHaveBeenCalledWith("hello");
+      expect(ime.composingValue()).toBeNull();
+      dispose();
+    });
+  });
+
+  it("조합 중 handleInput 호출 시 composingValue만 업데이트", () => {
+    const setValue = vi.fn();
+
+    void createRoot((dispose) => {
+      const ime = createIMEHandler(setValue);
+
+      ime.handleCompositionStart();
+      ime.handleInput("한", true);
+
+      expect(setValue).not.toHaveBeenCalled();
+      expect(ime.composingValue()).toBe("한");
+      dispose();
+    });
+  });
+
+  it("compositionEnd 후 setTimeout(0)에서 setValue 호출", () => {
+    const setValue = vi.fn();
+
+    void createRoot((dispose) => {
+      const ime = createIMEHandler(setValue);
+
+      ime.handleCompositionStart();
+      ime.handleInput("한글", true);
+      ime.handleCompositionEnd("한글");
+
+      expect(setValue).not.toHaveBeenCalled();
+      expect(ime.composingValue()).toBe("한글");
+
+      vi.advanceTimersByTime(0);
+
+      expect(setValue).toHaveBeenCalledWith("한글");
+      expect(ime.composingValue()).toBeNull();
+      dispose();
+    });
+  });
+
+  it("flushComposition으로 미커밋 값 즉시 커밋", () => {
+    const setValue = vi.fn();
+
+    void createRoot((dispose) => {
+      const ime = createIMEHandler(setValue);
+
+      ime.handleCompositionStart();
+      ime.handleInput("한", true);
+
+      ime.flushComposition();
+
+      expect(setValue).toHaveBeenCalledWith("한");
+      expect(ime.composingValue()).toBeNull();
+      dispose();
+    });
+  });
+});