feat(breadcrumb): add a breadcrumb underneath the page header

src/HospitalRun.tsx

@@ -5,6 +5,7 @@ import { Toaster } from '@hospitalrun/components'
 import Appointments from 'scheduling/appointments/Appointments'
 import NewAppointment from 'scheduling/appointments/new/NewAppointment'
 import ViewAppointment from 'scheduling/appointments/view/ViewAppointment'
+import Breadcrumbs from 'breadcrumbs/Breadcrumbs'
 import { ButtonBarProvider } from 'page-header/ButtonBarProvider'
 import ButtonToolBar from 'page-header/ButtonToolBar'
 import Sidebar from './components/Sidebar'
@@ -34,6 +35,7 @@ const HospitalRun = () => {
                 <h1 className="h2">{title}</h1>
                 <ButtonToolBar />
               </div>
+              <Breadcrumbs />
               <div>
                 <Switch>
                   <Route exact path="/" component={Dashboard} />

src/__tests__/HospitalRun.test.tsx

@@ -7,10 +7,12 @@ import { mocked } from 'ts-jest/utils'
 import thunk from 'redux-thunk'
 import configureMockStore from 'redux-mock-store'
 import { Toaster } from '@hospitalrun/components'
+
 import { act } from 'react-dom/test-utils'
 import Dashboard from 'dashboard/Dashboard'
 import Appointments from 'scheduling/appointments/Appointments'
 import NewAppointment from 'scheduling/appointments/new/NewAppointment'
+import { addBreadcrumbs } from 'breadcrumbs/breadcrumbs-slice'
 import NewPatient from '../patients/new/NewPatient'
 import EditPatient from '../patients/edit/EditPatient'
 import ViewPatient from '../patients/view/ViewPatient'
@@ -25,20 +27,29 @@ describe('HospitalRun', () => {
   describe('routing', () => {
     describe('/patients/new', () => {
       it('should render the new patient screen when /patients/new is accessed', () => {
+        const store = mockStore({
+          title: 'test',
+          user: { permissions: [Permissions.WritePatients] },
+          breadcrumbs: { breadcrumbs: [] },
+        })
+
         const wrapper = mount(
-          <Provider
-            store={mockStore({
-              title: 'test',
-              user: { permissions: [Permissions.WritePatients] },
-            })}
-          >
+          <Provider store={store}>
             <MemoryRouter initialEntries={['/patients/new']}>
               <HospitalRun />
             </MemoryRouter>
           </Provider>,
         )
 
         expect(wrapper.find(NewPatient)).toHaveLength(1)
+
+        expect(store.getActions()).toContainEqual(
+          addBreadcrumbs([
+            { i18nKey: 'patients.label', location: '/patients' },
+            { i18nKey: 'patients.newPatient', location: '/patients/new' },
+            { i18nKey: 'dashboard.label', location: '/' },
+          ]),
+        )
       })
 
       it('should render the Dashboard if the user does not have write patient privileges', () => {
@@ -47,6 +58,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/new']}>
@@ -74,21 +86,31 @@ describe('HospitalRun', () => {
 
         mockedPatientRepository.find.mockResolvedValue(patient)
 
+        const store = mockStore({
+          title: 'test',
+          user: { permissions: [Permissions.WritePatients, Permissions.ReadPatients] },
+          patient: { patient },
+          breadcrumbs: { breadcrumbs: [] },
+        })
+
         const wrapper = mount(
-          <Provider
-            store={mockStore({
-              title: 'test',
-              user: { permissions: [Permissions.WritePatients, Permissions.ReadPatients] },
-              patient: { patient: {} as Patient },
-            })}
-          >
+          <Provider store={store}>
             <MemoryRouter initialEntries={['/patients/edit/123']}>
               <HospitalRun />
             </MemoryRouter>
           </Provider>,
         )
 
         expect(wrapper.find(EditPatient)).toHaveLength(1)
+
+        expect(store.getActions()).toContainEqual(
+          addBreadcrumbs([
+            { i18nKey: 'patients.label', location: '/patients' },
+            { text: 'test test test', location: `/patients/${patient.id}` },
+            { i18nKey: 'patients.editPatient', location: `/patients/${patient.id}/edit` },
+            { i18nKey: 'dashboard.label', location: '/' },
+          ]),
+        )
       })
 
       it('should render the Dashboard when the user does not have read patient privileges', () => {
@@ -97,6 +119,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.WritePatients] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/edit/123']}>
@@ -114,6 +137,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [Permissions.ReadPatients] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/edit/123']}>
@@ -141,21 +165,30 @@ describe('HospitalRun', () => {
 
         mockedPatientRepository.find.mockResolvedValue(patient)
 
+        const store = mockStore({
+          title: 'test',
+          user: { permissions: [Permissions.ReadPatients] },
+          patient: { patient },
+          breadcrumbs: { breadcrumbs: [] },
+        })
+
         const wrapper = mount(
-          <Provider
-            store={mockStore({
-              title: 'test',
-              user: { permissions: [Permissions.ReadPatients] },
-              patient,
-            })}
-          >
+          <Provider store={store}>
             <MemoryRouter initialEntries={['/patients/123']}>
               <HospitalRun />
             </MemoryRouter>
           </Provider>,
         )
 
         expect(wrapper.find(ViewPatient)).toHaveLength(1)
+
+        expect(store.getActions()).toContainEqual(
+          addBreadcrumbs([
+            { i18nKey: 'patients.label', location: '/patients' },
+            { text: 'test test test', location: `/patients/${patient.id}` },
+            { i18nKey: 'dashboard.label', location: '/' },
+          ]),
+        )
       })
 
       it('should render the Dashboard when the user does not have read patient privileges', () => {
@@ -164,6 +197,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/patients/123']}>
@@ -178,14 +212,15 @@ describe('HospitalRun', () => {
 
     describe('/appointments', () => {
       it('should render the appointments screen when /appointments is accessed', async () => {
+        const store = mockStore({
+          title: 'test',
+          user: { permissions: [Permissions.ReadAppointments] },
+          appointments: { appointments: [] },
+          breadcrumbs: { breadcrumbs: [] },
+        })
+
         const wrapper = mount(
-          <Provider
-            store={mockStore({
-              title: 'test',
-              user: { permissions: [Permissions.ReadAppointments] },
-              appointments: { appointments: [] },
-            })}
-          >
+          <Provider store={store}>
             <MemoryRouter initialEntries={['/appointments']}>
               <HospitalRun />
             </MemoryRouter>
@@ -197,6 +232,13 @@ describe('HospitalRun', () => {
         })
 
         expect(wrapper.find(Appointments)).toHaveLength(1)
+
+        expect(store.getActions()).toContainEqual(
+          addBreadcrumbs([
+            { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+            { i18nKey: 'dashboard.label', location: '/' },
+          ]),
+        )
       })
 
       it('should render the Dashboard when the user does not have read appointment privileges', () => {
@@ -205,7 +247,7 @@ describe('HospitalRun', () => {
             store={mockStore({
               title: 'test',
               user: { permissions: [] },
-              appointments: { appointments: [] },
+              breadcrumbs: { breadcrumbs: [] },
             })}
           >
             <MemoryRouter initialEntries={['/appointments']}>
@@ -221,20 +263,29 @@ describe('HospitalRun', () => {
 
   describe('/appointments/new', () => {
     it('should render the new appointment screen when /appointments/new is accessed', async () => {
+      const store = mockStore({
+        title: 'test',
+        user: { permissions: [Permissions.WriteAppointments] },
+        breadcrumbs: { breadcrumbs: [] },
+      })
+
       const wrapper = mount(
-        <Provider
-          store={mockStore({
-            title: 'test',
-            user: { permissions: [Permissions.WriteAppointments] },
-          })}
-        >
+        <Provider store={store}>
           <MemoryRouter initialEntries={['/appointments/new']}>
             <HospitalRun />
           </MemoryRouter>
         </Provider>,
       )
 
       expect(wrapper.find(NewAppointment)).toHaveLength(1)
+
+      expect(store.getActions()).toContainEqual(
+        addBreadcrumbs([
+          { i18nKey: 'scheduling.appointments.label', location: '/appointments' },
+          { i18nKey: 'scheduling.appointments.new', location: '/appointments/new' },
+          { i18nKey: 'dashboard.label', location: '/' },
+        ]),
+      )
     })
 
     it('should render the Dashboard when the user does not have read appointment privileges', () => {
@@ -243,6 +294,7 @@ describe('HospitalRun', () => {
           store={mockStore({
             title: 'test',
             user: { permissions: [] },
+            breadcrumbs: { breadcrumbs: [] },
           })}
         >
           <MemoryRouter initialEntries={['/appointments/new']}>
@@ -262,6 +314,7 @@ describe('HospitalRun', () => {
           store={mockStore({
             title: 'test',
             user: { permissions: [Permissions.WritePatients] },
+            breadcrumbs: { breadcrumbs: [] },
           })}
         >
           <MemoryRouter initialEntries={['/']}>

src/__tests__/breadcrumbs/Breadcrumbs.test.tsx

@@ -0,0 +1,58 @@
+import '../../__mocks__/matchMediaMock'
+import React from 'react'
+import { Provider } from 'react-redux'
+import { mount } from 'enzyme'
+import { createMemoryHistory } from 'history'
+import { Router } from 'react-router-dom'
+import configureMockStore from 'redux-mock-store'
+import {
+  Breadcrumb as HRBreadcrumb,
+  BreadcrumbItem as HRBreadcrumbItem,
+} from '@hospitalrun/components'
+
+import Breadcrumbs from 'breadcrumbs/Breadcrumbs'
+import Breadcrumb from 'model/Breadcrumb'
+
+const mockStore = configureMockStore()
+
+describe('Breadcrumbs', () => {
+  const setup = (breadcrumbs: Breadcrumb[]) => {
+    const history = createMemoryHistory()
+    const store = mockStore({
+      breadcrumbs: { breadcrumbs },
+    })
+
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <Breadcrumbs />
+        </Router>
+      </Provider>,
+    )
+
+    return wrapper
+  }
+
+  it('should not render the breadcrumb when there are no items in the store', () => {
+    const wrapper = setup([])
+
+    expect(wrapper.find(HRBreadcrumb)).toHaveLength(0)
+    expect(wrapper.find(HRBreadcrumbItem)).toHaveLength(0)
+  })
+
+  it('should render breadcrumbs items', () => {
+    const breadcrumbs = [
+      { i18nKey: 'patient.label', location: '/patient' },
+      { text: 'Bob', location: '/patient/1' },
+      { text: 'Edit Patient', location: '/patient/1/edit' },
+    ]
+    const wrapper = setup(breadcrumbs)
+
+    const items = wrapper.find(HRBreadcrumbItem)
+
+    expect(items).toHaveLength(3)
+    expect(items.at(0).text()).toEqual('patient.label')
+    expect(items.at(1).text()).toEqual('Bob')
+    expect(items.at(2).text()).toEqual('Edit Patient')
+  })
+})