[unit-testing]

App.tsx

@@ -1,25 +1,35 @@
-import React, { useState } from 'react';
-import { SafeAreaView, ScrollView } from 'react-native';
-import { Container, SegmentedControl, ThemeProvider } from './src/packages/react-native-material-elements';
+import React from 'react';
+import { SafeAreaView, StyleSheet, useColorScheme } from 'react-native';
+import { Chip, Container, ThemeProvider } from './src/packages/react-native-material-elements';
+import MaterialIcons from 'react-native-vector-icons/MaterialIcons';
 
 function App(): React.JSX.Element {
-  const [index, setIndex] = useState<number>(0);
+  const colorScheme = useColorScheme();
+  const isDarkMode = colorScheme === 'dark';
 
   return (
     <ThemeProvider>
-      <SafeAreaView>
-        <ScrollView>
-          <Container>
-            <SegmentedControl
-              data={['One', 'Two', 'Three', 'Four', 'Five']}
-              selectedIndex={index}
-              onChange={(_, _index) => setIndex(_index)}
-            />
-          </Container>
-        </ScrollView>
+      <SafeAreaView style={{ flex: 1 }}>
+        <Container flex={1} style={isDarkMode ? styles.dark : styles.light}>
+          <Chip
+            label="Save"
+            color="warning"
+            onPress={() => {}}
+            endIcon={<MaterialIcons name="keyboard-arrow-down" size={20} />}
+          />
+        </Container>
       </SafeAreaView>
     </ThemeProvider>
   );
 }
 
+const styles = StyleSheet.create({
+  dark: {
+    backgroundColor: '#000000',
+  },
+  light: {
+    backgroundColor: '#ffffff',
+  },
+});
+
 export default App;

android/app/build.gradle

