@umituz/react-native-settings 4.17.14 → 4.17.16

package/src/domains/appearance/__tests__/components/AppearanceScreen.test.tsx

@@ -0,0 +1,195 @@
+/**
+ * Component Tests
+ */
+
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react-native';
+import { AppearanceScreen } from '../../presentation/screens/AppearanceScreen';
+import { ThemeOption } from '../../presentation/components/ThemeOption';
+import { ColorPicker } from '../../presentation/components/ColorPicker';
+import type { ThemeMode, CustomThemeColors } from '../../types';
+
+// Mock hooks
+jest.mock('../../hooks', () => ({
+  useAppearance: jest.fn(() => ({
+    themeMode: 'dark',
+    customColors: {},
+    isInitialized: true,
+    setThemeMode: jest.fn(),
+    toggleTheme: jest.fn(),
+    setCustomColors: jest.fn(),
+    resetCustomColors: jest.fn(),
+    reset: jest.fn(),
+  })),
+  useAppearanceActions: jest.fn(() => ({
+    localCustomColors: {},
+    handleThemeSelect: jest.fn(),
+    handleColorChange: jest.fn(),
+    handleResetColors: jest.fn(),
+  })),
+}));
+
+const mockUseAppearance = require('../../hooks').useAppearance;
+const mockUseAppearanceActions = require('../../hooks').useAppearanceActions;
+
+describe('AppearanceScreen', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    expect(getByTestId('appearance-screen')).toBeTruthy();
+  });
+
+  it('should render custom header when provided', () => {
+    const CustomHeader = () => <div>Custom Header</div>;
+    const { getByText } = render(
+      <AppearanceScreen headerComponent={<CustomHeader />} />
+    );
+
+    expect(getByText('Custom Header')).toBeTruthy();
+  });
+
+  it('should hide theme section when showThemeSection is false', () => {
+    const { queryByTestId } = render(
+      <AppearanceScreen showThemeSection={false} />
+    );
+
+    expect(queryByTestId('theme-mode-section')).toBeFalsy();
+  });
+
+  it('should hide colors section when showColorsSection is false', () => {
+    const { queryByTestId } = render(
+      <AppearanceScreen showColorsSection={false} />
+    );
+
+    expect(queryByTestId('custom-colors-section')).toBeFalsy();
+  });
+
+  it('should hide preview section when showPreviewSection is false', () => {
+    const { queryByTestId } = render(
+      <AppearanceScreen showPreviewSection={false} />
+    );
+
+    expect(queryByTestId('appearance-preview')).toBeFalsy();
+  });
+
+  it('should apply custom container styles', () => {
+    const customStyle = { backgroundColor: 'red' };
+    const { getByTestId } = render(
+      <AppearanceScreen containerStyle={customStyle} />
+    );
+
+    const container = getByTestId('appearance-screen');
+    expect(container.props.style).toEqual(
+      expect.objectContaining(customStyle)
+    );
+  });
+
+  it('should apply custom content container styles', () => {
+    const customStyle = { padding: 20 };
+    const { getByTestId } = render(
+      <AppearanceScreen contentContainerStyle={customStyle} />
+    );
+
+    const container = getByTestId('appearance-screen');
+    const scrollView = container.findByType('ScrollView');
+    expect(scrollView.props.contentContainerStyle).toEqual(
+      expect.objectContaining(customStyle)
+    );
+  });
+
+  it('should handle theme selection', async () => {
+    const mockHandleThemeSelect = jest.fn();
+    mockUseAppearanceActions.mockReturnValue({
+      localCustomColors: {},
+      handleThemeSelect: mockHandleThemeSelect,
+      handleColorChange: jest.fn(),
+      handleResetColors: jest.fn(),
+    });
+
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Find and click theme option
+    const themeOption = getByTestId('theme-option-light');
+    await act(async () => {
+      fireEvent.press(themeOption);
+    });
+
+    expect(mockHandleThemeSelect).toHaveBeenCalledWith('light');
+  });
+
+  it('should handle color change', async () => {
+    const mockHandleColorChange = jest.fn();
+    mockUseAppearanceActions.mockReturnValue({
+      localCustomColors: {},
+      handleThemeSelect: jest.fn(),
+      handleColorChange: mockHandleColorChange,
+      handleResetColors: jest.fn(),
+    });
+
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Find and click color option
+    const colorOption = getByTestId('color-option-primary');
+    await act(async () => {
+      fireEvent.press(colorOption);
+    });
+
+    expect(mockHandleColorChange).toHaveBeenCalledWith('primary', expect.any(String));
+  });
+
+  it('should handle reset colors', async () => {
+    const mockHandleResetColors = jest.fn();
+    mockUseAppearanceActions.mockReturnValue({
+      localCustomColors: { primary: '#FF0000' },
+      handleThemeSelect: jest.fn(),
+      handleColorChange: jest.fn(),
+      handleResetColors: mockHandleResetColors,
+    });
+
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Find and click reset button
+    const resetButton = getByTestId('reset-colors-button');
+    await act(async () => {
+      fireEvent.press(resetButton);
+    });
+
+    expect(mockHandleResetColors).toHaveBeenCalled();
+  });
+
+  it('should not re-render unnecessarily', () => {
+    const { rerender } = render(<AppearanceScreen />);
+
+    // Rerender with same props
+    rerender(<AppearanceScreen />);
+
+    // Hooks should not be called again for same props
+    expect(mockUseAppearance).toHaveBeenCalledTimes(1);
+    expect(mockUseAppearanceActions).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle performance optimizations', () => {
+    const startTime = performance.now();
+    
+    const { rerender } = render(<AppearanceScreen />);
+    
+    // Multiple rerenders
+    for (let i = 0; i < 10; i++) {
+      rerender(<AppearanceScreen />);
+    }
+    
+    const endTime = performance.now();
+    const renderTime = endTime - startTime;
+
+    // Should render quickly even with multiple updates
+    expect(renderTime).toBeLessThan(100); // 100ms for 10 renders
+  });
+});

