test: add tests

.npmignore

@@ -1,3 +1,5 @@
 node_modules
 Example
 .github
+*.spec.ts
+*.spec.tsx

package.json

@@ -39,6 +39,7 @@
   "license": "MIT",
   "devDependencies": {
     "@testing-library/react-native": "7.2.0",
+    "@types/faker": "^5.5.7",
     "@types/jest": "26.0.24",
     "@types/react": "17.0.16",
     "@types/react-native": "0.64.12",

src/native/KeyboardAvoiding/KeyboardAvoiding.spec.tsx

@@ -3,6 +3,7 @@ import { render } from '@testing-library/react-native'
 import { KeyboardAvoiding } from './KeyboardAvoiding'
 
 describe('KeyboardAvoiding', () => {
+
   test('render KeyboardAvoiding', () => {
     const { container } = render(<KeyboardAvoiding />)
     expect(container).toBeDefined()

src/shared/styles.ts

@@ -1,27 +1,27 @@
 import { StyleSheet } from 'react-native'
-import { theme } from '..'
+import { theme } from '../theme/theme'
 import { windowWidth } from '../helpers/paltfrom'
 
 // Styles
 export const commonStyles = StyleSheet.create({
   searchInput: {
     height: 46,
-    backgroundColor: theme.colors.tertiary,
+    backgroundColor: theme?.colors.tertiary,
     borderRadius: 48,
     paddingLeft: 40,
     paddingRight: 35,
     paddingTop: 5,
     paddingBottom: 5,
-    fontSize: theme.sizes.lg,
-    fontFamily: theme.fonts.secondary.regular,
+    fontSize: theme?.sizes.lg,
+    fontFamily: theme?.fonts.secondary.regular,
   },
 
   headerTitleStyle: {
-    fontFamily: theme.fonts.secondary.regular,
+    fontFamily: theme?.fonts.secondary.regular,
     fontSize: 17,
     lineHeight: 21,
 
-    color: theme.colors.white,
+    color: theme?.colors.white,
     letterSpacing: -0.34,
   },
 
@@ -37,24 +37,24 @@ export const commonStyles = StyleSheet.create({
   },
   /*** TAB  ***/
   tabBarUnderline: {
-    backgroundColor: theme.colors.primary,
+    backgroundColor: theme?.colors.primary,
     borderTopRightRadius: 18,
     borderTopLeftRadius: 18,
   },
 
   tabStyle: {
-    backgroundColor: theme.colors.white,
+    backgroundColor: theme?.colors.white,
   },
 
   tabTextStyle: {
-    fontFamily: theme.fonts.secondary.medium,
-    fontSize: windowWidth < 768 ? 13 : theme.sizes.lg,
+    fontFamily: theme?.fonts.secondary.medium,
+    fontSize: windowWidth < 768 ? 13 : theme?.sizes.lg,
     color: '#000',
     lineHeight: 22,
   },
 
   tabActiveStyle: {
-    backgroundColor: theme.colors.white,
+    backgroundColor: theme?.colors.white,
   },
 
   /*** End TAB ***/
@@ -63,7 +63,7 @@ export const commonStyles = StyleSheet.create({
     textAlign: 'center',
     color: '#FFF',
     fontSize: 10,
-    fontFamily: theme.fonts.primary.regular,
+    fontFamily: theme?.fonts.primary.regular,
     letterSpacing: -0.18,
   },
 
@@ -87,20 +87,20 @@ export const commonStyles = StyleSheet.create({
     width: 40,
     height: 40,
     borderRadius: 50,
-    backgroundColor: theme.colors.primary,
+    backgroundColor: theme?.colors.primary,
     justifyContent: 'center',
     alignItems: 'center',
   },
 
   sheetOkLabel: {
     color: '#FFF',
-    fontFamily: theme.fonts.secondary.medium,
+    fontFamily: theme?.fonts.secondary.medium,
     fontSize: 10,
     lineHeight: 11,
   },
   sheetTitle: {
     fontSize: 17,
-    fontFamily: theme.fonts.secondary.medium,
+    fontFamily: theme?.fonts.secondary.medium,
     lineHeight: 19,
     letterSpacing: 0.32,
   },
@@ -127,8 +127,8 @@ export const commonStyles = StyleSheet.create({
   },
 
   link: {
-    fontFamily: theme.fonts.secondary.medium,
-    fontSize: theme.sizes.sm,
+    fontFamily: theme?.fonts.secondary.medium,
+    fontSize: theme?.sizes.sm,
     color: '#ED1E4675',
     lineHeight: 18,
     letterSpacing: -0.07,
@@ -137,7 +137,7 @@ export const commonStyles = StyleSheet.create({
   error: {
     color: 'rgba(237, 30, 70, .75)',
     fontSize: 10,
-    fontFamily: theme.fonts.primary.bold,
+    fontFamily: theme?.fonts.primary.bold,
     marginVertical: 2,
     lineHeight: 18,
     letterSpacing: -0.07,
@@ -159,8 +159,8 @@ export const commonStyles = StyleSheet.create({
   // inputs
   input: {
     flex: 1,
-    paddingVertical: theme.sizes.sm,
-    paddingLeft: theme.sizes.lg,
+    paddingVertical: theme?.sizes.sm,
+    paddingLeft: theme?.sizes.lg,
 
     color: 'rgba(255, 255, 255, 1)',
   },
@@ -175,9 +175,9 @@ export const commonStyles = StyleSheet.create({
   },
 
   text: {
-    color: theme.colors.black,
+    color: theme?.colors.black,
     lineHeight: 22,
-    fontFamily: theme.fonts.secondary.regular,
+    fontFamily: theme?.fonts.secondary.regular,
     fontSize: 12,
     textAlign: 'left',
     textTransform: 'capitalize',
@@ -201,7 +201,7 @@ export const commonStyles = StyleSheet.create({
   /** shadows **/
   shadow0: {
     elevation: 0, // android shaows
-    shadowColor: theme.colors.primary,
+    shadowColor: theme?.colors.primary,
     shadowOpacity: undefined,
     shadowRadius: undefined,
     shadowOffset: {

src/ui/Badge/Badge.spec.tsx

@@ -2,16 +2,20 @@ import * as React from 'react'
 import { render } from '@testing-library/react-native'
 import { Badge } from './Badge'
 import { theme } from '../../theme/theme'
+import faker from 'faker'
 
 describe('Badge ', () => {
-  it('render Badge ', () => {
-    const { container } = render(<Badge text='Muisic' textColor={theme.colors.black} bgColor={theme.colors.white} />)
-
+  it('should render Badge correctly', () => {
+    const { container } = render(<Badge image={{
+      source: {
+        uri: faker.internet.avatar()
+      }
+    }} text='Muisic' textColor={theme?.colors.black} bgColor={theme?.colors.white} />)
     expect(container).toBeDefined()
   })
 
-  it('render Badge without image and textColor', () => {
-    const { container } = render(<Badge text='Muisic' bgColor={theme.colors.white} />)
+  it('should render Badge without image and textColor correctly', () => {
+    const { container } = render(<Badge text='Muisic' bgColor={theme?.colors.white} />)
     expect(container).toBeDefined()
   })
 })

src/ui/Badge/Badge.tsx

@@ -2,7 +2,7 @@ import * as React from 'react'
 import { styles } from './styles'
 import { TouchableOpacity, Text, Image, ColorValue, View, ImageProps } from 'react-native'
 
-type BadgeProps = {
+export type BadgeProps = {
   text: string
   bgColor: ColorValue
   textColor?: ColorValue

src/ui/Badge/styles.tsx

@@ -14,7 +14,7 @@ export const styles = StyleSheet.create({
   text: {
     lineHeight: 22,
     fontSize: 17,
-    fontFamily: theme.fonts.secondary.regular,
+    fontFamily: theme?.fonts.secondary.regular,
     letterSpacing: -0.41,
     textTransform: 'capitalize',
   },

src/ui/Box/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import { theme } from '../..'
+import { theme } from '../../theme/theme'
 import { windowWidth } from '../../helpers/paltfrom'
 
 export const styles = StyleSheet.create({
@@ -25,7 +25,7 @@ export const styles = StyleSheet.create({
   },
 
   text: {
-    fontFamily: theme.fonts.secondary.regular,
+    fontFamily: theme?.fonts.secondary.regular,
     fontSize: 17,
     textTransform: 'capitalize',
     textAlign: 'center',

src/ui/BtnWhite/BtnWhite.spec.tsx

@@ -9,7 +9,7 @@ describe('BtnWhite', () => {
   })
 
   it('should render  BtnWhite with loading', () => {
-    const { container } = render(<BtnWhite title='next' disabled onPress={() => {}} isLoading />)
+    const { container } = render(<BtnWhite title='next' disabled={false} onPress={() => {}} isLoading />)
     expect(container).toBeDefined()
   })
 })

src/ui/BtnWhite/styles.ts

@@ -2,8 +2,6 @@ import { StyleSheet } from 'react-native'
 import { theme } from '../../theme/theme'
 import { commonStyles } from '../../shared/styles'
 
-const { fonts } = theme
-
 export const styles = StyleSheet.create({
   button: {
     height: 50,
@@ -22,10 +20,10 @@ export const styles = StyleSheet.create({
   },
 
   label: {
-    fontFamily: fonts.primary.regular, // Mont
+    fontFamily: theme?.fonts.primary.regular, // Mont
     fontSize: 15,
     lineHeight: 20,
     letterSpacing: -0.24,
-    color: theme.colors.black,
+    color: theme?.colors.black,
   },
 })

src/ui/Container/Contaianer.spec.tsx

@@ -1,12 +1,23 @@
 import * as React from 'react'
 import { render } from '@testing-library/react-native'
 import { Container } from './Container'
+import { ThemeProvider } from '../../theme/theme.context'
+import { theme } from '../../theme'
 
 describe('Container', () => {
-  test('render Container', () => {
+  it('render Container', () => {
     const {} = render(<Container />)
   })
-  test('render secondary contianer', () => {
+  it('render secondary contianer', () => {
     const {} = render(<Container secondary />)
   })
+
+  it("should render correctly with theme provider", () => {
+    const {container} = render(
+      <ThemeProvider theme={theme}>
+        <Container />
+      </ThemeProvider>
+    )
+    expect(container).toBeDefined()
+  })
 })

src/ui/Empty/Empty.spec.tsx

@@ -7,4 +7,9 @@ describe('Empty', () => {
     const { container } = render(<Empty message='No data to show' />)
     expect(container).toBeDefined()
   })
+
+  it('should render correctly with search prop', () => {
+    const { container } = render(<Empty message='No data to show' searching  />)
+    expect(container).toBeDefined()
+  })
 })

src/ui/Empty/styles.ts

@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native'
-import { theme } from '../..'
+import { theme } from '../../theme/theme'
 import { isTall } from '../../helpers/paltfrom'
 
 export const styles = StyleSheet.create({
@@ -21,7 +21,7 @@ export const styles = StyleSheet.create({
 
   text: {
     textAlign: 'center',
-    fontFamily: theme.fonts.secondary.regular,
+    fontFamily: theme?.fonts.secondary.regular,
     fontSize: 17,
     lineHeight: 19,
     letterSpacing: 0.32,

src/ui/ErrorState/styles.ts

@@ -21,9 +21,9 @@ export const styles = StyleSheet.create({
 
   text: {
     textAlign: 'center',
-    fontFamily: theme.fonts.secondary.medium,
+    fontFamily: theme?.fonts.secondary.medium,
 
     fontSize: 17,
-    color: theme.colors.primary,
+    color: theme?.colors.primary,
   },
 })

src/ui/MiscField/MiscField.spec.tsx

@@ -7,4 +7,9 @@ describe('MiscField', () => {
     const { container } = render(<MiscField label='allow notifications' />)
     expect(container).toBeDefined()
   })
+
+  it('should render correctly with value and primary', () => {
+    const { container } = render(<MiscField label='allow notifications' value={"enabled"} primary />)
+    expect(container).toBeDefined()
+  })
 })

src/ui/MiscField/styles.ts

@@ -4,15 +4,15 @@ import { theme } from '../../theme'
 
 export const styles = StyleSheet.create({
   label: {
-    color: theme.colors.black,
+    color: theme?.colors.black,
     lineHeight: 20,
     textAlign: 'left',
     letterSpacing: -0.24,
-    fontFamily: theme.fonts.secondary.medium,
+    fontFamily: theme?.fonts.secondary.medium,
     fontSize: 15,
   },
   colored: {
-    color: theme.colors.primary,
+    color: theme?.colors.primary,
   },
 
   row: {

src/ui/Modal/Modal.spec.tsx

@@ -1,11 +1,17 @@
-import React from 'react'
+import * as React from 'react'
 import { Modal } from './Modal'
 import { render } from '@testing-library/react-native'
 
 describe('Modal', () => {
   test('render Modal', () => {
     const onClose = jest.fn()
-    const { container } = render(<Modal visible onClose={onClose} />)
+    const { container } = render(<Modal visible center={false} onClose={onClose} />)
+    expect(container).toBeDefined()
+  })
+
+  test('render centered Modal', () => {
+    const onClose = jest.fn()
+    const { container } = render(<Modal center visible onClose={onClose} height={100} width={100} />)
     expect(container).toBeDefined()
   })
 })