@umituz/react-native-splash 1.6.4 → 1.7.1

package/src/__tests__/performance/Performance.test.tsx

@@ -0,0 +1,297 @@
+/**
+ * Performance Tests - Memory Leak Prevention
+ */
+
+import React from 'react';
+import { render, act, trackMemoryUsage } from '../utils/testUtils';
+import { SplashScreen } from '../../presentation/components/SplashScreen';
+import { useSplash } from '../../presentation/hooks/useSplash';
+
+describe('Performance Tests', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  describe('Memory Leak Prevention', () => {
+    it('prevents memory leaks with timer cleanup', () => {
+      const { trackMemoryUsage } = require('../utils/testUtils');
+      const memoryTracker = trackMemoryUsage();
+      
+      const components = [];
+      
+      // Create and destroy many components
+      for (let i = 0; i < 100; i++) {
+        const { unmount } = render(
+          <SplashScreen
+            appName={`App ${i}`}
+            visible={true}
+            minimumDisplayTime={1000}
+          />
+        );
+        components.push(unmount);
+      }
+      
+      // Unmount all components
+      components.forEach(unmount => unmount());
+      
+      // Force garbage collection if available
+      if (global.gc) {
+        global.gc();
+      }
+      
+      const memoryIncrease = memoryTracker.getMemoryIncrease();
+      
+      // Memory increase should be minimal after cleanup
+      expect(memoryIncrease).toBeLessThan(5 * 1024 * 1024); // 5MB
+    });
+
+    it('cleans up useSplash timers properly', () => {
+      const TestComponent = () => {
+        const { isVisible, markReady } = useSplash({
+          minimumDisplayTime: 5000,
+          autoHide: true,
+        });
+        
+        return (
+          <SplashScreen
+            appName="Test App"
+            visible={isVisible}
+            onReady={markReady}
+          />
+        );
+      };
+      
+      const { unmount } = render(<TestComponent />);
+      
+      // Component should be unmounted before timer completes
+      unmount();
+      
+      // Should not cause memory leaks or timer issues
+      expect(true).toBe(true);
+    });
+
+    it('handles rapid mount/unmount cycles', () => {
+      const { trackMemoryUsage } = require('../utils/testUtils');
+      const memoryTracker = trackMemoryUsage();
+      
+      for (let i = 0; i < 50; i++) {
+        const { unmount } = render(
+          <SplashScreen
+            appName="Rapid Test"
+            visible={true}
+            minimumDisplayTime={100}
+          />
+        );
+        
+        // Immediately unmount
+        unmount();
+      }
+      
+      if (global.gc) {
+        global.gc();
+      }
+      
+      const memoryIncrease = memoryTracker.getMemoryIncrease();
+      expect(memoryIncrease).toBeLessThan(2 * 1024 * 1024); // 2MB
+    });
+  });
+
+  describe('Render Performance', () => {
+    it('renders quickly with basic props', async () => {
+      const { measureRenderTime } = require('../utils/testUtils');
+      
+      const renderTime = await measureRenderTime(
+        <SplashScreen
+          appName="Performance Test"
+          visible={true}
+        />
+      );
+      
+      expect(renderTime).toBeLessThan(50); // 50ms
+    });
+
+    it('renders efficiently with complex props', async () => {
+      const { measureRenderTime } = require('../utils/testUtils');
+      
+      const ComplexSplash = () => (
+        <SplashScreen
+          appName="Complex App"
+          tagline="Complex tagline with lots of text"
+          gradientColors={['#FF0000', '#00FF00', '#0000FF', '#FFFF00', '#FF00FF']}
+          textColor="#FFFFFF"
+          iconColor="#FFFF00"
+          decorationColor="rgba(255, 255, 255, 0.1)"
+          showLoading={true}
+          minimumDisplayTime={2000}
+          renderLogo={() => <div>Complex Logo</div>}
+          renderContent={() => <div>Complex Content</div>}
+          renderFooter={() => <div>Complex Footer</div>}
+          visible={true}
+        />
+      );
+      
+      const renderTime = await measureRenderTime(<ComplexSplash />);
+      
+      expect(renderTime).toBeLessThan(100); // 100ms
+    });
+
+    it('handles prop updates efficiently', async () => {
+      const { measureRenderTime } = require('../utils/testUtils');
+      
+      let props = {
+        appName: "Initial App",
+        visible: true,
+      };
+      
+      const initialRenderTime = await measureRenderTime(
+        <SplashScreen {...props} />
+      );
+      
+      // Update props
+      props = {
+        ...props,
+        appName: "Updated App",
+        textColor: "#FF0000",
+      };
+      
+      const updateRenderTime = await measureRenderTime(
+        <SplashScreen {...props} />
+      );
+      
+      expect(initialRenderTime).toBeLessThan(50);
+      expect(updateRenderTime).toBeLessThan(30); // Updates should be faster
+    });
+  });
+
+  describe('Timer Performance', () => {
+    it('handles multiple timers efficiently', () => {
+      const onReady = jest.fn();
+      
+      const { unmount } = render(
+        <SplashScreen
+          appName="Timer Test"
+          visible={true}
+          minimumDisplayTime={1000}
+          onReady={onReady}
+        />
+      );
+      
+      // Advance timers partially
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+      
+      expect(onReady).not.toHaveBeenCalled();
+      
+      // Complete timers
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+      
+      expect(onReady).toHaveBeenCalledTimes(1);
+      
+      unmount();
+    });
+
+    it('prevents timer conflicts', () => {
+      const onReady1 = jest.fn();
+      const onReady2 = jest.fn();
+      
+      const { unmount: unmount1 } = render(
+        <SplashScreen
+          appName="Timer Test 1"
+          visible={true}
+          minimumDisplayTime={1000}
+          onReady={onReady1}
+        />
+      );
+      
+      const { unmount: unmount2 } = render(
+        <SplashScreen
+          appName="Timer Test 2"
+          visible={true}
+          minimumDisplayTime={1500}
+          onReady={onReady2}
+        />
+      );
+      
+      act(() => {
+        jest.advanceTimersByTime(1000);
+      });
+      
+      expect(onReady1).toHaveBeenCalledTimes(1);
+      expect(onReady2).not.toHaveBeenCalled();
+      
+      act(() => {
+        jest.advanceTimersByTime(500);
+      });
+      
+      expect(onReady2).toHaveBeenCalledTimes(1);
+      
+      unmount1();
+      unmount2();
+    });
+  });
+
+  describe('Memory Usage Patterns', () => {
+    it('maintains stable memory usage during extended operation', () => {
+      const { trackMemoryUsage } = require('../utils/testUtils');
+      const memoryTracker = trackMemoryUsage();
+      
+      let currentProps = {
+        appName: "Base App",
+        visible: true,
+      };
+      
+      const { rerender } = render(<SplashScreen {...currentProps} />);
+      
+      // Simulate extended operation with prop changes
+      for (let i = 0; i < 100; i++) {
+        currentProps = {
+          ...currentProps,
+          appName: `App ${i}`,
+          tagline: i % 2 === 0 ? `Tagline ${i}` : undefined,
+        };
+        
+        rerender(<SplashScreen {...currentProps} />);
+        
+        if (i % 10 === 0 && global.gc) {
+          global.gc();
+        }
+      }
+      
+      const memoryIncrease = memoryTracker.getMemoryIncrease();
+      expect(memoryIncrease).toBeLessThan(10 * 1024 * 1024); // 10MB
+    });
+
+    it('handles large prop objects efficiently', () => {
+      const largeGradientColors = Array.from({ length: 100 }, (_, i) => 
+        `#${i.toString(16).padStart(6, '0')}`
+      );
+      
+      const { trackMemoryUsage } = require('../utils/testUtils');
+      const memoryTracker = trackMemoryUsage();
+      
+      const { unmount } = render(
+        <SplashScreen
+          appName="Large Props Test"
+          gradientColors={largeGradientColors}
+          visible={true}
+        />
+      );
+      
+      unmount();
+      
+      if (global.gc) {
+        global.gc();
+      }
+      
+      const memoryIncrease = memoryTracker.getMemoryIncrease();
+      expect(memoryIncrease).toBeLessThan(1 * 1024 * 1024); // 1MB
+    });
+  });
+});

