Merge pull request #173 from codyarose/codyarose_MedicationsList

Convert MedicationsList.test.tsx to RTL

src/__tests__/patients/medications/MedicationsList.test.tsx

@@ -1,9 +1,7 @@
-import * as components from '@hospitalrun/components'
-import { Table } from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { render, screen } 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 { Provider } from 'react-redux'
 import { Router } from 'react-router-dom'
 import createMockStore from 'redux-mock-store'
@@ -48,82 +46,53 @@ const setup = async (patient = expectedPatient, medications = expectedMedication
   jest.spyOn(PatientRepository, 'getMedications').mockResolvedValue(medications)
   store = mockStore({ patient, medications: { medications } } as any)
 
-  let wrapper: any
-
-  await act(async () => {
-    wrapper = await mount(
-      <Router history={history}>
-        <Provider store={store}>
-          <MedicationsList patient={patient} />
-        </Provider>
-      </Router>,
-    )
-  })
-
-  wrapper.update()
-
-  return { wrapper: wrapper as ReactWrapper }
+  return render(
+    <Router history={history}>
+      <Provider store={store}>
+        <MedicationsList patient={patient} />
+      </Provider>
+    </Router>,
+  )
 }
 
 describe('MedicationsList', () => {
   describe('Table', () => {
     it('should render a list of medications', async () => {
-      const { wrapper } = await setup()
-
-      const table = wrapper.find(Table)
-
-      const columns = table.prop('columns')
-      const actions = table.prop('actions') as any
-
-      expect(table).toHaveLength(1)
-
-      expect(columns[0]).toEqual(
-        expect.objectContaining({ label: 'medications.medication.medication', key: 'medication' }),
-      )
-      expect(columns[1]).toEqual(
-        expect.objectContaining({ label: 'medications.medication.priority', key: 'priority' }),
-      )
-      expect(columns[2]).toEqual(
-        expect.objectContaining({ label: 'medications.medication.intent', key: 'intent' }),
-      )
-      expect(columns[3]).toEqual(
-        expect.objectContaining({
-          label: 'medications.medication.requestedOn',
-          key: 'requestedOn',
-        }),
-      )
-      expect(columns[4]).toEqual(
-        expect.objectContaining({
-          label: 'medications.medication.status',
-          key: 'status',
-        }),
-      )
-      expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
-      expect(table.prop('actionsHeaderText')).toEqual('actions.label')
-      expect(table.prop('data')).toEqual(expectedMedications)
+      setup()
+      expect(await screen.findByRole('table')).toBeInTheDocument()
+      expect(
+        screen.getByRole('columnheader', { name: /medications.medication.medication/i }),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole('columnheader', { name: /medications.medication.priority/i }),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole('columnheader', { name: /medications.medication.intent/i }),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole('columnheader', { name: /medications.medication.requestedOn/i }),
+      ).toBeInTheDocument()
+      expect(
+        screen.getByRole('columnheader', { name: /medications.medication.status/i }),
+      ).toBeInTheDocument()
+      expect(screen.getByRole('columnheader', { name: /actions.label/i })).toBeInTheDocument()
+      expect(screen.getAllByRole('button', { name: /actions.view/i })[0]).toBeInTheDocument()
     })
 
     it('should navigate to medication view on medication click', async () => {
-      const { wrapper } = await setup()
-      const tr = wrapper.find('tr').at(1)
-
-      act(() => {
-        const onClick = tr.find('button').at(0).prop('onClick') as any
-        onClick({ stopPropagation: jest.fn() })
-      })
-
+      setup()
+      expect(await screen.findByRole('table')).toBeInTheDocument()
+      userEvent.click(screen.getAllByRole('button', { name: /actions.view/i })[0])
       expect(history.location.pathname).toEqual('/medications/123456')
     })
   })
 
   describe('no patient medications', () => {
     it('should render a warning message if there are no medications', async () => {
-      const { wrapper } = await setup(expectedPatient, [])
-      const alert = wrapper.find(components.Alert)
-
-      expect(alert).toHaveLength(1)
-      expect(alert.prop('title')).toEqual('patient.medications.warning.noMedications')
-      expect(alert.prop('message')).toEqual('patient.medications.noMedicationsMessage')
+      setup(expectedPatient, [])
+      expect(await screen.findByRole('alert')).toBeInTheDocument()
+      expect(screen.getByText(/patient.medications.warning.noMedications/i)).toBeInTheDocument()
+      expect(screen.getByText(/patient.medications.noMedicationsMessage/i)).toBeInTheDocument()
     })
   })
 })