Merge pull request #136 from emma-r-slight/emma-carePlanTable

test(careplantable.test.tsx): update tests to use RTL

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

@@ -1,8 +1,7 @@
-import { Alert, Table } from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import { createMemoryHistory } from 'history'
 import React from 'react'
-import { act } from 'react-dom/test-utils'
 import { Router } from 'react-router-dom'
 
 import CarePlanTable from '../../../patients/care-plans/CarePlanTable'
@@ -12,20 +11,20 @@ import Patient from '../../../shared/model/Patient'
 
 describe('Care Plan Table', () => {
   const carePlan: CarePlan = {
-    id: 'id',
-    title: 'title',
-    description: 'description',
+    id: '0001',
+    title: 'chicken pox',
+    description: 'super itchy spots',
     status: CarePlanStatus.Active,
     intent: CarePlanIntent.Option,
     startDate: new Date(2020, 6, 3).toISOString(),
     endDate: new Date(2020, 6, 5).toISOString(),
-    diagnosisId: 'some id',
+    diagnosisId: '0123',
     createdOn: new Date().toISOString(),
-    note: 'note',
+    note: 'Apply Camomile lotion to spots',
   }
   const patient = {
     id: 'patientId',
-    diagnoses: [{ id: '123', name: 'some name', diagnosisDate: new Date().toISOString() }],
+    diagnoses: [{ id: '0123', name: 'chicken pox', diagnosisDate: new Date().toISOString() }],
     carePlans: [carePlan],
   } as Patient
 
@@ -34,63 +33,63 @@ describe('Care Plan Table', () => {
     const history = createMemoryHistory()
     history.push(`/patients/${patient.id}/care-plans/${patient.carePlans[0].id}`)
 
-    let wrapper: any
-    await act(async () => {
-      wrapper = await mount(
+    return {
+      history,
+      ...render(
         <Router history={history}>
           <CarePlanTable patientId={expectedPatient.id} />
         </Router>,
-      )
-    })
-    wrapper.update()
-
-    return { wrapper: wrapper as ReactWrapper, history }
+      ),
+    }
   }
 
   it('should render a table', async () => {
-    const { wrapper } = await setup()
-
-    const table = wrapper.find(Table)
-    const columns = table.prop('columns')
-    const actions = table.prop('actions') as any
-    expect(columns[0]).toEqual(
-      expect.objectContaining({ label: 'patient.carePlan.title', key: 'title' }),
-    )
-    expect(columns[1]).toEqual(
-      expect.objectContaining({ label: 'patient.carePlan.startDate', key: 'startDate' }),
-    )
-    expect(columns[2]).toEqual(
-      expect.objectContaining({ label: 'patient.carePlan.endDate', key: 'endDate' }),
-    )
-    expect(columns[3]).toEqual(
-      expect.objectContaining({ label: 'patient.carePlan.status', key: 'status' }),
-    )
-
-    expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
-    expect(table.prop('actionsHeaderText')).toEqual('actions.label')
-    expect(table.prop('data')).toEqual(patient.carePlans)
+    const { container } = await setup()
+
+    await screen.findByRole('table')
+
+    const columns = container.querySelectorAll('th') as any
+
+    expect(columns[0]).toHaveTextContent(/patient\.carePlan\.title/i)
+
+    expect(columns[1]).toHaveTextContent(/patient\.carePlan\.startDate/i)
+
+    expect(columns[2]).toHaveTextContent(/patient\.carePlan\.endDate/i)
+
+    expect(columns[3]).toHaveTextContent(/patient\.carePlan\.status/i)
+
+    await waitFor(() => {
+      expect(
+        screen.getByRole('button', {
+          name: /actions\.view/i,
+        }),
+      ).toBeInTheDocument()
+    })
   })
 
   it('should navigate to the care plan view when the view details button is clicked', async () => {
-    const { wrapper, history } = await setup()
+    const { history } = await setup()
 
-    const tr = wrapper.find('tr').at(1)
+    await screen.findByRole('table')
 
-    act(() => {
-      const onClick = tr.find('button').prop('onClick') as any
-      onClick({ stopPropagation: jest.fn() })
+    const actionButton = await screen.findByRole('button', {
+      name: /actions\.view/i,
     })
 
+    userEvent.click(actionButton)
+
     expect(history.location.pathname).toEqual(`/patients/${patient.id}/care-plans/${carePlan.id}`)
   })
 
   it('should display a warning if there are no care plans', async () => {
-    const { wrapper } = await setup({ ...patient, carePlans: [] })
+    await setup({ ...patient, carePlans: [] })
 
-    expect(wrapper.exists(Alert)).toBeTruthy()
-    const alert = wrapper.find(Alert)
-    expect(alert.prop('color')).toEqual('warning')
-    expect(alert.prop('title')).toEqual('patient.carePlans.warning.noCarePlans')
-    expect(alert.prop('message')).toEqual('patient.carePlans.warning.addCarePlanAbove')
+    await waitFor(() => {
+      expect(screen.getByText(/patient\.carePlans\.warning\.noCarePlans/i)).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
+      expect(screen.getByText(/patient\.carePlans\.warning\.addCarePlanAbove/i)).toBeInTheDocument()
+    })
   })
 })