From 3d3074077ddfa0da5b64f265bb12ff00aa834378 Mon Sep 17 00:00:00 2001
From: Amanda Bullington <albullington@gmail.com>
Date: Wed, 29 Nov 2023 15:45:32 -0800
Subject: [PATCH] Restyle unknown text; closes #881

---
 src/components/ObsDetails/Header.js           |  9 +++-
 .../unit/components/ObsDetails/Header.test.js | 46 +++++++++++++++++++
 2 files changed, 53 insertions(+), 2 deletions(-)
 create mode 100644 tests/unit/components/ObsDetails/Header.test.js

diff --git a/src/components/ObsDetails/Header.js b/src/components/ObsDetails/Header.js
index 463825097..ab46220a6 100644
--- a/src/components/ObsDetails/Header.js
+++ b/src/components/ObsDetails/Header.js
@@ -1,10 +1,11 @@
 // @flow
 import { useNavigation } from "@react-navigation/native";
 import {
+  Body1,
   DateDisplay, DisplayTaxon, InlineUser, ObservationLocation
 } from "components/SharedComponents";
 import ObsStatus from "components/SharedComponents/ObservationsFlashList/ObsStatus";
-import { Text, View } from "components/styledComponents";
+import { View } from "components/styledComponents";
 import type { Node } from "react";
 import React from "react";
 import {
@@ -33,7 +34,11 @@ const Header = ( {
 
   const showTaxon = () => {
     if ( !taxon ) {
-      return <Text>{t( "Unknown-organism" )}</Text>;
+      return (
+        <View className="justify-center ml-1">
+          <Body1>{t( "Unknown" )}</Body1>
+        </View>
+      );
     }
     return (
       <DisplayTaxon
diff --git a/tests/unit/components/ObsDetails/Header.test.js b/tests/unit/components/ObsDetails/Header.test.js
new file mode 100644
index 000000000..ec65936e9
--- /dev/null
+++ b/tests/unit/components/ObsDetails/Header.test.js
@@ -0,0 +1,46 @@
+import { faker } from "@faker-js/faker";
+import { screen } from "@testing-library/react-native";
+import Header from "components/ObsDetails/Header";
+import initI18next from "i18n/initI18next";
+import React from "react";
+
+import factory from "../../../factory";
+import { renderComponent } from "../../../helpers/render";
+
+const mockTaxon = factory( "RemoteTaxon", {
+  name: faker.name.firstName( ),
+  rank: "genus",
+  preferred_common_name: faker.name.fullName( )
+} );
+
+describe( "Header", () => {
+  beforeAll( async ( ) => {
+    await initI18next( );
+  } );
+
+  it( "displays unknown text if no taxon", async ( ) => {
+    renderComponent(
+      <Header
+        observation={{
+          taxon: null
+        }}
+      />
+    );
+
+    const unknownText = screen.getByText( /Unknown/ );
+    expect( unknownText ).toBeVisible( );
+  } );
+
+  it( "displays taxon", async ( ) => {
+    renderComponent(
+      <Header
+        observation={{
+          taxon: mockTaxon
+        }}
+      />
+    );
+
+    const taxonName = screen.getByText( mockTaxon.name );
+    expect( taxonName ).toBeVisible( );
+  } );
+} );