From 7541d02cb9b89370cdf1181e8848ebd7976cfedd Mon Sep 17 00:00:00 2001 From: codyarose Date: Sun, 27 Dec 2020 21:44:15 -0600 Subject: [PATCH 1/2] Convert NewAllergyModal.test.tsx to RTL --- .../allergies/NewAllergyModal.test.tsx | 83 ++++++++----------- 1 file changed, 33 insertions(+), 50 deletions(-) diff --git a/src/__tests__/patients/allergies/NewAllergyModal.test.tsx b/src/__tests__/patients/allergies/NewAllergyModal.test.tsx index 4ba0e8acf2..bce68f8fbc 100644 --- a/src/__tests__/patients/allergies/NewAllergyModal.test.tsx +++ b/src/__tests__/patients/allergies/NewAllergyModal.test.tsx @@ -1,12 +1,11 @@ /* eslint-disable no-console */ -import { Modal, Alert } from '@hospitalrun/components' -import { mount } from 'enzyme' +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' import React from 'react' import { act } from 'react-dom/test-utils' import NewAllergyModal from '../../../patients/allergies/NewAllergyModal' -import TextInputWithLabelFormGroup from '../../../shared/components/input/TextInputWithLabelFormGroup' import PatientRepository from '../../../shared/db/PatientRepository' import Patient from '../../../shared/model/Patient' @@ -19,11 +18,10 @@ describe('New Allergy Modal', () => { const setup = (onCloseSpy = jest.fn()) => { jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(mockPatient) jest.spyOn(PatientRepository, 'find').mockResolvedValue(mockPatient) - const wrapper = mount( + + return render( , ) - - return { wrapper } } beforeEach(() => { @@ -31,16 +29,18 @@ describe('New Allergy Modal', () => { }) it('should render a modal with the correct labels', () => { - const { wrapper } = setup() - - const modal = wrapper.find(Modal) - expect(wrapper.exists(Modal)).toBeTruthy() - expect(modal.prop('title')).toEqual('patient.allergies.new') - expect(modal.prop('closeButton')?.children).toEqual('actions.cancel') - expect(modal.prop('closeButton')?.color).toEqual('danger') - expect(modal.prop('successButton')?.children).toEqual('patient.allergies.new') - expect(modal.prop('successButton')?.color).toEqual('success') - expect(modal.prop('successButton')?.icon).toEqual('add') + setup() + const modal = screen.getByRole('dialog') + const cancelButton = screen.getByRole('button', { name: /actions.cancel/i }) + const successButton = screen.getByRole('button', { name: /patient.allergies.new/i }) + + expect(modal).toBeInTheDocument() + expect(screen.getByText('patient.allergies.new', { selector: 'div' })).toBeInTheDocument() + expect(cancelButton).toBeInTheDocument() + expect(cancelButton).toHaveClass('btn-danger') + expect(successButton).toBeInTheDocument() + expect(successButton).toHaveClass('btn-success') + expect(successButton.children[0]).toHaveAttribute('data-icon', 'plus') }) it('should display errors when there is an error saving', async () => { @@ -48,34 +48,26 @@ describe('New Allergy Modal', () => { message: 'patient.allergies.error.unableToAdd', nameError: 'patient.allergies.error.nameRequired', } - const { wrapper } = setup() - - await act(async () => { - const modal = wrapper.find(Modal) - const onSave = (modal.prop('successButton') as any).onClick - await onSave({} as React.MouseEvent) - }) - wrapper.update() - - const alert = wrapper.find(Alert) - const nameField = wrapper.find(TextInputWithLabelFormGroup) - - expect(alert.prop('title')).toEqual('states.error') - expect(alert.prop('message')).toEqual(expectedError.message) - expect(nameField.prop('isInvalid')).toBeTruthy() - expect(nameField.prop('feedback')).toEqual(expectedError.nameError) + setup() + const successButton = screen.getByRole('button', { name: /patient.allergies.new/i }) + const nameField = screen.getByLabelText(/patient.allergies.allergyName/i) + + userEvent.click(successButton) + const alert = await screen.findByRole('alert') + + expect(alert).toBeInTheDocument() + expect(screen.getByText(/states.error/i)).toBeInTheDocument() + expect(screen.getByText(expectedError.message)).toBeInTheDocument() + expect(nameField).toHaveClass('is-invalid') + expect(nameField.nextSibling).toHaveTextContent(expectedError.nameError) }) describe('cancel', () => { it('should call the onCloseButtonClick function when the close button is clicked', () => { const onCloseButtonClickSpy = jest.fn() - const { wrapper } = setup(onCloseButtonClickSpy) - act(() => { - const modal = wrapper.find(Modal) - const { onClick } = modal.prop('closeButton') as any - onClick() - }) + setup(onCloseButtonClickSpy) + userEvent.click(screen.getByRole('button', { name: /actions.cancel/i })) expect(onCloseButtonClickSpy).toHaveBeenCalledTimes(1) }) }) @@ -83,20 +75,11 @@ describe('New Allergy Modal', () => { describe('save', () => { it('should save the allergy for the given patient', async () => { const expectedName = 'expected name' - const { wrapper } = setup() - - act(() => { - const input = wrapper.findWhere((c) => c.prop('name') === 'name') - const onChange = input.prop('onChange') - onChange({ target: { value: expectedName } }) - }) - - wrapper.update() + setup() + userEvent.type(screen.getByLabelText(/patient.allergies.allergyName/i), expectedName) await act(async () => { - const modal = wrapper.find(Modal) - const onSave = (modal.prop('successButton') as any).onClick - await onSave({} as React.MouseEvent) + userEvent.click(screen.getByRole('button', { name: /patient.allergies.new/i })) }) expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1) From 552b07816f0ca920c1fe394d578c3ca6b8064bf9 Mon Sep 17 00:00:00 2001 From: codyarose Date: Sun, 27 Dec 2020 22:45:49 -0600 Subject: [PATCH 2/2] Add missing resetAllMocks --- src/__tests__/patients/allergies/NewAllergyModal.test.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/__tests__/patients/allergies/NewAllergyModal.test.tsx b/src/__tests__/patients/allergies/NewAllergyModal.test.tsx index bce68f8fbc..f600154f4d 100644 --- a/src/__tests__/patients/allergies/NewAllergyModal.test.tsx +++ b/src/__tests__/patients/allergies/NewAllergyModal.test.tsx @@ -16,6 +16,7 @@ describe('New Allergy Modal', () => { } as Patient const setup = (onCloseSpy = jest.fn()) => { + jest.resetAllMocks() jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(mockPatient) jest.spyOn(PatientRepository, 'find').mockResolvedValue(mockPatient)