[WIP] feat(patient) secondary, tertiary addresses, phone numbers, and emails

package.json

@@ -15,6 +15,7 @@
     "i18next": "~19.4.0",
     "i18next-browser-languagedetector": "~4.2.0",
     "i18next-xhr-backend": "~3.2.2",
+    "immer": "^6.0.9",
     "lodash": "^4.17.15",
     "node-sass": "~4.14.0",
     "pouchdb": "~7.2.1",

src/__tests__/patients/GeneralInformation.test.tsx

@@ -6,39 +6,42 @@ import { startOfDay, subYears } from 'date-fns'
 import { mount, ReactWrapper } from 'enzyme'
 import { createMemoryHistory } from 'history'
 import React from 'react'
+import { Provider } from 'react-redux'
 import { Router } from 'react-router-dom'
+import createMockStore from 'redux-mock-store'
+import thunk from 'redux-thunk'
 
 import Patient from '../../model/Patient'
 import GeneralInformation from '../../patients/GeneralInformation'
+import { RootState } from '../../store'
+
+const mockStore = createMockStore<RootState, any>([thunk])
 
 describe('Error handling', () => {
   it('should display errors', () => {
     const error = {
       message: 'some message',
       givenName: 'given name message',
       dateOfBirth: 'date of birth message',
-      phoneNumber: 'phone number message',
-      email: 'email message',
     }
 
-    const wrapper = mount(<GeneralInformation patient={{} as Patient} isEditable error={error} />)
+    const store = mockStore({ patient: { patient: {} as Patient, createError: error } } as any)
+    const wrapper = mount(
+      <Provider store={store}>
+        <GeneralInformation patient={{} as Patient} isEditable error={error} />
+      </Provider>,
+    )
     wrapper.update()
 
     const errorMessage = wrapper.find(Alert)
     const givenNameInput = wrapper.findWhere((w: any) => w.prop('name') === 'givenName')
     const dateOfBirthInput = wrapper.findWhere((w: any) => w.prop('name') === 'dateOfBirth')
-    const emailInput = wrapper.findWhere((w: any) => w.prop('name') === 'email')
-    const phoneNumberInput = wrapper.findWhere((w: any) => w.prop('name') === 'phoneNumber')
+
     expect(errorMessage).toBeTruthy()
-    expect(errorMessage.prop('message')).toMatch(error.message)
     expect(givenNameInput.prop('isInvalid')).toBeTruthy()
     expect(givenNameInput.prop('feedback')).toEqual(error.givenName)
     expect(dateOfBirthInput.prop('isInvalid')).toBeTruthy()
     expect(dateOfBirthInput.prop('feedback')).toEqual(error.dateOfBirth)
-    expect(emailInput.prop('feedback')).toEqual(error.email)
-    expect(emailInput.prop('isInvalid')).toBeTruthy()
-    expect(phoneNumberInput.prop('feedback')).toEqual(error.phoneNumber)
-    expect(phoneNumberInput.prop('isInvalid')).toBeTruthy()
   })
 })
 
