test: add more tests for coverage

Author: richardvclam

__tests__/Segment.test.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { Text } from 'react-native';
 import { render } from '@testing-library/react-native';
 import { SegmentedControl, Segment } from '../src';
 
@@ -27,4 +28,24 @@ describe('SegmentedControl', () => {
 
     expect(getByText('Test')).toBeDefined();
   });
+
+  it('should render when content is a function', () => {
+    const { getByText } = render(
+      <SegmentedControl>
+        <Segment name="Test" content={() => <Text>Function</Text>} />
+      </SegmentedControl>,
+    );
+
+    expect(getByText('Function')).toBeDefined();
+  });
+
+  it('should render when content is an element', () => {
+    const { getByText } = render(
+      <SegmentedControl>
+        <Segment name="Test" content={<Text>Element</Text>} />
+      </SegmentedControl>,
+    );
+
+    expect(getByText('Element')).toBeDefined();
+  });
 });

__tests__/SegmentedControl.test.tsx

@@ -1,8 +1,8 @@
-import React from 'react';
-import { View } from 'react-native';
+import React, { ReactElement } from 'react';
+import { Text, View } from 'react-native';
 import { fireEvent, render } from '@testing-library/react-native';
 import { SegmentedControl } from '../src/SegmentedControl';
-import { Segment } from '../src/Segment';
+import { Segment, SegmentContentProps } from '../src/Segment';
 
 jest.mock('react-native-reanimated', () =>
   require('react-native-reanimated/mock'),
@@ -45,14 +45,23 @@ describe('SegmentedControl', () => {
   });
 
   it('should render initially with slider on `Second`', async () => {
+    let activeSegment = null;
+
+    const SpyContent = ({ active }: SegmentContentProps): ReactElement => {
+      activeSegment = active;
+
+      return <Text>Second</Text>;
+    };
+
     const { getByTestId } = render(
       <SegmentedControl initialSelectedName="second">
         <Segment name="first" content="First" />
-        <Segment name="second" content="Second" />
+        <Segment name="second" content={SpyContent} />
       </SegmentedControl>,
     );
 
     expect(getByTestId('SegmentedControl_Slider')).toBeDefined();
+    expect(activeSegment).toBe(true);
   });
 
   it('should call onChangeValue when pressed on `Test`', async () => {

src/Segment/Segment.tsx

@@ -4,6 +4,12 @@ import { TouchableOpacity } from 'react-native-gesture-handler';
 import { SegmentedContext } from '../SegmentedControl/SegmentedControl';
 import styles from './SegmentStyles';
 
+export interface SegmentContentProps {
+  activeTintColor: string;
+  inactiveTintColor: string;
+  active: boolean;
+}
+
 export interface SegmentProps {
   activeTintColor?: string;
   content: React.ReactNode;

src/index.ts

@@ -1,2 +1,2 @@
 export { SegmentedControl, SegmentedControlProps } from './SegmentedControl';
-export { Segment, SegmentProps } from './Segment';
+export { Segment, SegmentProps, SegmentContentProps } from './Segment';