Extract custom hooks for reusable logic

2026-01-26 12:51:27 -07:00
parent f513aecacc
commit 86d7cff5d4
21 changed files with 1590 additions and 141 deletions
@@ -0,0 +1,26 @@
+import { renderHook } from "@testing-library/react";
+import { describe, test, expect } from "vitest";
+import { useComponentId } from "../../../app/hooks/useComponentId";
+
+describe("useComponentId", () => {
+  test("generates unique IDs with prefix", () => {
+    const { result } = renderHook(() => useComponentId("input"));
+    expect(result.current.id).toMatch(/^input-/);
+    expect(result.current.labelId).toMatch(/^input-.*-label$/);
+  });
+
+  test("uses provided ID when given", () => {
+    const { result } = renderHook(() => useComponentId("input", "custom-id"));
+    expect(result.current.id).toBe("custom-id");
+    expect(result.current.labelId).toBe("custom-id-label");
+  });
+
+  test("generates different IDs for different prefixes", () => {
+    const { result: result1 } = renderHook(() => useComponentId("input"));
+    const { result: result2 } = renderHook(() => useComponentId("select"));
+
+    expect(result1.current.id).not.toBe(result2.current.id);
+    expect(result1.current.id).toMatch(/^input-/);
+    expect(result2.current.id).toMatch(/^select-/);
+  });
+});