@umituz/react-native-design-system 2.3.14 → 2.3.16

package/src/molecules/animation/presentation/hooks/__tests__/useAnimation.integration.test.ts

@@ -0,0 +1,216 @@
+/**
+ * useAnimation Hook Integration Tests
+ *
+ * Integration tests for combined animation functionality.
+ */
+
+import { renderHook, act } from '@testing-library/react';
+import { useAnimation } from '../useAnimation';
+
+// Mock react-native-reanimated
+jest.mock('react-native-reanimated', () => ({
+  useSharedValue: jest.fn((initialValue) => ({
+    value: initialValue,
+  })),
+  useAnimatedStyle: jest.fn((styleFactory) => styleFactory()),
+  withTiming: jest.fn((toValue, config) => ({ toValue, config })),
+  withSpring: jest.fn((toValue, config) => ({ toValue, config })),
+  withSequence: jest.fn((...animations) => animations),
+  withRepeat: jest.fn((animation, count, reverse) => ({ animation, count, reverse })),
+  Easing: {
+    ease: jest.fn(),
+    out: jest.fn((easing) => easing),
+    bezier: jest.fn(() => jest.fn()),
+    linear: jest.fn(),
+  },
+}));
+
+// Mock all sub-hooks
+jest.mock('../useTimingAnimation', () => ({
+  useTimingAnimation: jest.fn(() => ({
+    fadeIn: jest.fn(),
+    fadeOut: jest.fn(),
+    slideInUp: jest.fn(),
+    slideInDown: jest.fn(),
+    slideInLeft: jest.fn(),
+    slideInRight: jest.fn(),
+    opacity: { value: 1 },
+    translateY: { value: 0 },
+    translateX: { value: 0 },
+  })),
+}));
+
+jest.mock('../useSpringAnimation', () => ({
+  useSpringAnimation: jest.fn(() => ({
+    scaleIn: jest.fn(),
+    scaleOut: jest.fn(),
+    bounce: jest.fn(),
+    scale: { value: 1 },
+  })),
+}));
+
+jest.mock('../useTransformAnimation', () => ({
+  useTransformAnimation: jest.fn(() => ({
+    shake: jest.fn(),
+    pulse: jest.fn(),
+    spin: jest.fn(),
+    translateX: { value: 0 },
+    scale: { value: 1 },
+    rotate: { value: 0 },
+  })),
+}));
+
+describe('useAnimation Integration', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should integrate all animation hooks', () => {
+    const { useTimingAnimation } = require('../useTimingAnimation');
+    const { useSpringAnimation } = require('../useSpringAnimation');
+    const { useTransformAnimation } = require('../useTransformAnimation');
+
+    renderHook(() => useAnimation());
+
+    expect(useTimingAnimation).toHaveBeenCalled();
+    expect(useSpringAnimation).toHaveBeenCalled();
+    expect(useTransformAnimation).toHaveBeenCalled();
+  });
+
+  it('should provide all timing animations', () => {
+    const { result } = renderHook(() => useAnimation());
+
+    expect(typeof result.current.fadeIn).toBe('function');
+    expect(typeof result.current.fadeOut).toBe('function');
+    expect(typeof result.current.slideInUp).toBe('function');
+    expect(typeof result.current.slideInDown).toBe('function');
+    expect(typeof result.current.slideInLeft).toBe('function');
+    expect(typeof result.current.slideInRight).toBe('function');
+  });
+
+  it('should provide all spring animations', () => {
+    const { result } = renderHook(() => useAnimation());
+
+    expect(typeof result.current.scaleIn).toBe('function');
+    expect(typeof result.current.scaleOut).toBe('function');
+    expect(typeof result.current.bounce).toBe('function');
+  });
+
+  it('should provide all transform animations', () => {
+    const { result } = renderHook(() => useAnimation());
+
+    expect(typeof result.current.shake).toBe('function');
+    expect(typeof result.current.pulse).toBe('function');
+    expect(typeof result.current.spin).toBe('function');
+  });
+
+  it('should provide all shared values', () => {
+    const { result } = renderHook(() => useAnimation());
+
+    expect(result.current.opacity).toBeDefined();
+    expect(result.current.translateY).toBeDefined();
+    expect(result.current.translateX).toBeDefined();
+    expect(result.current.scale).toBeDefined();
+    expect(result.current.rotate).toBeDefined();
+  });
+
+  it('should provide animated style', () => {
+    const { result } = renderHook(() => useAnimation());
+    const { useAnimatedStyle } = require('react-native-reanimated');
+
+    expect(typeof result.current.animatedStyle).toBe('function');
+    expect(useAnimatedStyle).toHaveBeenCalled();
+  });
+
+  describe('animation combinations', () => {
+    it('should allow combining fade and scale animations', () => {
+      const { result } = renderHook(() => useAnimation());
+      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
+      const mockSpring = require('../useSpringAnimation').useSpringAnimation();
+
+      act(() => {
+        result.current.fadeIn();
+        result.current.scaleIn();
+      });
+
+      expect(mockTiming.fadeIn).toHaveBeenCalled();
+      expect(mockSpring.scaleIn).toHaveBeenCalled();
+    });
+
+    it('should allow combining slide and rotate animations', () => {
+      const { result } = renderHook(() => useAnimation());
+      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
+      const mockTransform = require('../useTransformAnimation').useTransformAnimation();
+
+      act(() => {
+        result.current.slideInUp();
+        result.current.spin();
+      });
+
+      expect(mockTiming.slideInUp).toHaveBeenCalled();
+      expect(mockTransform.spin).toHaveBeenCalled();
+    });
+
+    it('should allow complex animation sequences', () => {
+      const { result } = renderHook(() => useAnimation());
+      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
+      const mockSpring = require('../useSpringAnimation').useSpringAnimation();
+      const mockTransform = require('../useTransformAnimation').useTransformAnimation();
+
+      act(() => {
+        result.current.fadeIn();
+        result.current.slideInUp();
+        result.current.scaleIn();
+        result.current.bounce();
+        result.current.shake();
+        result.current.pulse();
+        result.current.spin();
+      });
+
+      expect(mockTiming.fadeIn).toHaveBeenCalled();
+      expect(mockTiming.slideInUp).toHaveBeenCalled();
+      expect(mockSpring.scaleIn).toHaveBeenCalled();
+      expect(mockSpring.bounce).toHaveBeenCalled();
+      expect(mockTransform.shake).toHaveBeenCalled();
+      expect(mockTransform.pulse).toHaveBeenCalled();
+      expect(mockTransform.spin).toHaveBeenCalled();
+    });
+  });
+
+  describe('animated style composition', () => {
+    it('should compose styles from all animation types', () => {
+      const { useAnimatedStyle } = require('react-native-reanimated');
+      const mockStyle = {
+        opacity: 1,
+        transform: [
+          { translateY: 0 },
+          { translateX: 0 },
+          { scale: 1 },
+          { rotate: '0deg' },
+        ],
+      };
+
+      useAnimatedStyle.mockReturnValue(mockStyle);
+
+      const { result } = renderHook(() => useAnimation());
+
+      expect(result.current.animatedStyle).toBe(mockStyle);
+    });
+
+    it('should prioritize transform values over timing/spring values', () => {
+      const { useAnimatedStyle } = require('react-native-reanimated');
+      const mockTiming = require('../useTimingAnimation').useTimingAnimation();
+      const mockTransform = require('../useTransformAnimation').useTransformAnimation();
+
+      // Set transform values to non-default
+      mockTransform.translateX.value = 50;
+      mockTransform.scale.value = 1.5;
+
+      renderHook(() => useAnimation());
+
+      expect(useAnimatedStyle).toHaveBeenCalledWith(
+        expect.any(Function)
+      );
+    });
+  });
+});

