@souscheflabs/reanimated-flashlist 0.1.7

package/src/__tests__/hooks/useDropCompensation.test.tsx

@@ -0,0 +1,182 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-native';
+import { useDropCompensation } from '../../hooks/drag/useDropCompensation';
+import { DragStateProvider } from '../../contexts/DragStateContext';
+import { createMockSharedValue } from '../utils/test-utils';
+
+describe('useDropCompensation', () => {
+  const createWrapper = () => {
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <DragStateProvider>{children}</DragStateProvider>
+    );
+    return Wrapper;
+  };
+
+  it('does not throw when initialized', () => {
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    expect(() => {
+      renderHook(
+        () =>
+          useDropCompensation({
+            itemId: 'item-1',
+            index: 0,
+            translateY: translateY as any,
+            shiftY: shiftY as any,
+          }),
+        { wrapper: createWrapper() },
+      );
+    }).not.toThrow();
+  });
+
+  it('handles index unchanged scenario', () => {
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    const { rerender } = renderHook(
+      ({ index }) =>
+        useDropCompensation({
+          itemId: 'item-1',
+          index,
+          translateY: translateY as any,
+          shiftY: shiftY as any,
+        }),
+      {
+        wrapper: createWrapper(),
+        initialProps: { index: 0 },
+      },
+    );
+
+    // Rerender with same index
+    rerender({ index: 0 });
+
+    // Should not modify translateY when index doesn't change
+    expect(translateY.value).toBe(0);
+  });
+
+  it('works with different item IDs', () => {
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    const { rerender } = renderHook(
+      ({ itemId, index }) =>
+        useDropCompensation({
+          itemId,
+          index,
+          translateY: translateY as any,
+          shiftY: shiftY as any,
+        }),
+      {
+        wrapper: createWrapper(),
+        initialProps: { itemId: 'item-1', index: 0 },
+      },
+    );
+
+    // Rerender with different itemId (view recycling)
+    rerender({ itemId: 'item-2', index: 0 });
+
+    expect(translateY.value).toBe(0);
+  });
+
+  it('tracks index changes via shared value', () => {
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    const { rerender } = renderHook(
+      ({ index }) =>
+        useDropCompensation({
+          itemId: 'item-1',
+          index,
+          translateY: translateY as any,
+          shiftY: shiftY as any,
+        }),
+      {
+        wrapper: createWrapper(),
+        initialProps: { index: 0 },
+      },
+    );
+
+    // Rerender with new index
+    rerender({ index: 1 });
+
+    // Hook should track the index change
+  });
+
+  it('handles multiple items with different indices', () => {
+    const items = [0, 1, 2, 3, 4].map((index) => {
+      const translateY = createMockSharedValue(0);
+      const shiftY = createMockSharedValue(0);
+
+      return renderHook(
+        () =>
+          useDropCompensation({
+            itemId: `item-${index}`,
+            index,
+            translateY: translateY as any,
+            shiftY: shiftY as any,
+          }),
+        { wrapper: createWrapper() },
+      );
+    });
+
+    // All items should be rendered without errors
+    expect(items.length).toBe(5);
+  });
+
+  it('unmounts cleanly', () => {
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(0);
+
+    const { unmount } = renderHook(
+      () =>
+        useDropCompensation({
+          itemId: 'item-1',
+          index: 0,
+          translateY: translateY as any,
+          shiftY: shiftY as any,
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    expect(() => unmount()).not.toThrow();
+  });
+
+  it('works with non-zero initial shiftY', () => {
+    const translateY = createMockSharedValue(0);
+    const shiftY = createMockSharedValue(80);
+
+    const { result } = renderHook(
+      () =>
+        useDropCompensation({
+          itemId: 'item-1',
+          index: 0,
+          translateY: translateY as any,
+          shiftY: shiftY as any,
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    // Hook should handle non-zero shiftY
+    expect(shiftY.value).toBe(80);
+  });
+
+  it('works with non-zero initial translateY', () => {
+    const translateY = createMockSharedValue(100);
+    const shiftY = createMockSharedValue(0);
+
+    renderHook(
+      () =>
+        useDropCompensation({
+          itemId: 'item-1',
+          index: 0,
+          translateY: translateY as any,
+          shiftY: shiftY as any,
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    // Hook should handle non-zero translateY
+    expect(translateY.value).toBe(100);
+  });
+});

package/src/__tests__/hooks/useListEntryAnimation.test.tsx

@@ -0,0 +1,135 @@
+import React from 'react';
+import { renderHook } from '@testing-library/react-native';
+import { useListEntryAnimation } from '../../hooks/animations/useListEntryAnimation';
+import { ListAnimationProvider } from '../../contexts/ListAnimationContext';
+
+describe('useListEntryAnimation', () => {
+  const createWrapper = () => {
+    const Wrapper = ({ children }: { children: React.ReactNode }) => (
+      <ListAnimationProvider>{children}</ListAnimationProvider>
+    );
+    return Wrapper;
+  };
+
+  it('returns entryAnimatedStyle', () => {
+    const { result } = renderHook(() => useListEntryAnimation('item-1'), {
+      wrapper: createWrapper(),
+    });
+
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('works without ListAnimationProvider (optional context)', () => {
+    // Should not throw when used without provider
+    const { result } = renderHook(() => useListEntryAnimation('item-1'));
+
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('accepts custom config overrides', () => {
+    const { result } = renderHook(
+      () =>
+        useListEntryAnimation('item-1', {
+          fade: { duration: 500 },
+          slide: { distance: 100, duration: 400 },
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('resets animation state when itemId changes (view recycling)', () => {
+    const { result, rerender } = renderHook(
+      ({ itemId }) => useListEntryAnimation(itemId),
+      {
+        wrapper: createWrapper(),
+        initialProps: { itemId: 'item-1' },
+      },
+    );
+
+    const initialStyle = result.current.entryAnimatedStyle;
+    expect(initialStyle).toBeDefined();
+
+    // Rerender with different itemId (simulates view recycling)
+    rerender({ itemId: 'item-2' });
+
+    // Style should still be defined after recycling
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('only checks for entry animation once per item', () => {
+    const { result, rerender } = renderHook(
+      ({ itemId }) => useListEntryAnimation(itemId),
+      {
+        wrapper: createWrapper(),
+        initialProps: { itemId: 'item-1' },
+      },
+    );
+
+    // First render
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+
+    // Rerender same item - should not re-check
+    rerender({ itemId: 'item-1' });
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('resets check flag when item changes', () => {
+    const { result, rerender } = renderHook(
+      ({ itemId }) => useListEntryAnimation(itemId),
+      {
+        wrapper: createWrapper(),
+        initialProps: { itemId: 'item-1' },
+      },
+    );
+
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+
+    // Change to different item - should reset check flag
+    rerender({ itemId: 'item-2' });
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+
+    // Change back - should check again
+    rerender({ itemId: 'item-1' });
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('uses default animation config values', () => {
+    const { result } = renderHook(() => useListEntryAnimation('item-1'), {
+      wrapper: createWrapper(),
+    });
+
+    // Should use defaults without throwing
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('partial config overrides merge with defaults', () => {
+    const { result } = renderHook(
+      () =>
+        useListEntryAnimation('item-1', {
+          fade: { duration: 500 },
+          // slide not specified - should use defaults
+        }),
+      { wrapper: createWrapper() },
+    );
+
+    expect(result.current.entryAnimatedStyle).toBeDefined();
+  });
+
+  it('handles multiple items simultaneously', () => {
+    const item1 = renderHook(() => useListEntryAnimation('item-1'), {
+      wrapper: createWrapper(),
+    });
+    const item2 = renderHook(() => useListEntryAnimation('item-2'), {
+      wrapper: createWrapper(),
+    });
+    const item3 = renderHook(() => useListEntryAnimation('item-3'), {
+      wrapper: createWrapper(),
+    });
+
+    expect(item1.result.current.entryAnimatedStyle).toBeDefined();
+    expect(item2.result.current.entryAnimatedStyle).toBeDefined();
+    expect(item3.result.current.entryAnimatedStyle).toBeDefined();
+  });
+});

package/src/__tests__/hooks/useListExitAnimation.test.tsx

@@ -0,0 +1,175 @@
+import { renderHook, act } from '@testing-library/react-native';
+import { useListExitAnimation } from '../../hooks/animations/useListExitAnimation';
+
+// Mock scheduleOnRN to execute synchronously in tests
+jest.mock('react-native-worklets', () => ({
+  scheduleOnRN: jest.fn((fn) => fn()),
+}));
+
+describe('useListExitAnimation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('returns exitAnimatedStyle, triggerExit, and resetAnimation', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    expect(result.current.exitAnimatedStyle).toBeDefined();
+    expect(typeof result.current.triggerExit).toBe('function');
+    expect(typeof result.current.resetAnimation).toBe('function');
+  });
+
+  it('exitAnimatedStyle returns static values when no animation is active', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    // The animated style should return static values
+    const style = result.current.exitAnimatedStyle;
+    expect(style).toBeDefined();
+  });
+
+  it('triggerExit accepts direction and onComplete callback', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    const onComplete = jest.fn();
+
+    act(() => {
+      result.current.triggerExit(1, onComplete);
+    });
+
+    // Function should be callable without throwing
+    expect(onComplete).not.toThrow;
+  });
+
+  it('triggerExit with direction -1 (backward)', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    const onComplete = jest.fn();
+
+    act(() => {
+      result.current.triggerExit(-1, onComplete);
+    });
+
+    // Function should be callable without throwing
+    expect(onComplete).not.toThrow;
+  });
+
+  it('triggerExit guards against rapid toggling', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    const onComplete1 = jest.fn();
+    const onComplete2 = jest.fn();
+
+    act(() => {
+      result.current.triggerExit(1, onComplete1);
+      // This should be ignored due to isAnimating guard
+      result.current.triggerExit(-1, onComplete2);
+    });
+
+    // Only first animation should be triggered
+    // The guard prevents rapid toggling
+  });
+
+  it('resetAnimation clears animation state', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    act(() => {
+      result.current.resetAnimation();
+    });
+
+    // After reset, animation should be in default state
+    expect(result.current.exitAnimatedStyle).toBeDefined();
+  });
+
+  it('resets state when itemId changes (view recycling)', () => {
+    const { result, rerender } = renderHook(
+      ({ itemId }) => useListExitAnimation(itemId),
+      { initialProps: { itemId: 'item-1' } },
+    );
+
+    const onComplete = jest.fn();
+    act(() => {
+      result.current.triggerExit(1, onComplete);
+    });
+
+    // Rerender with different itemId (simulates view recycling)
+    rerender({ itemId: 'item-2' });
+
+    // Animation state should be reset for the new item
+    expect(result.current.exitAnimatedStyle).toBeDefined();
+  });
+
+  it('uses fast preset by default', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    const onComplete = jest.fn();
+
+    act(() => {
+      result.current.triggerExit(1, onComplete);
+    });
+
+    // Fast preset should be used by default
+    expect(result.current.triggerExit).toBeDefined();
+  });
+
+  it('supports default preset', () => {
+    const { result } = renderHook(() => useListExitAnimation('item-1'));
+
+    const onComplete = jest.fn();
+
+    act(() => {
+      result.current.triggerExit(1, onComplete, 'default');
+    });
+
+    // Default preset should be usable
+    expect(result.current.triggerExit).toBeDefined();
+  });
+
+  it('calls onExitStart callback when configured', () => {
+    const onExitStart = jest.fn();
+    const onExitComplete = jest.fn();
+
+    const { result } = renderHook(() =>
+      useListExitAnimation('item-1', {
+        index: 2,
+        measuredHeight: 80,
+        onExitStart,
+        onExitComplete,
+      }),
+    );
+
+    const onComplete = jest.fn();
+
+    act(() => {
+      result.current.triggerExit(1, onComplete);
+    });
+
+    expect(onExitStart).toHaveBeenCalledWith(2, 80);
+  });
+
+  it('calls onExitComplete when animation finishes', () => {
+    const onExitComplete = jest.fn();
+
+    const { result } = renderHook(() =>
+      useListExitAnimation('item-1', {
+        onExitComplete,
+      }),
+    );
+
+    const onComplete = jest.fn();
+
+    act(() => {
+      result.current.triggerExit(1, onComplete);
+    });
+
+    // Due to mocking, callback may be called synchronously
+    // In real usage, it would be called after animation completes
+  });
+
+  it('unmounts cleanly without errors', () => {
+    const { unmount } = renderHook(() => useListExitAnimation('item-1'));
+
+    expect(() => {
+      unmount();
+    }).not.toThrow();
+  });
+});

package/src/__tests__/utils/test-utils.tsx

@@ -0,0 +1,159 @@
+import React, { ReactElement } from 'react';
+import { render, RenderOptions } from '@testing-library/react-native';
+import { DragStateProvider } from '../../contexts/DragStateContext';
+import { ListAnimationProvider } from '../../contexts/ListAnimationContext';
+import type { DragConfig } from '../../types';
+
+/**
+ * Props for the AllProviders wrapper
+ */
+interface AllProvidersProps {
+  children: React.ReactNode;
+  dragConfig?: Partial<DragConfig>;
+  entryAnimationTimeout?: number;
+  layoutAnimationDuration?: number;
+}
+
+/**
+ * Wrapper component that provides all required contexts for testing
+ */
+const AllProviders: React.FC<AllProvidersProps> = ({
+  children,
+  dragConfig,
+  entryAnimationTimeout,
+  layoutAnimationDuration,
+}) => {
+  return (
+    <ListAnimationProvider
+      entryAnimationTimeout={entryAnimationTimeout}
+      layoutAnimationDuration={layoutAnimationDuration}
+    >
+      <DragStateProvider config={dragConfig}>{children}</DragStateProvider>
+    </ListAnimationProvider>
+  );
+};
+
+/**
+ * Custom render options with context configuration
+ */
+interface CustomRenderOptions extends Omit<RenderOptions, 'wrapper'> {
+  dragConfig?: Partial<DragConfig>;
+  entryAnimationTimeout?: number;
+  layoutAnimationDuration?: number;
+}
+
+/**
+ * Custom render function that wraps components with all necessary providers
+ */
+const customRender = (
+  ui: ReactElement,
+  options?: CustomRenderOptions,
+): ReturnType<typeof render> => {
+  const {
+    dragConfig,
+    entryAnimationTimeout,
+    layoutAnimationDuration,
+    ...renderOptions
+  } = options ?? {};
+
+  const Wrapper: React.FC<{ children: React.ReactNode }> = ({ children }) => (
+    <AllProviders
+      dragConfig={dragConfig}
+      entryAnimationTimeout={entryAnimationTimeout}
+      layoutAnimationDuration={layoutAnimationDuration}
+    >
+      {children}
+    </AllProviders>
+  );
+
+  return render(ui, { wrapper: Wrapper, ...renderOptions });
+};
+
+// Re-export everything
+export * from '@testing-library/react-native';
+
+// Override render with our custom version
+export { customRender as render };
+
+/**
+ * Create a mock list item with required id field
+ */
+export interface MockListItem {
+  id: string;
+  title?: string;
+  [key: string]: unknown;
+}
+
+/**
+ * Factory function to create a single mock item
+ */
+export const createMockItem = (
+  id: string,
+  overrides: Partial<MockListItem> = {},
+): MockListItem => ({
+  id,
+  title: `Item ${id}`,
+  ...overrides,
+});
+
+/**
+ * Factory function to create multiple mock items
+ */
+export const createMockItems = (count: number): MockListItem[] =>
+  Array.from({ length: count }, (_, i) => createMockItem(`item-${i + 1}`));
+
+/**
+ * Create a mock SharedValue-like object for testing
+ */
+export const createMockSharedValue = <T,>(initialValue: T) => ({
+  value: initialValue,
+  addListener: jest.fn(),
+  removeListener: jest.fn(),
+  modify: jest.fn((modifier: (val: T) => T) => modifier(initialValue)),
+});
+
+/**
+ * Create a mock animated ref for testing
+ */
+export const createMockAnimatedRef = <T,>(current: T | null = null) => ({
+  current,
+});
+
+/**
+ * Wait for animations to complete (mock version)
+ */
+export const waitForAnimations = async (ms = 300): Promise<void> => {
+  await new Promise((resolve) => setTimeout(resolve, ms));
+};
+
+/**
+ * Mock gesture event data for testing drag operations
+ */
+export const createMockGestureEvent = (overrides: Record<string, unknown> = {}) => ({
+  translationX: 0,
+  translationY: 0,
+  velocityX: 0,
+  velocityY: 0,
+  absoluteX: 0,
+  absoluteY: 0,
+  x: 0,
+  y: 0,
+  numberOfPointers: 1,
+  state: 4, // ACTIVE
+  ...overrides,
+});
+
+/**
+ * Mock FlashList ref for testing
+ */
+export const createMockFlashListRef = () => ({
+  scrollToOffset: jest.fn(),
+  scrollToIndex: jest.fn(),
+  scrollToItem: jest.fn(),
+  scrollToEnd: jest.fn(),
+  getScrollOffset: jest.fn(() => 0),
+  getScrollableNode: jest.fn(() => null),
+  recordInteraction: jest.fn(),
+  flashScrollIndicators: jest.fn(),
+  prepareForLayoutAnimationRender: jest.fn(),
+});