@musecat/functionkit 1.0.1 → 1.1.0

package/tests/hooks/useRefEffect.test.ts

@@ -0,0 +1,67 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { useRefEffect } from "@/packages/hooks/useRefEffect";
+
+describe("useRefEffect", () => {
+	test("calls callback with element and cleanup on unmount", () => {
+		const cleanup = vi.fn();
+		const callback = vi.fn(() => cleanup);
+		const { result } = renderHook(() => useRefEffect(callback, []));
+
+		const element = document.createElement("div");
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(element);
+		});
+		expect(callback).toHaveBeenCalledWith(element);
+
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(null);
+		});
+		expect(cleanup).toHaveBeenCalledOnce();
+	});
+
+	test("stores cleanup when callback returns a function", () => {
+		const cleanup = vi.fn();
+		const callback = vi.fn(() => cleanup);
+		const { result } = renderHook(() => useRefEffect(callback, []));
+
+		const element = document.createElement("div");
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(element);
+		});
+
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(null);
+		});
+		expect(cleanup).toHaveBeenCalled();
+	});
+
+	test("handles callback returning undefined (no cleanup)", () => {
+		const { result } = renderHook(() => useRefEffect(() => {}, []));
+
+		const element = document.createElement("div");
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(element);
+		});
+		// Should not throw when cleanup is undefined
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(null);
+		});
+	});
+
+	test("calls cleanup before setting new element", () => {
+		const cleanup = vi.fn();
+		const callback = vi.fn(() => cleanup);
+		const { result } = renderHook(() => useRefEffect(callback, []));
+
+		const el1 = document.createElement("div");
+		const el2 = document.createElement("span");
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(el1);
+		});
+		act(() => {
+			(result.current as (el: HTMLElement | null) => void)(el2);
+		});
+		expect(cleanup).toHaveBeenCalledOnce();
+	});
+});

package/tests/hooks/useRelativeDateTime.test.ts

@@ -0,0 +1,21 @@
+import { renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { useRelativeDateTime } from "@/packages/hooks/useRelativeDateTime";
+
+describe("useRelativeDateTime", () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	test("returns relative time text", () => {
+		const now = Date.now();
+		const fiveMinAgo = new Date(now - 5 * 60 * 1000).toISOString();
+		const { result } = renderHook(() => useRelativeDateTime(fiveMinAgo, { locale: "ko" }));
+		expect(result.current.ready).toBe(true);
+		expect(result.current.isRelative).toBe(true);
+		expect(result.current.text).toBeTruthy();
+	});
+});

package/tests/hooks/useTimeout.test.ts

@@ -0,0 +1,72 @@
+import { act, renderHook } from "@testing-library/react";
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import { useTimeout } from "@/packages/hooks/useTimeout";
+
+describe("useTimeout", () => {
+	beforeEach(() => {
+		vi.useFakeTimers();
+	});
+	afterEach(() => {
+		vi.useRealTimers();
+	});
+
+	test("calls callback after delay", () => {
+		const fn = vi.fn();
+		renderHook(() => useTimeout(fn, 100));
+		expect(fn).not.toHaveBeenCalled();
+		vi.advanceTimersByTime(100);
+		expect(fn).toHaveBeenCalledOnce();
+	});
+
+	test("does not call when disabled", () => {
+		const fn = vi.fn();
+		renderHook(() => useTimeout(fn, 100, { enabled: false }));
+		vi.advanceTimersByTime(200);
+		expect(fn).not.toHaveBeenCalled();
+	});
+
+	test("clear cancels pending timeout", () => {
+		const fn = vi.fn();
+		const { result } = renderHook(() => useTimeout(fn, 100));
+
+		act(() => {
+			result.current.clear();
+		});
+		vi.advanceTimersByTime(100);
+		expect(fn).not.toHaveBeenCalled();
+	});
+
+	test("start and clear controls", () => {
+		const fn = vi.fn();
+		const { result } = renderHook(() => useTimeout(fn, 1000, { enabled: false }));
+		expect(result.current.isPending()).toBe(false);
+		act(() => {
+			result.current.start(50);
+		});
+		expect(result.current.isPending()).toBe(true);
+		vi.advanceTimersByTime(50);
+		expect(fn).toHaveBeenCalledOnce();
+		expect(result.current.isPending()).toBe(false);
+	});
+
+	test("reset restarts the timeout", () => {
+		const fn = vi.fn();
+		const { result } = renderHook(() => useTimeout(fn, 500));
+		vi.advanceTimersByTime(200);
+		act(() => {
+			result.current.reset(100);
+		});
+		vi.advanceTimersByTime(100);
+		expect(fn).toHaveBeenCalledOnce();
+	});
+
+	test("start overrides default delay", () => {
+		const fn = vi.fn();
+		const { result } = renderHook(() => useTimeout(fn, 500, { enabled: false }));
+		act(() => {
+			result.current.start(50);
+		});
+		vi.advanceTimersByTime(50);
+		expect(fn).toHaveBeenCalledOnce();
+	});
+});