package/src/__tests__/setup.ts

@@ -0,0 +1,57 @@
+/**
+ * Simple Test Setup
+ */
+
+// Mock React Native before anything else
+jest.mock('react-native', () => {
+  const React = require('react');
+  return {
+    View: ({ children, testID, style }) => React.createElement('View', { testID, style }, children),
+    Text: ({ children, testID, style }) => React.createElement('Text', { testID, style }, children),
+    StyleSheet: { 
+      create: jest.fn((styles) => styles),
+      flatten: jest.fn((style) => style)
+    },
+    Dimensions: { get: jest.fn(() => ({ width: 375, height: 667 })) },
+    LinearGradient: ({ children, testID, style }) => React.createElement('LinearGradient', { testID, style }, children),
+  };
+});
+
+// Mock expo-linear-gradient
+jest.mock('expo-linear-gradient', () => {
+  const React = require('react');
+  return {
+    LinearGradient: ({ children, testID, style }) => React.createElement('LinearGradient', { testID, style }, children),
+  };
+});
+
+// Mock design system atoms
+jest.mock('@umituz/react-native-design-system-atoms', () => {
+  const React = require('react');
+  return {
+    AtomicIcon: ({ name, testID }) => React.createElement('AtomicIcon', { testID: testID || `icon-${name}`, name }),
+  };
+});
+
+// Mock design system theme
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: { primary: '#007AFF' },
+    spacing: { xl: 24, md: 16, xxxl: 48 },
+  }),
+}));
+
+// Mock localization
+jest.mock('@umituz/react-native-localization', () => ({
+  useLocalization: () => ({
+    t: (key: string, fallback: string) => fallback || key,
+  }),
+}));
+
+// Mock safe area context
+jest.mock('react-native-safe-area-context', () => ({
+  useSafeAreaInsets: () => ({ top: 44, bottom: 34, left: 0, right: 0 }),
+}));
+
+// Global test utilities
+global.__DEV__ = true;