package/src/domains/appearance/__tests__/hooks/index.test.tsx

@@ -0,0 +1,232 @@
+/**
+ * Hooks Tests
+ */
+
+import { renderHook, act } from '@testing-library/react-native';
+import { useAppearance, useAppearanceActions } from '../../hooks';
+import type { ThemeMode, CustomThemeColors } from '../../types';
+
+// Mock design system theme
+jest.mock('@umituz/react-native-design-system', () => ({
+  useTheme: jest.fn(() => ({
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+    })),
+  })),
+  useDesignSystemTheme: jest.fn(() => ({
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+      setCustomColors: jest.fn(),
+    })),
+  })),
+}));
+
+const mockUseTheme = require('@umituz/react-native-design-system').useTheme;
+const mockUseDesignSystemTheme = require('@umituz/react-native-design-system').useDesignSystemTheme;
+
+describe('useAppearance', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+    
+    mockUseTheme.getState.mockReturnValue({
+      setThemeMode: jest.fn(),
+    });
+
+    mockUseDesignSystemTheme.getState.mockReturnValue({
+      setThemeMode: jest.fn(),
+      setCustomColors: jest.fn(),
+    });
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should return appearance state and actions', () => {
+    const { result } = renderHook(() => useAppearance());
+
+    expect(result.current).toHaveProperty('themeMode');
+    expect(result.current).toHaveProperty('customColors');
+    expect(result.current).toHaveProperty('isInitialized');
+    expect(result.current).toHaveProperty('setThemeMode');
+    expect(result.current).toHaveProperty('toggleTheme');
+    expect(result.current).toHaveProperty('setCustomColors');
+    expect(result.current).toHaveProperty('resetCustomColors');
+    expect(result.current).toHaveProperty('reset');
+
+    expect(typeof result.current.setThemeMode).toBe('function');
+    expect(typeof result.current.toggleTheme).toBe('function');
+    expect(typeof result.current.setCustomColors).toBe('function');
+    expect(typeof result.current.resetCustomColors).toBe('function');
+    expect(typeof result.current.reset).toBe('function');
+  });
+
+  it('should have stable function references', () => {
+    const { result: result1 } = renderHook(() => useAppearance());
+    const { result: result2 } = renderHook(() => useAppearance());
+
+    // Functions should be stable across renders
+    expect(result1.current.setThemeMode).toBe(result2.current.setThemeMode);
+    expect(result1.current.toggleTheme).toBe(result2.current.toggleTheme);
+    expect(result1.current.setCustomColors).toBe(result2.current.setCustomColors);
+    expect(result1.current.resetCustomColors).toBe(result2.current.resetCustomColors);
+    expect(result1.current.reset).toBe(result2.current.reset);
+  });
+
+  it('should call service methods correctly', async () => {
+    const { result } = renderHook(() => useAppearance());
+
+    const mockSetThemeMode = mockUseTheme.getState().setThemeMode;
+    const mockSetCustomColors = mockUseDesignSystemTheme.getState().setCustomColors;
+
+    await act(async () => {
+      await result.current.setThemeMode('light');
+    });
+
+    expect(mockSetThemeMode).toHaveBeenCalledWith('light');
+  });
+
+  it('should handle errors gracefully', async () => {
+    const { result } = renderHook(() => useAppearance());
+
+    const mockSetThemeMode = mockUseTheme.getState().setThemeMode;
+    const error = new Error('Service error');
+    mockSetThemeMode.mockImplementation(() => {
+      throw error;
+    });
+
+    await expect(result.current.setThemeMode('light')).rejects.toThrow(error);
+  });
+});
+
+describe('useAppearanceActions', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should return actions and local state', () => {
+    const { result } = renderHook(() => useAppearanceActions());
+
+    expect(result.current).toHaveProperty('localCustomColors');
+    expect(result.current).toHaveProperty('handleThemeSelect');
+    expect(result.current).toHaveProperty('handleColorChange');
+    expect(result.current).toHaveProperty('handleResetColors');
+
+    expect(typeof result.current.handleThemeSelect).toBe('function');
+    expect(typeof result.current.handleColorChange).toBe('function');
+    expect(typeof result.current.handleResetColors).toBe('function');
+  });
+
+  it('should initialize with empty custom colors', () => {
+    const { result } = renderHook(() => useAppearanceActions());
+
+    expect(result.current.localCustomColors).toEqual({});
+  });
+
+  it('should handle theme selection', async () => {
+    const { result } = renderHook(() => useAppearanceActions());
+
+    const mockSetThemeMode = mockUseTheme.getState().setThemeMode;
+
+    await act(async () => {
+      await result.current.handleThemeSelect('light');
+    });
+
+    expect(mockSetThemeMode).toHaveBeenCalledWith('light');
+  });
+
+  it('should handle color change', () => {
+    const { result } = renderHook(() => useAppearanceActions());
+
+    const mockSetCustomColors = mockUseDesignSystemTheme.getState().setCustomColors;
+
+    act(() => {
+      result.current.handleColorChange('primary', '#FF0000');
+    });
+
+    expect(mockSetCustomColors).toHaveBeenCalledWith({
+      primary: '#FF0000',
+    });
+  });
+
+  it('should not update if color is same', () => {
+    const { result } = renderHook(() => useAppearanceActions());
+
+    const mockSetCustomColors = mockUseDesignSystemTheme.getState().setCustomColors;
+
+    act(() => {
+      result.current.handleColorChange('primary', '#FF0000');
+      result.current.handleColorChange('primary', '#FF0000'); // Same color
+    });
+
+    // Should only be called once due to optimization
+    expect(mockSetCustomColors).toHaveBeenCalledTimes(1);
+  });
+
+  it('should handle reset colors', () => {
+    const { result } = renderHook(() => useAppearanceActions());
+
+    const mockResetCustomColors = mockUseDesignSystemTheme.getState().setCustomColors;
+
+    act(() => {
+      result.current.handleResetColors();
+    });
+
+    expect(mockResetCustomColors).toHaveBeenCalled();
+  });
+
+  it('should handle reset colors with config', () => {
+    const onConfirm = jest.fn();
+    const config = { onResetConfirm };
+
+    const { result } = renderHook(() => useAppearanceActions(config));
+
+    const mockResetCustomColors = mockUseDesignSystemTheme.getState().setCustomColors;
+
+    act(() => {
+      result.current.handleResetColors();
+    });
+
+    expect(mockResetCustomColors).toHaveBeenCalled();
+    expect(onConfirm).toHaveBeenCalled();
+  });
+
+  it('should sync local colors with store changes', () => {
+    const { result, rerender } = renderHook(
+      () => useAppearanceActions(),
+      {
+        initialProps: { customColors: { primary: '#FF0000' } }
+      }
+    );
+
+    expect(result.current.localCustomColors).toEqual({ primary: '#FF0000' });
+
+    // Simulate store change
+    rerender({ customColors: { primary: '#00FF00' } });
+
+    expect(result.current.localCustomColors).toEqual({ primary: '#00FF00' });
+  });
+
+  it('should have stable function references', () => {
+    const { result: result1 } = renderHook(() => useAppearanceActions());
+    const { result: result2 } = renderHook(() => useAppearanceActions());
+
+    // Functions should be stable across renders
+    expect(result1.current.handleThemeSelect).toBe(result2.current.handleThemeSelect);
+    expect(result1.current.handleColorChange).toBe(result2.current.handleColorChange);
+    expect(result1.current.handleResetColors).toBe(result2.current.handleResetColors);
+  });
+
+  it('should cleanup on unmount', () => {
+    const { unmount } = renderHook(() => useAppearanceActions());
+
+    unmount();
+
+    // Should not throw any errors during cleanup
+    expect(true).toBe(true);
+  });
+});

