Merge pull request #170 from emma-r-slight/emma-duplicatePatient

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

src/__tests__/patients/new/DuplicateNewPatientModal.test.tsx

@@ -1,6 +1,5 @@
-import { Modal } from '@hospitalrun/components'
-import { act } from '@testing-library/react'
-import { mount, ReactWrapper } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { Provider } from 'react-redux'
 import createMockStore from 'redux-mock-store'
@@ -11,7 +10,7 @@ import { RootState } from '../../../shared/store'
 
 const mockStore = createMockStore<RootState, any>([thunk])
 
-const setupOnClick = (onClose: any, onContinue: any, prop: string) => {
+const setup = (onClose: any, onContinue: any) => {
   const store = mockStore({
     patient: {
       patient: {
@@ -20,7 +19,7 @@ const setupOnClick = (onClose: any, onContinue: any, prop: string) => {
     },
   } as any)
 
-  const wrapper = mount(
+  return render(
     <Provider store={store}>
       <DuplicateNewPatientModal
         show
@@ -30,60 +29,57 @@ const setupOnClick = (onClose: any, onContinue: any, prop: string) => {
       />
     </Provider>,
   )
-  wrapper.update()
-
-  act(() => {
-    const modal = wrapper.find(Modal)
-    const { onClick } = modal.prop(prop) as any
-    onClick()
-  })
-
-  return { wrapper: wrapper as ReactWrapper }
 }
 
 describe('Duplicate New Patient Modal', () => {
   it('should render a modal with the correct labels', () => {
-    const store = mockStore({
-      patient: {
-        patient: {
-          id: '1234',
-        },
-      },
-    } as any)
-    const wrapper = mount(
-      <Provider store={store}>
-        <DuplicateNewPatientModal
-          show
-          toggle={jest.fn()}
-          onCloseButtonClick={jest.fn()}
-          onContinueButtonClick={jest.fn()}
-        />
-      </Provider>,
-    )
-    wrapper.update()
-    const modal = wrapper.find(Modal)
-    expect(modal).toHaveLength(1)
-    expect(modal.prop('title')).toEqual('patients.newPatient')
-    expect(modal.prop('closeButton')?.children).toEqual('actions.cancel')
-    expect(modal.prop('closeButton')?.color).toEqual('danger')
-    expect(modal.prop('successButton')?.children).toEqual('actions.save')
-    expect(modal.prop('successButton')?.color).toEqual('success')
+    const onClose = jest.fn
+    const onContinue = jest.fn
+    setup(onClose, onContinue)
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    expect(screen.getByRole('alert')).toBeInTheDocument()
+    expect(screen.getByRole('alert')).toHaveClass('alert-warning')
+
+    expect(screen.getByText(/patients\.warning/i)).toBeInTheDocument()
+
+    expect(
+      screen.getByRole('button', {
+        name: /actions\.cancel/i,
+      }),
+    ).toBeInTheDocument()
+
+    expect(
+      screen.getByRole('button', {
+        name: /actions\.save/i,
+      }),
+    ).toBeInTheDocument()
   })
 
   describe('cancel', () => {
     it('should call the onCloseButtonClick function when the close button is clicked', () => {
       const onCloseButtonClickSpy = jest.fn()
-      const closeButtonProp = 'closeButton'
-      setupOnClick(onCloseButtonClickSpy, jest.fn(), closeButtonProp)
+      setup(onCloseButtonClickSpy, jest.fn())
+
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /actions\.cancel/i,
+        }),
+      )
       expect(onCloseButtonClickSpy).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('on save', () => {
     it('should call the onContinueButtonClick function when the continue button is clicked', () => {
       const onContinueButtonClickSpy = jest.fn()
-      const continueButtonProp = 'successButton'
-      setupOnClick(jest.fn(), onContinueButtonClickSpy, continueButtonProp)
+      setup(jest.fn(), onContinueButtonClickSpy)
+
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /actions\.save/i,
+        }),
+      )
       expect(onContinueButtonClickSpy).toHaveBeenCalledTimes(1)
     })
   })

src/__tests__/patients/search/SearchPatients.test.tsx

@@ -35,6 +35,8 @@ describe('Search Patients', () => {
 
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: /patients\.nopatients/i })).toBeInTheDocument()
+    })
+    await waitFor(() => {
       expect(screen.getByRole('button', { name: /patients\.newpatient/i })).toBeInTheDocument()
     })
   })
@@ -55,18 +57,33 @@ describe('Search Patients', () => {
 
     await waitFor(() => {
       expect(screen.getByRole('heading', { name: /patients\.nopatients/i })).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
       expect(screen.getByRole('button', { name: /patients\.newpatient/i })).toBeInTheDocument()
     })
 
     const patientSearch = screen.getByPlaceholderText(/actions\.search/i)
     userEvent.type(patientSearch, expectedSearch)
-    expect(patientSearch).toHaveDisplayValue(expectedSearch)
+
+    await waitFor(() => {
+      expect(patientSearch).toHaveDisplayValue(expectedSearch)
+    })
 
     await waitFor(() => {
       expect(screen.getByRole('cell', { name: expectedPatient.code })).toBeInTheDocument()
+    })
+
+    await waitFor(() => {
       expect(screen.getByRole('cell', { name: expectedPatient.givenName })).toBeInTheDocument()
+    })
+    await waitFor(() => {
       expect(screen.getByRole('cell', { name: expectedPatient.familyName })).toBeInTheDocument()
+    })
+    await waitFor(() => {
       expect(screen.getByRole('cell', { name: expectedPatient.sex })).toBeInTheDocument()
+    })
+    await waitFor(() => {
       expect(
         screen.getByRole('cell', { name: format(dateOfBirth, 'MM/dd/yyyy') }),
       ).toBeInTheDocument()