test(care plan): add tests for care plans

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

@@ -0,0 +1,120 @@
+import '../../../__mocks__/matchMediaMock'
+import { Modal } from '@hospitalrun/components'
+import { mount } from 'enzyme'
+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'
+import thunk from 'redux-thunk'
+
+import { CarePlanIntent, CarePlanStatus } from '../../../model/CarePlan'
+import Patient from '../../../model/Patient'
+import AddCarePlanModal from '../../../patients/care-plans/AddCarePlanModal'
+import CarePlanForm from '../../../patients/care-plans/CarePlanForm'
+import * as patientSlice from '../../../patients/patient-slice'
+import { RootState } from '../../../store'
+
+const mockStore = createMockStore<RootState, any>([thunk])
+
+describe('Add Care Plan Modal', () => {
+  const patient = {
+    id: 'patientId',
+    diagnoses: [{ id: '123', name: 'some name', diagnosisDate: new Date().toISOString() }],
+    carePlans: [
+      {
+        id: '123',
+        title: 'some title',
+        description: 'some description',
+        diagnosisId: '123',
+        startDate: new Date().toISOString(),
+        endDate: new Date().toISOString(),
+        status: CarePlanStatus.Active,
+        intent: CarePlanIntent.Proposal,
+      },
+    ],
+  } as Patient
+
+  const carePlanError = {
+    title: 'some care plan error',
+  }
+
+  const onCloseSpy = jest.fn()
+  const setup = () => {
+    const store = mockStore({ patient: { patient, carePlanError } } as any)
+    const history = createMemoryHistory()
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <AddCarePlanModal show onCloseButtonClick={onCloseSpy} />
+        </Router>
+      </Provider>,
+    )
+
+    wrapper.update()
+    return { wrapper }
+  }
+
+  it('should render a modal', () => {
+    const { wrapper } = setup()
+
+    const modal = wrapper.find(Modal)
+
+    expect(modal).toHaveLength(1)
+
+    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')
+  })
+
+  it('should render the care plan form', () => {
+    const { wrapper } = setup()
+
+    const carePlanForm = wrapper.find(CarePlanForm)
+    expect(carePlanForm).toHaveLength(1)
+    expect(carePlanForm.prop('carePlanError')).toEqual(carePlanError)
+    expect(carePlanForm.prop('patient')).toEqual(patient)
+  })
+
+  it('should dispatch add care plan when the save button is clicked', async () => {
+    const { wrapper } = setup()
+    jest.spyOn(patientSlice, 'addCarePlan')
+
+    act(() => {
+      const carePlanForm = wrapper.find(CarePlanForm)
+      const onChange = carePlanForm.prop('onChange') as any
+      onChange(patient.carePlans[0])
+    })
+    wrapper.update()
+
+    await act(async () => {
+      const modal = wrapper.find(Modal)
+      const successButton = modal.prop('successButton')
+      const onClick = successButton?.onClick as any
+      await onClick()
+    })
+
+    expect(patientSlice.addCarePlan).toHaveBeenCalledTimes(1)
+    expect(patientSlice.addCarePlan).toHaveBeenCalledWith(patient.id, patient.carePlans[0])
+  })
+
+  it('should call the on close function when the cancel button is clicked', () => {
+    const { wrapper } = setup()
+
+    const modal = wrapper.find(Modal)
+
+    expect(modal).toHaveLength(1)
+
+    act(() => {
+      const cancelButton = modal.prop('closeButton')
+      const onClick = cancelButton?.onClick as any
+      onClick()
+    })
+
+    expect(onCloseSpy).toHaveBeenCalledTimes(1)
+  })
+})

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

@@ -1,4 +1,5 @@
 import '../../../__mocks__/matchMediaMock'
+import { Alert } from '@hospitalrun/components'
 import { addDays } from 'date-fns'
 import { mount } from 'enzyme'
 import React from 'react'
