diff --git a/src/__tests__/patients/view/ViewPatient.test.tsx b/src/__tests__/patients/view/ViewPatient.test.tsx
index 88ce50b9a8..dbf7f31318 100644
--- a/src/__tests__/patients/view/ViewPatient.test.tsx
+++ b/src/__tests__/patients/view/ViewPatient.test.tsx
@@ -357,5 +357,5 @@ describe('ViewPatient', () => {
expect(history.location.pathname).toEqual(`/patients/${patient.id}/care-goals`)
expect(careGoalsTab.prop('active')).toBeTruthy()
expect(careGoalsTab).toHaveLength(1)
- })
+ }, 20000)
})
diff --git a/src/__tests__/patients/visits/AddVisitModal.test.tsx b/src/__tests__/patients/visits/AddVisitModal.test.tsx
index 3890cccdda..e685d5e37f 100644
--- a/src/__tests__/patients/visits/AddVisitModal.test.tsx
+++ b/src/__tests__/patients/visits/AddVisitModal.test.tsx
@@ -1,12 +1,10 @@
-import { Modal } from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { screen, render as rtlRender, fireEvent, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import { createMemoryHistory } from 'history'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Router } from 'react-router-dom'
import AddVisitModal from '../../../patients/visits/AddVisitModal'
-import VisitForm from '../../../patients/visits/VisitForm'
import PatientRepository from '../../../shared/db/PatientRepository'
import Patient from '../../../shared/model/Patient'
import { VisitStatus } from '../../../shared/model/Visit'
@@ -28,77 +26,72 @@ describe('Add Visit Modal', () => {
} as Patient
const onCloseSpy = jest.fn()
- const setup = () => {
+ const render = () => {
jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
jest.spyOn(PatientRepository, 'saveOrUpdate')
const history = createMemoryHistory()
- const wrapper = mount(
-
-
- ,
- )
-
- wrapper.update()
- return { wrapper: wrapper as ReactWrapper }
- }
+ // eslint-disable-next-line react/prop-types
+ const Wrapper: React.FC = ({ children }) => {children}
- it('should render a modal', () => {
- const { wrapper } = setup()
+ const results = rtlRender(
+ ,
+ {
+ wrapper: Wrapper,
+ },
+ )
- const modal = wrapper.find(Modal)
+ return results
+ }
- expect(modal).toHaveLength(1)
+ it('should render a modal and within a form', () => {
+ render()
- const successButton = modal.prop('successButton')
- const cancelButton = modal.prop('closeButton')
- expect(modal.prop('title')).toEqual('patient.visits.new')
- expect(successButton?.children).toEqual('patient.visits.new')
- expect(successButton?.icon).toEqual('add')
- expect(cancelButton?.children).toEqual('actions.cancel')
+ expect(screen.getByRole('dialog').querySelector('form')).toBeInTheDocument()
})
- it('should render the visit form', () => {
- const { wrapper } = setup()
-
- const addVisitModal = wrapper.find(AddVisitModal)
- expect(addVisitModal).toHaveLength(1)
+ it('should call the on close function when the cancel button is clicked', () => {
+ render()
+ userEvent.click(
+ screen.getByRole('button', {
+ name: /close/i,
+ }),
+ )
+ expect(onCloseSpy).toHaveBeenCalledTimes(1)
})
- it('should call the on close function when the cancel button is clicked', () => {
- const { wrapper } = setup()
+ it('should save the visit when the save button is clicked', async () => {
+ render()
+ const testPatient = patient.visits[0]
+ const modal = screen.getByRole('dialog')
- const modal = wrapper.find(Modal)
+ /* Date Pickers */
+ const modalDatePickerWrappers = modal.querySelectorAll('.react-datepicker__input-container')
+ const startDateInput = modalDatePickerWrappers[0].querySelector('input') as HTMLInputElement
+ const endDateInput = modalDatePickerWrappers[1].querySelector('input') as HTMLInputElement
- expect(modal).toHaveLength(1)
+ fireEvent.change(startDateInput, { target: { value: testPatient.startDateTime } })
+ fireEvent.change(endDateInput, { target: { value: testPatient.endDateTime } })
- act(() => {
- const cancelButton = modal.prop('closeButton')
- const onClick = cancelButton?.onClick as any
- onClick()
- })
+ /* Text */
+ const typeInput = screen.getByPlaceholderText(/patient.visits.type/i)
+ userEvent.type(typeInput, testPatient.type)
- expect(onCloseSpy).toHaveBeenCalledTimes(1)
- })
+ const statusInput = screen.getByRole('combobox')
+ userEvent.type(statusInput, `${testPatient.status}{arrowdown}{enter}`)
- it('should save the visit when the save button is clicked', async () => {
- const { wrapper } = setup()
+ const textareaReason = screen.getAllByRole('textbox')[3]
+ userEvent.type(textareaReason, testPatient.reason)
- act(() => {
- const visitForm = wrapper.find(VisitForm)
- const onChange = visitForm.prop('onChange') as any
- onChange(patient.visits[0])
- })
- wrapper.update()
+ const locationInput = screen.getByLabelText(/patient.visits.location/i)
+ userEvent.type(locationInput, testPatient.location)
- await act(async () => {
- const modal = wrapper.find(Modal)
- const successButton = modal.prop('successButton')
- const onClick = successButton?.onClick as any
- await onClick()
- })
+ const saveButton = screen.getByRole('button', { name: /patient.visits.new/i })
+ userEvent.click(saveButton)
- expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
+ await waitFor(() => {
+ expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
+ })
expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(patient)
})
})