package/src/__tests__/useSplash.test.tsx

@@ -0,0 +1,123 @@
+/**
+ * Use Splash Hook Tests
+ */
+
+import { renderHook, act } from "@testing-library/react-hooks";
+import { useSplash } from "../presentation/hooks/useSplash";
+
+describe("useSplash", () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it("initializes with visible state", () => {
+    const { result } = renderHook(() => useSplash());
+    
+    expect(result.current.isVisible).toBe(true);
+    expect(result.current.isReady).toBe(false);
+  });
+
+  it("marks as ready and calls onReady", async () => {
+    const onReady = jest.fn();
+    const { result } = renderHook(() => useSplash({ onReady }));
+    
+    await act(async () => {
+      await result.current.markReady();
+    });
+    
+    expect(result.current.isReady).toBe(true);
+    expect(onReady).toHaveBeenCalledTimes(1);
+  });
+
+  it("auto-hides after minimum display time", async () => {
+    const { result } = renderHook(() => useSplash({ minimumDisplayTime: 1000 }));
+    
+    await act(async () => {
+      await result.current.markReady();
+    });
+    
+    expect(result.current.isVisible).toBe(true);
+    
+    act(() => {
+      jest.advanceTimersByTime(1000);
+    });
+    
+    expect(result.current.isVisible).toBe(false);
+  });
+
+  it("does not auto-hide when autoHide is false", async () => {
+    const { result } = renderHook(() => useSplash({ autoHide: false }));
+    
+    await act(async () => {
+      await result.current.markReady();
+    });
+    
+    act(() => {
+      jest.advanceTimersByTime(2000);
+    });
+    
+    expect(result.current.isVisible).toBe(true);
+  });
+
+  it("can manually hide and show", () => {
+    const { result } = renderHook(() => useSplash());
+    
+    act(() => {
+      result.current.hide();
+    });
+    
+    expect(result.current.isVisible).toBe(false);
+    
+    act(() => {
+      result.current.show();
+    });
+    
+    expect(result.current.isVisible).toBe(true);
+  });
+
+  it("prevents multiple ready calls", async () => {
+    const onReady = jest.fn();
+    const { result } = renderHook(() => useSplash({ onReady }));
+    
+    await act(async () => {
+      await result.current.markReady();
+      await result.current.markReady();
+      await result.current.markReady();
+    });
+    
+    expect(onReady).toHaveBeenCalledTimes(1);
+    expect(result.current.isReady).toBe(true);
+  });
+
+  it("handles onReady errors gracefully", async () => {
+    const consoleError = jest.spyOn(console, "error").mockImplementation();
+    const onReady = jest.fn().mockRejectedValue(new Error("Test error"));
+    const { result } = renderHook(() => useSplash({ onReady }));
+    
+    await act(async () => {
+      await result.current.markReady();
+    });
+    
+    expect(result.current.isReady).toBe(true);
+    expect(consoleError).toHaveBeenCalled();
+    
+    consoleError.mockRestore();
+  });
+
+  it("cleans up timer on unmount", () => {
+    const { result, unmount } = renderHook(() => useSplash());
+    
+    act(() => {
+      result.current.markReady();
+    });
+    
+    unmount();
+    
+    // Should not throw error about timer cleanup
+    expect(true).toBe(true);
+  });
+});

