feat(diagnoses): add diagnoses tab

src/__tests__/patients/view/ViewPatient.test.tsx

@@ -13,6 +13,7 @@ import { createMemoryHistory } from 'history'
 import RelatedPersonTab from 'patients/related-persons/RelatedPersonTab'
 import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
 import Allergies from 'patients/allergies/Allergies'
+import Diagnoses from 'patients/diagnoses/Diagnoses'
 import Patient from '../../../model/Patient'
 import PatientRepository from '../../../clients/db/PatientRepository'
 import * as titleUtil from '../../../page-header/useTitle'
@@ -126,11 +127,12 @@ describe('ViewPatient', () => {
     const tabs = tabsHeader.find(Tab)
     expect(tabsHeader).toHaveLength(1)
 
-    expect(tabs).toHaveLength(4)
+    expect(tabs).toHaveLength(5)
     expect(tabs.at(0).prop('label')).toEqual('patient.generalInformation')
     expect(tabs.at(1).prop('label')).toEqual('patient.relatedPersons.label')
     expect(tabs.at(2).prop('label')).toEqual('scheduling.appointments.label')
     expect(tabs.at(3).prop('label')).toEqual('patient.allergies.label')
+    expect(tabs.at(4).prop('label')).toEqual('patient.diagnoses.label')
   })
 
   it('should mark the general information tab as active and render the general information component when route is /patients/:id', async () => {
@@ -188,7 +190,7 @@ describe('ViewPatient', () => {
     expect(relatedPersonTab.prop('patient')).toEqual(patient)
   })
 
-  it('should mark the rallergies tab as active when it is clicked and render the allergies component when route is /patients/:id/allergies', async () => {
+  it('should mark the allergies tab as active when it is clicked and render the allergies component when route is /patients/:id/allergies', async () => {
     let wrapper: any
     await act(async () => {
       wrapper = await setup()
@@ -211,4 +213,28 @@ describe('ViewPatient', () => {
     expect(allergiesTab).toHaveLength(1)
     expect(allergiesTab.prop('patient')).toEqual(patient)
   })
+
+  it('should mark the diagnoses tab as active when it is clicked and render the diagnoses component when route is /patients/:id/diagnoses', async () => {
+    let wrapper: any
+    await act(async () => {
+      wrapper = await setup()
+    })
+
+    await act(async () => {
+      const tabsHeader = wrapper.find(TabsHeader)
+      const tabs = tabsHeader.find(Tab)
+      tabs.at(4).prop('onClick')()
+    })
+
+    wrapper.update()
+
+    const tabsHeader = wrapper.find(TabsHeader)
+    const tabs = tabsHeader.find(Tab)
+    const diagnosesTab = wrapper.find(Diagnoses)
+
+    expect(history.location.pathname).toEqual(`/patients/${patient.id}/diagnoses`)
+    expect(tabs.at(4).prop('active')).toBeTruthy()
+    expect(diagnosesTab).toHaveLength(1)
+    expect(diagnosesTab.prop('patient')).toEqual(patient)
+  })
 })

src/locales/en-US/translation.json

@@ -63,6 +63,9 @@
         "noAllergies": "No Allergies"
       },
       "addAllergyAbove": "Add an allergy using the button above."
+    },
+    "diagnoses": {
+      "label": "Diagnoses"
     }
   },
   "sex": {

src/patients/diagnoses/Diagnoses.tsx

@@ -0,0 +1,22 @@
+import React from 'react'
+import Patient from 'model/Patient'
+import useAddBreadcrumbs from 'breadcrumbs/useAddBreadcrumbs'
+
+interface Props {
+  patient: Patient
+}
+
+const Diagnoses = (props: Props) => {
+  const { patient } = props
+  const breadcrumbs = [
+    {
+      i18nKey: 'patient.diagnoses.label',
+      location: `/patients/${patient.id}/diagnoses`,
+    },
+  ]
+  useAddBreadcrumbs(breadcrumbs)
+
+  return <h1>Diagnoses</h1>
+}
+
+export default Diagnoses

src/patients/view/ViewPatient.tsx

@@ -6,6 +6,7 @@ import { useTranslation } from 'react-i18next'
 
 import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import Allergies from 'patients/allergies/Allergies'
+import Diagnoses from 'patients/diagnoses/Diagnoses'
 import useTitle from '../../page-header/useTitle'
 import { fetchPatient } from '../patient-slice'
 import { RootState } from '../../store'
@@ -101,6 +102,11 @@ const ViewPatient = () => {
           label={t('patient.allergies.label')}
           onClick={() => history.push(`/patients/${patient.id}/allergies`)}
         />
+        <Tab
+          active={location.pathname === `/patients/${patient.id}/diagnoses`}
+          label={t('patient.diagnoses.label')}
+          onClick={() => history.push(`/patients/${patient.id}/diagnoses`)}
+        />
       </TabsHeader>
       <Panel>
         <Route exact path="/patients/:id">
@@ -115,6 +121,9 @@ const ViewPatient = () => {
         <Route exact path="/patients/:id/allergies">
           <Allergies patient={patient} />
         </Route>
+        <Route exact path="/patients/:id/diagnoses">
+          <Diagnoses patient={patient} />
+        </Route>
       </Panel>
     </div>
   )