Updated unit test for 100% coverage - [Galeel]

Author: gbhasha

jest.config.js

@@ -40,7 +40,14 @@ module.exports = {
   // ],
 
   // An object that configures minimum threshold enforcement for coverage results
-  // coverageThreshold: null,
+  coverageThreshold: {
+    "global": {
+      "statements": 100,
+      "branches": 100,
+      "functions": 100,
+      "lines": 100
+    }
+  },
 
   // Make calling deprecated APIs throw helpful error messages
   // errorOnDeprecated: false,

src/SegmentedControlTab.js

@@ -3,11 +3,11 @@ import { View, ViewPropTypes, StyleSheet,  Text } from 'react-native'
 import PropTypes from 'prop-types'
 import TabOption from './TabOption'
 
-const handleTabPress = (index, selectedIndex, onTabPress) => {
-  selectedIndex !== index &&  onTabPress(index)
+export const handleTabPress = (index, selectedIndex, onTabPress) => {
+    selectedIndex !== index &&  onTabPress(index)
 }
 
-const getAccessibilityLabelByIndex = (accessibilityLabels, index) => {
+export const getAccessibilityLabelByIndex = (accessibilityLabels, index) => {
     return accessibilityLabels && accessibilityLabels.length > 0 && accessibilityLabels[index] ?  accessibilityLabels[index] : undefined
 }
 
@@ -67,56 +67,60 @@ const SegmentedControlTab = ({
 }
 
 SegmentedControlTab.propTypes = {
-  accessibilityLabels: PropTypes.arrayOf(PropTypes.string),
-  accessible: PropTypes.bool,
-  activeTabBadgeContainerStyle: Text.propTypes.style,
-  activeTabBadgeStyle: Text.propTypes.style,
-  activeTabStyle: ViewPropTypes.style,
-  activeTabTextStyle: Text.propTypes.style,
-  allowFontScaling: PropTypes.bool,
-  badges: PropTypes.arrayOf(PropTypes.number),
-  borderRadius: PropTypes.number,
-  onTabPress: PropTypes.func,
-  selectedIndex: PropTypes.number,
-  tabBadgeContainerStyle: Text.propTypes.style,
-  tabBadgeStyle: Text.propTypes.style,
-  tabStyle: ViewPropTypes.style,
-  tabTextStyle: Text.propTypes.style,
-  tabsContainerStyle: ViewPropTypes.style,
-  testIDs: PropTypes.arrayOf(PropTypes.string),
-  textNumberOfLines: PropTypes.number,
-  values: PropTypes.arrayOf(PropTypes.string),
+    accessibilityLabels: PropTypes.arrayOf(PropTypes.string),
+    accessible: PropTypes.bool,
+    activeTabBadgeContainerStyle: Text.propTypes.style,
+    activeTabBadgeStyle: Text.propTypes.style,
+    activeTabStyle: ViewPropTypes.style,
+    activeTabTextStyle: Text.propTypes.style,
+    allowFontScaling: PropTypes.bool,
+    badges: PropTypes.arrayOf(
+        PropTypes.oneOfType([
+            PropTypes.string,
+            PropTypes.number
+        ])),
+    borderRadius: PropTypes.number,
+    onTabPress: PropTypes.func,
+    selectedIndex: PropTypes.number,
+    tabBadgeContainerStyle: Text.propTypes.style,
+    tabBadgeStyle: Text.propTypes.style,
+    tabStyle: ViewPropTypes.style,
+    tabTextStyle: Text.propTypes.style,
+    tabsContainerStyle: ViewPropTypes.style,
+    testIDs: PropTypes.arrayOf(PropTypes.string),
+    textNumberOfLines: PropTypes.number,
+    values: PropTypes.arrayOf(PropTypes.string),
 }
 
 SegmentedControlTab.defaultProps = {
-  values: ['One', 'Two', 'Three'],
-  accessible: true,
-  accessibilityLabels: [],
-  testIDs: [],
-  badges: [],
-  selectedIndex: 0,
-  onTabPress: () => { },
-  tabsContainerStyle: {},
-  tabStyle: {},
-  activeTabStyle: {},
-  tabTextStyle: {},
-  activeTabTextStyle: {},
-  tabBadgeContainerStyle: {},
-  activeTabBadgeContainerStyle: {},
-  tabBadgeStyle: {},
-  activeTabBadgeStyle: {},
-  borderRadius: 5,
-  textNumberOfLines: 1,
-  allowFontScaling: true,
+    values: ['One', 'Two', 'Three'],
+    accessible: true,
+    accessibilityLabels: [],
+    testIDs: [],
+    badges: [],
+    selectedIndex: 0,
+    onTabPress: () => { },
+    tabsContainerStyle: {},
+    tabStyle: {},
+    activeTabStyle: {},
+    tabTextStyle: {},
+    activeTabTextStyle: {},
+    tabBadgeContainerStyle: {},
+    activeTabBadgeContainerStyle: {},
+    tabBadgeStyle: {},
+    activeTabBadgeStyle: {},
+    borderRadius: 5,
+    textNumberOfLines: 1,
+    allowFontScaling: true,
 }
 
 const styles = StyleSheet.create({
-  tabsContainerStyle: {
-      backgroundColor: 'transparent',
-      flexDirection: 'row',
-      borderColor: '#007AFF',
-      borderWidth: 1,
-  },
+    tabsContainerStyle: {
+        backgroundColor: 'transparent',
+        flexDirection: 'row',
+        borderColor: '#007AFF',
+        borderWidth: 1,
+    },
 })
 
 export default SegmentedControlTab

src/TabOption.js

@@ -40,7 +40,7 @@ const TabOption = ({
                     {text}
                 </Text>
                 {
-                    badge ?
+                    badge !== undefined &&
                         <View style={[
                             styles.tabBadgeContainerStyle,
                             tabBadgeContainerStyle,
@@ -52,7 +52,7 @@ const TabOption = ({
                                 allowFontScaling={allowFontScaling}>
                                 {badge}
                             </Text>
-                        </View> : false
+                        </View>
                 }
             </View>
         </TouchableOpacity>

src/__tests__/SegmentedControlTab.test.js

@@ -1,11 +1,75 @@
-// __tests__/Intro-test.js
 import React from 'react';
-import SegmentedControlTab from '../SegmentedControlTab';
+import SegmentedControlTab, {handleTabPress, getAccessibilityLabelByIndex} from '../SegmentedControlTab';
 jest.mock("../TabOption", () => 'TabOption')
 
 import renderer from 'react-test-renderer';
 
-test('renders correctly', () => {
-  const tree = renderer.create(<SegmentedControlTab />).toJSON();
-  expect(tree).toMatchSnapshot();
+describe('SegmentedControlTab', () => {
+  afterEach(() => {
+    jest.resetAllMocks()
+  });
+  it('renders correctly', () => {
+    const tree = renderer.create(<SegmentedControlTab />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('shoudl call defaultProps of onTabPress ', () => {
+    const tree = renderer.create(<SegmentedControlTab selectedIndex={1} />).toJSON();
+    tree.children[0].props.onTabPress()
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should call the given function when onTabPress is invoked ', () => {
+    const tabIndex = 0
+    const selectedIndex = 1
+    const callbackFunc = jest.fn()
+    const tree = renderer.create(<SegmentedControlTab selectedIndex={selectedIndex}
+                onTabPress={callbackFunc} />).toJSON();
+    tree.children[tabIndex].props.onTabPress(tabIndex)
+    expect(callbackFunc).toHaveBeenCalledWith(tabIndex)
+  });
+
+  it('should pass given testIDs to child component', () => {
+    const tree = renderer.create(<SegmentedControlTab testIDs={['id-1','id-2','id-3']} />).toJSON();
+    expect(tree.children[0].props.testID).toBe('id-1')
+    expect(tree.children[1].props.testID).toBe('id-2')
+    expect(tree.children[2].props.testID).toBe('id-3')
+  });
+
+  it('should pass given AccessibilityLabels to child component', () => {
+    const tree = renderer.create(<SegmentedControlTab accessibilityLabels={['label-1','label-2','label-3']} />).toJSON();
+    expect(tree.children[0].props.accessibilityLabel).toBe('label-1')
+    expect(tree.children[1].props.accessibilityLabel).toBe('label-2')
+    expect(tree.children[2].props.accessibilityLabel).toBe('label-3')
+  });
+
+  it('should pass given badges to child component', () => {
+    const tree = renderer.create(<SegmentedControlTab badges={['1','2','3']} />).toJSON();
+    expect(tree.children[0].props.badge).toBe('1')
+    expect(tree.children[1].props.badge).toBe('2')
+    expect(tree.children[2].props.badge).toBe('3')
+  });
+
+});
+
+
+describe('handleTabPress', () => {
+  it('should call the callback when selectedIndex is different', () => {
+    const callbackSpy = jest.fn()
+    const tabIndex = 1
+    const selectedIndex = 2
+    handleTabPress(tabIndex, selectedIndex, callbackSpy)
+    expect(callbackSpy).toHaveBeenCalledWith(tabIndex)
+  });
+
+});
+
+describe('getAccessibilityLabelByIndex', () => {
+  it('should return the AccessibilityLabel by given index', () => {
+
+    const AccessibilityLabels=['Label 1', 'Label 2']
+    const result = getAccessibilityLabelByIndex(AccessibilityLabels, 1)
+    expect(result).toBe(AccessibilityLabels[1])
+  });
+
 });

src/__tests__/TabOption.test.js

@@ -4,7 +4,59 @@ import TabOption from '../TabOption';
 
 import renderer from 'react-test-renderer';
 
-test('renders correctly', () => {
-  const tree = renderer.create(<TabOption />).toJSON();
-  expect(tree).toMatchSnapshot();
-});
+describe('TabOption', () => {
+  afterEach(() => {
+    jest.restoreAllMocks()
+  });
+
+  it('renders correctly', () => {
+    const tree = renderer.create(<TabOption />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should apply active tab styles when isTabActive is set to true', () => {
+    const activeTabStyle = {backgroundColor: '#0000FF'}
+    const tree = renderer.create(<TabOption
+                    activeTabStyle={activeTabStyle}
+                    isTabActive />).toJSON();
+    expect(tree.props.style.backgroundColor).toBe(activeTabStyle.backgroundColor)
+  });
+
+  it('should call the onPress handler when tapped', () => {
+    const tabIndex = 1
+    const mockFn = jest.fn()
+    const tree = renderer.create(<TabOption
+                    testID='tab'
+                    index={tabIndex}
+                    onTabPress={mockFn} />).toJSON()
+    jest.mock('TouchableOpacity', () => {
+      const jestReactNative = require('jest-react-native')
+      return jestReactNative('TouchableOpacity')
+    })
+    tree.props.onPress();
+    expect(mockFn).toHaveBeenCalledWith(tabIndex)
+
+  });
+
+  it('should render the badge along with tab text when badge is passed in props ', () => {
+    const tree = renderer.create(<TabOption badge={5}/>).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should apply the passed badgeStyle when tab is active ', () => {
+    const styles = {
+      activeTabStyle : {backgroundColor: '#0000FF'},
+      activeTabBadgeStyle : {color: '#CCCCCC'},
+      activeTabBadgeContainerStyle : {backgroundColor: '#00FFFF'}
+    }
+
+    const tree = renderer.create(<TabOption badge={5}
+                    activeTabStyle={styles.activeTabStyle}
+                    activeTabBadgeContainerStyle={styles.activeTabBadgeContainerStyle}
+                    activeTabBadgeStyle={styles.activeTabBadgeStyle}
+                    isTabActive />).toJSON();
+    expect(tree).toMatchSnapshot();
+  });
+})
+
+