Implement prescription medication recording

.eslintrc.json

@@ -20,5 +20,6 @@
         "@typescript-eslint"
     ],
     "rules": {
+        "max-len": 100
     }
 }

package.json

@@ -20,14 +20,17 @@
   "homepage": "https://github.com/JamesChristie/chronicle#readme",
   "dependencies": {
     "react": "16.13.1",
-    "react-dom": "16.13.1"
+    "react-dom": "16.13.1",
+    "react-redux": "7.2.0"
   },
   "devDependencies": {
     "@types/enzyme": "3.10.5",
     "@types/jasmine": "3.5.10",
     "@types/react": "16.9.35",
     "@types/react-devtools": "3.6.0",
     "@types/react-dom": "16.9.8",
+    "@types/react-redux": "7.1.9",
+    "@types/redux": "3.6.0",
     "@typescript-eslint/eslint-plugin": "3.1.0",
     "@typescript-eslint/parser": "3.1.0",
     "enzyme": "3.11.0",

spec/components/DiaryCard.spec.tsx

@@ -1,65 +1,62 @@
 import * as React from 'react'
 import 'jasmine'
-import { shallow } from 'enzyme'
+import { shallow, ShallowWrapper } from 'enzyme'
+
 import { DiaryCard } from '../../src/components/DiaryCard'
+import { PrescriptionMedicationSection } from '../../src/components/PrescriptionMedicationSection'
 
 describe('Diary card form', () => {
-  it('displays an field for naming a target behavior', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorField = wrapper.find('input[type="text"]#target-behavior-name')
+  var elementWrapper: ShallowWrapper | undefined
 
-    expect(targetBehaviorField.length).toEqual(1)
+  beforeEach(() => {
+    elementWrapper = shallow(<DiaryCard />)
   })
 
-  it('displays a localized label for the target behavior name', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorFieldLabel = wrapper.find('label[htmlFor="target-behavior-name"]')
+  it('displays an field for naming a target behavior', () => {
+    const targetBehaviorField = elementWrapper?.find('input[type="text"]#target-behavior-name')
+    expect(targetBehaviorField?.length).toEqual(1)
+  })
 
-    expect(targetBehaviorFieldLabel.length).toEqual(1)
+  it('displays a localized label for the target behavior name', () => {
+    const targetBehaviorFieldLabel = elementWrapper?.find('label[htmlFor="target-behavior-name"]')
+    expect(targetBehaviorFieldLabel?.length).toEqual(1)
   })
 
   it('displays an field for rating the urge to engage in target behavior', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorUrgeField = wrapper.find('div#target-behavior-urge')
-
-    expect(targetBehaviorUrgeField.length).toEqual(1)
+    const targetBehaviorUrgeField = elementWrapper?.find('div#target-behavior-urge')
+    expect(targetBehaviorUrgeField?.length).toEqual(1)
   })
 
   it('allows rating of target behavior urge from zero to five', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorUrgeMagnitudeFields = wrapper
-      .find('input[type="radio"][name="target-behavior-urge-magnitude"]')
-
-    expect(targetBehaviorUrgeMagnitudeFields.length).toEqual(6)
+    const targetBehaviorUrgeMagnitudeFields = elementWrapper?.find(
+      'input[type="radio"][name="target-behavior-urge-magnitude"]')
+    expect(targetBehaviorUrgeMagnitudeFields?.length).toEqual(6)
   })
 
   it('displays a localized label for rating the urge to engage in target behavior', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorUrgeLabel = wrapper.find('label[htmlFor="target-behavior-urge"]')
-
-    expect(targetBehaviorUrgeLabel.length).toEqual(1)
+    const targetBehaviorUrgeLabel = elementWrapper?.find('label[htmlFor="target-behavior-urge"]')
+    expect(targetBehaviorUrgeLabel?.length).toEqual(1)
   })
 
   it('displays a field for rating the target behavior engagement', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorEngagementField = wrapper.find('div#target-behavior-engagement')
-
-    expect(targetBehaviorEngagementField.length).toEqual(1)
+    const targetBehaviorEngagementField = elementWrapper?.find('div#target-behavior-engagement')
+    expect(targetBehaviorEngagementField?.length).toEqual(1)
   })
 
   it('allows rating of target behavior engagement from zero to five', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorEngagementMagnitudeFields = wrapper
-      .find('input[type="radio"][name="target-behavior-engagement-magnitude"]')
-
-    expect(targetBehaviorEngagementMagnitudeFields.length).toEqual(6)
+    const targetBehaviorEngagementMagnitudeFields = elementWrapper
+      ?.find('input[type="radio"][name="target-behavior-engagement-magnitude"]')
+    expect(targetBehaviorEngagementMagnitudeFields?.length).toEqual(6)
   })
 
   it('displays a localized label for rating the target behavior engagement', () => {
-    const wrapper = shallow(<DiaryCard />)
-    const targetBehaviorEngagementLabel = wrapper
-      .find('label[htmlFor="target-behavior-engagement"]')
+    const targetBehaviorEngagementLabel = elementWrapper
+      ?.find('label[htmlFor="target-behavior-engagement"]')
+    expect(targetBehaviorEngagementLabel?.length).toEqual(1)
+  })
 
-    expect(targetBehaviorEngagementLabel.length).toEqual(1)
+  it('displays a form section for recording prescription medication', () => {
+    const prescriptionMedicationSection = elementWrapper?.find(PrescriptionMedicationSection)
+    expect(prescriptionMedicationSection?.length).toEqual(1)
   })
 })

