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')} , ])