test: add more tests

Author: richardvclam

__tests__/SegmentedControl.test.tsx

@@ -1,12 +1,22 @@
-import * as React from 'react';
-import { fireEvent, render, wait } from '@testing-library/react-native';
+import React from 'react';
+import { View } from 'react-native';
+import { fireEvent, render } from '@testing-library/react-native';
 import { SegmentedControl } from '../src/SegmentedControl';
 import { Segment } from '../src/Segment';
 
 jest.mock('react-native-reanimated', () =>
   require('react-native-reanimated/mock'),
 );
 
+jest.mock('react-native-gesture-handler', () => {
+  const actual = jest.requireActual('react-native-gesture-handler');
+  const { TouchableOpacity } = jest.requireActual('react-native');
+  return {
+    ...actual,
+    TouchableOpacity,
+  };
+});
+
 describe('SegmentedControl', () => {
   it('should render', () => {
     const { asJSON } = render(
@@ -18,6 +28,33 @@ describe('SegmentedControl', () => {
     expect(asJSON()).toMatchSnapshot();
   });
 
+  it('should render initially without slider, press on a segment and slider should appear', async () => {
+    const { getByTestId, getByText } = render(
+      <SegmentedControl>
+        <Segment name="first" content="First" />
+        <Segment name="second" content="Second" />
+      </SegmentedControl>,
+    );
+
+    expect(() => getByTestId('SegmentedControl_Slider')).toThrow();
+
+    const secondSegment = getByText('Second');
+    fireEvent.press(secondSegment);
+
+    expect(getByTestId('SegmentedControl_Slider')).toBeDefined();
+  });
+
+  it('should render initially with slider on `Second`', async () => {
+    const { getByTestId } = render(
+      <SegmentedControl initialSelectedName="second">
+        <Segment name="first" content="First" />
+        <Segment name="second" content="Second" />
+      </SegmentedControl>,
+    );
+
+    expect(getByTestId('SegmentedControl_Slider')).toBeDefined();
+  });
+
   it('should call onChangeValue when pressed on `Test`', async () => {
     const changeValueSpy = jest.fn();
     const { getByTestId } = render(
@@ -29,9 +66,36 @@ describe('SegmentedControl', () => {
     const button = getByTestId('Segment_Button');
     fireEvent.press(button);
 
-    await wait();
-
-    // TODO: Test not working.. button isnt being pressed from RNGH
     expect(changeValueSpy).toBeCalledWith('Test');
   });
+
+  it('should throw if a child component is not a Segment', () => {
+    const errorSpy = jest.spyOn(console, 'error');
+    errorSpy.mockImplementation();
+
+    expect(() => {
+      render(
+        <SegmentedControl>
+          <View />
+        </SegmentedControl>,
+      );
+    }).toThrow('SegmentedControl only accepts Segment as children.');
+
+    errorSpy.mockRestore();
+  });
+
+  it('should throw if a Segment has no name', () => {
+    const errorSpy = jest.spyOn(console, 'error');
+    errorSpy.mockImplementation();
+
+    expect(() => {
+      render(
+        <SegmentedControl>
+          <Segment name="" content="No Name" />
+        </SegmentedControl>,
+      );
+    }).toThrow('Segment requires `name` to be defined.');
+
+    errorSpy.mockRestore();
+  });
 });

__tests__/__snapshots__/SegmentedControl.test.tsx.snap

@@ -38,60 +38,42 @@ exports[`SegmentedControl should render 1`] = `
         ]
       }
     >
-      <RNGestureHandlerButton
-        collapsable={false}
-        rippleColor={0}
-        style={
-          Array [
-            Object {
-              "overflow": "hidden",
-            },
-            undefined,
-          ]
-        }
+      <TouchableOpacity
+        activeOpacity={0.2}
+        testID="Segment_Button"
       >
         <View
-          accessible={true}
           style={
             Object {
-              "opacity": 1,
+              "alignItems": "center",
+              "flex": 1,
+              "flexDirection": "row",
+              "justifyContent": "center",
             }
           }
-          testID="Segment_Button"
         >
-          <View
+          <Text
+            numberOfLines={1}
             style={
-              Object {
-                "alignItems": "center",
-                "flex": 1,
-                "flexDirection": "row",
-                "justifyContent": "center",
-              }
+              Array [
+                Object {
+                  "fontSize": 13,
+                  "paddingLeft": 2,
+                  "paddingRight": 2,
+                  "textAlign": "center",
+                  "width": "100%",
+                },
+                Object {
+                  "color": "#000000",
+                },
+                false,
+              ]
             }
           >
-            <Text
-              numberOfLines={1}
-              style={
-                Array [
-                  Object {
-                    "fontSize": 13,
-                    "paddingLeft": 2,
-                    "paddingRight": 2,
-                    "textAlign": "center",
-                    "width": "100%",
-                  },
-                  Object {
-                    "color": "#000000",
-                  },
-                  false,
-                ]
-              }
-            >
-              Test
-            </Text>
-          </View>
+            Test
+          </Text>
         </View>
-      </RNGestureHandlerButton>
+      </TouchableOpacity>
     </View>
   </View>
 </View>

src/Segment/Segment.tsx

@@ -1,4 +1,4 @@
-import React, { useContext } from 'react';
+import React, { useContext, FC } from 'react';
 import { StyleProp, Text, View, ViewStyle } from 'react-native';
 import { TouchableOpacity } from 'react-native-gesture-handler';
 import { SegmentedContext } from '../SegmentedControl/SegmentedControl';
@@ -12,13 +12,13 @@ export interface SegmentProps {
   style?: StyleProp<ViewStyle>;
 }
 
-export const Segment = ({
+export const Segment: FC<SegmentProps> = ({
   activeTintColor,
   content,
   inactiveTintColor,
   name,
   style,
-}: SegmentProps): JSX.Element => {
+}: SegmentProps) => {
   const context = useContext(SegmentedContext);
 
   if (!context) {

src/SegmentedControl/SegmentedControl.tsx

@@ -139,6 +139,7 @@ export const SegmentedControl = ({
         >
           {typeof _activeName !== 'undefined' && (
             <Animated.View
+              testID="SegmentedControl_Slider"
               style={[
                 styles.slider,
                 {