@@ -110,6 +110,7 @@ android {
 dependencies {
     // The version of react-native is set by the React Native Gradle Plugin
     implementation("com.facebook.react:react-android")
+    implementation project(':react-native-vector-icons')
 
     if (hermesEnabled.toBoolean()) {
         implementation("com.facebook.react:hermes-android")

android/app/src/main/java/com/reactnativematerialelements/MainApplication.kt

@@ -11,6 +11,7 @@ import com.facebook.react.defaults.DefaultReactHost.getDefaultReactHost
 import com.facebook.react.defaults.DefaultReactNativeHost
 import com.facebook.react.soloader.OpenSourceMergedSoMapping
 import com.facebook.soloader.SoLoader
+import com.oblador.vectoricons.VectorIconsPackage
 
 class MainApplication : Application(), ReactApplication {
 
@@ -20,6 +21,7 @@ class MainApplication : Application(), ReactApplication {
             PackageList(this).packages.apply {
               // Packages that cannot be autolinked yet can be added manually here, for example:
               // add(MyReactNativePackage())
+              add(VectorIconsPackage())
             }
 
         override fun getJSMainModuleName(): String = "index"

android/settings.gradle

@@ -4,3 +4,5 @@ extensions.configure(com.facebook.react.ReactSettingsExtension){ ex -> ex.autoli
 rootProject.name = 'ReactNativeMaterialElements'
 include ':app'
 includeBuild('../node_modules/@react-native/gradle-plugin')
+include ':react-native-vector-icons'
+project(':react-native-vector-icons').projectDir = new File(rootProject.projectDir, '../node_modules/react-native-vector-icons/android')

jest.config.js

@@ -33,10 +33,10 @@ module.exports = {
 
   coverageThreshold: {
     global: {
-      statements: 80,
-      branches: 79,
-      functions: 80,
-      lines: 80,
+      statements: 85,
+      branches: 80,
+      functions: 85,
+      lines: 85,
     },
   },
 };

jest.setup.ts

@@ -1,3 +1,11 @@
+const mockedUseColorScheme = jest.fn();
+
+jest.mock('react-native/Libraries/Utilities/useColorScheme', () => {
+  return {
+    default: mockedUseColorScheme,
+  };
+});
+
 jest.mock('react-native', () => {
   const RN = jest.requireActual('react-native');
   RN.DeviceEventEmitter.emit = jest.fn();

src/packages/react-native-material-elements/__test__/Alert.test.tsx

@@ -1,13 +1,19 @@
-import React from 'react';
-import { Alert, Text } from '../src';
+import { StyleSheet, TouchableOpacity, useColorScheme, View } from 'react-native';
+import { Alert, gray, Text, yellow } from '../src';
 import { fireEvent, render } from './test-utils';
-import { TouchableOpacity, View } from 'react-native';
+import * as RN from 'react-native';
 
 describe('Alert', () => {
   const mockStartIcon = <View testID="start-icon-test-id" />;
   const mockEndIcon = <View testID="end-icon-test-id" />;
 
   const mockOnPress = jest.fn();
+  const testId = 'alert-container-test-id';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
   const mockAction = (
     <TouchableOpacity testID="action-test-id" onPress={mockOnPress}>
       <Text>Click here</Text>
@@ -49,4 +55,112 @@ describe('Alert', () => {
     const subTitleElement = getByText('Hello');
     expect(subTitleElement).toBeDefined();
   });
+
+  it('should render the ghost variant alert with (light theme)', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('light');
+    const { getByTestId } = render(<Alert variation="ghost" testID={testId} />);
+
+    const alert = getByTestId(testId);
+
+    const flattenStyles = StyleSheet.flatten(alert.props.style);
+    expect(flattenStyles).toEqual(
+      expect.objectContaining({ borderRadius: 6, borderColor: gray[300], borderWidth: 0.8, backgroundColor: gray[100] }),
+    );
+  });
+
+  it('should render the ghost variant alert with (dark theme)', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('dark');
+    const { getByTestId } = render(<Alert variation="ghost" testID={testId} />);
+
+    const alert = getByTestId(testId);
+
+    const flattenStyles = StyleSheet.flatten(alert.props.style);
+    expect(flattenStyles).toEqual(
+      expect.objectContaining({ borderRadius: 6, borderColor: gray[700], borderWidth: 0.8, backgroundColor: gray[800] }),
+    );
+  });
+
+  it('should render gray title when variation is ghost, variant is gray and theme mode is light', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('light');
+    const { getByText } = render(<Alert variation="ghost" variant="gray" subTitle="subTitle" title="title" />);
+
+    const title = getByText('title');
+    const subTitle = getByText('subTitle');
+
+    const titleFlattenStyles = StyleSheet.flatten(title.props.style);
+    expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
+
+    const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
+    expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
+  });
+
+  it('should render light gray title when variation is ghost, variant is gray and theme mode is dark', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('dark');
+    const { getByText } = render(<Alert variation="ghost" variant="gray" subTitle="subTitle" title="title" />);
+
+    const title = getByText('title');
+    const subTitle = getByText('subTitle');
+
+    const titleFlattenStyles = StyleSheet.flatten(title.props.style);
+    expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
+
+    const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
+    expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
+  });
+
+  it('should render gray title when variation is ghost, variant is lightGray and theme mode is light', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('light');
+    const { getByText } = render(<Alert variation="ghost" variant="lightGray" subTitle="subTitle" title="title" />);
+
+    const title = getByText('title');
+    const subTitle = getByText('subTitle');
+
+    const titleFlattenStyles = StyleSheet.flatten(title.props.style);
+    expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
+
+    const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
+    expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
+  });
+
+  it('should render light gray title when variation is ghost, variant is lightGray and theme mode is dark', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('dark');
+    const { getByText } = render(<Alert variation="ghost" variant="lightGray" subTitle="subTitle" title="title" />);
+
+    const title = getByText('title');
+    const subTitle = getByText('subTitle');
+
+    const titleFlattenStyles = StyleSheet.flatten(title.props.style);
+    expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
+
+    const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
+    expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: 'white' }));
+  });
+
+  it('should render gray title when variation is ghost, variant is warning and theme mode is light', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('light');
+    const { getByText } = render(<Alert variation="ghost" variant="warning" subTitle="subTitle" title="title" />);
+
+    const title = getByText('title');
+    const subTitle = getByText('subTitle');
+
+    const titleFlattenStyles = StyleSheet.flatten(title.props.style);
+    expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
+
+    const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
+    expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: gray[800] }));
+  });
+
+  it('should render yellow title when variation is ghost, variant is warning and theme mode is dark', () => {
+    (useColorScheme as jest.Mock).mockReturnValue('dark');
+    const { getByText, debug } = render(<Alert variation="ghost" variant="warning" subTitle="subTitle" title="title" />);
+
+    const title = getByText('title');
+    const subTitle = getByText('subTitle');
+
+    const titleFlattenStyles = StyleSheet.flatten(title.props.style);
+    expect(titleFlattenStyles).toEqual(expect.objectContaining({ color: yellow[400] }));
+
+    const subTitleFlattenStyles = StyleSheet.flatten(subTitle.props.style);
+    expect(subTitleFlattenStyles).toEqual(expect.objectContaining({ color: yellow[400] }));
+  });
 });

