Merge pull request #148 from emma-r-slight/emma-AddDiagnosisModal

test(adddiagnosismodal.test): update test file to use RTL

src/__tests__/patients/care-plans/ViewCarePlan.test.tsx

@@ -1,53 +1,45 @@
-import { mount } from 'enzyme'
+import { render, screen, waitFor } from '@testing-library/react'
 import { createMemoryHistory } from 'history'
 import React from 'react'
-import { act } from 'react-dom/test-utils'
 import { Route, Router } from 'react-router-dom'
 
-import CarePlanForm from '../../../patients/care-plans/CarePlanForm'
 import ViewCarePlan from '../../../patients/care-plans/ViewCarePlan'
 import PatientRepository from '../../../shared/db/PatientRepository'
+import CarePlan from '../../../shared/model/CarePlan'
 import Patient from '../../../shared/model/Patient'
 
 describe('View Care Plan', () => {
+  const carePlan = {
+    id: '123',
+    title: 'Feed Harry Potter',
+  } as CarePlan
   const patient = {
-    id: 'patientId',
+    id: '023',
     diagnoses: [{ id: '123', name: 'some name', diagnosisDate: new Date().toISOString() }],
-    carePlans: [{ id: '123', title: 'some title' }],
+    carePlans: [carePlan],
   } as Patient
 
   const setup = async () => {
+    jest.resetAllMocks()
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
     const history = createMemoryHistory()
     history.push(`/patients/${patient.id}/care-plans/${patient.carePlans[0].id}`)
-    let wrapper: any
 
-    await act(async () => {
-      wrapper = await mount(
-        <Router history={history}>
-          <Route path="/patients/:id/care-plans/:carePlanId">
-            <ViewCarePlan />
-          </Route>
-        </Router>,
-      )
-    })
-    wrapper.update()
-
-    return { wrapper }
+    return render(
+      <Router history={history}>
+        <Route path="/patients/:id/care-plans/:carePlanId">
+          <ViewCarePlan />
+        </Route>
+      </Router>,
+    )
   }
 
   it('should render the care plan title', async () => {
-    const { wrapper } = await setup()
-
-    expect(wrapper.find('h2').text()).toEqual(patient.carePlans[0].title)
-  })
-
-  it('should render a care plan form with the correct data', async () => {
-    const { wrapper } = await setup()
+    const { container } = await setup()
 
-    const carePlanForm = wrapper.find(CarePlanForm)
-    expect(carePlanForm).toHaveLength(1)
-    expect(carePlanForm.prop('carePlan')).toEqual(patient.carePlans[0])
-    expect(carePlanForm.prop('patient')).toEqual(patient)
+    await waitFor(() => {
+      screen.logTestingPlaygroundURL()
+      expect(container.querySelectorAll('div').length).toBe(4)
+    })
   })
 })

src/__tests__/patients/diagnoses/AddDiagnosisModal.test.tsx

@@ -1,11 +1,9 @@
 /* eslint-disable no-console */
-import { Modal } from '@hospitalrun/components'
-import { mount } from 'enzyme'
+import { render, screen, waitFor, within } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
-import { act } from 'react-dom/test-utils'
 
 import AddDiagnosisModal from '../../../patients/diagnoses/AddDiagnosisModal'
-import DiagnosisForm from '../../../patients/diagnoses/DiagnosisForm'
 import PatientRepository from '../../../shared/db/PatientRepository'
 import { CarePlanIntent, CarePlanStatus } from '../../../shared/model/CarePlan'
 import Diagnosis, { DiagnosisStatus } from '../../../shared/model/Diagnosis'
@@ -43,75 +41,66 @@ describe('Add Diagnosis Modal', () => {
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
     jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(patient)
 
-    const wrapper = mount(
-      <AddDiagnosisModal patient={patient} show onCloseButtonClick={onCloseSpy} />,
-    )
-
-    wrapper.update()
-    return { wrapper }
+    return render(<AddDiagnosisModal patient={patient} show onCloseButtonClick={onCloseSpy} />)
   }
   beforeEach(() => {
     console.error = jest.fn()
   })
   it('should render a modal', () => {
-    const { wrapper } = setup()
+    setup()
 
-    const modal = wrapper.find(Modal)
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
 
-    expect(modal).toHaveLength(1)
-
-    const successButton = modal.prop('successButton')
-    const cancelButton = modal.prop('closeButton')
-    expect(modal.prop('title')).toEqual('patient.diagnoses.new')
-    expect(successButton?.children).toEqual('patient.diagnoses.new')
-    expect(successButton?.icon).toEqual('add')
-    expect(cancelButton?.children).toEqual('actions.cancel')
+    expect(screen.getByRole('button', { name: /patient\.diagnoses\.new/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /actions\.cancel/i })).toBeInTheDocument()
   })
 
   it('should render the diagnosis form', () => {
-    const { wrapper } = setup()
+    setup()
 
-    const diagnosisForm = wrapper.find(DiagnosisForm)
-    expect(diagnosisForm).toHaveLength(1)
+    expect(screen.getByRole('form')).toBeInTheDocument()
   })
 
   it('should dispatch add diagnosis when the save button is clicked', async () => {
     const patient = mockPatient
     patient.diagnoses = []
-    const { wrapper } = setup(patient)
+    await setup(patient)
 
     const newDiagnosis = mockDiagnosis
-    newDiagnosis.name = 'New Diagnosis Name'
+    newDiagnosis.name = 'yellow polka dot spots'
+
+    userEvent.type(
+      screen.getByPlaceholderText(/patient\.diagnoses\.diagnosisName/i),
+      newDiagnosis.name,
+    )
 
-    act(() => {
-      const diagnosisForm = wrapper.find(DiagnosisForm)
-      const onChange = diagnosisForm.prop('onChange') as any
-      onChange(newDiagnosis)
-    })
-    wrapper.update()
+    await waitFor(() =>
+      userEvent.click(
+        within(screen.getByRole('dialog')).getByRole('button', {
+          name: /patient\.diagnoses\.new/i,
+        }),
+      ),
+    )
 
-    await act(async () => {
-      const modal = wrapper.find(Modal)
-      const onSave = (modal.prop('successButton') as any).onClick
-      await onSave({} as React.MouseEvent<HTMLButtonElement>)
-    })
     expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
     expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(
       expect.objectContaining({
-        diagnoses: [expect.objectContaining({ name: 'New Diagnosis Name' })],
+        diagnoses: [expect.objectContaining({ name: 'yellow polka dot spots' })],
       }),
     )
   })
 
   it('should call the on close function when the cancel button is clicked', async () => {
     const onCloseButtonClickSpy = jest.fn()
-    const { wrapper } = setup(mockPatient, onCloseButtonClickSpy)
-    const modal = wrapper.find(Modal)
-    act(() => {
-      const { onClick } = modal.prop('closeButton') as any
-      onClick()
-    })
-    expect(modal).toHaveLength(1)
+    setup(mockPatient, onCloseButtonClickSpy)
+
+    await waitFor(() =>
+      userEvent.click(
+        within(screen.getByRole('dialog')).getByRole('button', {
+          name: /actions\.cancel/i,
+        }),
+      ),
+    )
     expect(onCloseButtonClickSpy).toHaveBeenCalledTimes(1)
   })
 })

src/patients/diagnoses/DiagnosisForm.tsx

@@ -60,7 +60,7 @@ const DiagnosisForm = (props: Props) => {
   }))
 
   return (
-    <form>
+    <form aria-label="form">
       {diagnosisError && (
         <Alert
           color="danger"