diff --git a/src/HospitalRun.tsx b/src/HospitalRun.tsx index b1e1b212c0..b79f6a3a01 100644 --- a/src/HospitalRun.tsx +++ b/src/HospitalRun.tsx @@ -3,6 +3,7 @@ import { Switch, Route } from 'react-router-dom' import { useSelector } from 'react-redux' import { Toaster } from '@hospitalrun/components' import Appointments from 'scheduling/appointments/Appointments' +import NewAppointment from 'scheduling/appointments/new/NewAppointment' import Sidebar from './components/Sidebar' import Permissions from './model/Permissions' import Dashboard from './dashboard/Dashboard' @@ -52,6 +53,12 @@ const HospitalRun = () => { path="/appointments" component={Appointments} /> + diff --git a/src/__tests__/HospitalRun.test.tsx b/src/__tests__/HospitalRun.test.tsx index 3ea261a3c3..cc011ad27c 100644 --- a/src/__tests__/HospitalRun.test.tsx +++ b/src/__tests__/HospitalRun.test.tsx @@ -9,6 +9,7 @@ import configureMockStore from 'redux-mock-store' import { Toaster } from '@hospitalrun/components' import Dashboard from 'dashboard/Dashboard' import Appointments from 'scheduling/appointments/Appointments' +import NewAppointment from 'scheduling/appointments/new/NewAppointment' import NewPatient from '../patients/new/NewPatient' import ViewPatient from '../patients/view/ViewPatient' import PatientRepository from '../clients/db/PatientRepository' @@ -143,6 +144,42 @@ describe('HospitalRun', () => { }) }) + describe('/appointments/new', () => { + it('should render the new appointment screen when /appointments/new is accessed', async () => { + const wrapper = mount( + + + + + , + ) + + expect(wrapper.find(NewAppointment)).toHaveLength(1) + }) + + it('should render the Dashboard when the user does not have read appointment privileges', () => { + const wrapper = mount( + + + + + , + ) + + expect(wrapper.find(Dashboard)).toHaveLength(1) + }) + }) + describe('layout', () => { it('should render a Toaster', () => { const wrapper = mount( diff --git a/src/__tests__/components/Navbar.test.tsx b/src/__tests__/components/Navbar.test.tsx index 425bf3814c..b56f3ca6a0 100644 --- a/src/__tests__/components/Navbar.test.tsx +++ b/src/__tests__/components/Navbar.test.tsx @@ -84,6 +84,9 @@ describe('Navbar', () => { expect(hospitalRunNavbar.prop('navLinks')[1].children[0].label).toEqual( 'scheduling.appointments.label', ) + expect(hospitalRunNavbar.prop('navLinks')[1].children[1].label).toEqual( + 'scheduling.appointments.new', + ) }) it('should navigate to to /appointments when the appointment list option is selected', () => { @@ -96,6 +99,17 @@ describe('Navbar', () => { expect(history.location.pathname).toEqual('/appointments') }) + + it('should navigate to /appointments/new when the new appointment list option is selected', () => { + const wrapper = setup() + const hospitalRunNavbar = wrapper.find(HospitalRunNavbar) + + act(() => { + ;(hospitalRunNavbar.prop('navLinks')[1].children[1] as any).onClick() + }) + + expect(history.location.pathname).toEqual('/appointments/new') + }) }) describe('search', () => { diff --git a/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx b/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx new file mode 100644 index 0000000000..b0d2cc6130 --- /dev/null +++ b/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx @@ -0,0 +1,23 @@ +import '../../../../__mocks__/matchMediaMock' +import React from 'react' +import NewAppointment from 'scheduling/appointments/new/NewAppointment' +import { MemoryRouter } from 'react-router' +import store from 'store' +import { Provider } from 'react-redux' +import { mount } from 'enzyme' +import * as titleUtil from '../../../../page-header/useTitle' + +describe('New Appointment', () => { + it('should use "New Appointment" as the header', () => { + jest.spyOn(titleUtil, 'default') + mount( + + + + + , + ) + + expect(titleUtil.default).toHaveBeenCalledWith('scheduling.appointments.new') + }) +}) diff --git a/src/components/Navbar.tsx b/src/components/Navbar.tsx index 27e5b0ee62..310b8e6a1d 100644 --- a/src/components/Navbar.tsx +++ b/src/components/Navbar.tsx @@ -58,6 +58,12 @@ const Navbar = () => { history.push('/appointments') }, }, + { + label: t('scheduling.appointments.new'), + onClick: () => { + history.push('/appointments/new') + }, + }, ], }, ]} diff --git a/src/locales/en-US/translation.json b/src/locales/en-US/translation.json index 6e5d5bdf38..9cb4a0b156 100644 --- a/src/locales/en-US/translation.json +++ b/src/locales/en-US/translation.json @@ -66,7 +66,8 @@ "scheduling": { "label": "Scheduling", "appointments": { - "label": "Appointments" + "label": "Appointments", + "new": "New Appointment" } } } diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx new file mode 100644 index 0000000000..74b0256168 --- /dev/null +++ b/src/scheduling/appointments/new/NewAppointment.tsx @@ -0,0 +1,12 @@ +import React from 'react' +import useTitle from 'page-header/useTitle' +import { useTranslation } from 'react-i18next' + +const NewAppointment = () => { + const { t } = useTranslation() + useTitle(t('scheduling.appointments.new')) + + return

{t('scheduling.appointments.new')}

+} + +export default NewAppointment diff --git a/src/user/user-slice.ts b/src/user/user-slice.ts index c0a338030d..dce26fc088 100644 --- a/src/user/user-slice.ts +++ b/src/user/user-slice.ts @@ -6,7 +6,12 @@ interface UserState { } const initialState: UserState = { - permissions: [Permissions.ReadPatients, Permissions.WritePatients, Permissions.ReadAppointments], + permissions: [ + Permissions.ReadPatients, + Permissions.WritePatients, + Permissions.ReadAppointments, + Permissions.WriteAppointments, + ], } const userSlice = createSlice({