Add tests for Phase 24 hooks

Add test files for the 5 Phase 24 interaction hooks:
- useDndProtocol: drag-and-drop config, state, zone validation, drop effects
- useGestureProtocol: gesture registration, touch targets, active gesture
- useAnimationProtocol: animation/transition registration, reduced motion
- usePageTransitionProtocol: presets, default/current transitions
- useComponentAnimation: per-component animation config, partial updates

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

Author: Copilot

__tests__/hooks/useAnimationProtocol.test.ts

@@ -0,0 +1,128 @@
+/**
+ * Tests for useAnimationProtocol – validates animation and transition
+ * registration, removal, retrieval, and reduced-motion awareness.
+ */
+import { renderHook, act } from "@testing-library/react-native";
+import { useAnimationProtocol, AnimationConfig, TransitionConfig } from "~/hooks/useAnimationProtocol";
+
+const fadeIn: AnimationConfig = {
+  type: "fade",
+  duration: 300,
+  delay: 0,
+  easing: "ease-in-out",
+  iterations: 1,
+};
+
+const slideUp: TransitionConfig = {
+  property: "translateY",
+  from: 100,
+  to: 0,
+  duration: 250,
+  easing: "ease-out",
+};
+
+describe("useAnimationProtocol", () => {
+  it("returns default initial state", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    expect(result.current.animations.size).toBe(0);
+    expect(result.current.transitions.size).toBe(0);
+    expect(result.current.motionConfig).toEqual({
+      reducedMotion: false,
+      prefersContrast: false,
+      animationScale: 1,
+    });
+    expect(result.current.isReduced).toBe(false);
+  });
+
+  it("registers and retrieves an animation", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", fadeIn);
+    });
+
+    expect(result.current.animations.size).toBe(1);
+    expect(result.current.getAnimation("fadeIn")).toEqual(fadeIn);
+  });
+
+  it("removes an animation", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", fadeIn);
+    });
+
+    act(() => {
+      result.current.removeAnimation("fadeIn");
+    });
+
+    expect(result.current.animations.size).toBe(0);
+    expect(result.current.getAnimation("fadeIn")).toBeUndefined();
+  });
+
+  it("registers and retrieves a transition", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerTransition("slideUp", slideUp);
+    });
+
+    expect(result.current.transitions.size).toBe(1);
+    expect(result.current.getTransition("slideUp")).toEqual(slideUp);
+  });
+
+  it("removes a transition", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerTransition("slideUp", slideUp);
+    });
+
+    act(() => {
+      result.current.removeTransition("slideUp");
+    });
+
+    expect(result.current.transitions.size).toBe(0);
+    expect(result.current.getTransition("slideUp")).toBeUndefined();
+  });
+
+  it("sets motion config and computes isReduced", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.setMotionConfig({
+        reducedMotion: true,
+        prefersContrast: true,
+        animationScale: 0.5,
+      });
+    });
+
+    expect(result.current.isReduced).toBe(true);
+    expect(result.current.motionConfig.animationScale).toBe(0.5);
+  });
+
+  it("returns undefined for unregistered ids", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    expect(result.current.getAnimation("nonexistent")).toBeUndefined();
+    expect(result.current.getTransition("nonexistent")).toBeUndefined();
+  });
+
+  it("replaces an existing animation config", () => {
+    const { result } = renderHook(() => useAnimationProtocol());
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", fadeIn);
+    });
+
+    const updated: AnimationConfig = { ...fadeIn, duration: 500 };
+
+    act(() => {
+      result.current.registerAnimation("fadeIn", updated);
+    });
+
+    expect(result.current.animations.size).toBe(1);
+    expect(result.current.getAnimation("fadeIn")!.duration).toBe(500);
+  });
+});

__tests__/hooks/useComponentAnimation.test.ts

@@ -0,0 +1,125 @@
+/**
+ * Tests for useComponentAnimation – validates per-component animation
+ * registration, removal, partial updates, and computed component list.
+ */
+import { renderHook, act } from "@testing-library/react-native";
+import { useComponentAnimation, ComponentAnimationConfig } from "~/hooks/useComponentAnimation";
+
+const cardConfig: ComponentAnimationConfig = {
+  componentId: "card-1",
+  enter: { duration: 200, easing: { type: "ease_in" } },
+  exit: { duration: 150, easing: { type: "ease_out" } },
+};
+
+const buttonConfig: ComponentAnimationConfig = {
+  componentId: "btn-1",
+  hover: { duration: 100, easing: { type: "linear" } },
+  disabled: false,
+};
+
+describe("useComponentAnimation", () => {
+  it("returns empty initial state", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    expect(result.current.componentAnimations.size).toBe(0);
+    expect(result.current.registeredComponents).toEqual([]);
+  });
+
+  it("sets and retrieves a component animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    expect(result.current.componentAnimations.size).toBe(1);
+    expect(result.current.getComponentAnimation("card-1")).toEqual(cardConfig);
+    expect(result.current.registeredComponents).toEqual(["card-1"]);
+  });
+
+  it("removes a component animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+      result.current.setComponentAnimation("btn-1", buttonConfig);
+    });
+
+    act(() => {
+      result.current.removeComponentAnimation("card-1");
+    });
+
+    expect(result.current.componentAnimations.size).toBe(1);
+    expect(result.current.getComponentAnimation("card-1")).toBeUndefined();
+    expect(result.current.registeredComponents).toEqual(["btn-1"]);
+  });
+
+  it("updates only the enter animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    const newEnter = { duration: 400, easing: { type: "spring" as const } };
+
+    act(() => {
+      result.current.updateEnterAnimation("card-1", newEnter);
+    });
+
+    const updated = result.current.getComponentAnimation("card-1")!;
+    expect(updated.enter).toEqual(newEnter);
+    expect(updated.exit).toEqual(cardConfig.exit);
+  });
+
+  it("updates only the exit animation", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    const newExit = { duration: 500, easing: { type: "ease_in_out" as const } };
+
+    act(() => {
+      result.current.updateExitAnimation("card-1", newExit);
+    });
+
+    const updated = result.current.getComponentAnimation("card-1")!;
+    expect(updated.exit).toEqual(newExit);
+    expect(updated.enter).toEqual(cardConfig.enter);
+  });
+
+  it("updateEnterAnimation is a no-op for unregistered component", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.updateEnterAnimation("unknown", { duration: 100, easing: { type: "linear" } });
+    });
+
+    expect(result.current.componentAnimations.size).toBe(0);
+  });
+
+  it("returns undefined for unregistered component id", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    expect(result.current.getComponentAnimation("nonexistent")).toBeUndefined();
+  });
+
+  it("replaces an existing component config", () => {
+    const { result } = renderHook(() => useComponentAnimation());
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", cardConfig);
+    });
+
+    const updated: ComponentAnimationConfig = { ...cardConfig, disabled: true };
+
+    act(() => {
+      result.current.setComponentAnimation("card-1", updated);
+    });
+
+    expect(result.current.componentAnimations.size).toBe(1);
+    expect(result.current.getComponentAnimation("card-1")!.disabled).toBe(true);
+  });
+});

