From d2866f29216ec77a43da0889144c5ed6a8b39bf6 Mon Sep 17 00:00:00 2001 From: Braydon Hall <40751395+nobrayner@users.noreply.github.com> Date: Fri, 1 Jan 2021 15:35:13 +1100 Subject: [PATCH] test(appointments): convert to rtl --- .../appointments/Appointments.test.tsx | 266 +++--------------- .../appointments/edit/EditAppointment.tsx | 4 +- 2 files changed, 47 insertions(+), 223 deletions(-) diff --git a/src/__tests__/scheduling/appointments/Appointments.test.tsx b/src/__tests__/scheduling/appointments/Appointments.test.tsx index 5f8c50c2a1..a0ad1af519 100644 --- a/src/__tests__/scheduling/appointments/Appointments.test.tsx +++ b/src/__tests__/scheduling/appointments/Appointments.test.tsx @@ -1,77 +1,50 @@ -import { mount, ReactWrapper } from 'enzyme' +import { render, screen } from '@testing-library/react' +import { createMemoryHistory } from 'history' import React from 'react' import { Provider } from 'react-redux' -import { MemoryRouter, Route } from 'react-router-dom' +import { Router } from 'react-router-dom' import createMockStore from 'redux-mock-store' import thunk from 'redux-thunk' -import Dashboard from '../../../dashboard/Dashboard' import HospitalRun from '../../../HospitalRun' import { addBreadcrumbs } from '../../../page-header/breadcrumbs/breadcrumbs-slice' import * as titleUtil from '../../../page-header/title/TitleContext' -import Appointments from '../../../scheduling/appointments/Appointments' -import EditAppointment from '../../../scheduling/appointments/edit/EditAppointment' -import NewAppointment from '../../../scheduling/appointments/new/NewAppointment' -import ViewAppointments from '../../../scheduling/appointments/ViewAppointments' -import AppointmentRepository from '../../../shared/db/AppointmentRepository' -import PatientRepository from '../../../shared/db/PatientRepository' -import Appointment from '../../../shared/model/Appointment' -import Patient from '../../../shared/model/Patient' import Permissions from '../../../shared/model/Permissions' import { RootState } from '../../../shared/store' const { TitleProvider } = titleUtil const mockStore = createMockStore([thunk]) -let route: any -describe('/appointments', () => { - // eslint-disable-next-line no-shadow - - const setup = (setupRoute: string, permissions: Permissions[], renderHr: boolean = false) => { - const appointment = { - id: '123', - patient: '456', - } as Appointment - - const patient = { - id: '456', - } as Patient - - jest.spyOn(titleUtil, 'useUpdateTitle').mockImplementation(() => jest.fn()) - jest.spyOn(AppointmentRepository, 'find').mockResolvedValue(appointment) - jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) - - const store = mockStore({ - title: 'test', - user: { user: { id: '123' }, permissions }, - appointment: { appointment, patient: { id: '456' } as Patient }, - appointments: [{ appointment, patient: { id: '456' } as Patient }], - breadcrumbs: { breadcrumbs: [] }, - components: { sidebarCollapsed: false }, - } as any) - jest.useFakeTimers() - const wrapper = mount( +const setup = (url: string, permissions: Permissions[]) => { + const history = createMemoryHistory({ initialEntries: [url] }) + const store = mockStore({ + user: { user: { id: '123' }, permissions }, + breadcrumbs: { breadcrumbs: [] }, + components: { sidebarCollapsed: false }, + } as any) + + return { + history, + store, + ...render( - - {renderHr ? : } - + + + + + , - ) - jest.advanceTimersByTime(100) - if (!renderHr) { - wrapper.find(Appointments).props().updateTitle = jest.fn() - } - wrapper.update() - - return { wrapper: wrapper as ReactWrapper, store } + ), } +} +describe('/appointments', () => { it('should render the appointments screen when /appointments is accessed', async () => { - route = '/appointments' - const permissions: Permissions[] = [Permissions.ReadAppointments] - const { wrapper, store } = await setup(route, permissions) + const { store } = setup('/appointments', [Permissions.ReadAppointments]) - expect(wrapper.find(ViewAppointments)).toHaveLength(1) + expect( + await screen.findByRole('heading', { name: /scheduling\.appointments\.label/i }), + ).toBeInTheDocument() expect(store.getActions()).toContainEqual( addBreadcrumbs([ @@ -82,62 +55,20 @@ describe('/appointments', () => { }) it('should render the Dashboard when the user does not have read appointment privileges', async () => { - route = '/appointments' - const permissions: Permissions[] = [] - const { wrapper } = await setup(route, permissions, true) + setup('/appointments', []) - wrapper.update() - expect(wrapper.find(Dashboard)).toHaveLength(1) + expect(await screen.findByRole('heading', { name: /dashboard\.label/i })).toBeInTheDocument() }) }) describe('/appointments/new', () => { - // eslint-disable-next-line no-shadow - const setup = (route: string, permissions: Permissions[], renderHr: boolean = false) => { - const appointment = { - id: '123', - patient: '456', - } as Appointment - - const patient = { - id: '456', - } as Patient - - jest.spyOn(titleUtil, 'useUpdateTitle').mockImplementation(() => jest.fn()) - jest.spyOn(AppointmentRepository, 'find').mockResolvedValue(appointment) - jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) - - const store = mockStore({ - title: 'test', - user: { user: { id: '123' }, permissions }, - appointment: { appointment, patient: { id: '456' } as Patient }, - appointments: [{ appointment, patient: { id: '456' } as Patient }], - breadcrumbs: { breadcrumbs: [] }, - components: { sidebarCollapsed: false }, - } as any) - - const wrapper = mount( - - - {renderHr ? : } - - , - ) - if (!renderHr) { - wrapper.find(NewAppointment).props().updateTitle = jest.fn() - } - wrapper.update() - - return { wrapper: wrapper as ReactWrapper, store } - } it('should render the new appointment screen when /appointments/new is accessed', async () => { - route = '/appointments/new' - const permissions: Permissions[] = [Permissions.WriteAppointments] - const { wrapper, store } = setup(route, permissions, false) + const { store } = setup('/appointments/new', [Permissions.WriteAppointments]) - wrapper.update() + expect( + await screen.findByRole('heading', { name: /scheduling\.appointments\.new/i }), + ).toBeInTheDocument() - expect(wrapper.find(NewAppointment)).toHaveLength(1) expect(store.getActions()).toContainEqual( addBreadcrumbs([ { i18nKey: 'scheduling.appointments.label', location: '/appointments' }, @@ -147,140 +78,31 @@ describe('/appointments/new', () => { ) }) - it('should render the Dashboard when the user does not have read appointment privileges', () => { - route = '/appointments/new' - const permissions: Permissions[] = [] - const { wrapper } = setup(route, permissions, true) + it('should render the Dashboard when the user does not have read appointment privileges', async () => { + setup('/appointments/new', []) - expect(wrapper.find(Dashboard)).toHaveLength(1) + expect(await screen.findByRole('heading', { name: /dashboard\.label/i })).toBeInTheDocument() }) }) describe('/appointments/edit/:id', () => { - // eslint-disable-next-line no-shadow - const setup = async (route: string, permissions: Permissions[], renderHr: boolean = false) => { - const appointment = { - id: '123', - patient: '456', - } as Appointment - - const patient = { - id: '456', - } as Patient - - jest.spyOn(titleUtil, 'useUpdateTitle').mockImplementation(() => jest.fn()) - jest.spyOn(AppointmentRepository, 'find').mockResolvedValue(appointment) - jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) - - const store = mockStore({ - title: 'test', - user: { user: { id: '123' }, permissions }, - appointment: { appointment, patient: { id: '456' } as Patient }, - appointments: [{ appointment, patient: { id: '456' } as Patient }], - breadcrumbs: { breadcrumbs: [] }, - components: { sidebarCollapsed: false }, - } as any) - - const wrapper = await mount( - - - - {renderHr ? : } - - - , - ) - if (!renderHr) { - wrapper.find(EditAppointment).props().updateTitle = jest.fn() - } - wrapper.update() - - return { wrapper: wrapper as ReactWrapper, store } - } - it('should render the edit appointment screen when /appointments/edit/:id is accessed', async () => { - route = '/appointments/edit/123' - const permissions: Permissions[] = [Permissions.WriteAppointments, Permissions.ReadAppointments] - const { wrapper } = await setup(route, permissions, false) + setup('/appointments/edit/123', [Permissions.WriteAppointments, Permissions.ReadAppointments]) - expect(wrapper.find(EditAppointment)).toHaveLength(1) - expect(AppointmentRepository.find).toHaveBeenCalledTimes(1) - expect(AppointmentRepository.find).toHaveBeenCalledWith('123') + expect( + await screen.findByRole('heading', { name: /scheduling\.appointments\.editAppointment/i }), + ).toBeInTheDocument() }) it('should render the Dashboard when the user does not have read appointment privileges', async () => { - route = '/appointments/edit/123' - const permissions: Permissions[] = [] - const appointment = { - id: '123', - patient: '456', - } as Appointment - - const patient = { - id: '456', - } as Patient - - jest.spyOn(titleUtil, 'useUpdateTitle').mockImplementation(() => jest.fn()) - jest.spyOn(AppointmentRepository, 'find').mockResolvedValue(appointment) - jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) - const store = mockStore({ - title: 'test', - user: { user: { id: '123' }, permissions }, - appointment: { appointment, patient: { id: '456' } as Patient }, - appointments: [{ appointment, patient: { id: '456' } as Patient }], - breadcrumbs: { breadcrumbs: [] }, - components: { sidebarCollapsed: false }, - } as any) - - const wrapper = await mount( - - - - - - - , - ) - await wrapper.update() + setup('/appointments/edit/123', [Permissions.WriteAppointments]) - expect(wrapper.find(Dashboard)).toHaveLength(1) + expect(await screen.findByRole('heading', { name: /dashboard\.label/i })).toBeInTheDocument() }) it('should render the Dashboard when the user does not have write appointment privileges', async () => { - route = '/appointments/edit/123' - const permissions: Permissions[] = [] - const appointment = { - id: '123', - patient: '456', - } as Appointment - - const patient = { - id: '456', - } as Patient - - jest.spyOn(titleUtil, 'useUpdateTitle').mockImplementation(() => jest.fn()) - jest.spyOn(AppointmentRepository, 'find').mockResolvedValue(appointment) - jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) - const store = mockStore({ - title: 'test', - user: { user: { id: '123' }, permissions }, - appointment: { appointment, patient: { id: '456' } as Patient }, - appointments: [{ appointment, patient: { id: '456' } as Patient }], - breadcrumbs: { breadcrumbs: [] }, - components: { sidebarCollapsed: false }, - } as any) - const wrapper = await mount( - - - - - - - , - ) - - await wrapper.update() + setup('/appointments/edit/123', [Permissions.ReadAppointments]) - expect(wrapper.find(Dashboard)).toHaveLength(1) + expect(await screen.findByRole('heading', { name: /dashboard\.label/i })).toBeInTheDocument() }) }) diff --git a/src/scheduling/appointments/edit/EditAppointment.tsx b/src/scheduling/appointments/edit/EditAppointment.tsx index 70d3bb7634..bdd67ecebb 100644 --- a/src/scheduling/appointments/edit/EditAppointment.tsx +++ b/src/scheduling/appointments/edit/EditAppointment.tsx @@ -18,7 +18,9 @@ const EditAppointment = () => { const { id } = useParams() const updateTitle = useUpdateTitle() - updateTitle(t('scheduling.appointments.editAppointment')) + useEffect(() => { + updateTitle(t('scheduling.appointments.editAppointment')) + }, [updateTitle, t]) const history = useHistory() const [newAppointment, setAppointment] = useState({} as Appointment)