Land user on Suggestions when one photo imported (#1824)

* Create navigation test for PhotoGallery

* Code and test land user on Suggestions when one photo imported

src/components/PhotoImporter/PhotoGallery.js

@@ -59,6 +59,10 @@ const PhotoGallery = ( ): Node => {
     lastScreen: "PhotoGallery"
   } ), [navigation] );
 
+  const navToSuggestions = useCallback( ( ) => navigation.navigate( "Suggestions", {
+    lastScreen: "PhotoGallery"
+  } ), [navigation] );
+
   const moveImagesToDocumentsDirectory = async selectedImages => {
     const path = galleryPhotosPath;
     await RNFS.mkdir( path );
@@ -171,7 +175,7 @@ const PhotoGallery = ( ): Node => {
       setPhotoImporterState( {
         observations: [newObservation]
       } );
-      navToObsEdit();
+      navToSuggestions();
       setPhotoGalleryShown( false );
     } else {
       // navigate to group photos
@@ -189,7 +193,7 @@ const PhotoGallery = ( ): Node => {
     navToObsEdit, navToObsList, photoGalleryShown, numOfObsPhotos, setPhotoImporterState,
     evidenceToAdd, galleryUris, navigation, setGroupedPhotos, fromGroupPhotos, skipGroupPhotos,
     groupedPhotos, currentObservation, updateObservations, observations, currentObservationIndex,
-    params
+    params, navToSuggestions
   ] );
 
   useFocusEffect(

tests/integration/navigation/PhotoGallery.test.js

@@ -0,0 +1,104 @@
+import {
+  screen,
+  userEvent,
+  waitFor,
+  within
+} from "@testing-library/react-native";
+import initI18next from "i18n/initI18next";
+import * as rnImagePicker from "react-native-image-picker";
+import useStore from "stores/useStore";
+import faker from "tests/helpers/faker";
+import { renderApp } from "tests/helpers/render";
+import setupUniqueRealm from "tests/helpers/uniqueRealm";
+
+// We're explicitly testing navigation here so we want react-navigation
+// working normally
+jest.unmock( "@react-navigation/native" );
+
+// UNIQUE REALM SETUP
+const mockRealmIdentifier = __filename;
+const { mockRealmModelsIndex, uniqueRealmBeforeAll, uniqueRealmAfterAll } = setupUniqueRealm(
+  mockRealmIdentifier
+);
+jest.mock( "realmModels/index", ( ) => mockRealmModelsIndex );
+jest.mock( "providers/contexts", ( ) => {
+  const originalModule = jest.requireActual( "providers/contexts" );
+  return {
+    __esModule: true,
+    ...originalModule,
+    RealmContext: {
+      ...originalModule.RealmContext,
+      useRealm: ( ) => global.mockRealms[mockRealmIdentifier],
+      useQuery: ( ) => []
+    }
+  };
+} );
+beforeAll( uniqueRealmBeforeAll );
+afterAll( uniqueRealmAfterAll );
+// /UNIQUE REALM SETUP
+
+beforeAll( async () => {
+  await initI18next();
+  jest.useFakeTimers( );
+} );
+
+const mockAsset = [{
+  uri: faker.image.url( )
+}];
+
+const mockMultipleAssets = [{
+  uri: faker.image.url( )
+}, {
+  uri: faker.image.url( )
+}];
+
+jest.mock( "react-native-image-picker", ( ) => ( {
+  launchImageLibrary: jest.fn( )
+} ) );
+
+const actor = userEvent.setup( );
+
+const navigateToPhotoImporter = async ( ) => {
+  expect( await screen.findByText( /Log in to contribute/ ) ).toBeVisible( );
+  const tabBar = await screen.findByTestId( "CustomTabBar" );
+  const addObsButton = await within( tabBar ).findByLabelText( "Add observations" );
+  await actor.press( addObsButton );
+  const photoImporter = await screen.findByLabelText( "Photo importer" );
+  await actor.press( photoImporter );
+};
+
+describe( "PhotoGallery navigation", ( ) => {
+  beforeEach( ( ) => {
+    useStore.setState( { isAdvancedUser: true } );
+  } );
+
+  it( "advances to Suggestions when one photo is selected", async ( ) => {
+    jest.spyOn( rnImagePicker, "launchImageLibrary" ).mockImplementation(
+      ( ) => ( {
+        assets: mockAsset
+      } )
+    );
+    renderApp( );
+    await navigateToPhotoImporter( );
+    const suggestionsText = await screen.findByText( /Add an ID Later/ );
+    await waitFor( ( ) => {
+      // user should land on Suggestions
+      expect( suggestionsText ).toBeTruthy( );
+    } );
+  } );
+
+  it( "advances to GroupPhotos when multiple photos are selected", async ( ) => {
+    jest.spyOn( rnImagePicker, "launchImageLibrary" ).mockImplementation(
+      ( ) => ( {
+        assets: mockMultipleAssets
+      } )
+    );
+    renderApp( );
+    await navigateToPhotoImporter( );
+    const groupPhotosText = await screen.findByText( /Group Photos/ );
+    await waitFor( ( ) => {
+      // user should land on GroupPhotos
+      expect( groupPhotosText ).toBeTruthy( );
+    } );
+  } );
+} );

tests/jest.setup.js

@@ -15,6 +15,7 @@ import mockRNDeviceInfo from "react-native-device-info/jest/react-native-device-
 import mockSafeAreaContext from "react-native-safe-area-context/jest/mock";
 import mockFaker from "tests/helpers/faker";
 import MockAudioRecorderPlayer from "tests/mocks/react-native-audio-recorder-player";
+import * as mockPhotoImporter from "tests/mocks/react-native-image-picker";
 import * as mockRNLocalize from "tests/mocks/react-native-localize.ts";
 import * as mockZustand from "tests/mocks/zustand.ts";
 
@@ -437,3 +438,5 @@ jest.mock( "zustand", ( ) => mockZustand );
 //     } );
 //   } );
 // } );
+
+jest.mock( "react-native-image-picker", ( ) => mockPhotoImporter );

tests/mocks/react-native-image-picker.js

@@ -0,0 +1,8 @@
+import { NativeModules } from "react-native";
+
+// Mock the ImagePickerManager native module to allow us to unit test the JavaScript code
+NativeModules.ImagePickerManager = {
+  showImagePicker: jest.fn(),
+  launchCamera: jest.fn(),
+  launchImageLibrary: jest.fn()
+};