From ffa4d9ecdf27e557ab5d77181466f6f0d3368c6f Mon Sep 17 00:00:00 2001 From: codyarose Date: Thu, 31 Dec 2020 00:43:41 -0600 Subject: [PATCH 1/3] Convert AddRelatedPersonModal.test.tsx to RTL --- .../AddRelatedPersonModal.test.tsx | 126 +++++++----------- 1 file changed, 47 insertions(+), 79 deletions(-) diff --git a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx index 022083d40c..2682506ca7 100644 --- a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx +++ b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx @@ -1,10 +1,8 @@ -import { Modal, Alert, Typeahead } from '@hospitalrun/components' -import { act } from '@testing-library/react' -import { mount } from 'enzyme' +import { render, screen } from '@testing-library/react' +import userEvent from '@testing-library/user-event' import React from 'react' import AddRelatedPersonModal from '../../../patients/related-persons/AddRelatedPersonModal' -import TextInputWithLabelFormGroup from '../../../shared/components/input/TextInputWithLabelFormGroup' import PatientRepository from '../../../shared/db/PatientRepository' import Patient from '../../../shared/model/Patient' import { expectOneConsoleError } from '../../test-utils/console.utils' @@ -12,26 +10,22 @@ import { expectOneConsoleError } from '../../test-utils/console.utils' describe('Add Related Person Modal', () => { const patient = { id: '123', - prefix: 'prefix', - givenName: 'givenName', - familyName: 'familyName', - suffix: 'suffix', - sex: 'male', - type: 'charity', - occupation: 'occupation', - preferredLanguage: 'preferredLanguage', - phoneNumber: 'phoneNumber', - email: 'email@email.com', - address: 'address', - code: 'P00001', - dateOfBirth: new Date().toISOString(), + fullName: 'fullName', + code: 'code1', + } as Patient + const patient2 = { + id: '456', + fullName: 'patient2', + code: 'code2', } as Patient const setup = () => { - jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) + jest.resetAllMocks() + // jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) + jest.spyOn(PatientRepository, 'search').mockResolvedValue([patient, patient2]) jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(patient) - return mount( + return render( { describe('layout', () => { it('should render a modal', () => { - const wrapper = setup() - const modal = wrapper.find(Modal) - expect(modal).toHaveLength(1) - expect(modal.prop('show')).toBeTruthy() + setup() + expect(screen.getByRole('dialog')).toBeInTheDocument() }) it('should render a patient search typeahead', () => { - const wrapper = setup() - const patientSearchTypeahead = wrapper.find(Typeahead) - - expect(patientSearchTypeahead).toHaveLength(1) - expect(patientSearchTypeahead.prop('placeholder')).toEqual('patient.relatedPerson') + setup() + expect(screen.getByPlaceholderText(/^patient.relatedPerson$/i)).toBeInTheDocument() }) it('should render a relationship type text input', () => { - const wrapper = setup() - const relationshipTypeTextInput = wrapper.findWhere((w: any) => w.prop('name') === 'type') - - expect(relationshipTypeTextInput).toHaveLength(1) - expect(relationshipTypeTextInput.type()).toBe(TextInputWithLabelFormGroup) - expect(relationshipTypeTextInput.prop('name')).toEqual('type') - expect(relationshipTypeTextInput.prop('isEditable')).toBeTruthy() - expect(relationshipTypeTextInput.prop('label')).toEqual( - 'patient.relatedPersons.relationshipType', + setup() + const relationshipTypeInput = screen.getByLabelText( + /^patient.relatedPersons.relationshipType$/i, ) + expect(relationshipTypeInput).toBeInTheDocument() + expect(relationshipTypeInput).not.toBeDisabled() }) it('should render a cancel button', () => { - const wrapper = setup() - const cancelButton = wrapper.findWhere( - (w: { text: () => string }) => w.text() === 'actions.cancel', - ) - - expect(cancelButton).toHaveLength(1) + setup() + expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument() }) it('should render an add new related person button button', () => { - const wrapper = setup() - const modal = wrapper.find(Modal) as any - expect(modal.prop('successButton').children).toEqual('patient.relatedPersons.add') + setup() + expect( + screen.getByRole('button', { name: /patient.relatedPersons.add/i }), + ).toBeInTheDocument() }) it('should render the error when there is an error saving', async () => { - const wrapper = setup() + setup() const expectedErrorMessage = 'patient.relatedPersons.error.unableToAddRelatedPerson' const expectedError = { relatedPersonError: 'patient.relatedPersons.error.relatedPersonRequired', @@ -94,44 +76,30 @@ describe('Add Related Person Modal', () => { } expectOneConsoleError(expectedError) - 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 typeahead = wrapper.find(Typeahead) - const relationshipTypeInput = wrapper.find(TextInputWithLabelFormGroup) - - expect(alert.prop('message')).toEqual(expectedErrorMessage) - expect(alert.prop('title')).toEqual('states.error') - expect(typeahead.prop('isInvalid')).toBeTruthy() - expect(relationshipTypeInput.prop('isInvalid')).toBeTruthy() - expect(relationshipTypeInput.prop('feedback')).toEqual(expectedError.relationshipTypeError) + userEvent.click(screen.getByRole('button', { name: /patient.relatedPersons.add/i })) + expect(await screen.findByRole('alert')).toBeInTheDocument() + expect(screen.getByText(expectedErrorMessage)).toBeInTheDocument() + expect(screen.getByText(/states.error/i)).toBeInTheDocument() + expect(screen.getByPlaceholderText(/^patient.relatedPerson$/i)).toHaveClass('is-invalid') + expect(screen.getByLabelText(/^patient.relatedPersons.relationshipType$/i)).toHaveClass( + 'is-invalid', + ) + expect(screen.getByText(expectedError.relatedPersonError)).toBeInTheDocument() + expect(screen.getByText(expectedError.relationshipTypeError)).toBeInTheDocument() }) }) describe('save', () => { it('should call the save function with the correct data', async () => { - const wrapper = setup() - act(() => { - const patientTypeahead = wrapper.find(Typeahead) - patientTypeahead.prop('onChange')([{ id: '123' }]) - }) - wrapper.update() + setup() + userEvent.type(screen.getByPlaceholderText(/^patient.relatedPerson$/i), patient2.fullName) + userEvent.click(await screen.findByText(`${patient.fullName} (${patient.code})`)) - act(() => { - const relationshipTypeTextInput = wrapper.findWhere((w: any) => w.prop('name') === 'type') - relationshipTypeTextInput.prop('onChange')({ target: { value: 'relationship' } }) - }) - wrapper.update() - - await act(async () => { - const { onClick } = wrapper.find(Modal).prop('successButton') as any - await onClick({} as React.MouseEvent) - }) + userEvent.type( + screen.getByLabelText(/^patient.relatedPersons.relationshipType$/i), + 'relationship', + ) + userEvent.click(screen.getByRole('button', { name: /patient.relatedPersons.add/i })) expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1) expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith( From 2594cde5937a2c1ad3e5c1dc36b42f6c26589c91 Mon Sep 17 00:00:00 2001 From: codyarose Date: Thu, 31 Dec 2020 13:07:33 -0600 Subject: [PATCH 2/3] Update AddRelatedPersonModal to fix save test --- .../AddRelatedPersonModal.test.tsx | 57 ++++++++++++------- 1 file changed, 38 insertions(+), 19 deletions(-) diff --git a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx index 2682506ca7..4e95fe92d9 100644 --- a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx +++ b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react' +import { act, render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' @@ -8,27 +8,41 @@ import Patient from '../../../shared/model/Patient' import { expectOneConsoleError } from '../../test-utils/console.utils' describe('Add Related Person Modal', () => { - const patient = { - id: '123', - fullName: 'fullName', - code: 'code1', - } as Patient - const patient2 = { - id: '456', - fullName: 'patient2', - code: 'code2', - } as Patient + // const patient = { + // id: '123', + // fullName: 'fullName', + // code: 'code1', + // } as Patient + // const patient2 = { + // id: '456', + // fullName: 'patient2', + // code: 'code2', + // } as Patient + + const patients = [ + { + id: '123', + fullName: 'fullName', + code: 'code1', + }, + { + id: '456', + fullName: 'fullName2', + code: 'code2', + }, + ] as Patient[] const setup = () => { jest.resetAllMocks() - // jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient) - jest.spyOn(PatientRepository, 'search').mockResolvedValue([patient, patient2]) - jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(patient) + jest.spyOn(PatientRepository, 'find').mockResolvedValue(patients[0]) + jest.spyOn(PatientRepository, 'search').mockResolvedValue(patients) + jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(patients[1]) + jest.spyOn(PatientRepository, 'count').mockResolvedValue(2) return render( , @@ -92,21 +106,26 @@ describe('Add Related Person Modal', () => { describe('save', () => { it('should call the save function with the correct data', async () => { setup() - userEvent.type(screen.getByPlaceholderText(/^patient.relatedPerson$/i), patient2.fullName) - userEvent.click(await screen.findByText(`${patient.fullName} (${patient.code})`)) + userEvent.type( + screen.getByPlaceholderText(/^patient.relatedPerson$/i), + patients[1].fullName as string, + ) + userEvent.click(await screen.findByText(/fullName2/i)) userEvent.type( screen.getByLabelText(/^patient.relatedPersons.relationshipType$/i), 'relationship', ) - userEvent.click(screen.getByRole('button', { name: /patient.relatedPersons.add/i })) + await act(async () => { + userEvent.click(screen.getByRole('button', { name: /patient.relatedPersons.add/i })) + }) expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1) expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith( expect.objectContaining({ relatedPersons: [ expect.objectContaining({ - patientId: '123', + patientId: '456', type: 'relationship', }), ], From f028b1044274ac4d9ec094cf145d672ee56186e6 Mon Sep 17 00:00:00 2001 From: Braydon Hall <40751395+nobrayner@users.noreply.github.com> Date: Fri, 1 Jan 2021 06:43:16 +1100 Subject: [PATCH 3/3] fix(test): increase timeout --- .../AddRelatedPersonModal.test.tsx | 20 ++++++++----------- 1 file changed, 8 insertions(+), 12 deletions(-) diff --git a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx index 4e95fe92d9..f42047cdc2 100644 --- a/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx +++ b/src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx @@ -8,17 +8,6 @@ import Patient from '../../../shared/model/Patient' import { expectOneConsoleError } from '../../test-utils/console.utils' describe('Add Related Person Modal', () => { - // const patient = { - // id: '123', - // fullName: 'fullName', - // code: 'code1', - // } as Patient - // const patient2 = { - // id: '456', - // fullName: 'patient2', - // code: 'code2', - // } as Patient - const patients = [ { id: '123', @@ -52,16 +41,19 @@ describe('Add Related Person Modal', () => { describe('layout', () => { it('should render a modal', () => { setup() + expect(screen.getByRole('dialog')).toBeInTheDocument() }) it('should render a patient search typeahead', () => { setup() + expect(screen.getByPlaceholderText(/^patient.relatedPerson$/i)).toBeInTheDocument() }) it('should render a relationship type text input', () => { setup() + const relationshipTypeInput = screen.getByLabelText( /^patient.relatedPersons.relationshipType$/i, ) @@ -71,11 +63,13 @@ describe('Add Related Person Modal', () => { it('should render a cancel button', () => { setup() + expect(screen.getByRole('button', { name: /close/i })).toBeInTheDocument() }) it('should render an add new related person button button', () => { setup() + expect( screen.getByRole('button', { name: /patient.relatedPersons.add/i }), ).toBeInTheDocument() @@ -83,6 +77,7 @@ describe('Add Related Person Modal', () => { it('should render the error when there is an error saving', async () => { setup() + const expectedErrorMessage = 'patient.relatedPersons.error.unableToAddRelatedPerson' const expectedError = { relatedPersonError: 'patient.relatedPersons.error.relatedPersonRequired', @@ -106,6 +101,7 @@ describe('Add Related Person Modal', () => { describe('save', () => { it('should call the save function with the correct data', async () => { setup() + userEvent.type( screen.getByPlaceholderText(/^patient.relatedPerson$/i), patients[1].fullName as string, @@ -131,6 +127,6 @@ describe('Add Related Person Modal', () => { ], }), ) - }) + }, 20000) }) })