package/tests/hooks/useToggleState.test.ts

@@ -0,0 +1,43 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { useToggleState } from "@/packages/hooks/useToggleState";
+
+describe("useToggleState", () => {
+	test("initializes with false by default", () => {
+		const { result } = renderHook(() => useToggleState());
+		expect(result.current.value).toBe(false);
+	});
+
+	test("initializes with provided value", () => {
+		const { result } = renderHook(() => useToggleState(true));
+		expect(result.current.value).toBe(true);
+	});
+
+	test("setTrue sets value to true", () => {
+		const { result } = renderHook(() => useToggleState(false));
+		act(() => {
+			result.current.setTrue();
+		});
+		expect(result.current.value).toBe(true);
+	});
+
+	test("setFalse sets value to false", () => {
+		const { result } = renderHook(() => useToggleState(true));
+		act(() => {
+			result.current.setFalse();
+		});
+		expect(result.current.value).toBe(false);
+	});
+
+	test("toggle switches value", () => {
+		const { result } = renderHook(() => useToggleState(false));
+		act(() => {
+			result.current.toggle();
+		});
+		expect(result.current.value).toBe(true);
+		act(() => {
+			result.current.toggle();
+		});
+		expect(result.current.value).toBe(false);
+	});
+});

package/tests/hooks/useViewportHeight.test.ts

@@ -0,0 +1,32 @@
+import { act, renderHook } from "@testing-library/react";
+import { describe, expect, test, vi } from "vitest";
+import { useViewportHeight } from "@/packages/hooks/useViewportHeight";
+
+describe("useViewportHeight", () => {
+	test("returns a height value", () => {
+		const { result } = renderHook(() => useViewportHeight());
+		expect(result.current.height).toBeGreaterThanOrEqual(0);
+	});
+
+	test("updates height on window resize", () => {
+		const { result } = renderHook(() => useViewportHeight());
+
+		act(() => {
+			window.innerHeight = 500;
+			window.dispatchEvent(new Event("resize"));
+		});
+		expect(result.current.height).toBe(500);
+	});
+
+	test("removes event listeners on unmount", () => {
+		const addResize = vi.spyOn(window, "addEventListener");
+		const removeResize = vi.spyOn(window, "removeEventListener");
+
+		const { unmount } = renderHook(() => useViewportHeight());
+		unmount();
+
+		expect(removeResize).toHaveBeenCalledWith("resize", expect.any(Function));
+		addResize.mockRestore();
+		removeResize.mockRestore();
+	});
+});

package/tests/hooks/useViewportMatch.test.ts

@@ -0,0 +1,35 @@
+import { renderHook } from "@testing-library/react";
+import { beforeEach, describe, expect, test, vi } from "vitest";
+import { useViewportMatch } from "@/packages/hooks/useViewportMatch";
+
+describe("useViewportMatch", () => {
+	beforeEach(() => {
+		vi.stubGlobal(
+			"matchMedia",
+			vi.fn().mockImplementation((query: string) => ({
+				matches: false,
+				media: query,
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+			})),
+		);
+	});
+
+	test("returns false initially", () => {
+		const { result } = renderHook(() => useViewportMatch("(min-width: 768px)"));
+		expect(result.current).toBe(false);
+	});
+
+	test("returns true when matched", () => {
+		vi.stubGlobal(
+			"matchMedia",
+			vi.fn().mockImplementation(() => ({
+				matches: true,
+				addEventListener: vi.fn(),
+				removeEventListener: vi.fn(),
+			})),
+		);
+		const { result } = renderHook(() => useViewportMatch("(min-width: 768px)"));
+		expect(result.current).toBe(true);
+	});
+});

