[unit-testing] Working on unit testing

Author: dheeraj1429

App.tsx

@@ -1,13 +1,21 @@
-import React from 'react';
+import React, { useState } from 'react';
 import { SafeAreaView, ScrollView } from 'react-native';
-import { Container, ThemeProvider } from './src/packages/react-native-material-elements';
+import { Container, SegmentedControl, ThemeProvider } from './src/packages/react-native-material-elements';
 
 function App(): React.JSX.Element {
+  const [index, setIndex] = useState<number>(0);
+
   return (
     <ThemeProvider>
       <SafeAreaView>
         <ScrollView>
-          <Container />
+          <Container>
+            <SegmentedControl
+              data={['One', 'Two', 'Three', 'Four', 'Five']}
+              selectedIndex={index}
+              onChange={(_, _index) => setIndex(_index)}
+            />
+          </Container>
         </ScrollView>
       </SafeAreaView>
     </ThemeProvider>

jest.config.js

@@ -22,6 +22,8 @@ module.exports = {
     'babel.config.js',
   ],
 
+  testPathIgnorePatterns: ['/node_modules', '/e2e'],
+
   coverageReporters: ['html', 'text', 'lcov', 'text-summary'],
 
   moduleFileExtensions: ['ts', 'tsx', 'js', 'jsx', 'json', 'node', 'mjs', 'svg', 'png'],
@@ -32,7 +34,7 @@ module.exports = {
   coverageThreshold: {
     global: {
       statements: 80,
-      branches: 75,
+      branches: 80,
       functions: 80,
       lines: 80,
     },

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

@@ -9,6 +9,7 @@ describe('DropDown Component', () => {
 
   beforeEach(() => {
     jest.clearAllMocks();
+    jest.clearAllTimers();
   });
 
   it('should render correctly', async () => {
@@ -244,6 +245,7 @@ describe('DropDownListContainer component', () => {
   });
 
   it('should call the onClose function when press on item', () => {
+    jest.useFakeTimers();
     const { getByText } = render(
       <DropDownListContainer
         inputLayoutRectangle={{ x: 0, y: 0, width: 0, height: 0 }}

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

@@ -1,8 +1,12 @@
 import React from 'react';
-import { render } from './test-utils';
+import { fireEvent, render } from './test-utils';
 import { ModalContainer, Text } from '../src';
 
 describe('ModalContainer', () => {
+  const mockOnCloseHandler = jest.fn();
+
+  const mockTestId = 'mock-test-id';
+
   it('should render correctly with default props', () => {
     const { toJSON } = render(
       <ModalContainer>
@@ -21,4 +25,18 @@ describe('ModalContainer', () => {
     const element = getByText('Hello');
     expect(element).toBeDefined();
   });
+
+  it('should call the onClose function', () => {
+    const { getByTestId } = render(
+      <ModalContainer onClose={mockOnCloseHandler} rootWrapperTestID={mockTestId}>
+        <></>
+      </ModalContainer>,
+    );
+
+    const item = getByTestId(mockTestId);
+
+    fireEvent(item, 'press', { nativeEvent: {} });
+    expect(mockOnCloseHandler).toHaveBeenCalled();
+    expect(mockOnCloseHandler).toHaveBeenCalledTimes(1);
+  });
 });

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

@@ -157,4 +157,16 @@ describe('Pagination Component', () => {
     expect(flattenedStyle.backgroundColor).toEqual('red');
     expect(flattenedStyle.borderWidth).toEqual(2);
   });
+
+  it('should show all the pagination item if count is less than or equal to the max visible items, show all pages', () => {
+    const { getByText } = render(<Pagination count={3} />);
+    const firstItem = getByText('1');
+    expect(firstItem).toBeDefined();
+
+    const secondItem = getByText('2');
+    expect(secondItem).toBeDefined();
+
+    const thirdItem = getByText('3');
+    expect(thirdItem).toBeDefined();
+  });
 });

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

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

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

@@ -1,7 +1,8 @@
 import React from 'react';
 import { fireEvent, render, waitFor } from './test-utils';
-import { Radio, Text } from '../src';
+import { Radio, RadioCircle, Text } from '../src';
 import { View } from 'react-native';
+import { RADIO_LARGE, RADIO_MEDIUM, RADIO_SMALL } from '../src/components/Radio/constants';
 
 describe('Radio Component', () => {
   const mockRadioBaseButtonTestId = 'radio-base-button-test-id';
@@ -92,4 +93,55 @@ describe('Radio Component', () => {
     expect(queryByText('mock-label')).toBeNull();
     expect(queryByText('mock-description')).toBeNull();
   });
+
+  it('should render the divider component', () => {
+    const { getByTestId } = render(<Radio showDivider dividerProps={{ testID: 'divider' }} />);
+
+    const divider = getByTestId('divider');
+    expect(divider).toBeDefined();
+  });
+});
+
+describe('Radio Circle', () => {
+  const testID = 'mock-test-id';
+
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render small divider component', () => {
+    const { getByTestId } = render(<RadioCircle size="small" testID={testID} />);
+
+    const radio = getByTestId(testID);
+
+    expect(radio).toBeDefined();
+    expect(radio.props.style.width).toEqual(RADIO_SMALL);
+  });
+
+  it('should render medium radioCircle component', () => {
+    const { getByTestId } = render(<RadioCircle size="medium" testID={testID} />);
+
+    const radio = getByTestId(testID);
+
+    expect(radio).toBeDefined();
+    expect(radio.props.style.width).toEqual(RADIO_MEDIUM);
+  });
+
+  it('should render large radioCircle component', () => {
+    const { getByTestId } = render(<RadioCircle size="large" testID={testID} />);
+
+    const radio = getByTestId(testID);
+
+    expect(radio).toBeDefined();
+    expect(radio.props.style.width).toEqual(RADIO_LARGE);
+  });
+
+  it('should render small radioCircle component when invalid size passed', () => {
+    const { getByTestId } = render(<RadioCircle size={'invalid' as any} testID={testID} />);
+
+    const radio = getByTestId(testID);
+
+    expect(radio).toBeDefined();
+    expect(radio.props.style.width).toEqual(RADIO_SMALL);
+  });
 });

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

@@ -4,6 +4,10 @@ import { SegmentedControlItem } from '../src/components/SegmentedControl/Segment
 import { fireEvent, render } from './test-utils';
 
 describe('SegmentedControl component', () => {
+  const mockSegmentedControllerTestId = 'mock-segmented-item-test-id';
+
+  const mockOnPress = jest.fn();
+
   beforeEach(() => {
     jest.clearAllMocks();
   });
@@ -12,6 +16,57 @@ describe('SegmentedControl component', () => {
     const { toJSON } = render(<SegmentedControl data={['']} selectedIndex={0} />);
     expect(toJSON()).toMatchSnapshot();
   });
+
+  it('should call the onChange function', () => {
+    const { getByTestId } = render(
+      <SegmentedControl
+        data={['First', 'Second']}
+        selectedIndex={0}
+        segmentedControlItemTestId={mockSegmentedControllerTestId}
+        onChange={mockOnPress}
+      />,
+    );
+
+    const firstItem = getByTestId(`${mockSegmentedControllerTestId}-0`);
+
+    fireEvent(firstItem, 'press', { nativeEvent: {} });
+
+    expect(firstItem).toBeDefined();
+    expect(mockOnPress).toHaveBeenCalled();
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should apply the correct segmentTextStyle', () => {
+    const { getByText } = render(
+      <SegmentedControl data={['First', 'Second']} selectedIndex={0} segmentTextStyle={{ color: 'red' }} />,
+    );
+
+    const firstItem = getByText('First');
+    expect(firstItem).toBeDefined();
+
+    expect(firstItem.props.style.color).toEqual('red');
+
+    const secondItem = getByText('Second');
+    expect(secondItem).toBeDefined();
+
+    expect(secondItem.props.style.color).toEqual('red');
+  });
+
+  it('should apply the correct segmentTextStyle to specific item', () => {
+    const { getByText } = render(
+      <SegmentedControl
+        data={['First', 'Second']}
+        selectedIndex={0}
+        segmentTextStyle={{ color: 'red' }}
+        applySegmentItemTextStyleIndex={0}
+      />,
+    );
+
+    const firstItem = getByText('First');
+    expect(firstItem).toBeDefined();
+
+    expect(firstItem.props.style.color).toEqual('red');
+  });
 });
 
 describe('SegmentedControlContainer component', () => {

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

@@ -22,7 +22,7 @@ import {
   SWITCH_THUMB_WIDTH_MEDIUM,
   SWITCH_THUMB_WIDTH_SMALL,
 } from '../src';
-import { fireEvent, render, waitFor } from './test-utils';
+import { fireEvent, render } from './test-utils';
 
 describe('Switch Component', () => {
   const switchMockTestId = 'switch-test-id';
@@ -33,11 +33,9 @@ describe('Switch Component', () => {
     jest.clearAllMocks();
   });
 
-  it('should match the snapshot with default props', async () => {
+  it('should match the snapshot with default props', () => {
     const { toJSON } = render(<Switch />);
-    await waitFor(() => {
-      expect(toJSON()).toMatchSnapshot();
-    });
+    expect(toJSON()).toMatchSnapshot();
   });
 
   it('should forward ref correctly', () => {

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

@@ -0,0 +1,21 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ProgressBar component should render correctly with default props 1`] = `
+<View
+  accessible={true}
+  onLayout={[Function]}
+>
+  <View
+    collapsable={false}
+    style={
+      {
+        "borderColor": "#03A9F4",
+        "borderRadius": 3,
+        "borderWidth": 0.6,
+        "height": 9,
+        "overflow": "hidden",
+      }
+    }
+  />
+</View>
+`;