components: update tests

src/components/Buttons/__tests__/PrimaryButton.test.tsx

@@ -1,9 +1,9 @@
 import React from 'react'
-import { ActivityIndicator, Text, TouchableOpacity, Image } from 'react-native'
+import { ActivityIndicator, Text, TouchableOpacity, Image, ViewStyle } from 'react-native'
 import renderer from 'react-test-renderer'
 import PrimaryButton from '../PrimaryButton'
 import { ButtonDisplayState, ButtonProps } from '../ButtonProps'
-import { Images } from '../../../res'
+import { Images, Colors } from '../../../res'
 
 describe('PrimaryButton', () => {
   describe('when state is normal', () => {
@@ -16,6 +16,7 @@ describe('PrimaryButton', () => {
         title: 'accept',
         displayState: ButtonDisplayState.Normal,
         onPress: onPressCallback,
+        style: undefined,
       }
       testRenderer = renderer.create(<PrimaryButton {...props} />)
     })
@@ -43,6 +44,28 @@ describe('PrimaryButton', () => {
     it('has a valid snapshot', () => {
       expect(testRenderer.toJSON()).toMatchSnapshot()
     })
+
+    it('renders button text with custom style', () => {
+      const style = {
+        color: Colors.White,
+        fontSize: 12,
+        fontWeight: 'bold',
+      }
+      const props = {
+        icon: Images.Warning,
+        title: 'accept',
+        displayState: ButtonDisplayState.Normal,
+        onPress: onPressCallback,
+        style: style,
+      } as ButtonProps
+
+      testRenderer = renderer.create(<PrimaryButton {...props} />)
+      const text = testRenderer.root.findByType(Text)
+
+      expect(text.props.style.color).toBe(style.color)
+      expect(text.props.style.fontSize).toBe(style.fontSize)
+      expect(text.props.style.fontWeight).toBe(style.fontWeight)
+    })
   })
 
   describe('when state is loading', () => {
@@ -79,6 +102,23 @@ describe('PrimaryButton', () => {
     it('has a valid snapshot', () => {
       expect(testRenderer.toJSON()).toMatchSnapshot()
     })
+
+    it('renders activity indicator with custom spinner color', () => {
+      const style = {
+        color: Colors.DarkGrey,
+      }
+      const props = {
+        title: 'accept',
+        displayState: ButtonDisplayState.Loading,
+        onPress: onPressCallback,
+        style: style,
+      } as ButtonProps
+
+      testRenderer = renderer.create(<PrimaryButton {...props} />)
+      const activityIndicator = testRenderer.root.findByType(ActivityIndicator)
+
+      expect(activityIndicator.props.style.color).toBe(style.color)
+    })
   })
 
   describe('when state is disabled', () => {

src/components/Buttons/__tests__/__snapshots__/PrimaryButton.test.tsx.snap

@@ -36,9 +36,10 @@ exports[`PrimaryButton when state is disabled has a valid snapshot 1`] = `
       style={
         Object {
           "alignSelf": "center",
-          "color": "white",
+          "color": "#fff",
           "fontFamily": "SharpSans-Extrabold",
           "fontSize": 15,
+          "fontWeight": "normal",
         }
       }
     >
@@ -88,6 +89,7 @@ exports[`PrimaryButton when state is loading has a valid snapshot 1`] = `
       style={
         Object {
           "alignSelf": "center",
+          "color": "#fff",
           "position": "absolute",
         }
       }
@@ -147,9 +149,10 @@ exports[`PrimaryButton when state is normal has a valid snapshot 1`] = `
       style={
         Object {
           "alignSelf": "center",
-          "color": "white",
+          "color": "#fff",
           "fontFamily": "SharpSans-Extrabold",
           "fontSize": 15,
+          "fontWeight": "normal",
         }
       }
     >

src/components/Dialogs/__tests__/Dialog.test.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Image, Text } from 'react-native'
+import { Image, Text, ButtonProps } from 'react-native'
 import renderer from 'react-test-renderer'
 import { Dialog, DialogProps } from '../Dialog'
 import DialogBox from '../DialogBox'
@@ -51,10 +51,13 @@ describe('Dialog', () => {
   })
 
   it('renders buttons if passed as prop', () => {
+    const buttonProps: any = {
+      style: { color: 'white' },
+    }
     const props: DialogProps = {
       buttons: (
         <>
-          <PrimaryButton title={'Confirm'} />
+          <PrimaryButton title={'Confirm'} {...buttonProps} />
           <SecondaryButton title={'Cancel'} />
         </>
       ),

src/components/TextInputs/__tests__/__snapshots__/NumberInput.test.tsx.snap

@@ -27,6 +27,7 @@ exports[`NumberInput render renders with gray border when blurred 1`] = `
       Object {
         "borderColor": "#c4ccd6",
       },
+      undefined,
     ]
   }
   underlineColorAndroid="transparent"
@@ -60,6 +61,7 @@ exports[`NumberInput render renders with green border when focused 1`] = `
       Object {
         "borderColor": "#14d64d",
       },
+      undefined,
     ]
   }
   underlineColorAndroid="transparent"

src/components/TextInputs/__tests__/__snapshots__/PinCodeTextInput.test.tsx.snap

@@ -34,6 +34,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -65,6 +66,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -96,6 +98,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -127,6 +130,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -158,6 +162,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -189,6 +194,7 @@ exports[`PinCodeTextInput render renders all number inputs with a digit if auth
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -231,6 +237,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -262,6 +269,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -293,6 +301,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -324,6 +333,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -355,6 +365,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"
@@ -386,6 +397,7 @@ exports[`PinCodeTextInput render renders all number inputs with a empty value if
         Object {
           "borderColor": "#c4ccd6",
         },
+        undefined,
       ]
     }
     underlineColorAndroid="transparent"