From e32c64f49d2600c4973aa62ff400dd2ef07b494a Mon Sep 17 00:00:00 2001
From: HIMANSHU <himanshu@wednesday.is>
Date: Mon, 15 Apr 2024 17:28:21 +0530
Subject: [PATCH] feat: Navigation Service Fix

---
 app/navigators/AppNavigator.js           |  4 ++--
 app/scenes/RootScreen/tests/saga.test.js | 24 ++++++++++++------------
 app/services/NavigationService.js        | 21 +++++++++------------
 3 files changed, 23 insertions(+), 26 deletions(-)

diff --git a/app/navigators/AppNavigator.js b/app/navigators/AppNavigator.js
index d3baa1c..5a3f924 100644
--- a/app/navigators/AppNavigator.js
+++ b/app/navigators/AppNavigator.js
@@ -3,7 +3,7 @@ import { createStackNavigator } from '@react-navigation/stack';
 import SplashScreen from '@scenes/SplashScreen/';
 import ExampleScreen from '@scenes/ExampleScreen';
 import { NavigationContainer } from '@react-navigation/native';
-import NavigationService from '../services/NavigationService';
+import { setTopLevelNavigator } from '@app/services/NavigationService';
 const Stack = createStackNavigator();
 /**
  * The root screen contains the application's navigation.
@@ -12,7 +12,7 @@ const Stack = createStackNavigator();
  */
 export default function AppNavigator() {
   return (
-    <NavigationContainer ref={NavigationService.setTopLevelNavigator}>
+    <NavigationContainer ref={setTopLevelNavigator}>
       <Stack.Navigator headerMode="none" initialRouteName="SplashScreen">
         <Stack.Screen name="SplashScreen" component={SplashScreen} />
         <Stack.Screen name="MainScreen" component={ExampleScreen} />
diff --git a/app/scenes/RootScreen/tests/saga.test.js b/app/scenes/RootScreen/tests/saga.test.js
index 0bed1dc..10e90c9 100644
--- a/app/scenes/RootScreen/tests/saga.test.js
+++ b/app/scenes/RootScreen/tests/saga.test.js
@@ -5,21 +5,22 @@
 /* eslint-disable redux-saga/yield-effects */
 
 import { takeLatest } from 'redux-saga/effects';
-import NavigationService from 'app/services/NavigationService';
+import { navigateAndReset } from '@app/services/NavigationService';
 import { timeout } from 'app/utils/testUtils';
 import rootScreenSaga, { startup } from '../saga';
 import { rootScreenTypes } from '../reducer';
 
+jest.mock('@app/services/NavigationService', () => ({
+  ...jest.requireActual('@app/services/NavigationService'),
+  navigateAndReset: jest.fn()
+}));
 describe('Tests for RootScreen sagas', () => {
-  let generator;
-  let submitSpy;
-
-  beforeEach(() => {
-    generator = rootScreenSaga();
-    submitSpy = jest.fn();
+  afterEach(() => {
+    jest.clearAllMocks();
   });
 
   it('should start task to watch for STARTUP action', () => {
+    const generator = rootScreenSaga();
     expect(generator.next().value).toEqual(
       takeLatest(rootScreenTypes.STARTUP, startup)
     );
@@ -27,19 +28,18 @@ describe('Tests for RootScreen sagas', () => {
 
   it('should ensure that the navigation service is called after waiting for 1000ms', async () => {
     const method = startup();
-    NavigationService.navigateAndReset = submitSpy;
     method.next();
     await timeout(1000);
-    expect(submitSpy).toHaveBeenCalled();
+    expect(navigateAndReset).toHaveBeenCalled();
+    expect(navigateAndReset).toHaveBeenCalledWith('MainScreen');
   });
 
   it('should ensure that the navigation service is called after waiting for 1000ms', async () => {
     const method = startup();
-    NavigationService.navigateAndReset = submitSpy;
     method.next();
     await timeout(650);
-    expect(submitSpy).not.toHaveBeenCalled();
+    expect(navigateAndReset).not.toHaveBeenCalled();
     await timeout(200);
-    expect(submitSpy).not.toHaveBeenCalled();
+    expect(navigateAndReset).not.toHaveBeenCalled();
   });
 });
diff --git a/app/services/NavigationService.js b/app/services/NavigationService.js
index 49c90a2..42e8d33 100644
--- a/app/services/NavigationService.js
+++ b/app/services/NavigationService.js
@@ -1,19 +1,20 @@
 import { NavigationActions, StackActions } from '@react-navigation/compat';
-
 /**
  * The navigation is implemented as a service so that it can be used outside of components, for example in sagas.
  *
  * @see https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html
  */
 
-let navigator;
+const navigatorObject = {
+  navigator: null
+};
 
 /**
  * This function is called when the RootScreen is created to set the navigator instance to use.
  */
-function setTopLevelNavigator(navigatorRef) {
-  navigator = navigatorRef;
-}
+const setTopLevelNavigator = navigatorRef => {
+  Object.assign(navigatorObject, { navigator: navigatorRef });
+};
 
 /**
  * Call this function when you want to navigate to a specific route.
@@ -22,7 +23,7 @@ function setTopLevelNavigator(navigatorRef) {
  * @param params Route parameters.
  */
 function navigate(routeName, params) {
-  navigator.dispatch(
+  navigatorObject.navigator.dispatch(
     NavigationActions.navigate({
       routeName,
       params
@@ -40,7 +41,7 @@ function navigate(routeName, params) {
  * @param params Route parameters.
  */
 function navigateAndReset(routeName, params) {
-  navigator.dispatch(
+  navigatorObject.navigator.dispatch(
     StackActions.replace({
       routeName,
       params
@@ -48,8 +49,4 @@ function navigateAndReset(routeName, params) {
   );
 }
 
-export default {
-  navigate,
-  navigateAndReset,
-  setTopLevelNavigator
-};
+export { navigate, navigateAndReset, setTopLevelNavigator };