src/packages/react-native-material-elements/__test__/Badge.test.tsx

@@ -247,4 +247,16 @@ describe('Badge', () => {
       expect(badge.props.style).toEqual(expect.objectContaining({ backgroundColor: expectedStyle.color }));
     });
   });
+
+  it('should throw error if passing invalid type of content', () => {
+    const consoleSpy = jest.spyOn(console, 'error').mockImplementation(() => {});
+    expect(() => render(<Badge badgeContent={[] as any} />)).toThrow(new TypeError('Badge content must be a string or number'));
+    consoleSpy.mockRestore();
+  });
+
+  it('should render badge content if content type is string', () => {
+    const { getByText } = render(<Badge badgeContent={'Save'} />);
+    const content = getByText('Save');
+    expect(content).toBeDefined();
+  });
 });

src/packages/react-native-material-elements/__test__/Button.test.tsx

@@ -1,6 +1,6 @@
 import { render as testRenderer, waitFor } from '@testing-library/react-native';
 import React from 'react';
-import { Text, View } from 'react-native';
+import { StyleSheet, Text, View } from 'react-native';
 import { Button, gray, green, lightBlue, primary, red, secondary, ThemeProvider, yellow } from '../src';
 import { fireEvent, render } from './test-utils';
 
@@ -458,4 +458,33 @@ describe('Button', () => {
     expect(text).toBeDefined();
     expect(text.props.style.color).toEqual(gray[900]);
   });
+
+  it('should apply side padding when start and end icon passed', () => {
+    const { getByText } = render(<Button label="Save" startIcon={<Text>Icon_1</Text>} endIcon={<Text>Icon_2</Text>} />);
+
+    const text = getByText('Save');
+
+    const flattenStyles = StyleSheet.flatten(text.props.style);
+    expect(flattenStyles).toEqual(expect.objectContaining({ paddingLeft: 5, paddingRight: 5 }));
+  });
+
+  it('should apply left padding when start icon passed', () => {
+    const { getByText } = render(<Button label="Save" startIcon={<Text>Icon_1</Text>} />);
+
+    const text = getByText('Save');
+
+    const flattenStyles = StyleSheet.flatten(text.props.style);
+    expect(flattenStyles).toEqual(expect.objectContaining({ paddingLeft: 5, paddingRight: 10 }));
+  });
+
+  it('should apply right padding when end icon passed', () => {
+    const { getByText } = render(<Button label="Save" endIcon={<Text>Icon_1</Text>} />);
+
+    const text = getByText('Save');
+
+    const flattenStyles = StyleSheet.flatten(text.props.style);
+    expect(flattenStyles).toEqual(expect.objectContaining({ paddingLeft: 10, paddingRight: 5 }));
+  });
+
+  it('should render the gray loader indicator when theme mode is light', () => {});
 });