@umituz/react-native-settings 1.11.4 → 2.4.0

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

@@ -0,0 +1,189 @@
+/**
+ * Tests for SettingItem Component
+ */
+
+import React from 'react';
+import { render, fireEvent } from '@testing-library/react-native';
+import { SettingItem } from '../SettingItem';
+
+// Mock lucide-react-native
+jest.mock('lucide-react-native', () => ({
+  Bell: 'Bell',
+  Palette: 'Palette',
+  ChevronRight: 'ChevronRight',
+}));
+
+// Mock dependencies
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+      primary: '#007AFF',
+      textPrimary: '#000000',
+      textSecondary: '#666666',
+    },
+    spacing: {
+      md: 16,
+    },
+  }),
+}));
+
+describe('SettingItem', () => {
+  it('renders correctly with basic props', () => {
+    const { getByText, getByTestId } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        testID="test-setting"
+      />
+    );
+
+    expect(getByText('Test Setting')).toBeTruthy();
+    expect(getByTestId('test-setting')).toBeTruthy();
+  });
+
+  it('displays value when provided', () => {
+    const { getByText } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        value="Test Value"
+      />
+    );
+
+    expect(getByText('Test Setting')).toBeTruthy();
+    expect(getByText('Test Value')).toBeTruthy();
+  });
+
+  it('shows switch when showSwitch is true', () => {
+    const { getByTestId, queryByTestId } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        showSwitch={true}
+        switchValue={true}
+        testID="test-setting"
+      />
+    );
+
+    expect(getByTestId('test-setting')).toBeTruthy();
+    // Switch should be present, chevron should not
+  });
+
+  it('calls onPress when pressed', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        onPress={mockOnPress}
+        testID="test-setting"
+      />
+    );
+
+    fireEvent.press(getByTestId('test-setting'));
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('calls onSwitchChange when switch is toggled', () => {
+    const mockOnSwitchChange = jest.fn();
+    const { getByRole } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        showSwitch={true}
+        switchValue={false}
+        onSwitchChange={mockOnSwitchChange}
+      />
+    );
+
+    const switchElement = getByRole('switch');
+    fireEvent(switchElement, 'valueChange', true);
+    expect(mockOnSwitchChange).toHaveBeenCalledWith(true);
+  });
+
+  it('applies custom colors', () => {
+    const { getByText } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        iconColor="#FF0000"
+        titleColor="#00FF00"
+      />
+    );
+
+    expect(getByText('Test Setting')).toBeTruthy();
+  });
+
+  it('shows disabled state correctly', () => {
+    const mockOnPress = jest.fn();
+    const { getByTestId } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        disabled={true}
+        onPress={mockOnPress}
+        testID="test-setting"
+      />
+    );
+
+    const pressable = getByTestId('test-setting');
+    expect(pressable.props.disabled).toBe(true);
+  });
+
+  it('does not show divider when isLast is true', () => {
+    const { queryByTestId } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        isLast={true}
+      />
+    );
+
+    // Divider should not be present
+    expect(queryByTestId('setting-divider')).toBeNull();
+  });
+
+  it('renders with different icon types', () => {
+    const { getByText } = render(
+      <SettingItem
+        icon={Palette}
+        title="Appearance Setting"
+      />
+    );
+
+    expect(getByText('Appearance Setting')).toBeTruthy();
+  });
+
+  it('handles long text correctly', () => {
+    const longTitle = 'This is a very long title that should be truncated properly';
+    const longValue = 'This is a very long value that should be truncated properly and should not break the layout';
+
+    const { getByText } = render(
+      <SettingItem
+        icon={Bell}
+        title={longTitle}
+        value={longValue}
+      />
+    );
+
+    expect(getByText(longTitle)).toBeTruthy();
+    expect(getByText(longValue)).toBeTruthy();
+  });
+
+  it('applies custom switch colors', () => {
+    const { getByRole } = render(
+      <SettingItem
+        icon={Bell}
+        title="Test Setting"
+        showSwitch={true}
+        switchValue={true}
+        switchThumbColor="#FF0000"
+        switchTrackColors={{ false: '#CCCCCC', true: '#00FF00' }}
+      />
+    );
+
+    const switchElement = getByRole('switch');
+    expect(switchElement).toBeTruthy();
+  });
+});

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

