Merge pull request #120 from emma-r-slight/emma.S-AddCareModal

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

src/__tests__/patients/care-plans/AddCarePlanModal.test.tsx

@@ -1,20 +1,24 @@
-import { Modal } from '@hospitalrun/components'
-import { mount } from 'enzyme'
+import { render, screen, waitFor, within } 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 selectEvent from 'react-select-event'
 
 import AddCarePlanModal from '../../../patients/care-plans/AddCarePlanModal'
-import CarePlanForm from '../../../patients/care-plans/CarePlanForm'
 import PatientRepository from '../../../shared/db/PatientRepository'
-import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../../shared/model/CarePlan'
+import CarePlan from '../../../shared/model/CarePlan'
 import Patient from '../../../shared/model/Patient'
 
 describe('Add Care Plan Modal', () => {
+  jest.setTimeout(15000)
+
   const patient = {
-    id: 'patientId',
-    diagnoses: [{ id: '123', name: 'some name', diagnosisDate: new Date().toISOString() }],
+    id: '0012',
+    diagnoses: [
+      { id: '123', name: 'too skinny', diagnosisDate: new Date().toISOString() },
+      { id: '456', name: 'headaches', diagnosisDate: new Date().toISOString() },
+    ],
     carePlans: [] as CarePlan[],
   } as Patient
 
@@ -23,94 +27,82 @@ describe('Add Care Plan Modal', () => {
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
     jest.spyOn(PatientRepository, 'saveOrUpdate')
     const history = createMemoryHistory()
-    const wrapper = mount(
-      <Router history={history}>
-        <AddCarePlanModal patient={patient} show onCloseButtonClick={onCloseSpy} />
-      </Router>,
-    )
+    // eslint-disable-next-line react/prop-types
+    const Wrapper: React.FC = ({ children }) => <Router history={history}>{children}</Router>
 
-    wrapper.update()
-    return { wrapper }
+    const result = render(
+      <AddCarePlanModal patient={patient} show onCloseButtonClick={onCloseSpy} />,
+      { wrapper: Wrapper },
+    )
+    return result
   }
 
   beforeEach(() => {
     jest.resetAllMocks()
   })
 
   it('should render a modal', () => {
-    const { wrapper } = setup()
-
-    const modal = wrapper.find(Modal)
-
-    expect(modal).toHaveLength(1)
+    setup()
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    const title = screen.getByText(/patient\.carePlan\.new/i, { selector: 'div' })
+    expect(title).toBeInTheDocument()
 
-    const successButton = modal.prop('successButton')
-    const cancelButton = modal.prop('closeButton')
-    expect(modal.prop('title')).toEqual('patient.carePlan.new')
-    expect(successButton?.children).toEqual('patient.carePlan.new')
-    expect(successButton?.icon).toEqual('add')
-    expect(cancelButton?.children).toEqual('actions.cancel')
+    expect(screen.getByRole('button', { name: /patient\.carePlan\.new/i })).toBeInTheDocument()
+    expect(screen.getByRole('button', { name: /actions.cancel/i })).toBeInTheDocument()
   })
 
   it('should render the care plan form', () => {
-    const { wrapper } = setup()
+    setup()
+    expect(screen.getByRole('form')).toBeInTheDocument()
+  })
+
+  it('should call the on close function when the cancel button is clicked', async () => {
+    setup()
+    userEvent.click(
+      screen.getByRole('button', {
+        name: /close/i,
+      }),
+    )
 
-    const carePlanForm = wrapper.find(CarePlanForm)
-    expect(carePlanForm).toHaveLength(1)
-    expect(carePlanForm.prop('patient')).toEqual(patient)
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
   })
 
   it('should save care plan when the save button is clicked and close', async () => {
-    const expectedCreatedDate = new Date()
-    Date.now = jest.fn().mockReturnValue(expectedCreatedDate)
     const expectedCarePlan = {
-      id: '123',
-      title: 'some title',
-      description: 'some description',
-      diagnosisId: '123',
-      startDate: new Date().toISOString(),
-      endDate: new Date().toISOString(),
-      status: CarePlanStatus.Active,
-      intent: CarePlanIntent.Proposal,
-      createdOn: expectedCreatedDate,
+      title: 'Feed Harry Potter',
+      description: 'Get Dobby to feed Harry Potter',
+      diagnosisId: '123', // condition
     }
 
-    const { wrapper } = setup()
-    await act(async () => {
-      const carePlanForm = wrapper.find(CarePlanForm)
-      const onChange = carePlanForm.prop('onChange') as any
-      await onChange(expectedCarePlan)
-    })
-    wrapper.update()
+    setup()
 
-    await act(async () => {
-      const modal = wrapper.find(Modal)
-      const successButton = modal.prop('successButton')
-      const onClick = successButton?.onClick as any
-      await onClick()
-    })
+    const condition = screen.getAllByRole('combobox')[0]
+    await selectEvent.select(condition, `too skinny`)
+    // const diagnosisId = screen.getAllByPlaceholderText('-- Choose --')[0] as HTMLInputElement
+    const title = screen.getByPlaceholderText(/patient\.careplan\.title/i)
+    const description = screen.getAllByRole('textbox')[1]
 
-    expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
-    expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith({
-      ...patient,
-      carePlans: [expectedCarePlan],
-    })
-    expect(onCloseSpy).toHaveBeenCalledTimes(1)
-  })
+    userEvent.type(await title, expectedCarePlan.title)
+    userEvent.type(await description, expectedCarePlan.description)
 
-  it('should call the on close function when the cancel button is clicked', () => {
-    const { wrapper } = setup()
+    // selectEvent.select(screen.getByText(/patient\.carePlan\.condition/i), 'too skinny')
 
-    const modal = wrapper.find(Modal)
-
-    expect(modal).toHaveLength(1)
+    await waitFor(() =>
+      userEvent.click(
+        within(screen.getByRole('dialog')).getByRole('button', {
+          name: /patient\.carePlan\.new/i,
+        }),
+      ),
+    )
 
-    act(() => {
-      const cancelButton = modal.prop('closeButton')
-      const onClick = cancelButton?.onClick as any
-      onClick()
+    await waitFor(() => {
+      expect(PatientRepository.saveOrUpdate).toHaveBeenCalled()
     })
 
-    expect(onCloseSpy).toHaveBeenCalledTimes(1)
+    expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(
+      expect.objectContaining({
+        carePlans: expect.arrayContaining([expect.objectContaining(expectedCarePlan)]),
+      }),
+    )
   })
 })

src/__tests__/patients/care-plans/CarePlanTab.test.tsx

@@ -66,7 +66,6 @@ describe('Care Plan Tab', () => {
     await waitFor(() => {
       expect(screen.getByRole('dialog')).toBeInTheDocument()
     })
-    screen.logTestingPlaygroundURL()
   })
 
   it('should close the modal when the close button is clicked', async () => {

src/__tests__/patients/care-plans/ViewCarePlans.test.tsx

@@ -1,42 +1,45 @@
-import { mount, ReactWrapper } from 'enzyme'
+import { render, waitFor } from '@testing-library/react'
 import { createMemoryHistory } from 'history'
 import React from 'react'
-import { act } from 'react-dom/test-utils'
 import { Route, Router } from 'react-router-dom'
 
-import CarePlanTable from '../../../patients/care-plans/CarePlanTable'
 import ViewCarePlans from '../../../patients/care-plans/ViewCarePlans'
 import PatientRepository from '../../../shared/db/PatientRepository'
-import CarePlan from '../../../shared/model/CarePlan'
+import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../../shared/model/CarePlan'
 import Patient from '../../../shared/model/Patient'
 
 describe('View Care Plans', () => {
-  const patient = { id: '123', carePlans: [] as CarePlan[] } as Patient
+  const carePlan = {
+    id: '123',
+    title: 'Feed Harry Potter',
+    description: 'Get Dobby to feed Harry Food',
+    diagnosisId: '123',
+    startDate: new Date().toISOString(),
+    endDate: new Date().toISOString(),
+    status: CarePlanStatus.Active,
+    intent: CarePlanIntent.Proposal,
+  } as CarePlan
+  const patient = { id: '123', carePlans: [carePlan] as CarePlan[] } as Patient
   const setup = async () => {
+    jest.resetAllMocks()
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(patient)
 
     const history = createMemoryHistory()
     history.push(`/patients/${patient.id}/careplans`)
-    let wrapper: any
 
-    await act(async () => {
-      wrapper = await mount(
-        <Router history={history}>
-          <Route path="/patients/:id/careplans">
-            <ViewCarePlans />
-          </Route>
-        </Router>,
-      )
-    })
-
-    return { wrapper: wrapper as ReactWrapper }
+    return render(
+      <Router history={history}>
+        <Route path="/patients/:id/careplans">
+          <ViewCarePlans />
+        </Route>
+      </Router>,
+    )
   }
 
   it('should render a care plans table with the patient id', async () => {
-    const { wrapper } = await setup()
-
-    expect(wrapper.exists(CarePlanTable)).toBeTruthy()
-    const carePlanTable = wrapper.find(CarePlanTable)
-    expect(carePlanTable.prop('patientId')).toEqual(patient.id)
+    const { container } = await setup()
+    await waitFor(() => {
+      expect(container.querySelector('table')).toBeInTheDocument()
+    })
   })
 })