Add and improve unit tests (#22)

* Add and improve unit tests * Fix failing tests
razinj · Apr 28, 2023 · 64c885a · 64c885a
1 parent abe35b1
commit 64c885a
Show file tree

Hide file tree

Showing 26 changed files with 1,532 additions and 226 deletions.
diff --git a/package.json b/package.json
@@ -7,7 +7,7 @@
     "start": "react-native start",
     "info": "react-native info",
     "upgrade": "react-native upgrade",
-    "test": "jest",
+    "test": "jest --verbose",
     "test:update-snapshots": "jest -u",
     "test:ci": "jest --ci --no-cache --silent",
     "test:coverage": "jest --collect-coverage",

diff --git a/src/components/AllAppsLetterIndex.test.tsx b/src/components/AllAppsLetterIndex.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, screen } from '@testing-library/react-native'
 import React from 'react'
-import { initialStoreState } from '../../utils/test/data'
+import { getAppForTestsByName, initialStoreState } from '../../utils/test/data'
 import { renderWithProvider } from '../../utils/test/utils'
 import { RootState } from '../store'
 import AllAppsLetterIndex from './AllAppsLetterIndex'
@@ -20,13 +20,7 @@ describe('<AllAppsLetterIndex /> Tests', () => {
     const customInitialState: RootState = {
       ...initialStoreState,
       appsList: {
-        list: [
-          {
-            packageName: 'com.google.chrome',
-            name: 'Chrome',
-            icon: 'ICON',
-          },
-        ],
+        list: [getAppForTestsByName('Chrome')!],
       },
     }
 
@@ -49,18 +43,7 @@ describe('<AllAppsLetterIndex /> Tests', () => {
     const customInitialState: RootState = {
       ...initialStoreState,
       appsList: {
-        list: [
-          {
-            packageName: 'com.google.chrome',
-            name: 'Chrome',
-            icon: 'ICON',
-          },
-          {
-            packageName: 'com.google.maps',
-            name: 'Maps',
-            icon: 'ICON',
-          },
-        ],
+        list: [getAppForTestsByName('Chrome')!, getAppForTestsByName('Maps')!],
       },
     }
 

diff --git a/src/components/Search.test.tsx b/src/components/Search.test.tsx
@@ -1,6 +1,6 @@
 import { fireEvent, screen } from '@testing-library/react-native'
 import React from 'react'
-import { initialStoreState } from '../../utils/test/data'
+import { getAppForTestsByName, initialStoreState } from '../../utils/test/data'
 import { renderWithProvider, renderWithProviderAndContexts } from '../../utils/test/utils'
 import { RootState } from '../store'
 import Search from './Search'
@@ -65,21 +65,11 @@ describe('<Search /> Tests', () => {
   })
 
   it('should set correct result list when using correct query and reset search values when clear button is pressed', () => {
+    const chromeAppDetails = getAppForTestsByName('Chrome')!
     const customInitialState: RootState = {
       ...initialStoreState,
       appsList: {
-        list: [
-          {
-            packageName: 'com.google.chrome',
-            name: 'Chrome',
-            icon: 'ICON',
-          },
-          {
-            packageName: 'com.google.maps',
-            name: 'Maps',
-            icon: 'ICON',
-          },
-        ],
+        list: [chromeAppDetails, getAppForTestsByName('Maps')!],
       },
       appState: {
         ...initialStoreState.appState,
@@ -101,13 +91,7 @@ describe('<Search /> Tests', () => {
     let currentState = store.getState()
 
     expect(currentState.appState.search.query).toBe('chr')
-    expect(currentState.appState.search.result).toEqual([
-      {
-        packageName: 'com.google.chrome',
-        name: 'Chrome',
-        icon: 'ICON',
-      },
-    ])
+    expect(currentState.appState.search.result).toEqual([chromeAppDetails])
 
     const searchInputClearButton = screen.getByTestId('search-input-clear-button')
 
@@ -125,13 +109,7 @@ describe('<Search /> Tests', () => {
     const customInitialState: RootState = {
       ...initialStoreState,
       appsList: {
-        list: [
-          {
-            packageName: 'com.google.chrome',
-            name: 'Chrome',
-            icon: 'ICON',
-          },
-        ],
+        list: [getAppForTestsByName('Chrome')!],
       },
       appState: {
         ...initialStoreState.appState,

diff --git a/src/components/Settings/SettingsHeader.test.tsx b/src/components/Settings/SettingsHeader.test.tsx
@@ -0,0 +1,41 @@
+import { fireEvent, screen } from '@testing-library/react-native'
+import React from 'react'
+import { renderWithProvider } from '../../../utils/test/utils'
+import { APP_ID } from '../../constants'
+import { setDisplaySettings } from '../../slices/appState'
+import * as AppsModule from '../../utils/apps-module'
+import SettingsHeader from './SettingsHeader'
+
+const useDispatchMock = jest.fn()
+
+jest.mock('react-redux', () => ({
+  ...jest.requireActual('react-redux'),
+  useDispatch: () => useDispatchMock,
+}))
+
+describe('<SettingsHeader /> Tests', () => {
+  beforeAll(() => {
+    jest.spyOn(AppsModule, 'showAppDetails')
+  })
+
+  it('should render correctly and match snapshot', () => {
+    renderWithProvider(<SettingsHeader />)
+
+    expect(screen.toJSON()).toMatchSnapshot()
+    expect(screen.getByTestId('wrapper')).toBeOnTheScreen()
+    expect(screen.getByTestId('app-info-button')).toBeOnTheScreen()
+  })
+
+  it('should call function to display settings bottom sheet when pressed', () => {
+    renderWithProvider(<SettingsHeader />)
+
+    const appInfoButton = screen.getByTestId('app-info-button')
+
+    expect(appInfoButton).toBeOnTheScreen()
+
+    fireEvent.press(appInfoButton)
+
+    expect(useDispatchMock).toBeCalledWith(setDisplaySettings(false))
+    expect(AppsModule.showAppDetails).toBeCalledWith(APP_ID)
+  })
+})
diff --git a/src/components/Settings/SettingsHeader.tsx b/src/components/Settings/SettingsHeader.tsx
@@ -22,7 +22,7 @@ const SettingsHeader = () => {
   }
 
   return (
-    <View style={styles.wrapper} testID='settings-header-wrapper'>
+    <View style={styles.wrapper} testID='wrapper'>
       <Text style={styles.title}>
         Context Settings
         <Text style={styles.appInfoText}>
@@ -33,7 +33,7 @@ const SettingsHeader = () => {
         onPress={onAppInfoClick}
         android_disableSound={true}
         android_ripple={appInfoIconRippleConfig}
-        testID='settings-header-app-info-button'>
+        testID='app-info-button'>
         <CustomIcon name='information-outline' size={34} color='#808080' />
       </Pressable>
     </View>

diff --git a/src/components/Settings/__snapshots__/Settings.test.tsx.snap b/src/components/Settings/__snapshots__/Settings.test.tsx.snap
@@ -166,7 +166,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                     "paddingBottom": 20,
                   }
                 }
-                testID="settings-header-wrapper"
+                testID="wrapper"
               >
                 <Text
                   style={
@@ -223,7 +223,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                   onResponderTerminate={[Function]}
                   onResponderTerminationRequest={[Function]}
                   onStartShouldSetResponder={[Function]}
-                  testID="settings-header-app-info-button"
+                  testID="app-info-button"
                 >
                   <Text
                     allowFontScaling={false}
@@ -292,7 +292,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                       "justifyContent": "space-between",
                     }
                   }
-                  testID="settings-bottom-toggle-advanced-settings-button"
+                  testID="toggle-settings-button"
                 >
                   <View
                     style={
@@ -303,6 +303,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                         undefined,
                       ]
                     }
+                    testID="wrapper"
                   >
                     <Text
                       style={
@@ -313,6 +314,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                           [],
                         ]
                       }
+                      testID="title"
                     >
                       Recent Apps
                     </Text>
@@ -384,7 +386,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                       "justifyContent": "space-between",
                     }
                   }
-                  testID="settings-bottom-toggle-advanced-settings-button"
+                  testID="toggle-settings-button"
                 >
                   <View
                     style={
@@ -395,6 +397,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                         undefined,
                       ]
                     }
+                    testID="wrapper"
                   >
                     <Text
                       style={
@@ -405,6 +408,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                           [],
                         ]
                       }
+                      testID="title"
                     >
                       Pinned Apps
                     </Text>
@@ -476,7 +480,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                       "justifyContent": "space-between",
                     }
                   }
-                  testID="settings-bottom-toggle-advanced-settings-button"
+                  testID="toggle-settings-button"
                 >
                   <View
                     style={
@@ -487,6 +491,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                         undefined,
                       ]
                     }
+                    testID="wrapper"
                   >
                     <Text
                       style={
@@ -497,6 +502,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                           [],
                         ]
                       }
+                      testID="title"
                     >
                       Favorite Apps
                     </Text>
@@ -568,7 +574,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                       "justifyContent": "space-between",
                     }
                   }
-                  testID="settings-bottom-toggle-advanced-settings-button"
+                  testID="toggle-settings-button"
                 >
                   <View
                     style={
@@ -579,6 +585,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                         undefined,
                       ]
                     }
+                    testID="wrapper"
                   >
                     <Text
                       style={
@@ -589,6 +596,7 @@ exports[`<Settings /> Tests should render modal correctly and match snapshot whe
                           [],
                         ]
                       }
+                      testID="title"
                     >
                       Advanced Settings
                     </Text>