feat(toolbar): add tests for button toolbar

src/HospitalRun.tsx

@@ -5,7 +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 { ButtonBarProvider } from 'page-header/button-bar-context'
+import { ButtonBarProvider } from 'page-header/ButtonBarProvider'
 import ButtonToolBar from 'page-header/ButtonToolBar'
 import Sidebar from './components/Sidebar'
 import Permissions from './model/Permissions'

src/__tests__/page-header/ButtonBarProvider.test.tsx

@@ -0,0 +1,27 @@
+import '../../__mocks__/matchMediaMock'
+import React from 'react'
+import { renderHook } from '@testing-library/react-hooks'
+import {
+  ButtonBarProvider,
+  useButtons,
+  useButtonToolbarSetter,
+} from 'page-header/ButtonBarProvider'
+import { Button } from '@hospitalrun/components'
+
+describe('Button Bar Provider', () => {
+  it('should update and fetch data from the button bar provider', () => {
+    const expectedButtons = [<Button>test 1</Button>]
+    const wrapper = ({ children }: any) => <ButtonBarProvider>{children}</ButtonBarProvider>
+
+    const { result } = renderHook(
+      () => {
+        const update = useButtonToolbarSetter()
+        update(expectedButtons)
+        return useButtons()
+      },
+      { wrapper },
+    )
+
+    expect(result.current).toEqual(expectedButtons)
+  })
+})

src/__tests__/page-header/ButtonToolBar.test.tsx

@@ -0,0 +1,24 @@
+import '../../__mocks__/matchMediaMock'
+import React from 'react'
+import { Button } from '@hospitalrun/components'
+import { mocked } from 'ts-jest/utils'
+import { mount } from 'enzyme'
+import * as ButtonBarProvider from '../../page-header/ButtonBarProvider'
+import ButtonToolBar from '../../page-header/ButtonToolBar'
+
+describe('Button Tool Bar', () => {
+  beforeEach(() => {
+    jest.resetAllMocks()
+  })
+
+  it('should render the buttons in the provider', () => {
+    const buttons: React.ReactNode[] = [<Button>Test 1</Button>, <Button>Test</Button>]
+    jest.spyOn(ButtonBarProvider, 'useButtons')
+    mocked(ButtonBarProvider).useButtons.mockReturnValue(buttons)
+
+    const wrapper = mount(<ButtonToolBar />)
+
+    expect(wrapper.childAt(0).getElement()).toEqual(buttons[0])
+    expect(wrapper.childAt(1).getElement()).toEqual(buttons[1])
+  })
+})

src/__tests__/patients/list/Patients.test.tsx

@@ -8,6 +8,7 @@ import thunk from 'redux-thunk'
 import configureStore from 'redux-mock-store'
 import { mocked } from 'ts-jest/utils'
 import { act } from 'react-dom/test-utils'
+import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
 import Patients from '../../../patients/list/Patients'
 import PatientRepository from '../../../clients/db/PatientRepository'
 import * as patientSlice from '../../../patients/patients-slice'
@@ -42,6 +43,10 @@ describe('Patients', () => {
   })
 
   describe('layout', () => {
+    afterEach(() => {
+      jest.restoreAllMocks()
+    })
+
     it('should render a search input with button', () => {
       const wrapper = setup()
       const searchInput = wrapper.find(TextInput)
@@ -66,6 +71,17 @@ describe('Patients', () => {
         `${patients[0].fullName} (${patients[0].friendlyId})`,
       )
     })
+
+    it('should add a "New Patient" button to the button tool bar', () => {
+      jest.spyOn(ButtonBarProvider, 'useButtonToolbarSetter')
+      const setButtonToolBarSpy = jest.fn()
+      mocked(ButtonBarProvider).useButtonToolbarSetter.mockReturnValue(setButtonToolBarSpy)
+
+      setup()
+
+      const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
+      expect((actualButtons[0] as any).props.children).toEqual('patients.newPatient')
+    })
   })
 
   describe('search functionality', () => {

src/__tests__/scheduling/appointments/Appointments.test.tsx

@@ -11,6 +11,7 @@ import { act } from '@testing-library/react'
 import PatientRepository from 'clients/db/PatientRepository'
 import { mocked } from 'ts-jest/utils'
 import Patient from 'model/Patient'
+import * as ButtonBarProvider from 'page-header/ButtonBarProvider'
 import * as titleUtil from '../../../page-header/useTitle'
 
 describe('Appointments', () => {
@@ -51,6 +52,19 @@ describe('Appointments', () => {
     expect(titleUtil.default).toHaveBeenCalledWith('scheduling.appointments.label')
   })
 
+  it('should add a "New Appointment" button to the button tool bar', async () => {
+    jest.spyOn(ButtonBarProvider, 'useButtonToolbarSetter')
+    const setButtonToolBarSpy = jest.fn()
+    mocked(ButtonBarProvider).useButtonToolbarSetter.mockReturnValue(setButtonToolBarSpy)
+
+    await act(async () => {
+      await setup()
+    })
+
+    const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
+    expect((actualButtons[0] as any).props.children).toEqual('scheduling.appointments.new')
+  })
+
   it('should render a calendar with the proper events', async () => {
     let wrapper: any
     await act(async () => {

src/page-header/button-bar-context.tsx → src/page-header/ButtonBarProvider.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from 'react'
 
 type Props = {
-  children: React.ReactNode
+  children?: React.ReactNode
 }
 
 type ButtonUpdater = (buttons: React.ReactNode[]) => void
@@ -19,16 +19,19 @@ function ButtonBarProvider(props: Props) {
   )
 }
 function useButtons() {
+  console.log('use buttons')
   const context = React.useContext(ButtonBarStateContext)
+  console.log('bug')
+  console.log(context)
   if (context === undefined) {
-    throw new Error('useCountState must be used within a CountProvider')
+    throw new Error('useButtons must be used within a Button Bar Context')
   }
   return context
 }
 function useButtonToolbarSetter() {
   const context = React.useContext(ButtonBarUpdateContext)
   if (context === undefined) {
-    throw new Error('useCountDispatch must be used within a CountProvider')
+    throw new Error('useButtonToolBarSetter must be used within a Button Bar Context')
   }
   return context
 }

src/page-header/ButtonToolBar.tsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import { useButtons } from './button-bar-context'
+import { useButtons } from './ButtonBarProvider'
 
 const ButtonToolBar = () => {
   const buttons = useButtons()

src/patients/list/Patients.tsx

@@ -3,7 +3,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { useHistory } from 'react-router'
 import { useTranslation } from 'react-i18next'
 import { Spinner, TextInput, Button, List, ListItem, Container, Row } from '@hospitalrun/components'
-import { useButtonToolbarSetter } from 'page-header/button-bar-context'
+import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import { RootState } from '../../store'
 import { fetchPatients, searchPatients } from '../patients-slice'
 import useTitle from '../../page-header/useTitle'

src/scheduling/appointments/Appointments.tsx

@@ -6,7 +6,7 @@ import { useSelector, useDispatch } from 'react-redux'
 import { RootState } from 'store'
 import { useHistory } from 'react-router'
 import PatientRepository from 'clients/db/PatientRepository'
-import { useButtonToolbarSetter } from 'page-header/button-bar-context'
+import { useButtonToolbarSetter } from 'page-header/ButtonBarProvider'
 import { fetchAppointments } from './appointments-slice'
 
 interface Event {
@@ -32,7 +32,7 @@ const Appointments = () => {
       icon="appointment-add"
       onClick={() => history.push('/appointments/new')}
     >
-      New Appointment
+      {t('scheduling.appointments.new')}
     </Button>,
   ])