Merge branch 'master' of https://github.com/kcdraidgroup/hospitalrun-…

…frontend into juhanakristian-improve-visitform-tests

package.json

@@ -123,7 +123,7 @@
     "update": "npx npm-check -u",
     "prepublishOnly": "npm run build",
     "test": "npm run translation:check && react-scripts test  --testPathIgnorePatterns=src/__tests__/test-utils --env=jest-environment-jsdom-sixteen",
-    "test:ci": "cross-env CI=true react-scripts test  --testPathIgnorePatterns=src/__tests__/test-utils --passWithNoTests --env=jest-environment-jsdom-sixteen --maxWorkers=4",
+    "test:ci": "cross-env CI=true react-scripts test  --testPathIgnorePatterns=src/__tests__/test-utils --passWithNoTests --env=jest-environment-jsdom-sixteen --maxWorkers=2",
     "lint": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \"scripts/check-translations/**/*.{js,ts}\"",
     "lint:fix": "eslint \"src/**/*.{js,jsx,ts,tsx}\" \"scripts/check-translations/**/*.{js,ts}\" --fix",
     "lint-staged": "lint-staged",

src/__tests__/App.test.tsx

@@ -38,7 +38,7 @@ it('renders without crashing', async () => {
     () => {
       expect(screen.getByRole('heading', { name: /dashboard\.label/i })).toBeInTheDocument()
     },
-    { timeout: 3000 },
+    { timeout: 5000 },
   )
 
   // eslint-disable-next-line no-console

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()
   })
 })