package/src/molecules/animation/presentation/hooks/__tests__/useFireworks.test.ts

@@ -0,0 +1,242 @@
+/**
+ * useFireworks Hook Tests
+ *
+ * Unit tests for fireworks particle system.
+ */
+
+import { renderHook, act } from '@testing-library/react';
+import { useFireworks } from '../useFireworks';
+import { FIREWORKS_CONSTANTS } from '../../../domain/entities/Animation';
+
+// Mock requestAnimationFrame
+global.requestAnimationFrame = jest.fn((cb) => {
+  setTimeout(cb, 16);
+  return 1;
+});
+
+global.cancelAnimationFrame = jest.fn();
+
+describe('useFireworks', () => {
+  const mockConfig = {
+    colors: ['#FF0000', '#00FF00', '#0000FF'],
+    particleCount: 10,
+    duration: 1000,
+    particleSize: 4,
+    spread: 50,
+  };
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('should initialize with empty particles and inactive state', () => {
+    const { result } = renderHook(() => useFireworks(mockConfig));
+
+    expect(result.current.particles).toEqual([]);
+    expect(result.current.isActive).toBe(false);
+    expect(typeof result.current.trigger).toBe('function');
+  });
+
+  it('should require colors array', () => {
+    const { result } = renderHook(() => useFireworks({ colors: [] }));
+
+    expect(result.current.particles).toEqual([]);
+    expect(result.current.trigger).toEqual(expect.any(Function));
+    expect(result.current.isActive).toBe(false);
+  });
+
+  describe('trigger', () => {
+    it('should create particles with correct count', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      expect(result.current.particles).toHaveLength(mockConfig.particleCount);
+    });
+
+    it('should create particles with correct properties', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      const particles = result.current.particles;
+      particles.forEach(particle => {
+        expect(particle).toHaveProperty('x');
+        expect(particle).toHaveProperty('y');
+        expect(particle).toHaveProperty('color');
+        expect(particle).toHaveProperty('size');
+        expect(particle).toHaveProperty('velocityX');
+        expect(particle).toHaveProperty('velocityY');
+        expect(particle).toHaveProperty('life');
+        expect(particle).toHaveProperty('decay');
+      });
+    });
+
+    it('should use provided colors', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      const particles = result.current.particles;
+      const particleColors = particles.map(p => p.color);
+      
+      particleColors.forEach(color => {
+        expect(mockConfig.colors).toContain(color);
+      });
+    });
+
+    it('should set particles at trigger position', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+      const triggerX = 150;
+      const triggerY = 200;
+
+      act(() => {
+        result.current.trigger(triggerX, triggerY);
+      });
+
+      const particles = result.current.particles;
+      particles.forEach(particle => {
+        expect(particle.x).toBe(triggerX);
+        expect(particle.y).toBe(triggerY);
+      });
+    });
+
+    it('should use default position when none provided', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger();
+      });
+
+      const particles = result.current.particles;
+      particles.forEach(particle => {
+        expect(particle.x).toBe(0);
+        expect(particle.y).toBe(0);
+      });
+    });
+
+    it('should set active state to true', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      expect(result.current.isActive).toBe(true);
+    });
+
+    it('should start animation loop', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      expect(global.requestAnimationFrame).toHaveBeenCalled();
+    });
+
+    it('should auto-stop after duration', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      expect(result.current.isActive).toBe(true);
+
+      act(() => {
+        jest.advanceTimersByTime(mockConfig.duration);
+      });
+
+      expect(result.current.isActive).toBe(false);
+    });
+  });
+
+  describe('particle physics', () => {
+    it('should update particle positions over time', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      const initialParticles = [...result.current.particles];
+
+      act(() => {
+        jest.advanceTimersByTime(16); // One frame
+      });
+
+      const updatedParticles = result.current.particles;
+      
+      updatedParticles.forEach((particle, index) => {
+        const initial = initialParticles[index];
+        expect(particle.x).not.toBe(initial.x);
+        expect(particle.y).not.toBe(initial.y);
+        expect(particle.life).toBeLessThan(initial.life);
+      });
+    });
+
+    it('should apply gravity to particles', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      const initialParticles = [...result.current.particles];
+
+      act(() => {
+        jest.advanceTimersByTime(16);
+      });
+
+      const updatedParticles = result.current.particles;
+      
+      updatedParticles.forEach((particle, index) => {
+        const initial = initialParticles[index];
+        const expectedY = initial.y + initial.velocityY * 0.1 + FIREWORKS_CONSTANTS.GRAVITY;
+        expect(particle.y).toBeCloseTo(expectedY, 1);
+      });
+    });
+
+    it('should remove dead particles', () => {
+      const { result } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      // Simulate particles dying
+      act(() => {
+        jest.advanceTimersByTime(2000); // Long enough for particles to die
+      });
+
+      expect(result.current.particles).toHaveLength(0);
+      expect(result.current.isActive).toBe(false);
+    });
+  });
+
+  describe('cleanup', () => {
+    it('should cancel animation frame on unmount', () => {
+      const { result, unmount } = renderHook(() => useFireworks(mockConfig));
+
+      act(() => {
+        result.current.trigger(100, 100);
+      });
+
+      unmount();
+
+      expect(global.cancelAnimationFrame).toHaveBeenCalled();
+    });
+  });
+});