__tests__/hooks/useDndProtocol.test.ts

@@ -0,0 +1,135 @@
+/**
+ * Tests for useDndProtocol – validates drag-and-drop configuration,
+ * drag state tracking, drop-zone validation, and drop-effect resolution.
+ */
+import { renderHook, act } from "@testing-library/react-native";
+import { useDndProtocol, DndConfig, DragItem } from "~/hooks/useDndProtocol";
+
+const sampleConfig: DndConfig = {
+  zones: [
+    { id: "trash", accepts: ["card", "image"] },
+    { id: "favorites", accepts: ["card"] },
+  ],
+  defaultDropEffect: "move",
+};
+
+const sampleItem: DragItem = { id: "c1", type: "card", data: { title: "Hello" } };
+
+describe("useDndProtocol", () => {
+  it("returns null/empty initial state", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    expect(result.current.config).toBeNull();
+    expect(result.current.activeItem).toBeNull();
+    expect(result.current.activeZone).toBeNull();
+    expect(result.current.isDragging).toBe(false);
+  });
+
+  it("sets config", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    act(() => {
+      result.current.setConfig(sampleConfig);
+    });
+
+    expect(result.current.config).toEqual(sampleConfig);
+    expect(result.current.config!.zones).toHaveLength(2);
+  });
+
+  it("starts and ends a drag operation", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    act(() => {
+      result.current.startDrag(sampleItem);
+    });
+
+    expect(result.current.activeItem).toEqual(sampleItem);
+    expect(result.current.isDragging).toBe(true);
+
+    act(() => {
+      result.current.endDrag();
+    });
+
+    expect(result.current.activeItem).toBeNull();
+    expect(result.current.isDragging).toBe(false);
+  });
+
+  it("sets and clears the active zone", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    act(() => {
+      result.current.setActiveZone("trash");
+    });
+
+    expect(result.current.activeZone).toBe("trash");
+
+    act(() => {
+      result.current.setActiveZone(null);
+    });
+
+    expect(result.current.activeZone).toBeNull();
+  });
+
+  it("endDrag clears both activeItem and activeZone", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    act(() => {
+      result.current.startDrag(sampleItem);
+      result.current.setActiveZone("trash");
+    });
+
+    act(() => {
+      result.current.endDrag();
+    });
+
+    expect(result.current.activeItem).toBeNull();
+    expect(result.current.activeZone).toBeNull();
+  });
+
+  it("canDrop returns true when zone accepts item type", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    act(() => {
+      result.current.setConfig(sampleConfig);
+    });
+
+    expect(result.current.canDrop("card", "trash")).toBe(true);
+    expect(result.current.canDrop("image", "trash")).toBe(true);
+    expect(result.current.canDrop("card", "favorites")).toBe(true);
+  });
+
+  it("canDrop returns false for unaccepted types or missing config", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    // No config set
+    expect(result.current.canDrop("card", "trash")).toBe(false);
+
+    act(() => {
+      result.current.setConfig(sampleConfig);
+    });
+
+    expect(result.current.canDrop("image", "favorites")).toBe(false);
+    expect(result.current.canDrop("card", "nonexistent")).toBe(false);
+  });
+
+  it("getDropEffect returns configured effect or none", () => {
+    const { result } = renderHook(() => useDndProtocol());
+
+    // No config → "none"
+    expect(result.current.getDropEffect("card", "trash")).toBe("none");
+
+    act(() => {
+      result.current.setConfig(sampleConfig);
+    });
+
+    expect(result.current.getDropEffect("card", "trash")).toBe("move");
+    expect(result.current.getDropEffect("image", "favorites")).toBe("none");
+
+    act(() => {
+      result.current.setConfig({ zones: [{ id: "z", accepts: ["a"] }] });
+    });
+
+    // No defaultDropEffect → falls back to "move"
+    expect(result.current.getDropEffect("a", "z")).toBe("move");
+  });
+});