refactor: add unit test and adjust icon example screen (callstack#4135)

example/src/Examples/IconExample.tsx

@@ -1,26 +1,35 @@
 import * as React from 'react';
-import { StyleSheet, View } from 'react-native';
+import { StyleSheet, View, Image } from 'react-native';
 
-import { Icon, List, MD2Colors } from 'react-native-paper';
+import { Icon, List } from 'react-native-paper';
 
 import ScreenWrapper from '../ScreenWrapper';
 
+const AssetIcon = ({ size, testID }: { size: number; testID: string }) => (
+  <Image
+    accessibilityIgnoresInvertColors
+    source={require('../../assets/images/paper-icon.png')}
+    style={{ width: size, height: size }}
+    testID={testID}
+  />
+);
+
 const IconExample = () => {
   return (
     <ScreenWrapper>
-      <List.Section title="Default color">
+      <List.Section title="Default icon (MaterialCommunityIcon)">
         <View style={styles.row}>
           <Icon source="camera" size={24} />
         </View>
       </List.Section>
-      <List.Section title="Custom color">
+      <List.Section title="Image icon">
         <View style={styles.row}>
-          <Icon source="camera" color={MD2Colors.green500} size={24} />
+          <Icon source={{ uri: 'https://picsum.photos/700' }} size={48} />
         </View>
       </List.Section>
-      <List.Section title="Custom Size">
+      <List.Section title="Render function icon">
         <View style={styles.row}>
-          <Icon source="heart" color={MD2Colors.pink300} size={50} />
+          <Icon source={AssetIcon} size={48} />
         </View>
       </List.Section>
     </ScreenWrapper>

src/components/Icon.tsx

@@ -67,10 +67,13 @@ export type Props = IconProps & {
    */
   source: any;
   /**
-   *
    * Color of the icon.
    */
   color?: string;
+  /**
+   * TestID used for testing purposes
+   */
+  testID?: string;
   /**
    * @optional
    */
@@ -102,6 +105,7 @@ const Icon = ({
   color,
   size,
   theme: themeOverrides,
+  testID,
   ...rest
 }: Props) => {
   const theme = useInternalTheme(themeOverrides);
@@ -125,6 +129,7 @@ const Icon = ({
     return (
       <Image
         {...rest}
+        testID={testID}
         source={s}
         style={[
           {
@@ -150,12 +155,13 @@ const Icon = ({
             color: iconColor,
             size,
             direction,
+            testID,
           });
         }}
       </SettingsConsumer>
     );
   } else if (typeof s === 'function') {
-    return s({ color: iconColor, size, direction });
+    return s({ color: iconColor, size, direction, testID });
   }
 
   return null;

src/components/MaterialCommunityIcon.tsx

@@ -9,6 +9,7 @@ export type IconProps = {
   size: number;
   direction: 'rtl' | 'ltr';
   allowFontScaling?: boolean;
+  testID?: string;
 };
 
 type AccessibilityProps =
@@ -89,6 +90,7 @@ const defaultIcon = ({
   size,
   direction,
   allowFontScaling,
+  testID,
 }: IconProps) => (
   <MaterialCommunityIcons
     allowFontScaling={allowFontScaling}
@@ -104,6 +106,7 @@ const defaultIcon = ({
     ]}
     pointerEvents="none"
     selectable={false}
+    testID={testID}
     {...accessibilityProps}
   />
 );

src/components/__tests__/Icon.test.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import { Image } from 'react-native';
+
+import { render } from '@testing-library/react-native';
+
+import Icon from '../Icon';
+
+const ICON_SIZE = 24;
+
+describe('Icon Component', () => {
+  it('renders correctly with image source', () => {
+    const source = { uri: 'https://picsum.photos/700' };
+    const { getByTestId } = render(
+      <Icon source={source} size={ICON_SIZE} testID="image-icon" />
+    );
+    const imageIcon = getByTestId('image-icon');
+
+    expect(imageIcon).toBeOnTheScreen();
+    expect(imageIcon).toHaveStyle({ width: ICON_SIZE, height: ICON_SIZE });
+  });
+
+  it('renders correctly with string source', () => {
+    const source = 'camera';
+    const { getByTestId } = render(
+      <Icon source={source} size={ICON_SIZE} testID="camera-icon" />
+    );
+    const icon = getByTestId('camera-icon');
+
+    expect(icon).toBeOnTheScreen();
+    expect(icon).toHaveStyle({ fontSize: ICON_SIZE, lineHeight: ICON_SIZE });
+  });
+
+  it('renders correctly with function source', () => {
+    const source = ({ size, testID }: { size: number; testID: string }) => (
+      <Image
+        accessibilityIgnoresInvertColors
+        source={{ uri: 'https://picsum.photos/700' }}
+        style={{ width: size, height: size }}
+        testID={testID}
+      />
+    );
+    const { getByTestId } = render(
+      <Icon source={source} size={ICON_SIZE} testID="function-icon" />
+    );
+
+    const functionIcon = getByTestId('function-icon');
+
+    expect(functionIcon).toHaveStyle({ width: ICON_SIZE, height: ICON_SIZE });
+    expect(functionIcon).toBeOnTheScreen();
+  });
+});

src/core/settings.tsx

@@ -5,7 +5,13 @@ import MaterialCommunityIcon, {
 } from '../components/MaterialCommunityIcon';
 
 export type Settings = {
-  icon?: ({ name, color, size, direction }: IconProps) => React.ReactNode;
+  icon?: ({
+    name,
+    color,
+    size,
+    direction,
+    testID,
+  }: IconProps) => React.ReactNode;
   rippleEffectEnabled?: boolean;
 };