From 01baea0535eb07e9f18e170150519039923dec69 Mon Sep 17 00:00:00 2001 From: tigerabrodi Date: Sat, 19 Dec 2020 21:17:02 +0100 Subject: [PATCH 1/4] test(add-visit-modal): convert to testing library :P --- .../patients/visits/AddVisitModal.test.tsx | 101 +++++++----------- 1 file changed, 37 insertions(+), 64 deletions(-) diff --git a/src/__tests__/patients/visits/AddVisitModal.test.tsx b/src/__tests__/patients/visits/AddVisitModal.test.tsx index 3890cccdda..1f503d9485 100644 --- a/src/__tests__/patients/visits/AddVisitModal.test.tsx +++ b/src/__tests__/patients/visits/AddVisitModal.test.tsx @@ -1,16 +1,19 @@ -import { Modal } from '@hospitalrun/components' -import { mount, ReactWrapper } from 'enzyme' +import { screen, render as rtlRender } 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 React, { ReactNode } from 'react' 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' +type WrapperProps = { + // eslint-disable-next-line react/require-default-props + children?: ReactNode +} + describe('Add Visit Modal', () => { const patient = { id: 'patientId', @@ -28,77 +31,47 @@ 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 } - } - it('should render a modal', () => { - const { wrapper } = setup() + function Wrapper({ children }: WrapperProps) { + return {children} + } - const modal = wrapper.find(Modal) - - expect(modal).toHaveLength(1) + const results = rtlRender( + , + { + wrapper: Wrapper, + }, + ) - 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') - }) + return results + } - it('should render the visit form', () => { - const { wrapper } = setup() + it('should render a modal and within a form', () => { + render() - const addVisitModal = wrapper.find(AddVisitModal) - expect(addVisitModal).toHaveLength(1) + expect(screen.getByRole('dialog').querySelector('form')).toBeInTheDocument() }) it('should call the on close function when the cancel button is clicked', () => { - const { wrapper } = setup() - - const modal = wrapper.find(Modal) - - expect(modal).toHaveLength(1) - - act(() => { - const cancelButton = modal.prop('closeButton') - const onClick = cancelButton?.onClick as any - onClick() - }) - + render() + userEvent.click( + screen.getByRole('button', { + name: /close/i, + }), + ) expect(onCloseSpy).toHaveBeenCalledTimes(1) }) - it('should save the visit when the save button is clicked', async () => { - const { wrapper } = setup() - - act(() => { - const visitForm = wrapper.find(VisitForm) - const onChange = visitForm.prop('onChange') as any - onChange(patient.visits[0]) - }) - wrapper.update() - - await act(async () => { - const modal = wrapper.find(Modal) - const successButton = modal.prop('successButton') - const onClick = successButton?.onClick as any - await onClick() - }) - - expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1) - expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(patient) - }) + /* it('should save the visit when the save button is clicked', () => { + const { container } = render() + const firstPatient = patient.visits[0] + userEvent.type(container.querySelector('.react-datepicker-wrapper.form-control ', firstPatient.)) + screen.debug(undefined, Infinity) + // expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1) + // expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(patient) + }) */ }) From d9e3a0876e18eb543f54253e2a65d89559dcbec9 Mon Sep 17 00:00:00 2001 From: tigerabrodi Date: Sun, 20 Dec 2020 19:09:32 +0100 Subject: [PATCH 2/4] test(add-visit-modal): convert last test suite to rtl --- .../patients/visits/AddVisitModal.test.tsx | 37 +++++++++++++++---- 1 file changed, 29 insertions(+), 8 deletions(-) diff --git a/src/__tests__/patients/visits/AddVisitModal.test.tsx b/src/__tests__/patients/visits/AddVisitModal.test.tsx index 1f503d9485..1819146100 100644 --- a/src/__tests__/patients/visits/AddVisitModal.test.tsx +++ b/src/__tests__/patients/visits/AddVisitModal.test.tsx @@ -66,12 +66,33 @@ describe('Add Visit Modal', () => { expect(onCloseSpy).toHaveBeenCalledTimes(1) }) - /* it('should save the visit when the save button is clicked', () => { - const { container } = render() - const firstPatient = patient.visits[0] - userEvent.type(container.querySelector('.react-datepicker-wrapper.form-control ', firstPatient.)) - screen.debug(undefined, Infinity) - // expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1) - // expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(patient) - }) */ + it('should save the visit when the save button is clicked', () => { + render() + const testPatient = patient.visits[0] + const modal = screen.getByRole('dialog') + + /* 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 + + userEvent.type(startDateInput, testPatient.startDateTime) + userEvent.type(endDateInput, testPatient.endDateTime) + + /* Text */ + const typeInput = screen.getByPlaceholderText(/patient.visits.type/i) + userEvent.type(typeInput, testPatient.type) + + const statusInput = screen.getByRole('combobox') + userEvent.type(statusInput, testPatient.status) + + const textareaReason = screen.getAllByRole('textbox')[3] + userEvent.type(textareaReason, testPatient.reason) + + const locationInput = screen.getByLabelText(/patient.visits.location/i) + userEvent.type(locationInput, testPatient.location) + + // const saveButton = screen.getByRole('button', { name: /patient.visits.new/i }) + // userEvent.click(saveButton) + }) }) From e359412ef67a6f5869caf6102d98885aecf12792 Mon Sep 17 00:00:00 2001 From: Braydon Hall <40751395+nobrayner@users.noreply.github.com> Date: Tue, 22 Dec 2020 07:21:46 +1100 Subject: [PATCH 3/4] Fix act warnings and pass tests --- .../patients/visits/AddVisitModal.test.tsx | 31 +++++++++---------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/src/__tests__/patients/visits/AddVisitModal.test.tsx b/src/__tests__/patients/visits/AddVisitModal.test.tsx index 1819146100..e685d5e37f 100644 --- a/src/__tests__/patients/visits/AddVisitModal.test.tsx +++ b/src/__tests__/patients/visits/AddVisitModal.test.tsx @@ -1,7 +1,7 @@ -import { screen, render as rtlRender } from '@testing-library/react' +import { screen, render as rtlRender, fireEvent, waitFor } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' -import React, { ReactNode } from 'react' +import React from 'react' import { Router } from 'react-router-dom' import AddVisitModal from '../../../patients/visits/AddVisitModal' @@ -9,11 +9,6 @@ import PatientRepository from '../../../shared/db/PatientRepository' import Patient from '../../../shared/model/Patient' import { VisitStatus } from '../../../shared/model/Visit' -type WrapperProps = { - // eslint-disable-next-line react/require-default-props - children?: ReactNode -} - describe('Add Visit Modal', () => { const patient = { id: 'patientId', @@ -36,9 +31,8 @@ describe('Add Visit Modal', () => { jest.spyOn(PatientRepository, 'saveOrUpdate') const history = createMemoryHistory() - function Wrapper({ children }: WrapperProps) { - return {children} - } + // eslint-disable-next-line react/prop-types + const Wrapper: React.FC = ({ children }) => {children} const results = rtlRender( , @@ -66,7 +60,7 @@ describe('Add Visit Modal', () => { expect(onCloseSpy).toHaveBeenCalledTimes(1) }) - it('should save the visit when the save button is clicked', () => { + it('should save the visit when the save button is clicked', async () => { render() const testPatient = patient.visits[0] const modal = screen.getByRole('dialog') @@ -76,15 +70,15 @@ describe('Add Visit Modal', () => { const startDateInput = modalDatePickerWrappers[0].querySelector('input') as HTMLInputElement const endDateInput = modalDatePickerWrappers[1].querySelector('input') as HTMLInputElement - userEvent.type(startDateInput, testPatient.startDateTime) - userEvent.type(endDateInput, testPatient.endDateTime) + fireEvent.change(startDateInput, { target: { value: testPatient.startDateTime } }) + fireEvent.change(endDateInput, { target: { value: testPatient.endDateTime } }) /* Text */ const typeInput = screen.getByPlaceholderText(/patient.visits.type/i) userEvent.type(typeInput, testPatient.type) const statusInput = screen.getByRole('combobox') - userEvent.type(statusInput, testPatient.status) + userEvent.type(statusInput, `${testPatient.status}{arrowdown}{enter}`) const textareaReason = screen.getAllByRole('textbox')[3] userEvent.type(textareaReason, testPatient.reason) @@ -92,7 +86,12 @@ describe('Add Visit Modal', () => { const locationInput = screen.getByLabelText(/patient.visits.location/i) userEvent.type(locationInput, testPatient.location) - // const saveButton = screen.getByRole('button', { name: /patient.visits.new/i }) - // userEvent.click(saveButton) + const saveButton = screen.getByRole('button', { name: /patient.visits.new/i }) + userEvent.click(saveButton) + + await waitFor(() => { + expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1) + }) + expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(patient) }) }) From b9026e4d2005f330dfebc502d3eb6e63a282f19c Mon Sep 17 00:00:00 2001 From: Braydon Hall <40751395+nobrayner@users.noreply.github.com> Date: Wed, 23 Dec 2020 07:03:13 +1100 Subject: [PATCH 4/4] test(view-patient): increase test timeout to get test passing for now --- src/__tests__/patients/view/ViewPatient.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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) })