package/tests/setup.ts

@@ -0,0 +1,9 @@
+import "@testing-library/jest-dom";
+
+class ResizeObserverMock {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
+window.ResizeObserver = ResizeObserverMock as unknown as typeof ResizeObserver;

package/tests/utils/browserStorage.test.ts

@@ -0,0 +1,114 @@
+import { afterEach, beforeEach, describe, expect, test, vi } from "vitest";
+import {
+	getLocalStorage,
+	getSessionStorage,
+	removeLocalStorage,
+	removeSessionStorage,
+	updateLocalStorage,
+	updateSessionStorage,
+} from "@/packages/utils/browserStorage";
+
+describe("browserStorage", () => {
+	let mockStorage: Record<string, string>;
+	let mockStorage2: Record<string, string>;
+
+	beforeEach(() => {
+		mockStorage = {};
+		mockStorage2 = {};
+
+		const createMockStorage = (store: Record<string, string>) => ({
+			getItem: vi.fn((key) => store[key] ?? null),
+			setItem: vi.fn((key, value) => {
+				store[key] = value.toString();
+			}),
+			removeItem: vi.fn((key) => {
+				delete store[key];
+			}),
+			clear: vi.fn(() => {
+				Object.keys(store).forEach((k) => delete store[k]);
+			}),
+		});
+
+		vi.stubGlobal("localStorage", createMockStorage(mockStorage));
+		vi.stubGlobal("sessionStorage", createMockStorage(mockStorage2));
+	});
+
+	afterEach(() => {
+		vi.unstubAllGlobals();
+	});
+
+	test("localStorage operations", () => {
+		updateLocalStorage("foo", { bar: "baz" });
+		expect(localStorage.getItem("foo")).toBe('{"bar":"baz"}');
+		expect(getLocalStorage("foo")).toEqual({ bar: "baz" });
+
+		removeLocalStorage("foo");
+		expect(getLocalStorage("foo")).toBeNull();
+	});
+
+	test("sessionStorage operations", () => {
+		updateSessionStorage("foo", { bar: "baz" });
+		expect(sessionStorage.getItem("foo")).toBe('{"bar":"baz"}');
+		expect(getSessionStorage("foo")).toEqual({ bar: "baz" });
+
+		removeSessionStorage("foo");
+		expect(getSessionStorage("foo")).toBeNull();
+	});
+
+	test("handles invalid json gracefully", () => {
+		localStorage.setItem("invalid", "not-json");
+		expect(getLocalStorage("invalid")).toBeNull();
+	});
+
+	test("returns null when window is undefined (SSR)", () => {
+		const win = global.window;
+		// @ts-expect-error
+		delete global.window;
+		expect(getLocalStorage("foo")).toBeNull();
+		expect(getSessionStorage("foo")).toBeNull();
+		updateLocalStorage("foo", "bar");
+		global.window = win;
+	});
+
+	test("handles storage setItem throwing", () => {
+		const storage = localStorage;
+		vi.spyOn(storage, "setItem").mockImplementation(() => {
+			throw new Error("QuotaExceededError");
+		});
+		updateLocalStorage("foo", "bar");
+		expect(storage.setItem).toHaveBeenCalled();
+	});
+
+	test("removeStorage handles missing storage gracefully", () => {
+		const win = global.window;
+		// @ts-expect-error
+		delete global.window;
+		removeLocalStorage("foo");
+		removeSessionStorage("foo");
+		global.window = win;
+	});
+
+	test("getLocalStorage returns null when getItem throws", () => {
+		const storage = localStorage;
+		vi.spyOn(storage, "getItem").mockImplementation(() => {
+			throw new Error("StorageError");
+		});
+		expect(getLocalStorage("foo")).toBeNull();
+	});
+
+	test("removeLocalStorage handles removeItem throwing", () => {
+		const storage = localStorage;
+		vi.spyOn(storage, "removeItem").mockImplementation(() => {
+			throw new Error("StorageError");
+		});
+		expect(() => removeLocalStorage("foo")).not.toThrow();
+	});
+
+	test("getLocalStorage returns null for non-existent key", () => {
+		expect(getLocalStorage("non-existent-key")).toBeNull();
+	});
+
+	test("sessionStorage returns null for non-existent key", () => {
+		expect(getSessionStorage("non-existent-key")).toBeNull();
+	});
+});

package/tests/utils/buildContext.test.tsx

@@ -0,0 +1,26 @@
+import { render, screen } from "@testing-library/react";
+import { describe, expect, test } from "vitest";
+import { buildContext } from "@/packages/utils/buildContext";
+
+describe("buildContext", () => {
+	const [Provider, useValue] = buildContext<string>("default");
+
+	function TestComponent() {
+		const val = useValue();
+		return <div data-testid="val">{val}</div>;
+	}
+
+	test("returns default value when not wrapped in provider", () => {
+		render(<TestComponent />);
+		expect(screen.getByTestId("val").textContent).toBe("default");
+	});
+
+	test("returns provided value", () => {
+		render(
+			<Provider value="provided">
+				<TestComponent />
+			</Provider>,
+		);
+		expect(screen.getByTestId("val").textContent).toBe("provided");
+	});
+});

package/tests/utils/checkDevice.test.ts

@@ -0,0 +1,140 @@
+import { afterEach, describe, expect, test } from "vitest";
+import { getDeviceInfo } from "@/packages/utils/checkDevice";
+
+describe("getDeviceInfo", () => {
+	const originalUserAgent = navigator.userAgent;
+
+	afterEach(() => {
+		Object.defineProperty(navigator, "userAgent", {
+			value: originalUserAgent,
+			writable: true,
+			configurable: true,
+		});
+	});
+
+	test("returns default values in SSR (no window)", () => {
+		const win = global.window;
+		(global as any).window = undefined;
+		const info = getDeviceInfo();
+		expect(info.isMobile).toBe(false);
+		expect(info.browser).toBe("unknown");
+		global.window = win;
+	});
+
+	test("detects mobile Chrome", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value:
+				"Mozilla/5.0 (Linux; Android 13) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Mobile Safari/537.36",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.isMobile).toBe(true);
+		expect(info.isAndroid).toBe(true);
+		expect(info.browser).toBe("chrome");
+	});
+
+	test("detects iOS Safari", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value:
+				"Mozilla/5.0 (iPhone; CPU iPhone OS 17_0 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Mobile/15E148 Safari/604.1",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.isMobile).toBe(true);
+		expect(info.isIOS).toBe(true);
+		expect(info.isSafari).toBe(true);
+		expect(info.isIOSSafari).toBe(true);
+		expect(info.browser).toBe("safari");
+	});
+
+	test("detects desktop Chrome", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value:
+				"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.isMobile).toBe(false);
+		expect(info.browser).toBe("chrome");
+	});
+
+	test("detects Mac Safari", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value:
+				"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/604.1",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.isMobile).toBe(false);
+		expect(info.isMacSafari).toBe(true);
+		expect(info.isSafari).toBe(true);
+		expect(info.browser).toBe("safari");
+	});
+
+	test("detects Firefox browser", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value: "Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:120.0) Gecko/20100101 Firefox/120.0",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.browser).toBe("firefox");
+	});
+
+	test("detects Edge browser", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value:
+				"Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Edge/44.18362.1.0",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.browser).toBe("edge");
+	});
+
+	test("returns unknown browser for unrecognized UA", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value: "SomeUnknownBrowser/1.0",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.browser).toBe("unknown");
+	});
+
+	test("detects Samsung Browser", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value:
+				"Mozilla/5.0 (Linux; Android 14) AppleWebKit/537.36 (KHTML, like Gecko) SamsungBrowser/24.0 Chrome/120.0.6099.230 Mobile Safari/537.36",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.isSamsungBrowser).toBe(true);
+		expect(info.browser).toBe("samsung");
+	});
+
+	test("detects isTouchDevice correctly", () => {
+		const hasTouch = "ontouchstart" in window;
+		const info = getDeviceInfo();
+		expect(info.isTouchDevice).toBe(hasTouch);
+	});
+
+	test("detects desktop Safari correctly distinguishes from mobile", () => {
+		Object.defineProperty(navigator, "userAgent", {
+			value:
+				"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.0 Safari/604.1",
+			writable: true,
+			configurable: true,
+		});
+		const info = getDeviceInfo();
+		expect(info.isSafari).toBe(true);
+		expect(info.isMacSafari).toBe(true);
+		expect(info.isIOSSafari).toBe(false);
+		expect(info.isMobile).toBe(false);
+	});
+});