@umituz/react-native-settings 2.0.0 → 2.4.0

package/src/presentation/components/__tests__/CloudSyncSetting.test.tsx

@@ -0,0 +1,78 @@
+/**
+ * Tests for CloudSyncSetting Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { CloudSyncSetting } from '../CloudSyncSetting';
+
+// Mock lucide-react-native
+jest.mock('lucide-react-native', () => ({
+  Cloud: 'Cloud',
+}));
+
+// Mock SettingItem component
+jest.mock('../SettingItem', () => {
+  const React = require('react');
+  const { View, Text } = require('react-native');
+  
+  return {
+    SettingItem: ({ icon, title, value, onPress, testID, showSwitch, switchValue, onSwitchChange, disabled, isLast }: any) => (
+      React.createElement(View, { 
+        testID: testID || 'setting-item',
+        onTouchEnd: onPress,
+        style: { padding: 16 }
+      }, [
+        React.createElement(Text, { key: 'title' }, title || ''),
+        value && React.createElement(Text, { key: 'value' }, value),
+        showSwitch && React.createElement(Text, { key: 'switch' }, switchValue ? 'ON' : 'OFF'),
+      ])
+    ),
+  };
+});
+
+describe('CloudSyncSetting', () => {
+  it('renders with default props', () => {
+    const { getByText } = render(<CloudSyncSetting />);
+    
+    expect(getByText('cloud_sync')).toBeTruthy();
+  });
+
+  it('renders with custom title', () => {
+    const { getByText } = render(<CloudSyncSetting title="Custom Sync" />);
+    
+    expect(getByText('Custom Sync')).toBeTruthy();
+  });
+
+  it('shows syncing state when isSyncing is true', () => {
+    const { getByText } = render(<CloudSyncSetting isSyncing={true} />);
+    
+    expect(getByText('syncing')).toBeTruthy();
+  });
+
+  it('displays custom description when provided', () => {
+    const { getByText } = render(
+      <CloudSyncSetting description="Custom description" />
+    );
+    
+    expect(getByText('Custom description')).toBeTruthy();
+  });
+
+  it('shows last synced time when provided', () => {
+    const lastSynced = new Date(Date.now() - 5 * 60 * 1000); // 5 minutes ago
+    const { getByText } = render(<CloudSyncSetting lastSynced={lastSynced} />);
+    
+    expect(getByText('last_synced_5m_ago')).toBeTruthy();
+  });
+
+  it('handles onPress callback', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <CloudSyncSetting onPress={mockOnPress} />
+    );
+    
+    const pressable = getByTestId('setting-item');
+    fireEvent.press(pressable);
+    expect(mockOnPress).toHaveBeenCalled();
+  });
+});

package/src/presentation/components/__tests__/DisclaimerCard.test.tsx

@@ -0,0 +1,208 @@
+/**
+ * Tests for DisclaimerCard Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { DisclaimerCard } from '../DisclaimerCard';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+    },
+    spacing: {
+      md: 16,
+    },
+    typography: {
+      labelLarge: {
+        fontWeight: '500',
+        fontSize: 14,
+      },
+    },
+  }),
+  withAlpha: jest.fn((color: string, alpha: number) => `${color}${alpha}`),
+}));
+
+jest.mock('@umituz/react-native-design-system-atoms', () => ({
+  AtomicText: ({ children, type, color, style }: any) => (
+    <Text style={style} testID={`atomic-text-${type}-${color}`}>
+      {children}
+    </Text>
+  ),
+  AtomicIcon: ({ name, color, size, style }: any) => (
+    <Text style={style} testID={`atomic-icon-${name}-${color}-${size}`}>
+      Icon: {name}
+    </Text>
+  ),
+}));
+
+import { Text } from 'react-native';
+
+describe('DisclaimerCard', () => {
+  it('renders correctly with basic props', () => {
+    const { getByTestId, getByText } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(getByText('Test Title')).toBeTruthy();
+    expect(getByText('Test Message')).toBeTruthy();
+    expect(getByTestId('disclaimer-setting')).toBeTruthy();
+    expect(getByTestId('atomic-icon-AlertTriangle-warning')).toBeTruthy();
+    expect(getByTestId('atomic-icon-ArrowRight-secondary-sm')).toBeTruthy();
+  });
+
+  it('calls onPress when pressed', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={mockOnPress}
+      />
+    );
+
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies correct styling with theme tokens', () => {
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    const card = getByTestId('disclaimer-setting');
+    expect(card.props.style).toContainEqual({
+      backgroundColor: '#FFF3E0',
+    });
+  });
+
+  it('renders with different icon names', () => {
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="Info"
+        iconColor="#2196F3"
+        backgroundColor="#E3F2FD"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('atomic-icon-Info-warning')).toBeTruthy();
+  });
+
+  it('handles long text content', () => {
+    const longTitle = 'This is a very long disclaimer title that should be handled properly';
+    const longMessage = 'This is a very long disclaimer message that should wrap properly and not break the layout';
+
+    const { getByText } = render(
+      <DisclaimerCard
+        title={longTitle}
+        shortMessage={longMessage}
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(getByText(longTitle)).toBeTruthy();
+    expect(getByText(longMessage)).toBeTruthy();
+  });
+
+  it('has correct accessibility properties', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={mockOnPress}
+      />
+    );
+
+    const touchable = getByTestId('disclaimer-setting');
+    expect(touchable.props.activeOpacity).toBe(0.7);
+  });
+
+  it('uses withAlpha utility correctly', () => {
+    const { withAlpha } = require('@umituz/react-native-design-system-theme');
+    
+    render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    expect(withAlpha).toHaveBeenCalledWith('#FF9800', 0.2);
+    expect(withAlpha).toHaveBeenCalledWith('#FF9800', 0.4);
+  });
+
+  it('maintains correct layout structure', () => {
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={jest.fn()}
+      />
+    );
+
+    // Check that icon container has correct styles
+    expect(getByTestId('atomic-icon-AlertTriangle-warning')).toBeTruthy();
+    
+    // Check that title and arrow are present
+    expect(getByTestId('atomic-icon-ArrowRight-secondary-sm')).toBeTruthy();
+  });
+
+  it('handles press events correctly', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerCard
+        title="Test Title"
+        shortMessage="Test Message"
+        iconName="AlertTriangle"
+        iconColor="#FF9800"
+        backgroundColor="#FFF3E0"
+        onPress={mockOnPress}
+      />
+    );
+
+    // Test single press
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+
+    // Test multiple presses
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    fireEvent.press(getByTestId('disclaimer-setting'));
+    expect(mockOnPress).toHaveBeenCalledTimes(3);
+  });
+});

package/src/presentation/components/__tests__/DisclaimerModal.test.tsx

@@ -0,0 +1,236 @@
+/**
+ * Tests for DisclaimerModal Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { DisclaimerModal } from '../DisclaimerModal';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+      borderLight: '#e0e0e0',
+    },
+  }),
+}));
+
+jest.mock('@umituz/react-native-design-system-atoms', () => ({
+  AtomicText: ({ children, type, color, style }: any) => (
+    <Text style={style} testID={`atomic-text-${type}-${color}`}>
+      {children}
+    </Text>
+  ),
+  AtomicIcon: ({ name, color, size, style }: any) => (
+    <Text style={style} testID={`atomic-icon-${name}-${color}-${size}`}>
+      Icon: {name}
+    </Text>
+  ),
+}));
+
+import { Text, Modal, ScrollView } from 'react-native';
+
+describe('DisclaimerModal', () => {
+  it('renders null when visible is false', () => {
+    const { queryByTestId } = render(
+      <DisclaimerModal
+        visible={false}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(queryByTestId('disclaimer-modal')).toBeNull();
+  });
+
+  it('renders correctly when visible is true', () => {
+    const { getByTestId, getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('disclaimer-modal')).toBeTruthy();
+    expect(getByText('Test Title')).toBeTruthy();
+    expect(getByText('Test Content')).toBeTruthy();
+  });
+
+  it('calls onClose when close button is pressed', () => {
+    const mockOnClose = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={mockOnClose}
+      />
+    );
+
+    fireEvent.press(getByTestId('close-disclaimer-modal'));
+    expect(mockOnClose).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies correct theme colors', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    const modalContainer = getByTestId('disclaimer-modal');
+    expect(modalContainer.props.style).toContainEqual({
+      backgroundColor: '#ffffff',
+    });
+  });
+
+  it('renders header with correct structure', () => {
+    const { getByTestId, getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
+    expect(getByTestId('atomic-icon-X-primary-md')).toBeTruthy();
+    expect(getByText('Test Title')).toBeTruthy();
+  });
+
+  it('renders content in ScrollView', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('disclaimer-modal-content')).toBeTruthy();
+  });
+
+  it('handles long content correctly', () => {
+    const longContent = 'This is a very long disclaimer content that should scroll properly. '.repeat(20);
+    
+    const { getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content={longContent}
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByText(longContent)).toBeTruthy();
+  });
+
+  it('applies correct text styling', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('atomic-text-bodyMedium-primary')).toBeTruthy();
+  });
+
+  it('has correct accessibility properties', () => {
+    const mockOnClose = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={mockOnClose}
+      />
+    );
+
+    const closeButton = getByTestId('close-disclaimer-modal');
+    expect(closeButton).toBeTruthy();
+  });
+
+  it('handles multiple close calls', () => {
+    const mockOnClose = jest.fn();
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={mockOnClose}
+      />
+    );
+
+    const closeButton = getByTestId('close-disclaimer-modal');
+    
+    fireEvent.press(closeButton);
+    fireEvent.press(closeButton);
+    fireEvent.press(closeButton);
+    
+    expect(mockOnClose).toHaveBeenCalledTimes(3);
+  });
+
+  it('maintains correct layout structure', () => {
+    const { getByTestId } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content="Test Content"
+        onClose={jest.fn()}
+      />
+    );
+
+    // Check modal container exists
+    expect(getByTestId('disclaimer-modal')).toBeTruthy();
+    
+    // Check header elements exist
+    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
+    expect(getByTestId('atomic-icon-X-primary-md')).toBeTruthy();
+    
+    // Check content exists
+    expect(getByTestId('disclaimer-modal-content')).toBeTruthy();
+  });
+
+  it('handles empty content gracefully', () => {
+    const { getByTestId, queryByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content=""
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByTestId('disclaimer-modal')).toBeTruthy();
+    expect(getByTestId('atomic-text-headlineMedium-primary')).toBeTruthy();
+    // Empty content should still render the text component
+    expect(getByTestId('atomic-text-bodyMedium-primary')).toBeTruthy();
+  });
+
+  it('handles special characters in content', () => {
+    const specialContent = 'Content with special chars: © ® ™ "quotes" \'apostrophes\'';
+    
+    const { getByText } = render(
+      <DisclaimerModal
+        visible={true}
+        title="Test Title"
+        content={specialContent}
+        onClose={jest.fn()}
+      />
+    );
+
+    expect(getByText(specialContent)).toBeTruthy();
+  });
+});

package/src/presentation/components/__tests__/DisclaimerSetting.test.tsx

@@ -0,0 +1,74 @@
+/**
+ * Tests for DisclaimerSetting Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { DisclaimerSetting } from '../DisclaimerSetting';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-localization', () => ({
+  useLocalization: () => ({
+    t: (key: string) => key,
+  }),
+}));
+
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+      warning: '#ff9800',
+    },
+    spacing: {
+      md: 16,
+    },
+  }),
+  withAlpha: (color: string, alpha: number) => `${color}${alpha}`,
+}));
+
+describe('DisclaimerSetting', () => {
+  it('renders disclaimer card correctly', () => {
+    const { getByTestId } = render(<DisclaimerSetting />);
+    
+    expect(getByTestId('disclaimer-setting')).toBeTruthy();
+  });
+
+  it('opens modal when card is pressed', () => {
+    const { getByTestId } = render(<DisclaimerSetting />);
+    
+    const card = getByTestId('disclaimer-setting');
+    fireEvent.press(card);
+    
+    // Modal should be visible now
+    expect(getByTestId('close-disclaimer-modal')).toBeTruthy();
+  });
+
+  it('closes modal when close button is pressed', () => {
+    const { getByTestId } = render(<DisclaimerSetting />);
+    
+    // Open modal first
+    const card = getByTestId('disclaimer-setting');
+    fireEvent.press(card);
+    
+    // Close modal
+    const closeButton = getByTestId('close-disclaimer-modal');
+    fireEvent.press(closeButton);
+    
+    // Modal should be closed
+    expect(() => getByTestId('close-disclaimer-modal')).toThrow();
+  });
+
+  it('uses custom props when provided', () => {
+    const customProps = {
+      titleKey: 'custom.title',
+      messageKey: 'custom.message',
+      shortMessageKey: 'custom.shortMessage',
+      iconName: 'Info',
+    };
+
+    const { getByText } = render(<DisclaimerSetting {...customProps} />);
+    
+    expect(getByText('custom.title')).toBeTruthy();
+    expect(getByText('custom.shortMessage')).toBeTruthy();
+  });
+});