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({