MOB-1340: universal search result info (i) button

src/components/Explore/ExploreV2/components/UniversalSearchResult.tsx

@@ -1,3 +1,4 @@
+import { useNavigation } from "@react-navigation/native";
 import { THUMBNAIL_CLASS } from "appConstants/classNames";
 import type { UniversalSearchResultItem }
   from "components/Explore/ExploreV2/hooks/useUniversalSearch";
@@ -7,6 +8,7 @@ import DisplayTaxonName from "components/SharedComponents/DisplayTaxonName";
 import IconicTaxonIcon from "components/SharedComponents/IconicTaxonIcon";
 import { Image, Pressable, View } from "components/styledComponents";
 import UserListItem from "components/UserList/UserListItem";
+import type { ExploreStackScreenProps } from "navigation/types";
 import React from "react";
 import useCurrentUser from "sharedHooks/useCurrentUser";
 import useTranslation from "sharedHooks/useTranslation";
@@ -34,6 +36,26 @@ const resultLabel = ( result: UniversalSearchResultItem ): string => {
 const UniversalSearchResult = ( { result, onPress }: Props ) => {
   const { t } = useTranslation( );
   const currentUser = useCurrentUser( );
+  const navigation = useNavigation<ExploreStackScreenProps<"ExploreResults">["navigation"]>( );
+
+  const navToDetail = ( ) => {
+    switch ( result.type ) {
+      case "user":
+        navigation.navigate( "UserProfile", { userId: result.user.id } );
+        break;
+      case "project":
+        navigation.navigate( "ProjectDetails", { id: result.project.id } );
+        break;
+      default:
+        navigation.navigate( "TaxonDetails", { id: result.taxon.id } );
+    }
+  };
+
+  const infoAccessibilityHint = ( ) => {
+    if ( result.type === "user" ) { return t( "Navigates-to-user-profile" ); }
+    if ( result.type === "project" ) { return t( "Navigates-to-project-details" ); }
+    return t( "Navigates-to-taxon-details" );
+  };
 
   const renderContent = ( ) => {
     switch ( result.type ) {
@@ -104,10 +126,10 @@ const UniversalSearchResult = ( { result, onPress }: Props ) => {
         {renderContent( )}
       </Pressable>
       <INatIconButton
+        accessibilityHint={infoAccessibilityHint( )}
         accessibilityLabel={t( "More-info" )}
         icon="info-circle-outline"
-        // TODO MOB-1339 follow-up: navigate to the taxon/user/project detail.
-        onPress={( ) => undefined}
+        onPress={navToDetail}
         size={22}
         testID={`UniversalSearchResult.info.${resultId( result )}`}
       />

tests/unit/components/Explore/ExploreV2/components/UniversalSearchResult.test.js

@@ -11,6 +11,18 @@ jest.mock( "sharedHooks/useCurrentUser", ( ) => ( {
   default: jest.fn( ),
 } ) );
 
+const mockedNavigate = jest.fn( );
+
+jest.mock( "@react-navigation/native", ( ) => {
+  const actualNav = jest.requireActual( "@react-navigation/native" );
+  return {
+    ...actualNav,
+    useNavigation: ( ) => ( {
+      navigate: mockedNavigate,
+    } ),
+  };
+} );
+
 const TAXON_WITH_PHOTO = {
   type: "taxon",
   taxon: {
@@ -57,6 +69,7 @@ beforeAll( async ( ) => {
 } );
 
 beforeEach( ( ) => {
+  mockedNavigate.mockClear( );
   useCurrentUser.default.mockReturnValue( {
     prefers_common_names: true,
     prefers_scientific_name_first: false,
@@ -112,4 +125,46 @@ describe( "UniversalSearchResult", ( ) => {
 
     expect( onPress ).toHaveBeenCalledTimes( 1 );
   } );
+
+  it( "navigates to TaxonDetails when the info button is pressed", ( ) => {
+    renderComponent(
+      <UniversalSearchResult result={TAXON_WITH_PHOTO} onPress={jest.fn( )} />,
+    );
+
+    fireEvent.press( screen.getByTestId( "UniversalSearchResult.info.12" ) );
+
+    expect( mockedNavigate ).toHaveBeenCalledWith( "TaxonDetails", { id: 12 } );
+  } );
+
+  it( "navigates to UserProfile when the info button is pressed", ( ) => {
+    renderComponent(
+      <UniversalSearchResult result={USER_RESULT} onPress={jest.fn( )} />,
+    );
+
+    fireEvent.press( screen.getByTestId( "UniversalSearchResult.info.7" ) );
+
+    expect( mockedNavigate ).toHaveBeenCalledWith( "UserProfile", { userId: 7 } );
+  } );
+
+  it( "navigates to ProjectDetails when the info button is pressed", ( ) => {
+    renderComponent(
+      <UniversalSearchResult result={PROJECT_RESULT} onPress={jest.fn( )} />,
+    );
+
+    fireEvent.press( screen.getByTestId( "UniversalSearchResult.info.9" ) );
+
+    expect( mockedNavigate ).toHaveBeenCalledWith( "ProjectDetails", { id: 9 } );
+  } );
+
+  it( "does not fire the row onPress when the info button is pressed", ( ) => {
+    const onPress = jest.fn( );
+    renderComponent(
+      <UniversalSearchResult result={USER_RESULT} onPress={onPress} />,
+    );
+
+    fireEvent.press( screen.getByTestId( "UniversalSearchResult.info.7" ) );
+
+    expect( onPress ).not.toHaveBeenCalled( );
+    expect( mockedNavigate ).toHaveBeenCalledWith( "UserProfile", { userId: 7 } );
+  } );
 } );