Merge pull request #47 from kcdraidgroup/tigerabrodi-addvisitmodal-to…

…-rtl

test(add-visit-modal): convert to testing library :P

src/__tests__/patients/view/ViewPatient.test.tsx

@@ -357,5 +357,5 @@ describe('ViewPatient', () => {
     expect(history.location.pathname).toEqual(`/patients/${patient.id}/care-goals`)
     expect(careGoalsTab.prop('active')).toBeTruthy()
     expect(careGoalsTab).toHaveLength(1)
-  })
+  }, 20000)
 })

src/__tests__/patients/visits/AddVisitModal.test.tsx

@@ -1,12 +1,10 @@
-import { Modal } from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { screen, render as rtlRender, fireEvent, 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 AddVisitModal from '../../../patients/visits/AddVisitModal'
-import VisitForm from '../../../patients/visits/VisitForm'
 import PatientRepository from '../../../shared/db/PatientRepository'
 import Patient from '../../../shared/model/Patient'
 import { VisitStatus } from '../../../shared/model/Visit'
@@ -28,77 +26,72 @@ describe('Add Visit Modal', () => {
   } as Patient
 
   const onCloseSpy = jest.fn()
-  const setup = () => {
+  const render = () => {
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
     jest.spyOn(PatientRepository, 'saveOrUpdate')
     const history = createMemoryHistory()
-    const wrapper = mount(
-      <Router history={history}>
-        <AddVisitModal show onCloseButtonClick={onCloseSpy} patientId={patient.id} />
-      </Router>,
-    )
-
-    wrapper.update()
 
-    return { wrapper: wrapper as ReactWrapper }
-  }
+    // eslint-disable-next-line react/prop-types
+    const Wrapper: React.FC = ({ children }) => <Router history={history}>{children}</Router>
 
-  it('should render a modal', () => {
-    const { wrapper } = setup()
+    const results = rtlRender(
+      <AddVisitModal show onCloseButtonClick={onCloseSpy} patientId={patient.id} />,
+      {
+        wrapper: Wrapper,
+      },
+    )
 
-    const modal = wrapper.find(Modal)
+    return results
+  }
 
-    expect(modal).toHaveLength(1)
+  it('should render a modal and within a form', () => {
+    render()
 
-    const successButton = modal.prop('successButton')
-    const cancelButton = modal.prop('closeButton')
-    expect(modal.prop('title')).toEqual('patient.visits.new')
-    expect(successButton?.children).toEqual('patient.visits.new')
-    expect(successButton?.icon).toEqual('add')
-    expect(cancelButton?.children).toEqual('actions.cancel')
+    expect(screen.getByRole('dialog').querySelector('form')).toBeInTheDocument()
   })
 
-  it('should render the visit form', () => {
-    const { wrapper } = setup()
-
-    const addVisitModal = wrapper.find(AddVisitModal)
-    expect(addVisitModal).toHaveLength(1)
+  it('should call the on close function when the cancel button is clicked', () => {
+    render()
+    userEvent.click(
+      screen.getByRole('button', {
+        name: /close/i,
+      }),
+    )
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
   })
 
-  it('should call the on close function when the cancel button is clicked', () => {
-    const { wrapper } = setup()
+  it('should save the visit when the save button is clicked', async () => {
+    render()
+    const testPatient = patient.visits[0]
+    const modal = screen.getByRole('dialog')
 
-    const modal = wrapper.find(Modal)
+    /* Date Pickers */
+    const modalDatePickerWrappers = modal.querySelectorAll('.react-datepicker__input-container')
+    const startDateInput = modalDatePickerWrappers[0].querySelector('input') as HTMLInputElement
+    const endDateInput = modalDatePickerWrappers[1].querySelector('input') as HTMLInputElement
 
-    expect(modal).toHaveLength(1)
+    fireEvent.change(startDateInput, { target: { value: testPatient.startDateTime } })
+    fireEvent.change(endDateInput, { target: { value: testPatient.endDateTime } })
 
-    act(() => {
-      const cancelButton = modal.prop('closeButton')
-      const onClick = cancelButton?.onClick as any
-      onClick()
-    })
+    /* Text */
+    const typeInput = screen.getByPlaceholderText(/patient.visits.type/i)
+    userEvent.type(typeInput, testPatient.type)
 
-    expect(onCloseSpy).toHaveBeenCalledTimes(1)
-  })
+    const statusInput = screen.getByRole('combobox')
+    userEvent.type(statusInput, `${testPatient.status}{arrowdown}{enter}`)
 
-  it('should save the visit when the save button is clicked', async () => {
-    const { wrapper } = setup()
+    const textareaReason = screen.getAllByRole('textbox')[3]
+    userEvent.type(textareaReason, testPatient.reason)
 
-    act(() => {
-      const visitForm = wrapper.find(VisitForm)
-      const onChange = visitForm.prop('onChange') as any
-      onChange(patient.visits[0])
-    })
-    wrapper.update()
+    const locationInput = screen.getByLabelText(/patient.visits.location/i)
+    userEvent.type(locationInput, testPatient.location)
 
-    await act(async () => {
-      const modal = wrapper.find(Modal)
-      const successButton = modal.prop('successButton')
-      const onClick = successButton?.onClick as any
-      await onClick()
-    })
+    const saveButton = screen.getByRole('button', { name: /patient.visits.new/i })
+    userEvent.click(saveButton)
 
-    expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
+    await waitFor(() => {
+      expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
+    })
     expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(patient)
   })
 })