Merge pull request #181 from codyarose/codyarose_AddRelatedPersonModal

Convert AddRelatedPersonModal.test.tsx to RTL

src/__tests__/patients/related-persons/AddRelatedPersonModal.test.tsx

@@ -1,40 +1,37 @@
-import { Modal, Alert, Typeahead } from '@hospitalrun/components'
-import { act } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { act, 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'
 
 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 protected]',
-    address: 'address',
-    code: 'P00001',
-    dateOfBirth: new Date().toISOString(),
-  } as Patient
+  const patients = [
+    {
+      id: '123',
+      fullName: 'fullName',
+      code: 'code1',
+    },
+    {
+      id: '456',
+      fullName: 'fullName2',
+      code: 'code2',
+    },
+  ] as Patient[]
 
   const setup = () => {
-    jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
-    jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(patient)
+    jest.resetAllMocks()
+    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 mount(
+    return render(
       <AddRelatedPersonModal
         show
-        patientId={patient.id}
+        patientId={patients[0].id}
         onCloseButtonClick={jest.fn()}
         toggle={jest.fn()}
       />,
@@ -43,107 +40,93 @@ describe('Add Related Person Modal', () => {
 
   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)
+      setup()
 
-      expect(patientSearchTypeahead).toHaveLength(1)
-      expect(patientSearchTypeahead.prop('placeholder')).toEqual('patient.relatedPerson')
+      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',
-      )
+      setup()
 
-      expect(cancelButton).toHaveLength(1)
+      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',
         relationshipTypeError: 'patient.relatedPersons.error.relationshipTypeRequired',
       }
       expectOneConsoleError(expectedError)
 
-      await act(async () => {
-        const modal = wrapper.find(Modal)
-        const onSave = (modal.prop('successButton') as any).onClick
-        await onSave({} as React.MouseEvent<HTMLButtonElement>)
-      })
-      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()
 
-      act(() => {
-        const relationshipTypeTextInput = wrapper.findWhere((w: any) => w.prop('name') === 'type')
-        relationshipTypeTextInput.prop('onChange')({ target: { value: 'relationship' } })
-      })
-      wrapper.update()
+      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',
+      )
       await act(async () => {
-        const { onClick } = wrapper.find(Modal).prop('successButton') as any
-        await onClick({} as React.MouseEvent<HTMLButtonElement, MouseEvent>)
+        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',
             }),
           ],
         }),
       )
-    })
+    }, 20000)
   })
 })