package/src/molecules/animation/presentation/hooks/__tests__/useGesture.test.ts

@@ -0,0 +1,111 @@
+/**
+ * useGesture Hook Tests
+ *
+ * Unit tests for gesture handling functionality.
+ */
+
+import { renderHook } from '@testing-library/react';
+import { useGesture } from '../useGesture';
+
+// Mock react-native-gesture-handler
+jest.mock('react-native-gesture-handler', () => ({
+  GestureDetector: jest.fn(({ children }) => children),
+  Gesture: {
+    Tap: jest.fn(() => ({
+      numberOfTaps: jest.fn().mockReturnThis(),
+      maxDuration: jest.fn().mockReturnThis(),
+      onStart: jest.fn().mockReturnThis(),
+    })),
+    Pan: jest.fn(() => ({
+      onStart: jest.fn().mockReturnThis(),
+      onUpdate: jest.fn().mockReturnThis(),
+      onEnd: jest.fn().mockReturnThis(),
+    })),
+    Pinch: jest.fn(() => ({
+      onStart: jest.fn().mockReturnThis(),
+      onUpdate: jest.fn().mockReturnThis(),
+      onEnd: jest.fn().mockReturnThis(),
+    })),
+    LongPress: jest.fn(() => ({
+      minDuration: jest.fn().mockReturnThis(),
+      onStart: jest.fn().mockReturnThis(),
+    })),
+  },
+}));
+
+// Mock useGestureState
+jest.mock('../useGestureState', () => ({
+  useGestureState: jest.fn(() => ({
+    translateX: { value: 0 },
+    translateY: { value: 0 },
+    scale: { value: 1 },
+    savedTranslateX: { value: 0 },
+    savedTranslateY: { value: 0 },
+    savedScale: { value: 1 },
+    reset: jest.fn(),
+    animatedStyle: {},
+  })),
+}));
+
+// Mock useGestureCreators
+jest.mock('../useGestureCreators', () => ({
+  useGestureCreators: jest.fn(() => ({
+    createTapGesture: jest.fn(),
+    createPanGesture: jest.fn(),
+    createPinchGesture: jest.fn(),
+    createLongPressGesture: jest.fn(),
+  })),
+}));
+
+describe('useGesture', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should provide gesture creators', () => {
+    const { result } = renderHook(() => useGesture());
+
+    expect(typeof result.current.createTapGesture).toBe('function');
+    expect(typeof result.current.createPanGesture).toBe('function');
+    expect(typeof result.current.createPinchGesture).toBe('function');
+    expect(typeof result.current.createLongPressGesture).toBe('function');
+  });
+
+  it('should provide shared values', () => {
+    const { result } = renderHook(() => useGesture());
+
+    expect(result.current.translateX).toBeDefined();
+    expect(result.current.translateY).toBeDefined();
+    expect(result.current.scale).toBeDefined();
+  });
+
+  it('should provide utilities', () => {
+    const { result } = renderHook(() => useGesture());
+
+    expect(typeof result.current.reset).toBe('function');
+    expect(result.current.animatedStyle).toBeDefined();
+  });
+
+  it('should export GestureDetector', () => {
+    const { result } = renderHook(() => useGesture());
+    const { GestureDetector } = require('react-native-gesture-handler');
+
+    expect(result.current.GestureDetector).toBe(GestureDetector);
+  });
+
+  describe('gesture creators integration', () => {
+    it('should integrate with useGestureCreators', () => {
+      const { useGestureCreators } = require('../useGestureCreators');
+      renderHook(() => useGesture());
+
+      expect(useGestureCreators).toHaveBeenCalled();
+    });
+
+    it('should integrate with useGestureState', () => {
+      const { useGestureState } = require('../useGestureState');
+      renderHook(() => useGesture());
+
+      expect(useGestureState).toHaveBeenCalled();
+    });
+  });
+});

