Merge pull request #157 from codyarose/codyarose_DiagnosesList

Convert DiagnosesList.test.tsx to RTL

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

@@ -1,7 +1,5 @@
-import { Alert, List, ListItem } from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { render, screen, waitFor } from '@testing-library/react'
 import React from 'react'
-import { act } from 'react-dom/test-utils'
 
 import DiagnosesList from '../../../patients/diagnoses/DiagnosesList'
 import PatientRepository from '../../../shared/db/PatientRepository'
@@ -14,38 +12,31 @@ const expectedDiagnoses = [
 
 describe('Diagnoses list', () => {
   const setup = async (diagnoses: Diagnosis[]) => {
+    jest.resetAllMocks()
     const mockPatient = { id: '123', diagnoses } as Patient
     jest.spyOn(PatientRepository, 'find').mockResolvedValueOnce(mockPatient)
-    let wrapper: any
-    await act(async () => {
-      wrapper = await mount(<DiagnosesList patientId={mockPatient.id} />)
-    })
 
-    wrapper.update()
-    return { wrapper: wrapper as ReactWrapper }
+    return render(<DiagnosesList patientId={mockPatient.id} />)
   }
 
   it('should list the patients diagnoses', async () => {
     const diagnoses = expectedDiagnoses as Diagnosis[]
-    const { wrapper } = await setup(diagnoses)
-
-    const listItems = wrapper.find(ListItem)
-
-    expect(wrapper.exists(List)).toBeTruthy()
+    const { container } = await setup(diagnoses)
+    await waitFor(() => {
+      expect(container.querySelector('.list-group')).toBeInTheDocument()
+    })
+    const listItems = container.querySelectorAll('.list-group-item')
     expect(listItems).toHaveLength(expectedDiagnoses.length)
-    expect(listItems.at(0).text()).toEqual(expectedDiagnoses[0].name)
+    expect(listItems[0]).toHaveTextContent(expectedDiagnoses[0].name)
   })
 
   it('should render a warning message if the patient does not have any diagnoses', async () => {
-    const { wrapper } = await setup([])
-
-    const alert = wrapper.find(Alert)
-
-    expect(wrapper.exists(Alert)).toBeTruthy()
-    expect(wrapper.exists(List)).toBeFalsy()
-
-    expect(alert.prop('color')).toEqual('warning')
-    expect(alert.prop('title')).toEqual('patient.diagnoses.warning.noDiagnoses')
-    expect(alert.prop('message')).toEqual('patient.diagnoses.addDiagnosisAbove')
+    const { container } = await setup([])
+    const alert = await screen.findByRole('alert')
+    expect(alert).toBeInTheDocument()
+    expect(container.querySelector('.list-group')).not.toBeInTheDocument()
+    expect(alert).toHaveClass('alert-warning')
+    expect(screen.getByText(/patient.diagnoses.warning.noDiagnoses/i)).toBeInTheDocument()
+    expect(screen.getByText(/patient.diagnoses.addDiagnosisAbove/i)).toBeInTheDocument()
   })
 })