[unit-testing] Added test cases

Author: dheeraj1429

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,
     },
   },
 };

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', () => {});
 });

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

@@ -412,4 +412,9 @@ describe('Chip Component', () => {
     const chip = getByTestId(chipMockTestId);
     expect(chip.props.style).not.toEqual(expect.objectContaining({ backgroundColor: 'red' }));
   });
+
+  it('should not render the label when label not passed', () => {
+    const { getByTestId } = render(<Chip />);
+    expect(getByTestId('chip-label-test-id').props.children).toBeUndefined();
+  });
 });

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

@@ -0,0 +1,13 @@
+import { Outline } from '../src/components/TextField/InputOutline';
+import { render } from './test-utils';
+
+describe('InputOutline component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    const { toJSON } = render(<Outline />);
+    expect(toJSON()).toMatchSnapshot();
+  });
+});

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

@@ -36,6 +36,22 @@ describe('OTP Component', () => {
     expect(mockOnChange).toHaveBeenCalledTimes(1);
   });
 
+  it('calls onChange with the correct OTP value 2', () => {
+    const { getByTestId } = render(<OTPInput length={3} onChange={mockOnChange} />);
+
+    const firstInput = getByTestId('otp-input-0');
+    fireEvent.changeText(firstInput, '1');
+
+    const secondInput = getByTestId('otp-input-1');
+    fireEvent.changeText(secondInput, '2');
+
+    const thirdInput = getByTestId('otp-input-2');
+    fireEvent.changeText(thirdInput, '3');
+
+    expect(mockOnChange).toHaveBeenCalledWith('123');
+    expect(mockOnChange).toHaveBeenCalledTimes(3);
+  });
+
   it('focuses the next input when a digit is entered', () => {
     const { getByTestId } = render(<OTPInput length={3} />);
 

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

@@ -98,15 +98,15 @@ describe('SegmentedControl component', () => {
       <SegmentedControl
         data={['First', 'Second']}
         selectedIndex={0}
-        segmentItemStyles={{ backgroundColor: 'red' }}
+        segmentItemStyles={{ backgroundColor: 'red', borderWidth: 1 }}
         segmentedControlItemTestId={mockSegmentedControllerTestId}
         applySegmentItemStyleIndex={0}
       />,
     );
 
     const segmentedFirstItem = getByTestId(`${mockSegmentedControllerTestId}-0`);
     const firstItemStyles = StyleSheet.flatten(segmentedFirstItem.props.style);
-    expect(firstItemStyles).toEqual(expect.objectContaining({ backgroundColor: 'red' }));
+    expect(firstItemStyles).toEqual(expect.objectContaining({ backgroundColor: 'red', borderWidth: 1 }));
   });
 });
 

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

@@ -4,9 +4,14 @@ import { render } from './test-utils';
 
 describe('snackbar utils', () => {
   beforeEach(() => {
+    jest.useFakeTimers();
     jest.clearAllMocks();
   });
 
+  afterEach(() => {
+    jest.clearAllTimers();
+  });
+
   it('should render with default props', () => {
     const { toJSON } = render(<Snackbar />);
     expect(toJSON()).toMatchSnapshot();

src/packages/react-native-material-elements/__test__/__snapshots__/Chip.test.tsx.snap

@@ -83,10 +83,12 @@ exports[`Chip Component should match the snapshot with default props 1`] = `
           style={
             {
               "color": "#FAFAFA",
-              "fontSize": 14,
+              "fontSize": 12,
               "fontWeight": "500",
+              "testID": "chip-label-test-id",
             }
           }
+          testID="chip-label-test-id"
         />
       </View>
     </View>

src/packages/react-native-material-elements/__test__/__snapshots__/InputOutline.test.tsx.snap

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InputOutline component should render correctly with default props 1`] = `
+<View
+  style={
+    {
+      "alignItems": "center",
+      "backgroundColor": "transparent",
+      "borderColor": "#BDBDBD",
+      "borderRadius": undefined,
+      "borderWidth": 0.6,
+      "display": "flex",
+      "flexDirection": "row",
+      "opacity": 0.6,
+      "paddingHorizontal": 14,
+      "position": "relative",
+      "width": "100%",
+    }
+  }
+/>
+`;