Merge pull request #155 from emma-r-slight/emma-DiagnosesTest

test(diagnosis.test.tsx): update all tests to use RTL

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

@@ -1,10 +1,9 @@
 /* eslint-disable no-console */
 
-import * as components from '@hospitalrun/components'
-import { mount } 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'
@@ -20,7 +19,7 @@ import { RootState } from '../../../shared/store'
 const expectedPatient = {
   id: '123',
   diagnoses: [
-    { id: '123', name: 'diagnosis1', diagnosisDate: new Date().toISOString() } as Diagnosis,
+    { id: '123', name: 'Hayfever', diagnosisDate: new Date().toISOString() } as Diagnosis,
   ],
 } as Patient
 
@@ -33,48 +32,58 @@ let store: any
 const setup = (patient = expectedPatient, permissions = [Permissions.AddDiagnosis]) => {
   user = { permissions }
   store = mockStore({ patient, user } as any)
-  const wrapper = mount(
+  return render(
     <Router history={history}>
       <Provider store={store}>
         <Diagnoses patient={patient} />
       </Provider>
     </Router>,
   )
-
-  return wrapper
 }
+
 describe('Diagnoses', () => {
+  let errorMock: jest.SpyInstance
+
   describe('add diagnoses button', () => {
     beforeEach(() => {
       jest.resetAllMocks()
       jest.spyOn(PatientRepository, 'saveOrUpdate')
-      console.error = jest.fn()
+      errorMock = jest.spyOn(console, 'error').mockImplementation()
     })
+
+    afterEach(() => {
+      errorMock.mockRestore()
+    })
+
     it('should render a add diagnoses button', () => {
-      const wrapper = setup()
+      setup()
 
-      const addDiagnosisButton = wrapper.find(components.Button)
-      expect(addDiagnosisButton).toHaveLength(1)
-      expect(addDiagnosisButton.text().trim()).toEqual('patient.diagnoses.new')
+      expect(
+        screen.getByRole('button', {
+          name: /patient\.diagnoses\.new/i,
+        }),
+      ).toBeInTheDocument()
     })
 
     it('should not render a diagnoses button if the user does not have permissions', () => {
-      const wrapper = setup(expectedPatient, [])
-
-      const addDiagnosisButton = wrapper.find(components.Button)
-      expect(addDiagnosisButton).toHaveLength(0)
+      setup(expectedPatient, [])
+      expect(
+        screen.queryByRole('button', {
+          name: /patient\.diagnoses\.new/i,
+        }),
+      ).not.toBeInTheDocument()
     })
 
     it('should open the Add Diagnosis Modal', () => {
-      const wrapper = setup()
+      setup()
 
-      act(() => {
-        const onClick = wrapper.find(components.Button).prop('onClick') as any
-        onClick()
-      })
-      wrapper.update()
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /patient\.diagnoses\.new/i,
+        }),
+      )
 
-      expect(wrapper.find(components.Modal).prop('show')).toBeTruthy()
+      expect(screen.getByRole('dialog')).toBeInTheDocument()
     })
   })
 })