forked from inaturalist/iNaturalistReactNative
-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Location display component (inaturalist#446)
Closes inaturalist#438
- Loading branch information
1 parent
4f732ba
commit 885f2e7
Showing
7 changed files
with
157 additions
and
38 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,39 @@ | ||
| // @flow | ||
|
|
||
| import { Body4 } from "components/SharedComponents"; | ||
| import { View } from "components/styledComponents"; | ||
| import * as React from "react"; | ||
| import { useTranslation } from "react-i18next"; | ||
| import IconMaterial from "react-native-vector-icons/MaterialIcons"; | ||
|
|
||
| type Props = { | ||
| observation: Object | ||
| }; | ||
|
|
||
| const ObservationLocation = ( { observation }: Props ): React.Node => { | ||
| const { t } = useTranslation(); | ||
|
|
||
| let locationName = observation?.place_guess; | ||
|
|
||
| if ( | ||
| !locationName | ||
| // Check for undefined or null, Not 0 | ||
| && observation?.latitude != null | ||
| && observation?.longitude != null | ||
| ) { | ||
| locationName = `${observation.latitude}, ${observation.longitude}`; | ||
| } else if ( !locationName ) { | ||
| locationName = t( "Missing Location" ); | ||
| } | ||
|
|
||
| return ( | ||
| <View className="flex flex-row items-center"> | ||
| <IconMaterial name="location-pin" size={15} /> | ||
| <Body4 className="text-darkGray ml-[5px]"> | ||
| {locationName || t( "Missing-Location" )} | ||
| </Body4> | ||
| </View> | ||
| ); | ||
| }; | ||
|
|
||
| export default ObservationLocation; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
65 changes: 65 additions & 0 deletions
65
tests/unit/components/SharedComponents/ObservationLocation.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { screen } from "@testing-library/react-native"; | ||
| import { ObservationLocation } from "components/SharedComponents"; | ||
| import React from "react"; | ||
|
|
||
| import factory from "../../../factory"; | ||
| import { renderComponent } from "../../../helpers/render"; | ||
|
|
||
| const mockLocationName = "San Francisco, CA"; | ||
|
|
||
| jest.mock( "sharedHooks/useLocationName", () => ( { | ||
| __esModule: true, | ||
| default: () => mockLocationName | ||
| } ) ); | ||
|
|
||
| describe( "ObservationLocation", () => { | ||
| it( "should be accessible", () => { | ||
| const mockObservation = factory( "RemoteObservation" ); | ||
| expect( | ||
| <ObservationLocation observation={mockObservation} /> | ||
| ).toBeAccessible(); | ||
| } ); | ||
|
|
||
| it( "should format location correctly from place_guess", () => { | ||
| const mockObservation = factory( "RemoteObservation", { | ||
| latitude: 30.18183, | ||
| longitude: -85.760449, | ||
| place_guess: "Panama City Beach, Florida" | ||
| } ); | ||
|
|
||
| renderComponent( | ||
| <ObservationLocation observation={mockObservation} /> | ||
| ); | ||
| expect( screen.getByText( mockObservation.place_guess ) ).toBeTruthy(); | ||
| } ); | ||
|
|
||
| it( "should format location correctly from latitude/longitude", () => { | ||
| const mockObservation = factory( "RemoteObservation", { | ||
| latitude: 30.18183, | ||
| longitude: -85.760449, | ||
| place_guess: null | ||
| } ); | ||
|
|
||
| renderComponent( | ||
| <ObservationLocation observation={mockObservation} /> | ||
| ); | ||
| expect( screen.getByText( | ||
| `${mockObservation.latitude}, ${mockObservation.longitude}` | ||
| ) ).toBeTruthy(); | ||
| } ); | ||
|
|
||
| it( "should show no location if unknown", () => { | ||
| const mockObservation = factory( "RemoteObservation", { | ||
| latitude: null, | ||
| longitude: null, | ||
| place_guess: null | ||
| } ); | ||
|
|
||
| renderComponent( | ||
| <ObservationLocation observation={mockObservation} /> | ||
| ); | ||
| expect( screen.getByText( | ||
| "Missing Location" | ||
| ) ).toBeTruthy(); | ||
| } ); | ||
| } ); |