package/src/__tests__/utils/testUtils.tsx

@@ -0,0 +1,86 @@
+/**
+ * Test Utilities and Mocks
+ */
+
+import React from 'react';
+import { render, RenderOptions } from '@testing-library/react-native';
+import { View } from 'react-native';
+
+// Custom render function with providers
+const AllTheProviders = ({ children }: { children: React.ReactNode }) => {
+  return <View>{children}</View>;
+};
+
+const customRender = (
+  ui: React.ReactElement,
+  options?: Omit<RenderOptions, 'wrapper'>
+) => render(ui, { wrapper: AllTheProviders, ...options });
+
+// Mock timers utilities
+export const advanceTimersByTime = (ms: number) => {
+  jest.advanceTimersByTime(ms);
+};
+
+export const runAllTimers = () => {
+  jest.runAllTimers();
+};
+
+// Mock data generators
+export const createMockSplashProps = (overrides = {}) => ({
+  appName: 'Test App',
+  tagline: 'Test Tagline',
+  visible: true,
+  showLoading: true,
+  minimumDisplayTime: 1500,
+  ...overrides,
+});
+
+export const createMockDesignTokens = (overrides = {}) => ({
+  colors: { primary: '#007AFF' },
+  spacing: { xl: 24, md: 16, xxxl: 48 },
+  ...overrides,
+});
+
+// Performance testing utilities
+export const measureRenderTime = async (component: React.ReactElement) => {
+  const start = performance.now();
+  customRender(component);
+  const end = performance.now();
+  return end - start;
+};
+
+// Memory leak testing utilities
+export const trackMemoryUsage = () => {
+  const initialMemory = (performance as any).memory?.usedJSHeapSize || 0;
+  return {
+    getMemoryIncrease: () => {
+      const currentMemory = (performance as any).memory?.usedJSHeapSize || 0;
+      return currentMemory - initialMemory;
+    },
+  };
+};
+
+// Accessibility testing utilities
+export const checkAccessibility = (container: any) => {
+  const accessibilityElements = container.findAllByProps({
+    accessible: true,
+  });
+  
+  return {
+    hasAccessibleElements: accessibilityElements.length > 0,
+    accessibleElementCount: accessibilityElements.length,
+    elements: accessibilityElements,
+  };
+};
+
+// Error boundary testing utilities
+export const createErrorComponent = (errorMessage: string) => {
+  const ThrowError = () => {
+    throw new Error(errorMessage);
+  };
+  return ThrowError;
+};
+
+// Re-export testing library
+export * from '@testing-library/react-native';
+export { customRender as render };