@souscheflabs/reanimated-flashlist 0.1.7

package/src/__tests__/components/AnimatedFlashListItem.test.tsx

@@ -0,0 +1,371 @@
+import React from 'react';
+import { Text, View } from 'react-native';
+import { render } from '../utils/test-utils';
+import { AnimatedFlashListItem } from '../../AnimatedFlashListItem';
+import type { AnimatedRenderItemInfo } from '../../types';
+
+interface TestItem {
+  id: string;
+  title: string;
+}
+
+describe('AnimatedFlashListItem', () => {
+  const defaultItem: TestItem = { id: 'item-1', title: 'Test Item' };
+
+  const defaultRenderItem = ({ item }: AnimatedRenderItemInfo<TestItem>) => (
+    <View testID={`content-${item.id}`}>
+      <Text>{item.title}</Text>
+    </View>
+  );
+
+  it('renders without crashing', () => {
+    expect(() => {
+      render(
+        <AnimatedFlashListItem<TestItem>
+          item={defaultItem}
+          index={0}
+          totalItems={5}
+          isDragEnabled={false}
+          renderItem={defaultRenderItem}
+        />,
+      );
+    }).not.toThrow();
+  });
+
+  it('renders the item content from renderItem prop', () => {
+    const { getByText } = render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={defaultRenderItem}
+      />,
+    );
+
+    expect(getByText('Test Item')).toBeTruthy();
+  });
+
+  it('passes item data to renderItem', () => {
+    let receivedItem: TestItem | null = null;
+
+    const renderItem = ({ item }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedItem = item;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(receivedItem).toEqual(defaultItem);
+  });
+
+  it('passes index to renderItem', () => {
+    let receivedIndex: number | null = null;
+
+    const renderItem = ({ item, index }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedIndex = index;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={3}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(receivedIndex).toBe(3);
+  });
+
+  it('passes totalItems to renderItem', () => {
+    let receivedTotalItems: number | null = null;
+
+    const renderItem = ({ item, totalItems }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedTotalItems = totalItems;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={10}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(receivedTotalItems).toBe(10);
+  });
+
+  it('provides dragHandleProps when isDragEnabled is true', () => {
+    let receivedDragHandleProps: unknown = null;
+
+    const renderItem = ({ item, dragHandleProps }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedDragHandleProps = dragHandleProps;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={true}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(receivedDragHandleProps).not.toBeNull();
+    expect((receivedDragHandleProps as any).gesture).toBeDefined();
+    expect((receivedDragHandleProps as any).isDragging).toBeDefined();
+  });
+
+  it('provides null dragHandleProps when isDragEnabled is false', () => {
+    let receivedDragHandleProps: unknown = 'initial';
+
+    const renderItem = ({ item, dragHandleProps }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedDragHandleProps = dragHandleProps;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(receivedDragHandleProps).toBeNull();
+  });
+
+  it('provides triggerExitAnimation function', () => {
+    let receivedTriggerExit: unknown = null;
+
+    const renderItem = ({
+      item,
+      triggerExitAnimation,
+    }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedTriggerExit = triggerExitAnimation;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(typeof receivedTriggerExit).toBe('function');
+  });
+
+  it('provides resetExitAnimation function', () => {
+    let receivedResetExit: unknown = null;
+
+    const renderItem = ({
+      item,
+      resetExitAnimation,
+    }: AnimatedRenderItemInfo<TestItem>) => {
+      receivedResetExit = resetExitAnimation;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(typeof receivedResetExit).toBe('function');
+  });
+
+  it('calls onReorderByDelta when provided', () => {
+    const onReorderByDelta = jest.fn();
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={true}
+        renderItem={defaultRenderItem}
+        onReorderByDelta={onReorderByDelta}
+      />,
+    );
+
+    // Callback should be provided but not called until drag completes
+    expect(onReorderByDelta).not.toHaveBeenCalled();
+  });
+
+  it('calls onHapticFeedback when provided', () => {
+    const onHapticFeedback = jest.fn();
+
+    render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={true}
+        renderItem={defaultRenderItem}
+        onHapticFeedback={onHapticFeedback}
+      />,
+    );
+
+    // Callback should be provided but not called until drag starts
+    expect(onHapticFeedback).not.toHaveBeenCalled();
+  });
+
+  it('re-renders when item changes', () => {
+    const item1: TestItem = { id: 'item-1', title: 'First Item' };
+    const item2: TestItem = { id: 'item-2', title: 'Second Item' };
+
+    const { rerender, getByText, queryByText } = render(
+      <AnimatedFlashListItem<TestItem>
+        item={item1}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={defaultRenderItem}
+      />,
+    );
+
+    expect(getByText('First Item')).toBeTruthy();
+    expect(queryByText('Second Item')).toBeNull();
+
+    rerender(
+      <AnimatedFlashListItem<TestItem>
+        item={item2}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={defaultRenderItem}
+      />,
+    );
+
+    expect(getByText('Second Item')).toBeTruthy();
+  });
+
+  it('updates when index changes', () => {
+    let lastIndex = -1;
+
+    const renderItem = ({ item, index }: AnimatedRenderItemInfo<TestItem>) => {
+      lastIndex = index;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    const { rerender } = render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(lastIndex).toBe(0);
+
+    rerender(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={2}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(lastIndex).toBe(2);
+  });
+
+  it('handles isDragEnabled toggle', () => {
+    let dragHandleProps: unknown = null;
+
+    const renderItem = ({ item, dragHandleProps: props }: AnimatedRenderItemInfo<TestItem>) => {
+      dragHandleProps = props;
+      return (
+        <View>
+          <Text>{item.title}</Text>
+        </View>
+      );
+    };
+
+    const { rerender } = render(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={true}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(dragHandleProps).not.toBeNull();
+
+    rerender(
+      <AnimatedFlashListItem<TestItem>
+        item={defaultItem}
+        index={0}
+        totalItems={5}
+        isDragEnabled={false}
+        renderItem={renderItem}
+      />,
+    );
+
+    expect(dragHandleProps).toBeNull();
+  });
+});

package/src/__tests__/contexts/DragStateContext.test.tsx

@@ -0,0 +1,169 @@
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-native';
+import {
+  DragStateProvider,
+  useDragState,
+} from '../../contexts/DragStateContext';
+import { DEFAULT_DRAG_CONFIG } from '../../constants';
+import { createMockFlashListRef } from '../utils/test-utils';
+
+describe('DragStateContext', () => {
+  describe('useDragState', () => {
+    it('throws when used outside DragStateProvider', () => {
+      const consoleSpy = jest.spyOn(console, 'error').mockImplementation();
+
+      expect(() => {
+        renderHook(() => useDragState());
+      }).toThrow('useDragState must be used within DragStateProvider');
+
+      consoleSpy.mockRestore();
+    });
+
+    it('provides context value when used within DragStateProvider', () => {
+      const wrapper = ({ children }: { children: React.ReactNode }) => (
+        <DragStateProvider>{children}</DragStateProvider>
+      );
+
+      const { result } = renderHook(() => useDragState(), { wrapper });
+
+      expect(result.current).toBeDefined();
+      expect(result.current.isDragging).toBeDefined();
+      expect(result.current.draggedIndex).toBeDefined();
+      expect(result.current.draggedItemId).toBeDefined();
+    });
+  });
+
+  describe('DragStateProvider', () => {
+    const createWrapper = (config?: Parameters<typeof DragStateProvider>[0]['config']) => {
+      const Wrapper = ({ children }: { children: React.ReactNode }) => (
+        <DragStateProvider config={config}>{children}</DragStateProvider>
+      );
+      return Wrapper;
+    };
+
+    it('initializes SharedValues with default values', () => {
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.isDragging.value).toBe(false);
+      expect(result.current.draggedIndex.value).toBe(-1);
+      expect(result.current.draggedItemId.value).toBe('');
+      expect(result.current.currentTranslateY.value).toBe(0);
+      expect(result.current.draggedScale.value).toBe(1);
+      expect(result.current.scrollOffset.value).toBe(0);
+      expect(result.current.contentHeight.value).toBe(0);
+      expect(result.current.visibleHeight.value).toBe(0);
+      expect(result.current.measuredItemHeight.value).toBe(0);
+      expect(result.current.isDropping.value).toBe(false);
+    });
+
+    it('uses default drag config', () => {
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(result.current.config).toEqual(DEFAULT_DRAG_CONFIG);
+    });
+
+    it('merges custom config with defaults', () => {
+      const customConfig = {
+        longPressDuration: 500,
+        dragScale: 1.1,
+      };
+
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(customConfig),
+      });
+
+      expect(result.current.config.longPressDuration).toBe(500);
+      expect(result.current.config.dragScale).toBe(1.1);
+      // Should still have other default values
+      expect(result.current.config.estimatedItemHeight).toBe(
+        DEFAULT_DRAG_CONFIG.estimatedItemHeight,
+      );
+    });
+
+    it('provides setListRef function', () => {
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(typeof result.current.setListRef).toBe('function');
+    });
+
+    it('provides scrollToOffset function', () => {
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(),
+      });
+
+      expect(typeof result.current.scrollToOffset).toBe('function');
+    });
+
+    it('scrollToOffset calls the ref scrollToOffset when ref is set', () => {
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(),
+      });
+
+      const mockRef = createMockFlashListRef();
+
+      act(() => {
+        result.current.setListRef(mockRef as any);
+      });
+
+      act(() => {
+        result.current.scrollToOffset(100, true);
+      });
+
+      expect(mockRef.scrollToOffset).toHaveBeenCalledWith({
+        offset: 100,
+        animated: true,
+      });
+    });
+
+    it('scrollToOffset does not crash when ref is null', () => {
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(),
+      });
+
+      // Should not throw when ref is not set
+      expect(() => {
+        act(() => {
+          result.current.scrollToOffset(100);
+        });
+      }).not.toThrow();
+    });
+
+    it('resetDragState resets all values to defaults', () => {
+      const { result } = renderHook(() => useDragState(), {
+        wrapper: createWrapper(),
+      });
+
+      // Simulate drag state
+      act(() => {
+        result.current.isDragging.value = true;
+        result.current.draggedIndex.value = 2;
+        result.current.draggedItemId.value = 'item-2';
+        result.current.currentTranslateY.value = 100;
+        result.current.draggedScale.value = 1.05;
+        result.current.measuredItemHeight.value = 80;
+        result.current.isDropping.value = true;
+      });
+
+      // Reset
+      act(() => {
+        result.current.resetDragState();
+      });
+
+      // Verify reset
+      expect(result.current.isDragging.value).toBe(false);
+      expect(result.current.draggedIndex.value).toBe(-1);
+      expect(result.current.draggedItemId.value).toBe('');
+      expect(result.current.currentTranslateY.value).toBe(0);
+      expect(result.current.draggedScale.value).toBe(1);
+      expect(result.current.measuredItemHeight.value).toBe(0);
+      expect(result.current.isDropping.value).toBe(false);
+    });
+
+  });
+});