spec/components/PrescriptionMedicationSection.spec.tsx

@@ -0,0 +1,120 @@
+import 'jasmine'
+import * as React from 'react'
+import { shallow } from 'enzyme'
+
+import { 
+  buildMockStore, 
+  MockStore 
+} from '../mocks/redux_store'
+
+import {
+  PrescriptionMedication,
+  PrescriptionMedicationSection
+} from '../../src/components/PrescriptionMedicationSection'
+
+import {
+  DiaryCardFormActionTypes,
+  PrescriptionMedicationFormAction,
+  PrescriptionMedicationFormActionValue
+} from '../../src/redux/store'
+
+describe('Prescription medication section', () => {
+  var mockStore: MockStore<any, any>
+  var medicationsList: PrescriptionMedication[]
+
+  beforeEach(() => {
+    mockStore = buildMockStore()
+    medicationsList = [{ name: 'Aspirin' }]
+  })
+
+  it('displays a field for entering a prescription medication', () => {
+    const elementWrapper = shallow(
+      <PrescriptionMedicationSection medications={[]} store={mockStore} />)
+    const prescriptionNameField = elementWrapper?.find('input[type="text"][name="prescription-name"]')
+
+    expect(prescriptionNameField?.length).toEqual(1)
+  })
+
+  it('displays existing form fields for medication', () => {
+    const medicationsList = [
+      { name: 'Aspirin' }
+    ]
+
+    const elementWrapper = shallow(
+      <PrescriptionMedicationSection medications={medicationsList} store={mockStore} />)
+    const prescriptionNameField = elementWrapper?.find('input[type="text"][name="prescription-name"]')
+
+    expect(prescriptionNameField?.length).toEqual(2)
+    expect(prescriptionNameField?.at(0).prop('value')).toEqual('Aspirin')
+    expect(prescriptionNameField?.at(1).prop('value')).toEqual('')
+  })
+
+  it('dispatches to store upon input change to empty text field', () => {
+    const elementWrapper = shallow(
+      <PrescriptionMedicationSection medications={[]} store={mockStore} />)
+
+    const medicationField = elementWrapper.find('input[type="text"][name="prescription-name"]').at(0)
+    medicationField?.simulate('change', { target: { value: 'a-prescription-medication-name' } })
+
+    const mockDispatches = mockStore.getDispatchCalls() as PrescriptionMedicationFormAction[]
+
+    expect(mockDispatches.length).toEqual(1)
+    expect(mockDispatches[0].type).toEqual(DiaryCardFormActionTypes.AddPrescriptionMedication)
+    expect(mockDispatches[0].value)
+      .toEqual({ currentName: '', updatedName: 'a-prescription-medication-name' })
+  })
+
+  it('dispatches to store upon unput change to existing text field', () => {
+    const elementWrapper = shallow(
+      <PrescriptionMedicationSection medications={medicationsList} store={mockStore} />)
+
+    const medicationField = elementWrapper.find('input[type="text"][name="prescription-name"]').at(0)
+    medicationField?.simulate('change', { target: { value: 'a-prescription-medication-name' } })
+
+    const mockDispatches = mockStore.getDispatchCalls() as PrescriptionMedicationFormAction[]
+    const expectedActionValue: PrescriptionMedicationFormActionValue = {
+      currentName: 'Aspirin',
+      updatedName: 'a-prescription-medication-name'
+    } 
+
+    expect(mockDispatches.length).toEqual(1)
+    expect(mockDispatches[0].type).toEqual(DiaryCardFormActionTypes.UpdatePrescriptionMedication)
+    expect(mockDispatches[0].value).toEqual(expectedActionValue)
+  })
+
+  it('dispatches to store upon clearing text from an existing text field', () => {
+    const elementWrapper = shallow(
+      <PrescriptionMedicationSection medications={medicationsList} store={mockStore} />)
+
+    const medicationField = elementWrapper.find('input[type="text"][name="prescription-name"]').at(0)
+    medicationField?.simulate('change', { target: { value: '' } })
+
+    const mockDispatches = mockStore.getDispatchCalls() as PrescriptionMedicationFormAction[]
+    const expectedActionValue: PrescriptionMedicationFormActionValue = {
+      currentName: 'Aspirin',
+      updatedName: ''
+    }
+
+    expect(mockDispatches.length).toEqual(1)
+    expect(mockDispatches[0].type).toEqual(DiaryCardFormActionTypes.DeletePrescriptionMedication)
+    expect(mockDispatches[0].value).toEqual(expectedActionValue)
+  })
+
+  it('dispatches to store upon click of delete action for medication field', () => {
+    const elementWrapper = shallow(
+      <PrescriptionMedicationSection medications={medicationsList} store={mockStore} />)
+
+    const deleteButton = elementWrapper.find('#delete-medication-action-0').at(0)
+    deleteButton?.simulate('click')
+
+    const mockDispatches = mockStore.getDispatchCalls() as PrescriptionMedicationFormAction[]
+    const expectedActionValue: PrescriptionMedicationFormActionValue = {
+      currentName: 'Aspirin',
+      updatedName: ''
+    }
+
+    expect(mockDispatches.length).toEqual(1)
+    expect(mockDispatches[0].type).toEqual(DiaryCardFormActionTypes.DeletePrescriptionMedication)
+    expect(mockDispatches[0].value).toEqual(expectedActionValue)
+  })
+})