@@ -0,0 +1,186 @@
+/**
+ * Tests for SettingsErrorBoundary Component
+ */
+
+import React from 'react';
+import { render, Text } from '@testing-library/react-native';
+import { SettingsErrorBoundary } from '../SettingsErrorBoundary';
+
+// Mock dependencies
+jest.mock('@umituz/react-native-design-system-theme', () => ({
+  useAppDesignTokens: () => ({
+    colors: {
+      backgroundPrimary: '#ffffff',
+      surface: '#f5f5f5',
+    },
+  }),
+}));
+
+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>
+  ),
+}));
+
+// Component that throws an error
+const ThrowErrorComponent = () => {
+  throw new Error('Test error');
+};
+
+describe('SettingsErrorBoundary', () => {
+  let consoleError: jest.SpyInstance;
+
+  beforeEach(() => {
+    consoleError = jest.spyOn(console, 'error').mockImplementation(() => {});
+  });
+
+  afterEach(() => {
+    consoleError.mockRestore();
+  });
+
+  it('renders children when there is no error', () => {
+    const { getByText } = render(
+      <SettingsErrorBoundary>
+        <Text>Normal Content</Text>
+      </SettingsErrorBoundary>
+    );
+
+    expect(getByText('Normal Content')).toBeTruthy();
+  });
+
+  it('catches and displays error boundary fallback', () => {
+    const { getByTestId, getByText } = render(
+      <SettingsErrorBoundary>
+        <ThrowErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    // Should show error fallback
+    expect(getByTestId('atomic-icon-AlertTriangle-warning-lg')).toBeTruthy();
+    expect(getByTestId('atomic-text-headlineSmall-primary')).toBeTruthy();
+    expect(getByTestId('atomic-text-bodyMedium-secondary')).toBeTruthy();
+  });
+
+  it('uses custom fallback when provided', () => {
+    const customFallback = <Text testID="custom-fallback">Custom Error</Text>;
+    
+    const { getByTestId, queryByTestId } = render(
+      <SettingsErrorBoundary fallback={customFallback}>
+        <ThrowErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    expect(getByTestId('custom-fallback')).toBeTruthy();
+    expect(queryByTestId('atomic-icon-AlertTriangle-warning-lg')).toBeNull();
+  });
+
+  it('uses custom fallback title and message', () => {
+    const { getByTestId } = render(
+      <SettingsErrorBoundary
+        fallbackTitle="custom.error.title"
+        fallbackMessage="custom.error.message"
+      >
+        <ThrowErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    expect(getByTestId('atomic-text-headlineSmall-primary')).toBeTruthy();
+    expect(getByTestId('atomic-text-bodyMedium-secondary')).toBeTruthy();
+  });
+
+  it('logs error in development mode', () => {
+    const originalDev = __DEV__;
+    (global as any).__DEV__ = true;
+
+    render(
+      <SettingsErrorBoundary>
+        <ThrowErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    expect(consoleError).toHaveBeenCalledWith(
+      'Settings Error Boundary caught an error:',
+      expect.any(Error),
+      expect.objectContaining({
+        componentStack: expect.any(String),
+      })
+    );
+
+    (global as any).__DEV__ = originalDev;
+  });
+
+  it('does not log error in production mode', () => {
+    const originalDev = __DEV__;
+    (global as any).__DEV__ = false;
+
+    render(
+      <SettingsErrorBoundary>
+        <ThrowErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    expect(consoleError).not.toHaveBeenCalled();
+
+    (global as any).__DEV__ = originalDev;
+  });
+
+  it('resets error state when new children are provided', () => {
+    const { rerender, getByText, queryByText } = render(
+      <SettingsErrorBoundary>
+        <ThrowErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    // Error state should be shown
+    expect(queryByText('Normal Content')).toBeNull();
+
+    // Rerender with normal content
+    rerender(
+      <SettingsErrorBoundary>
+        <Text>Normal Content</Text>
+      </SettingsErrorBoundary>
+    );
+
+    // Should show normal content again
+    expect(getByText('Normal Content')).toBeTruthy();
+  });
+
+  it('handles different types of errors', () => {
+    const StringErrorComponent = () => {
+      throw 'String error';
+    };
+
+    const { getByTestId } = render(
+      <SettingsErrorBoundary>
+        <StringErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    expect(getByTestId('atomic-icon-AlertTriangle-warning-lg')).toBeTruthy();
+  });
+
+  it('handles async errors in useEffect', async () => {
+    const AsyncErrorComponent = () => {
+      React.useEffect(() => {
+        throw new Error('Async error');
+      }, []);
+      return <Text>Async Component</Text>;
+    };
+
+    const { getByTestId } = render(
+      <SettingsErrorBoundary>
+        <AsyncErrorComponent />
+      </SettingsErrorBoundary>
+    );
+
+    // Should catch the error
+    expect(getByTestId('atomic-icon-AlertTriangle-warning-lg')).toBeTruthy();
+  });
+});

package/src/presentation/screens/SettingsScreen.tsx

@@ -4,28 +4,21 @@
  */
 
 import React from "react";
-import { View, ScrollView, StatusBar, StyleSheet, TouchableOpacity } from "react-native";
-import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { View, StatusBar, StyleSheet } from "react-native";
 import { useNavigation } from "@react-navigation/native";
 import {
   useDesignSystemTheme,
   useAppDesignTokens,
 } from "@umituz/react-native-design-system-theme";
-import { AtomicIcon } from "@umituz/react-native-design-system-atoms";
-import { useLocalization } from "@umituz/react-native-localization";
-import { SettingsFooter } from "../components/SettingsFooter";
-import { UserProfileHeader } from "../components/UserProfileHeader";
-import { SettingsSection } from "../components/SettingsSection";
-import { AppearanceSection } from "./components/AppearanceSection";
-import { LanguageSection } from "./components/LanguageSection";
-import { NotificationsSection } from "./components/NotificationsSection";
-import { AboutLegalSection } from "./components/AboutLegalSection";
+import { SettingsHeader } from "./components/SettingsHeader";
+import { SettingsContent } from "./components/SettingsContent";
+import { SettingsErrorBoundary } from "../components/SettingsErrorBoundary";
 import { normalizeSettingsConfig } from "./utils/normalizeConfig";
 import { useFeatureDetection } from "./hooks/useFeatureDetection";
-import type { CustomSettingsSection } from "./types";
+import type { SettingsConfig, CustomSettingsSection } from "./types";
 
 export interface SettingsScreenProps {
-  config?: any;
+  config?: SettingsConfig;
   /** Show user profile header */
   showUserProfile?: boolean;
   /** User profile props */
@@ -36,6 +29,8 @@ export interface SettingsScreenProps {
     avatarUrl?: string;
     accountSettingsRoute?: string;
     onPress?: () => void;
+    guestDisplayName?: string;
+    avatarServiceUrl?: string;
   };
   /** Show footer with version */
   showFooter?: boolean;
@@ -47,6 +42,10 @@ export interface SettingsScreenProps {
   showCloseButton?: boolean;
   /** Custom close handler */
   onClose?: () => void;
+  /** Feature detection options */
+  featureOptions?: {
+    notificationServiceAvailable?: boolean;
+  };
 }
 
 export const SettingsScreen: React.FC<SettingsScreenProps> = ({
@@ -58,138 +57,36 @@ export const SettingsScreen: React.FC<SettingsScreenProps> = ({
   customSections = [],
   showCloseButton = false,
   onClose,
+  featureOptions,
 }) => {
   const navigation = useNavigation();
   const { themeMode } = useDesignSystemTheme();
   const tokens = useAppDesignTokens();
-  const insets = useSafeAreaInsets();
-  const { t } = useLocalization();
 
   const isDark = themeMode === "dark";
   const colors = tokens.colors;
-  const spacing = tokens.spacing;
 
   const normalizedConfig = normalizeSettingsConfig(config);
-  const features = useFeatureDetection(normalizedConfig, navigation);
-
-  const hasAnyFeatures =
-    features.appearance ||
-    features.language ||
-    features.notifications ||
-    features.about ||
-    features.legal ||
-    customSections.length > 0;
-
-  const handleClose = () => {
-    if (onClose) {
-      onClose();
-    } else {
-      navigation.goBack();
-    }
-  };
+  const features = useFeatureDetection(normalizedConfig, navigation, featureOptions);
 
   return (
     <View style={[styles.container, { backgroundColor: colors.backgroundPrimary }]}>
       <StatusBar barStyle={isDark ? "light-content" : "dark-content"} />
-
-      {showCloseButton && (
-        <View
-          style={[
-            styles.closeButtonContainer,
-            {
-              paddingTop: insets.top + spacing.xs,
-              paddingRight: spacing.md,
-            },
-          ]}
-        >
-          <TouchableOpacity
-            onPress={handleClose}
-            style={[
-              styles.closeButton,
-              {
-                backgroundColor: colors.surface,
-              },
-            ]}
-            hitSlop={{ top: 10, bottom: 10, left: 10, right: 10 }}
-          >
-            <AtomicIcon name="X" size="lg" color="primary" />
-          </TouchableOpacity>
-        </View>
-      )}
-
-      <ScrollView
-        style={styles.scrollView}
-        contentContainerStyle={[
-          styles.scrollContent,
-          {
-            paddingTop: showCloseButton ? spacing.md : insets.top + spacing.md,
-            paddingBottom: spacing.xxxl + spacing.xl,
-            paddingHorizontal: 0,
-          },
-        ]}
-        showsVerticalScrollIndicator={false}
-      >
-        {showUserProfile && (
-          <View style={styles.profileContainer}>
-            <UserProfileHeader
-              displayName={userProfile?.displayName}
-              userId={userProfile?.userId}
-              isGuest={userProfile?.isGuest}
-              avatarUrl={userProfile?.avatarUrl}
-              accountSettingsRoute={userProfile?.accountSettingsRoute}
-              onPress={userProfile?.onPress}
-            />
-          </View>
-        )}
-
-        {features.appearance && (
-          <AppearanceSection config={normalizedConfig.appearance.config} />
-        )}
-
-        {features.language && (
-          <LanguageSection config={normalizedConfig.language.config} />
-        )}
-
-        {features.notifications && (
-          <NotificationsSection config={normalizedConfig.notifications.config} />
-        )}
-
-        {(features.about || features.legal) && (
-          <AboutLegalSection
-            showAbout={features.about}
-            showLegal={features.legal}
-            aboutConfig={normalizedConfig.about.config}
-            legalConfig={normalizedConfig.legal.config}
-          />
-        )}
-
-        {customSections && customSections.length > 0 && (
-          <>
-            {Array.from(customSections)
-              .sort((a, b) => (a.order ?? 999) - (b.order ?? 999))
-              .map((section, index) => (
-                <SettingsSection
-                  key={section.id || `custom-${index}`}
-                  title={section.title}
-                >
-                  {section.content}
-                </SettingsSection>
-              ))}
-          </>
-        )}
-
-        {!hasAnyFeatures && (
-          <View style={styles.emptyContainer}>
-            <SettingsSection
-              title={t("settings.noOptionsAvailable") || "No settings available"}
-            >
-              <View />
-            </SettingsSection>
-          </View>
-        )}
-
-        {showFooter && <SettingsFooter versionText={footerText} />}
-      </ScrollView>
+      
+      <SettingsHeader showCloseButton={showCloseButton} onClose={onClose} />
+      
+      <SettingsErrorBoundary>
+        <SettingsContent
+          normalizedConfig={normalizedConfig}
+          features={features}
+          showUserProfile={showUserProfile}
+          userProfile={userProfile}
+          showFooter={showFooter}
+          footerText={footerText}
+          customSections={customSections}
+          showCloseButton={showCloseButton}
+        />
+      </SettingsErrorBoundary>
     </View>
   );
 };
@@ -198,31 +95,4 @@ const styles = StyleSheet.create({
   container: {
     flex: 1,
   },
-  closeButtonContainer: {
-    position: "absolute",
-    top: 0,
-    right: 0,
-    zIndex: 10,
-    alignItems: "flex-end",
-  },
-  closeButton: {
-    width: 44,
-    height: 44,
-    borderRadius: 22,
-    justifyContent: "center",
-    alignItems: "center",
-  },
-  scrollView: {
-    flex: 1,
-  },
-  scrollContent: {
-    flexGrow: 1,
-  },
-  profileContainer: {
-    marginBottom: 32,
-    paddingHorizontal: 0,
-  },
-  emptyContainer: {
-    paddingVertical: 24,
-  },
 });