diff --git a/src/HospitalRun.tsx b/src/HospitalRun.tsx
index 0cd8e7799a..3af081530d 100644
--- a/src/HospitalRun.tsx
+++ b/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'
diff --git a/src/__tests__/page-header/ButtonBarProvider.test.tsx b/src/__tests__/page-header/ButtonBarProvider.test.tsx
new file mode 100644
index 0000000000..f718bcf075
--- /dev/null
+++ b/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 = []
+ const wrapper = ({ children }: any) => {children}
+
+ const { result } = renderHook(
+ () => {
+ const update = useButtonToolbarSetter()
+ update(expectedButtons)
+ return useButtons()
+ },
+ { wrapper },
+ )
+
+ expect(result.current).toEqual(expectedButtons)
+ })
+})
diff --git a/src/__tests__/page-header/ButtonToolBar.test.tsx b/src/__tests__/page-header/ButtonToolBar.test.tsx
new file mode 100644
index 0000000000..6f32b51e84
--- /dev/null
+++ b/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[] = [, ]
+ jest.spyOn(ButtonBarProvider, 'useButtons')
+ mocked(ButtonBarProvider).useButtons.mockReturnValue(buttons)
+
+ const wrapper = mount()
+
+ expect(wrapper.childAt(0).getElement()).toEqual(buttons[0])
+ expect(wrapper.childAt(1).getElement()).toEqual(buttons[1])
+ })
+})
diff --git a/src/__tests__/patients/list/Patients.test.tsx b/src/__tests__/patients/list/Patients.test.tsx
index 2145ad3dac..98fcab49c0 100644
--- a/src/__tests__/patients/list/Patients.test.tsx
+++ b/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', () => {
diff --git a/src/__tests__/scheduling/appointments/Appointments.test.tsx b/src/__tests__/scheduling/appointments/Appointments.test.tsx
index a6e40005de..4c3b73282e 100644
--- a/src/__tests__/scheduling/appointments/Appointments.test.tsx
+++ b/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 () => {
diff --git a/src/page-header/button-bar-context.tsx b/src/page-header/ButtonBarProvider.tsx
similarity index 78%
rename from src/page-header/button-bar-context.tsx
rename to src/page-header/ButtonBarProvider.tsx
index dcb076f584..5cf8068342 100644
--- a/src/page-header/button-bar-context.tsx
+++ b/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
}
diff --git a/src/page-header/ButtonToolBar.tsx b/src/page-header/ButtonToolBar.tsx
index 701ade5e85..05d8be02f0 100644
--- a/src/page-header/ButtonToolBar.tsx
+++ b/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()
diff --git a/src/patients/list/Patients.tsx b/src/patients/list/Patients.tsx
index 2ee672b656..54ff755bb2 100644
--- a/src/patients/list/Patients.tsx
+++ b/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'
diff --git a/src/scheduling/appointments/Appointments.tsx b/src/scheduling/appointments/Appointments.tsx
index e45b105bd6..35cd8da272 100644
--- a/src/scheduling/appointments/Appointments.tsx
+++ b/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')}
,
])