@@ -53,9 +56,6 @@ describe('General Information, without isEditable', () => {
     type: 'charity',
     occupation: 'occupation',
     preferredLanguage: 'preferredLanguage',
-    phoneNumber: 'phoneNumber',
-    email: '[email protected]',
-    address: 'address',
     code: 'P00001',
     dateOfBirth: startOfDay(subYears(new Date(), 30)).toISOString(),
     isApproximateDateOfBirth: false,
@@ -64,14 +64,24 @@ describe('General Information, without isEditable', () => {
   let wrapper: ReactWrapper
   let history = createMemoryHistory()
 
+  const error = {
+    message: 'some message',
+    givenName: 'given name message',
+    dateOfBirth: 'date of birth message',
+  }
+
+  const store = mockStore({ patient: { patient: {} as Patient, createError: error } } as any)
+
   beforeEach(() => {
     Date.now = jest.fn().mockReturnValue(new Date().valueOf())
     jest.restoreAllMocks()
     history = createMemoryHistory()
     wrapper = mount(
-      <Router history={history}>
-        <GeneralInformation patient={patient} />)
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <GeneralInformation patient={patient} />)
+        </Router>
+      </Provider>,
     )
   })
 
@@ -155,34 +165,15 @@ describe('General Information, without isEditable', () => {
     expect(preferredLanguageInput.prop('isEditable')).toBeFalsy()
   })
 
-  it('should render the phone number of the patient', () => {
-    const phoneNumberInput = wrapper.findWhere((w: any) => w.prop('name') === 'phoneNumber')
-    expect(phoneNumberInput.prop('value')).toEqual(patient.phoneNumber)
-    expect(phoneNumberInput.prop('label')).toEqual('patient.phoneNumber')
-    expect(phoneNumberInput.prop('isEditable')).toBeFalsy()
-  })
-
-  it('should render the email of the patient', () => {
-    const emailInput = wrapper.findWhere((w: any) => w.prop('name') === 'email')
-    expect(emailInput.prop('value')).toEqual(patient.email)
-    expect(emailInput.prop('label')).toEqual('patient.email')
-    expect(emailInput.prop('isEditable')).toBeFalsy()
-  })
-
-  it('should render the address of the patient', () => {
-    const addressInput = wrapper.findWhere((w: any) => w.prop('name') === 'address')
-    expect(addressInput.prop('value')).toEqual(patient.address)
-    expect(addressInput.prop('label')).toEqual('patient.address')
-    expect(addressInput.prop('isEditable')).toBeFalsy()
-  })
-
   it('should render the approximate age if patient.isApproximateDateOfBirth is true', async () => {
     patient.isApproximateDateOfBirth = true
     await act(async () => {
       wrapper = await mount(
-        <Router history={history}>
-          <GeneralInformation patient={patient} />)
-        </Router>,
+        <Provider store={store}>
+          <Router history={history}>
+            <GeneralInformation patient={patient} />)
+          </Router>
+        </Provider>,
       )
     })
 
@@ -207,9 +198,6 @@ describe('General Information, isEditable', () => {
     type: 'charity',
     occupation: 'occupation',
     preferredLanguage: 'preferredLanguage',
-    phoneNumber: 'phoneNumber',
-    email: '[email protected]',
-    address: 'address',
     code: 'P00001',
     dateOfBirth: startOfDay(subYears(new Date(), 30)).toISOString(),
     isApproximateDateOfBirth: false,
@@ -218,16 +206,33 @@ describe('General Information, isEditable', () => {
   let wrapper: ReactWrapper
   let history = createMemoryHistory()
 
+  const error = {
+    message: 'some message',
+    givenName: 'given name message',
+    dateOfBirth: 'date of birth message',
+  }
+
+  const store = mockStore({ patient: { patient: {} as Patient, createError: error } } as any)
+
   const onFieldChange = jest.fn()
 
   beforeEach(() => {
     jest.restoreAllMocks()
     Date.now = jest.fn().mockReturnValue(new Date().valueOf())
     history = createMemoryHistory()
     wrapper = mount(
-      <Router history={history}>
-        <GeneralInformation patient={patient} onFieldChange={onFieldChange} isEditable />)
-      </Router>,
+      <Provider store={store}>
+        <Router history={history}>
+          <GeneralInformation
+            patient={patient}
+            onFieldChange={onFieldChange}
+            onObjectArrayChange={jest.fn()}
+            addEmptyEntryToPatientArrayField={jest.fn()}
+            isEditable
+          />
+          )
+        </Router>
+      </Provider>,
     )
   })
 
@@ -239,9 +244,6 @@ describe('General Information, isEditable', () => {
   const expectedType = 'expectedType'
   const expectedOccupation = 'expectedOccupation'
   const expectedPreferredLanguage = 'expectedPreferredLanguage'
-  const expectedPhoneNumber = 'expectedPhoneNumber'
-  const expectedEmail = 'expectedEmail'
-  const expectedAddress = 'expectedAddress'
   const expectedDateOfBirth = '1937-06-14T05:00:00.000Z'
 
   it('should render the prefix', () => {
@@ -409,64 +411,22 @@ describe('General Information, isEditable', () => {
     )
   })
 
-  it('should render the phone number of the patient', () => {
-    const phoneNumberInput = wrapper.findWhere((w: any) => w.prop('name') === 'phoneNumber')
-    const generalInformation = wrapper.find(GeneralInformation)
-
-    expect(phoneNumberInput.prop('value')).toEqual(patient.phoneNumber)
-    expect(phoneNumberInput.prop('label')).toEqual('patient.phoneNumber')
-    expect(phoneNumberInput.prop('isEditable')).toBeTruthy()
-
-    act(() => {
-      phoneNumberInput.prop('onChange')({ target: { value: expectedPhoneNumber } })
-    })
-
-    expect(generalInformation.prop('onFieldChange')).toHaveBeenCalledWith(
-      'phoneNumber',
-      expectedPhoneNumber,
-    )
-  })
-
-  it('should render the email of the patient', () => {
-    const emailInput = wrapper.findWhere((w: any) => w.prop('name') === 'email')
-    const generalInformation = wrapper.find(GeneralInformation)
-
-    expect(emailInput.prop('value')).toEqual(patient.email)
-    expect(emailInput.prop('label')).toEqual('patient.email')
-    expect(emailInput.prop('isEditable')).toBeTruthy()
-
-    act(() => {
-      emailInput.prop('onChange')({ target: { value: expectedEmail } })
-    })
-
-    expect(generalInformation.prop('onFieldChange')).toHaveBeenCalledWith('email', expectedEmail)
-  })
-
-  it('should render the address of the patient', () => {
-    const addressInput = wrapper.findWhere((w: any) => w.prop('name') === 'address')
-    const generalInformation = wrapper.find(GeneralInformation)
-
-    expect(addressInput.prop('value')).toEqual(patient.address)
-    expect(addressInput.prop('label')).toEqual('patient.address')
-    expect(addressInput.prop('isEditable')).toBeTruthy()
-
-    act(() => {
-      addressInput.prop('onChange')({ currentTarget: { value: expectedAddress } })
-    })
-
-    expect(generalInformation.prop('onFieldChange')).toHaveBeenCalledWith(
-      'address',
-      expectedAddress,
-    )
-  })
-
   it('should render the approximate age if patient.isApproximateDateOfBirth is true', async () => {
     patient.isApproximateDateOfBirth = true
     await act(async () => {
       wrapper = await mount(
-        <Router history={history}>
-          <GeneralInformation patient={patient} onFieldChange={jest.fn()} isEditable />)
-        </Router>,
+        <Provider store={store}>
+          <Router history={history}>
+            <GeneralInformation
+              patient={patient}
+              onFieldChange={jest.fn()}
+              onObjectArrayChange={jest.fn()}
+              addEmptyEntryToPatientArrayField={jest.fn()}
+              isEditable
+            />
+            )
+          </Router>
+        </Provider>,
       )
     })