@@ -265,6 +266,7 @@ describe('Care Plan Form', () => {
 
   it('should render the form fields in an error state', () => {
     const expectedError = {
+      message: 'some error message',
       title: 'some title error',
       description: 'some description error',
       status: 'some status error',
@@ -277,6 +279,7 @@ describe('Care Plan Form', () => {
 
     const { wrapper } = setup(false, false, expectedError)
 
+    const alert = wrapper.find(Alert)
     const titleInput = wrapper.findWhere((w) => w.prop('name') === 'title')
     const descriptionInput = wrapper.findWhere((w) => w.prop('name') === 'description')
     const conditionSelector = wrapper.findWhere((w) => w.prop('name') === 'condition')
@@ -286,6 +289,9 @@ describe('Care Plan Form', () => {
     const endDatePicker = wrapper.findWhere((w) => w.prop('name') === 'endDate')
     const noteInput = wrapper.findWhere((w) => w.prop('name') === 'note')
 
+    expect(alert).toHaveLength(1)
+    expect(alert.prop('message')).toEqual(expectedError.message)
+
     expect(titleInput.prop('isInvalid')).toBeTruthy()
     expect(titleInput.prop('feedback')).toEqual(expectedError.title)
 

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

@@ -0,0 +1,101 @@
+import '../../../__mocks__/matchMediaMock'
+import { Button } from '@hospitalrun/components'
+import { mount } from 'enzyme'
+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'
+import thunk from 'redux-thunk'
+
+import Permissions from '../../../model/Permissions'
+import AddCarePlanModal from '../../../patients/care-plans/AddCarePlanModal'
+import CarePlanTab from '../../../patients/care-plans/CarePlanTab'
+import CarePlanTable from '../../../patients/care-plans/CarePlanTable'
+import ViewCarePlan from '../../../patients/care-plans/ViewCarePlan'
+import { RootState } from '../../../store'
+
+const mockStore = createMockStore<RootState, any>([thunk])
+
+describe('Care Plan Tab', () => {
+  const patient = {
+    id: 'patientId',
+  }
+
+  const setup = (route: string, permissions: Permissions[]) => {
+    const store = mockStore({ patient: { patient }, user: { permissions } } as any)
+    const history = createMemoryHistory()
+    history.push(route)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <CarePlanTab />
+        </Router>
+      </Provider>,
+    )
+
+    wrapper.update()
+    return { wrapper, history }
+  }
+
+  it('should render an add care plan button if user has correct permissions', () => {
+    const { wrapper } = setup('/patients/123/care-plans', [Permissions.AddCarePlan])
+
+    const addNewButton = wrapper.find(Button).at(0)
+    expect(addNewButton).toHaveLength(1)
+    expect(addNewButton.text().trim()).toEqual('patient.carePlan.new')
+  })
+
+  it('should open the add care plan modal on click', () => {
+    const { wrapper } = setup('/patients/123/care-plans', [Permissions.AddCarePlan])
+
+    act(() => {
+      const addNewButton = wrapper.find(Button).at(0)
+      const onClick = addNewButton.prop('onClick') as any
+      onClick()
+    })
+    wrapper.update()
+
+    const modal = wrapper.find(AddCarePlanModal)
+    expect(modal.prop('show')).toBeTruthy()
+  })
+
+  it('should close the modal when the close button is clicked', () => {
+    const { wrapper } = setup('/patients/123/care-plans', [Permissions.AddCarePlan])
+
+    act(() => {
+      const addNewButton = wrapper.find(Button).at(0)
+      const onClick = addNewButton.prop('onClick') as any
+      onClick()
+    })
+    wrapper.update()
+
+    act(() => {
+      const modal = wrapper.find(AddCarePlanModal)
+      const onClose = modal.prop('onCloseButtonClick') as any
+      onClose()
+    })
+    wrapper.update()
+
+    expect(wrapper.find(AddCarePlanModal).prop('show')).toBeFalsy()
+  })
+
+  it('should not render care plan button if user does not have permissions', () => {
+    const { wrapper } = setup('/patients/123/care-plans', [])
+
+    expect(wrapper.find(Button)).toHaveLength(0)
+  })
+
+  it('should render the care plans table when on /patient/:id/care-plans', () => {
+    const { wrapper } = setup('/patients/123/care-plans', [])
+
+    expect(wrapper.find(CarePlanTable)).toHaveLength(1)
+  })
+
+  it('should render the care plan view when on /patient/:id/care-plans/:carePlanId', () => {
+    const { wrapper } = setup('/patients/123/care-plans/456', [])
+
+    expect(wrapper.find(ViewCarePlan)).toHaveLength(1)
+  })
+})

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

@@ -0,0 +1,89 @@
+import '../../../__mocks__/matchMediaMock'
+import { Button } from '@hospitalrun/components'
+import { mount } from 'enzyme'
+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'
+import thunk from 'redux-thunk'
+
+import CarePlan, { CarePlanIntent, CarePlanStatus } from '../../../model/CarePlan'
+import Patient from '../../../model/Patient'
+import CarePlanTable from '../../../patients/care-plans/CarePlanTable'
+import { RootState } from '../../../store'
+
+const mockStore = createMockStore<RootState, any>([thunk])
+
+describe('Care Plan Table', () => {
+  const carePlan: CarePlan = {
+    id: 'id',
+    title: 'title',
+    description: 'description',
+    status: CarePlanStatus.Active,
+    intent: CarePlanIntent.Option,
+    startDate: new Date(2020, 6, 3).toISOString(),
+    endDate: new Date(2020, 6, 5).toISOString(),
+    diagnosisId: 'some id',
+    createdOn: new Date().toISOString(),
+    note: 'note',
+  }
+  const patient = {
+    id: 'patientId',
+    diagnoses: [{ id: '123', name: 'some name', diagnosisDate: new Date().toISOString() }],
+    carePlans: [carePlan],
+  } as Patient
+
+  const setup = () => {
+    const store = mockStore({ patient: { patient } } as any)
+    const history = createMemoryHistory()
+    history.push(`/patients/${patient.id}/care-plans/${patient.carePlans[0].id}`)
+    const wrapper = mount(
+      <Provider store={store}>
+        <Router history={history}>
+          <CarePlanTable />
+        </Router>
+      </Provider>,
+    )
+
+    return { wrapper, history }
+  }
+
+  it('should render a table', () => {
+    const { wrapper } = setup()
+
+    const table = wrapper.find('table')
+    const tableHeader = table.find('thead')
+    const headers = tableHeader.find('th')
+    const body = table.find('tbody')
+    const columns = body.find('tr').find('td')
+
+    expect(headers.at(0).text()).toEqual('patient.carePlan.title')
+    expect(headers.at(1).text()).toEqual('patient.carePlan.startDate')
+    expect(headers.at(2).text()).toEqual('patient.carePlan.endDate')
+    expect(headers.at(3).text()).toEqual('patient.carePlan.status')
+    expect(headers.at(4).text()).toEqual('actions.label')
+
+    expect(columns.at(0).text()).toEqual(carePlan.title)
+    expect(columns.at(1).text()).toEqual('2020-07-03')
+    expect(columns.at(2).text()).toEqual('2020-07-05')
+    expect(columns.at(3).text()).toEqual(carePlan.status)
+    expect(columns.at(4).find('button')).toHaveLength(1)
+  })
+
+  it('should navigate to the care plan view when the view details button is clicked', () => {
+    const { wrapper, history } = setup()
+
+    const table = wrapper.find('table')
+    const body = table.find('tbody')
+    const columns = body.find('tr').find('td')
+
+    act(() => {
+      const onClick = columns.at(4).find(Button).prop('onClick') as any
+      onClick()
+    })
+
+    expect(history.location.pathname).toEqual(`/patients/${patient.id}/care-plans/${carePlan.id}`)
+  })
+})