package/src/molecules/animation/presentation/hooks/__tests__/useSpringAnimation.test.ts

@@ -0,0 +1,131 @@
+/**
+ * useSpringAnimation Hook Tests
+ *
+ * Unit tests for spring-based animations (scale, bounce).
+ */
+
+import { renderHook, act } from '@testing-library/react';
+import { useSpringAnimation } from '../useSpringAnimation';
+import { AnimationPreset, ANIMATION_CONSTANTS } from '../../../domain/entities/Animation';
+
+// Mock react-native-reanimated
+jest.mock('react-native-reanimated', () => ({
+  useSharedValue: jest.fn((initialValue) => ({
+    value: initialValue,
+  })),
+  useAnimatedStyle: jest.fn((styleFactory) => styleFactory()),
+  withSpring: jest.fn((toValue, config) => ({ toValue, config })),
+  withSequence: jest.fn((...animations) => animations),
+}));
+
+// Mock SpringAnimationConfigService
+jest.mock('../../../infrastructure/services/SpringAnimationConfigService', () => ({
+  SpringAnimationConfigService: {
+    getSpringConfig: jest.fn((preset) => ({
+      damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+      stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+    })),
+  },
+}));
+
+describe('useSpringAnimation', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should initialize with default values', () => {
+    const { result } = renderHook(() => useSpringAnimation());
+
+    expect(result.current.scale.value).toBe(1);
+  });
+
+  it('should provide animation functions', () => {
+    const { result } = renderHook(() => useSpringAnimation());
+
+    expect(typeof result.current.scaleIn).toBe('function');
+    expect(typeof result.current.scaleOut).toBe('function');
+    expect(typeof result.current.bounce).toBe('function');
+  });
+
+  describe('scaleIn', () => {
+    it('should animate scale from 0 to 1 with default config', () => {
+      const { result } = renderHook(() => useSpringAnimation());
+      const { withSpring } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.scaleIn();
+      });
+
+      expect(withSpring).toHaveBeenCalledWith(1, {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      });
+    });
+
+    it('should use custom config when provided', () => {
+      const { result } = renderHook(() => useSpringAnimation());
+      const { withSpring } = require('react-native-reanimated');
+      const customConfig = { damping: 20, stiffness: 200 };
+
+      act(() => {
+        result.current.scaleIn(customConfig);
+      });
+
+      expect(withSpring).toHaveBeenCalledWith(1, customConfig);
+    });
+  });
+
+  describe('scaleOut', () => {
+    it('should animate scale to 0 with default config', () => {
+      const { result } = renderHook(() => useSpringAnimation());
+      const { withSpring } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.scaleOut();
+      });
+
+      expect(withSpring).toHaveBeenCalledWith(0, {
+        damping: ANIMATION_CONSTANTS.SPRING.DAMPING,
+        stiffness: ANIMATION_CONSTANTS.SPRING.STIFFNESS,
+      });
+    });
+  });
+
+  describe('bounce', () => {
+    it('should create bounce animation sequence', () => {
+      const { result } = renderHook(() => useSpringAnimation());
+      const { withSpring, withSequence } = require('react-native-reanimated');
+      const mockConfig = { damping: 5, stiffness: 120 };
+
+      act(() => {
+        result.current.bounce(mockConfig);
+      });
+
+      expect(withSequence).toHaveBeenCalledWith(
+        withSpring(0.8, mockConfig),
+        withSpring(1.2, mockConfig),
+        withSpring(1, mockConfig)
+      );
+    });
+
+    it('should use default config when none provided', () => {
+      const { result } = renderHook(() => useSpringAnimation());
+      const { withSpring, withSequence } = require('react-native-reanimated');
+
+      act(() => {
+        result.current.bounce();
+      });
+
+      expect(withSequence).toHaveBeenCalled();
+    });
+  });
+
+  describe('shared values', () => {
+    it('should expose scale shared value for custom animations', () => {
+      const { result } = renderHook(() => useSpringAnimation());
+
+      expect(result.current.scale).toBeDefined();
+      expect(result.current.scale.value).toBe(1);
+    });
+  });
+});