package/src/domains/appearance/__tests__/integration/index.test.tsx

@@ -0,0 +1,207 @@
+/**
+ * Integration Tests
+ */
+
+import React from 'react';
+import { render, fireEvent, act } from '@testing-library/react-native';
+import { AppearanceService, appearanceService } from '../../infrastructure/services/appearanceService';
+import { useAppearanceStore } from '../../infrastructure/stores/appearanceStore';
+import { AppearanceScreen } from '../../presentation/screens/AppearanceScreen';
+import type { ThemeMode, CustomThemeColors } from '../../types';
+
+// Mock design system theme
+jest.mock('@umituz/react-native-design-system', () => ({
+  useTheme: {
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+    })),
+  },
+  useDesignSystemTheme: {
+    getState: jest.fn(() => ({
+      setThemeMode: jest.fn(),
+      setCustomColors: jest.fn(),
+    })),
+  },
+}));
+
+// Mock storage
+jest.mock('../../infrastructure/storage/appearanceStorage', () => ({
+  AppearanceStorage: {
+    getSettings: jest.fn(() => Promise.resolve(null)),
+    setSettings: jest.fn(() => Promise.resolve()),
+    clear: jest.fn(() => Promise.resolve()),
+  },
+}));
+
+const mockUseTheme = require('@umituz/react-native-design-system').useTheme;
+const mockUseDesignSystemTheme = require('@umituz/react-native-design-system').useDesignSystemTheme;
+const mockAppearanceStorage = require('../../infrastructure/storage/appearanceStorage').AppearanceStorage;
+
+describe('Appearance Integration Tests', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('should initialize and render correctly', async () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Should render without crashing
+    expect(getByTestId('appearance-screen')).toBeTruthy();
+
+    // Should initialize service
+    await act(async () => {
+      await appearanceService.initialize();
+    });
+
+    expect(mockAppearanceStorage.getSettings).toHaveBeenCalled();
+    expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalled();
+    expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalled();
+  });
+
+  it('should handle theme mode changes end-to-end', async () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Initialize service
+    await act(async () => {
+      await appearanceService.initialize();
+    });
+
+    // Change theme mode
+    await act(async () => {
+      await appearanceService.setThemeMode('light');
+    });
+
+    // Verify all systems are updated
+    expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalledWith('light');
+    expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalledWith('light');
+    expect(mockAppearanceStorage.setSettings).toHaveBeenCalledWith({
+      themeMode: 'light',
+    });
+  });
+
+  it('should handle custom color changes end-to-end', async () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Initialize service
+    await act(async () => {
+      await appearanceService.initialize();
+    });
+
+    // Change custom colors
+    const newColors: CustomThemeColors = {
+      primary: '#FF0000',
+      secondary: '#00FF00',
+    };
+
+    await act(async () => {
+      await appearanceService.setCustomColors(newColors);
+    });
+
+    // Verify all systems are updated
+    expect(mockUseDesignSystemTheme.getState().setCustomColors).toHaveBeenCalledWith(newColors);
+    expect(mockAppearanceStorage.setSettings).toHaveBeenCalledWith({
+      themeMode: 'dark', // Default theme
+      customColors: newColors,
+    });
+  });
+
+  it('should handle reset end-to-end', async () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Initialize with custom settings
+    await act(async () => {
+      await appearanceService.setThemeMode('light');
+      await appearanceService.setCustomColors({
+        primary: '#FF0000',
+      secondary: '#00FF00',
+      });
+    });
+
+    // Reset everything
+    await act(async () => {
+      await appearanceService.reset();
+    });
+
+    // Verify reset
+    expect(mockAppearanceStorage.clear).toHaveBeenCalled();
+    expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalledWith('dark');
+    expect(mockUseDesignSystemTheme.getState().setThemeMode).toHaveBeenCalledWith('dark');
+    expect(mockUseDesignSystemTheme.getState().setCustomColors).toHaveBeenCalledWith(undefined);
+  });
+
+  it('should handle errors gracefully', async () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Mock storage to throw error
+    mockAppearanceStorage.setSettings.mockRejectedValue(new Error('Storage failed'));
+
+    // Should still render without crashing
+    expect(getByTestId('appearance-screen')).toBeTruthy();
+
+    // Should handle error gracefully
+    await act(async () => {
+      await appearanceService.setThemeMode('light');
+    });
+
+    // Should still attempt to update despite storage error
+    expect(mockUseTheme.getState().setThemeMode).toHaveBeenCalled();
+  });
+
+  it('should prevent memory leaks during rapid updates', async () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    // Initialize service
+    await act(async () => {
+      await appearanceService.initialize();
+    });
+
+    // Rapid theme changes
+    const promises = [];
+    for (let i = 0; i < 10; i++) {
+      promises.push(
+        act(async () => {
+          await appearanceService.setThemeMode(i % 2 === 0 ? 'light' : 'dark');
+        })
+      );
+    }
+
+    await Promise.all(promises);
+
+    // Should handle rapid changes without memory leaks
+    expect(getByTestId('appearance-screen')).toBeTruthy();
+    
+    // Verify final state
+    const finalTheme = i % 2 === 0 ? 'dark' : 'light';
+    expect(mockUseTheme.getState().setThemeMode).toHaveBeenLastCalledWith(finalTheme);
+  });
+
+  it('should maintain performance during heavy usage', async () => {
+    const { getByTestId } = render(<AppearanceScreen />);
+
+    const startTime = performance.now();
+
+    // Heavy usage simulation
+    await act(async () => {
+      await appearanceService.initialize();
+      
+      // Rapid color changes
+      for (let i = 0; i < 20; i++) {
+        const colors: CustomThemeColors = {
+          primary: `#${i.toString(16).padStart(6, '0')}`,
+        };
+        await appearanceService.setCustomColors(colors);
+      }
+    });
+
+    const endTime = performance.now();
+    const duration = endTime - startTime;
+
+    // Should complete within reasonable time
+    expect(duration).toBeLessThan(1000); // 1 second for 20 color changes
+    expect(getByTestId('appearance-screen')).toBeTruthy();
+  });
+});