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) }) })