Merge pull request #80 from material-elements/unit-testing

[unit-testing] Working on unit testing

Author: dheeraj1429

.gitignore

@@ -35,6 +35,9 @@ local.properties
 *.keystore
 !debug.keystore
 
+# sonar scan
+.scannerwork
+
 # node.js
 #
 node_modules/

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: 79,
       functions: 80,
       lines: 80,
     },

package.json

@@ -7,7 +7,8 @@
     "ios": "react-native run-ios",
     "lint": "eslint .",
     "start": "react-native start",
-    "test": "jest --coverage"
+    "test": "jest --coverage",
+    "sonar-scanner": "sonar-scanner"
   },
   "dependencies": {
     "lodash": "^4.17.21",

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

@@ -1,7 +1,7 @@
 import { render as testRenderer, waitFor } from '@testing-library/react-native';
 import React from 'react';
 import { Text, View } from 'react-native';
-import { Button, green, lightBlue, primary, red, secondary, ThemeProvider, yellow } from '../src';
+import { Button, gray, green, lightBlue, primary, red, secondary, ThemeProvider, yellow } from '../src';
 import { fireEvent, render } from './test-utils';
 
 describe('Button', () => {
@@ -427,4 +427,35 @@ describe('Button', () => {
     const labelText = getByText(mockLabel);
     expect(labelText.props.style).toEqual(expect.objectContaining({ color: 'red', fontWeight: 100 }));
   });
+
+  it('should show the dark gray color of the text label when button color is lightGray', () => {
+    const { getByText } = render(<Button label="Save" buttonColor="lightGray" />);
+
+    const text = getByText('Save');
+    expect(text).toBeDefined();
+    expect(text.props.style.color).toEqual(gray[900]);
+  });
+
+  it('should show the dark gray color of the text label when button color is lightGray and button variant outlined ', () => {
+    const { getByText } = render(<Button label="Save" variation="outlined" buttonColor="lightGray" />);
+
+    const text = getByText('Save');
+    expect(text).toBeDefined();
+    expect(text.props.style.color).toEqual(gray[900]);
+  });
+
+  it('should render the loader when loading is passed', () => {
+    const { getByTestId } = render(<Button label="Save" loading />);
+
+    const loader = getByTestId('button-loader');
+    expect(loader).toBeDefined();
+  });
+
+  it('should show the dark color of the text label when button color is warning', () => {
+    const { getByText } = render(<Button label="Save" buttonColor="warning" />);
+
+    const text = getByText('Save');
+    expect(text).toBeDefined();
+    expect(text.props.style.color).toEqual(gray[900]);
+  });
 });

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,15 @@
+import { ProgressBar } from '../src';
+import { render } from './test-utils';
+
+describe('ProgressBar component', () => {
+  beforeEach(() => {
+    jest.clearAllMocks();
+  });
+
+  it('should render correctly with default props', () => {
+    jest.useFakeTimers();
+    const { toJSON } = render(<ProgressBar progress={0.2} />);
+    expect(toJSON()).toMatchSnapshot();
+    jest.clearAllTimers();
+  });
+});

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,110 @@ 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();
+  });
+
+  it('should call the onPress function when click on the label component', () => {
+    const { getByText } = render(<Radio onPress={mockOnPress} actionType="root" label="label" />);
+
+    const label = getByText('label');
+    expect(label).toBeDefined();
+
+    fireEvent(label, 'press', { nativeEvent: {} });
+
+    expect(mockOnPress).toHaveBeenCalled();
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should call the onPress function when click on the radio button', () => {
+    const { getByTestId } = render(<Radio onPress={mockOnPress} radioBaseButtonTestId={mockRadioBaseButtonTestId} />);
+
+    const radio = getByTestId(mockRadioBaseButtonTestId);
+
+    expect(radio).toBeDefined();
+
+    fireEvent(radio, 'press', { nativeEvent: {} });
+
+    expect(mockOnPress).toHaveBeenCalled();
+    expect(mockOnPress).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render the custom radio item if radio isActive', () => {
+    const { getByText } = render(<Radio isActive radioItem={<Text>Hello</Text>} />);
+    const text = getByText('Hello');
+    expect(text).toBeDefined();
+  });
+
+  it('should render the start adornment component', () => {
+    const { getByText } = render(<Radio adornment={<Text>Hello</Text>} adornmentType="start" />);
+
+    const text = getByText('Hello');
+    expect(text).toBeDefined();
+  });
+
+  it('should render the start adornment divider component', () => {
+    const { getByTestId } = render(
+      <Radio showDivider dividerProps={{ testID: 'divider-test-id' }} adornment={<Text>Hello</Text>} adornmentType="start" />,
+    );
+
+    const divider = getByTestId('divider-test-id');
+    expect(divider).toBeDefined();
+  });
+
+  it('should render active radio item when radio is active', () => {
+    jest.useFakeTimers();
+    const { getByTestId } = render(<Radio isActive />);
+    const radioItem = getByTestId('radio-item-test-id');
+    expect(radioItem).toBeDefined();
+    jest.clearAllTimers();
+  });
+});
+
+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);
+  });
 });