@simplysm/solid 13.0.69 → 13.0.70

package/tests/helpers/mergeStyles.spec.ts

@@ -0,0 +1,172 @@
+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/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 mode (onChange provided)", () => {
+    it("calls onChange when setValue is called with onChange provided", () => {
+      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("value() returns externally provided value when onChange is provided", () => {
+      const onChange = vi.fn();
+      let externalValue = false;
+
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => externalValue,
+          onChange: () => onChange,
+        });
+
+        expect(value()).toBe(false);
+
+        // In controlled mode, internal state does not change
+        setValue(true);
+
+        // Still false since external value didn't change
+        expect(value()).toBe(false);
+
+        // Simulate external value change
+        externalValue = true;
+        expect(value()).toBe(true);
+
+        dispose();
+      });
+    });
+  });
+
+  describe("Uncontrolled mode (onChange not provided)", () => {
+    it("updates internal state when setValue is called without onChange", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => false,
+          onChange: () => undefined,
+        });
+
+        expect(value()).toBe(false);
+
+        setValue(true);
+
+        expect(value()).toBe(true);
+        dispose();
+      });
+    });
+
+    it("value() is set to initial value when onChange is not provided", () => {
+      createRoot((dispose) => {
+        const [value] = createControllableSignal({
+          value: () => "initial",
+          onChange: () => undefined,
+        });
+
+        expect(value()).toBe("initial");
+        dispose();
+      });
+    });
+  });
+
+  describe("Function-form setter", () => {
+    it("computes new value using previous value as argument when passing function", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => 5,
+          onChange: () => undefined,
+        });
+
+        expect(value()).toBe(5);
+
+        setValue((prev) => prev + 10);
+
+        expect(value()).toBe(15);
+        dispose();
+      });
+    });
+
+    it("function-form setter works in controlled mode", () => {
+      const onChange = vi.fn();
+
+      createRoot((dispose) => {
+        const [, setValue] = createControllableSignal({
+          value: () => 10,
+          onChange: () => onChange,
+        });
+
+        setValue((prev: number) => prev * 2);
+
+        expect(onChange).toHaveBeenCalledWith(20);
+        dispose();
+      });
+    });
+
+    it("toggle pattern works correctly", () => {
+      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("Support various types", () => {
+    it("supports number type", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => 0,
+          onChange: () => undefined,
+        });
+
+        setValue(42);
+        expect(value()).toBe(42);
+        dispose();
+      });
+    });
+
+    it("supports string type", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => "hello",
+          onChange: () => undefined,
+        });
+
+        setValue("world");
+        expect(value()).toBe("world");
+        dispose();
+      });
+    });
+
+    it("supports object type", () => {
+      createRoot((dispose) => {
+        const [value, setValue] = createControllableSignal({
+          value: () => ({ count: 0 }),
+          onChange: () => undefined,
+        });
+
+        setValue({ count: 10 });
+        expect(value()).toEqual({ count: 10 });
+        dispose();
+      });
+    });
+
+    it("can store function wrapped in object", () => {
+      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("immediately calls setValue when handleInput is called in non-composing state", () => {
+    const setValue = vi.fn();
+
+    createRoot((dispose) => {
+      const ime = createIMEHandler(setValue);
+
+      ime.handleInput("hello", false);
+
+      expect(setValue).toHaveBeenCalledWith("hello");
+      expect(ime.composingValue()).toBeNull();
+      dispose();
+    });
+  });
+
+  it("only updates composingValue when handleInput is called during composition", () => {
+    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("calls setValue via setTimeout(0) after compositionEnd", () => {
+    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("immediately commits uncommitted value via 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();
+    });
+  });
+});

package/tests/hooks/createMountTransition.spec.ts

@@ -0,0 +1,86 @@
+import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
+import { createRoot, createSignal } from "solid-js";
+import { createMountTransition } from "../../src/hooks/createMountTransition";
+
+// SolidJS createEffect is scheduled as a microtask
+// Helper function to wait until effect runs
+const flushEffects = () => new Promise<void>((resolve) => queueMicrotask(resolve));
+
+describe("createMountTransition", () => {
+  beforeEach(() => {
+    vi.useFakeTimers();
+  });
+
+  afterEach(() => {
+    vi.useRealTimers();
+  });
+
+  it("mounted=false and animating=false when open=false", () => {
+    createRoot((dispose) => {
+      const { mounted, animating } = createMountTransition(() => false);
+      expect(mounted()).toBe(false);
+      expect(animating()).toBe(false);
+      dispose();
+    });
+  });
+
+  it("mounted=true when open changes to true", async () => {
+    const outerDispose = await new Promise<() => void>((resolveDispose) => {
+      void createRoot(async (dispose) => {
+        const [open, setOpen] = createSignal(false);
+        const { mounted } = createMountTransition(open);
+
+        setOpen(true);
+        await flushEffects();
+
+        expect(mounted()).toBe(true);
+        resolveDispose(dispose);
+      });
+    });
+    outerDispose();
+  });
+
+  it("animating=false and mounted=false after fallback timer when open changes to false", async () => {
+    const outerDispose = await new Promise<() => void>((resolveDispose) => {
+      void createRoot(async (dispose) => {
+        const [open, setOpen] = createSignal(true);
+        const { mounted, animating } = createMountTransition(open);
+
+        await flushEffects();
+        expect(mounted()).toBe(true);
+
+        setOpen(false);
+        await flushEffects();
+
+        expect(animating()).toBe(false);
+
+        vi.advanceTimersByTime(200);
+        expect(mounted()).toBe(false);
+
+        resolveDispose(dispose);
+      });
+    });
+    outerDispose();
+  });
+
+  it("immediately unmounts via unmount()", async () => {
+    const outerDispose = await new Promise<() => void>((resolveDispose) => {
+      void createRoot(async (dispose) => {
+        const [open, setOpen] = createSignal(true);
+        const { mounted, unmount } = createMountTransition(open);
+
+        await flushEffects();
+        expect(mounted()).toBe(true);
+
+        setOpen(false);
+        await flushEffects();
+
+        unmount();
+        expect(mounted()).toBe(false);
+
+        resolveDispose(dispose);
+      });
+    });
+    outerDispose();
+  });
+});