Skip to content
This repository has been archived by the owner on Jan 9, 2023. It is now read-only.

Commit

Permalink
feat(patients): adds tests for new notes modal
Browse files Browse the repository at this point in the history
  • Loading branch information
jackcmeyer committed Apr 3, 2020
1 parent b25ea3a commit b3ddd24
Show file tree
Hide file tree
Showing 4 changed files with 44 additions and 20 deletions.
16 changes: 12 additions & 4 deletions src/__tests__/patients/notes/NewNoteModal.test.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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'

Expand Down Expand Up @@ -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()
})
})
Expand Down
15 changes: 12 additions & 3 deletions src/components/input/TextFieldWithLabelFormGroup.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
3 changes: 2 additions & 1 deletion src/locales/enUs/translations/patient/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.',
},
Expand Down
30 changes: 18 additions & 12 deletions src/patients/notes/NewNoteModal.tsx
Original file line number Diff line number Diff line change
@@ -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'
Expand All @@ -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: '',
Expand All @@ -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>
Expand Down

0 comments on commit b3ddd24

Please sign in to comment.