feat(patients): adds tests for new notes modal

src/__tests__/patients/notes/NewNoteModal.test.tsx

@@ -2,7 +2,7 @@ import '../../../__mocks__/matchMediaMock'
 import React from 'react'
 import NewNoteModal from 'patients/notes/NewNoteModal'
 import { shallow, mount } from 'enzyme'
-import { Modal, Label, RichText, TextField } from '@hospitalrun/components'
+import { Modal, Alert } from '@hospitalrun/components'
 import { act } from '@testing-library/react'
 import TextFieldWithLabelFormGroup from 'components/input/TextFieldWithLabelFormGroup'
 
@@ -86,18 +86,26 @@ describe('New Note Modal', () => {
       })
     })
 
-    it('should require a note be added', () => {
+    it('should require a note be added', async () => {
       const onSaveSpy = jest.fn()
       const wrapper = mount(
         <NewNoteModal show onCloseButtonClick={jest.fn()} onSave={onSaveSpy} toggle={jest.fn()} />,
       )
 
-      act(() => {
+      await act(async () => {
         const modal = wrapper.find(Modal)
         const { onClick } = modal.prop('successButton') as any
-        onClick()
+        await onClick()
       })
+      wrapper.update()
+
+      const notesTextField = wrapper.find(TextFieldWithLabelFormGroup)
+      const errorAlert = wrapper.find(Alert)
 
+      expect(errorAlert).toHaveLength(1)
+      expect(errorAlert.prop('title')).toEqual('states.error')
+      expect(errorAlert.prop('message')).toEqual('patient.notes.error.unableToAdd')
+      expect(notesTextField.prop('feedback')).toEqual('patient.notes.error.noteRequired')
       expect(onSaveSpy).not.toHaveBeenCalled()
     })
   })

src/components/input/TextFieldWithLabelFormGroup.tsx

@@ -8,16 +8,25 @@ interface Props {
   isEditable?: boolean
   placeholder?: string
   onChange?: (event: React.ChangeEvent<HTMLTextAreaElement>) => void
-  isRequired: boolean
+  isRequired?: boolean
+  feedback?: string
+  isInvalid?: boolean
 }
 
 const TextFieldWithLabelFormGroup = (props: Props) => {
-  const { value, label, name, isEditable, onChange } = props
+  const { value, label, name, isEditable, isInvalid, feedback, onChange } = props
   const id = `${name}TextField`
   return (
     <div className="form-group">
       <Label text={label} htmlFor={id} isRequired />
-      <TextField rows={4} value={value} disabled={!isEditable} onChange={onChange} />
+      <TextField
+        rows={4}
+        value={value}
+        disabled={!isEditable}
+        onChange={onChange}
+        isInvalid={isInvalid}
+        feedback={feedback}
+      />
     </div>
   )
 }

src/locales/enUs/translations/patient/index.ts

@@ -69,12 +69,13 @@ export default {
     note: 'Note',
     notes: {
       label: 'Notes',
-      new: 'New Note',
+      new: 'Add New Note',
       warning: {
         noNotes: 'No Notes',
       },
       error: {
         noteRequired: 'Note is required.',
+        unableToAdd: 'Unable to add new note.',
       },
       addNoteAbove: 'Add a note using the button above.',
     },

src/patients/notes/NewNoteModal.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react'
-import { Modal, Alert, RichText, Label } from '@hospitalrun/components'
+import { Modal, Alert } from '@hospitalrun/components'
 import { useTranslation } from 'react-i18next'
 import TextFieldWithLabelFormGroup from 'components/input/TextFieldWithLabelFormGroup'
 import Note from '../../model/Note'
@@ -14,7 +14,8 @@ interface Props {
 const NewNoteModal = (props: Props) => {
   const { show, toggle, onCloseButtonClick, onSave } = props
   const { t } = useTranslation()
-  const [errorMessage, setErrorMessage] = useState('')
+  const [isNoteInvalid, setIsNoteInvalid] = useState(false)
+  const [noteFeedback, setNoteFeedback] = useState()
   const [note, setNote] = useState({
     date: new Date(Date.now().valueOf()).toISOString(),
     text: '',
@@ -33,30 +34,35 @@ const NewNoteModal = (props: Props) => {
   }
 
   const onSaveButtonClick = () => {
-    let newErrorMessage = ''
-
-    if (!note) {
-      newErrorMessage += `${t('patient.notes.error.noteRequired')} `
+    if (!note.text) {
+      setIsNoteInvalid(true)
+      setNoteFeedback(t('patient.notes.error.noteRequired'))
+      return
     }
 
-    if (!newErrorMessage) {
-      onSave(note as Note)
-    } else {
-      setErrorMessage(newErrorMessage.trim())
-    }
+    onSave(note as Note)
   }
 
   const body = (
     <form>
-      {errorMessage && <Alert color="danger" title={t('states.error')} message={errorMessage} />}
+      {isNoteInvalid && (
+        <Alert
+          color="danger"
+          title={t('states.error')}
+          message={t('patient.notes.error.unableToAdd')}
+        />
+      )}
       <div className="row">
         <div className="col-md-12">
           <div className="form-group">
             <TextFieldWithLabelFormGroup
+              isEditable
               isRequired
               name="noteTextField"
               label={t('patient.note')}
               value={note.text}
+              isInvalid={isNoteInvalid}
+              feedback={noteFeedback}
               onChange={onNoteTextChange}
             />
           </div>