Merge pull request #104 from ziedtouibi/zied-NewNoteModal.test.tsx

test(new note modal): convert NewNoteModal.test.tsx to RTL

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

@@ -1,12 +1,8 @@
-/* eslint-disable no-console */
-
-import { Alert, Modal } from '@hospitalrun/components'
-import { act } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { screen, render as rtlRender, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 
 import NewNoteModal from '../../../patients/notes/NewNoteModal'
-import TextFieldWithLabelFormGroup from '../../../shared/components/input/TextFieldWithLabelFormGroup'
 import PatientRepository from '../../../shared/db/PatientRepository'
 import Patient from '../../../shared/model/Patient'
 
@@ -16,112 +12,105 @@ describe('New Note Modal', () => {
     givenName: 'someName',
   } as Patient
 
-  const setup = (onCloseSpy = jest.fn()) => {
+  const onCloseSpy = jest.fn()
+  const render = () => {
     jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(mockPatient)
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(mockPatient)
-    const wrapper = mount(
+    const results = rtlRender(
       <NewNoteModal
         show
         onCloseButtonClick={onCloseSpy}
         toggle={jest.fn()}
         patientId={mockPatient.id}
       />,
     )
-    return { wrapper }
+    return results
   }
 
-  beforeEach(() => {
-    console.error = jest.fn()
-  })
-
   it('should render a modal with the correct labels', () => {
-    const { wrapper } = setup()
-
-    const modal = wrapper.find(Modal)
-    expect(modal).toHaveLength(1)
-    expect(modal.prop('title')).toEqual('patient.notes.new')
-    expect(modal.prop('closeButton')?.children).toEqual('actions.cancel')
-    expect(modal.prop('closeButton')?.color).toEqual('danger')
-    expect(modal.prop('successButton')?.children).toEqual('patient.notes.new')
-    expect(modal.prop('successButton')?.color).toEqual('success')
-    expect(modal.prop('successButton')?.icon).toEqual('add')
+    render()
+
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+    waitFor(() => expect(screen.getByText(/patient\.notes\.new/i)).toBeInTheDocument())
+
+    const successButton = screen.getByRole('button', {
+      name: /patient\.notes\.new/i,
+    })
+    const cancelButton = screen.getByRole('button', {
+      name: /actions\.cancel/i,
+    })
+
+    expect(cancelButton).toHaveClass('btn-danger')
+    expect(successButton).toHaveClass('btn-success')
+    expect(successButton.querySelector('svg')).toHaveAttribute('data-icon', 'plus')
   })
 
-  it('should render a notes rich text editor', () => {
-    const { wrapper } = setup()
+  it('should render a notes rich text editor', async () => {
+    render()
 
-    const noteTextField = wrapper.find(TextFieldWithLabelFormGroup)
-    expect(noteTextField.prop('label')).toEqual('patient.note')
-    expect(noteTextField.prop('isRequired')).toBeTruthy()
-    expect(noteTextField).toHaveLength(1)
+    expect(screen.getByRole('textbox')).toBeInTheDocument()
+    expect(screen.getByText('patient.note').querySelector('svg')).toHaveAttribute(
+      'data-icon',
+      'asterisk',
+    )
   })
 
   it('should render note error', async () => {
     const expectedError = {
       message: 'patient.notes.error.unableToAdd',
       note: 'patient.notes.error.noteRequired',
     }
-    const { wrapper } = setup()
+    render()
 
-    await act(async () => {
-      const modal = wrapper.find(Modal)
-      const onSave = (modal.prop('successButton') as any).onClick
-      await onSave({} as React.MouseEvent<HTMLButtonElement>)
-    })
-    wrapper.update()
-    const alert = wrapper.find(Alert)
-    const noteTextField = wrapper.find(TextFieldWithLabelFormGroup)
-
-    expect(alert.prop('title')).toEqual('states.error')
-    expect(alert.prop('message')).toEqual(expectedError.message)
-    expect(noteTextField.prop('isInvalid')).toBeTruthy()
-    expect(noteTextField.prop('feedback')).toEqual(expectedError.note)
+    userEvent.click(
+      screen.getByRole('button', {
+        name: /patient\.notes\.new/i,
+      }),
+    )
+
+    expect(await screen.findByRole('alert')).toBeInTheDocument()
+    expect(screen.getByText(/states.error/i)).toBeInTheDocument()
+    expect(screen.getByText(expectedError.message)).toBeInTheDocument()
+    expect(screen.getByText(expectedError.note)).toBeInTheDocument()
+    expect(screen.getByRole('textbox')).toHaveClass('is-invalid')
   })
 
   describe('on cancel', () => {
     it('should call the onCloseButtonCLick function when the cancel button is clicked', () => {
-      const onCloseButtonClickSpy = jest.fn()
-      const { wrapper } = setup(onCloseButtonClickSpy)
-
-      act(() => {
-        const modal = wrapper.find(Modal)
-        const { onClick } = modal.prop('closeButton') as any
-        onClick()
-      })
+      render()
 
-      expect(onCloseButtonClickSpy).toHaveBeenCalledTimes(1)
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /actions\.cancel/i,
+        }),
+      )
+      waitFor(() => expect(onCloseSpy).toHaveBeenCalledTimes(1))
     })
   })
 
   describe('on save', () => {
     it('should dispatch add note', async () => {
       const expectedNote = 'some note'
-      const { wrapper } = setup()
-      const noteTextField = wrapper.find(TextFieldWithLabelFormGroup)
+      render()
 
-      await act(async () => {
-        const onChange = noteTextField.prop('onChange') as any
-        await onChange({ currentTarget: { value: expectedNote } })
-      })
+      const noteTextField = screen.getByRole('textbox')
+      userEvent.type(noteTextField, expectedNote)
 
-      wrapper.update()
-
-      await act(async () => {
-        const modal = wrapper.find(Modal)
-        const onSave = (modal.prop('successButton') as any).onClick
-        await onSave({} as React.MouseEvent<HTMLButtonElement>)
-        wrapper.update()
-      })
-
-      expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
-      expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(
-        expect.objectContaining({
-          notes: [expect.objectContaining({ text: expectedNote })],
+      userEvent.click(
+        screen.getByRole('button', {
+          name: /patient\.notes\.new/i,
         }),
       )
-
-      // Does the form reset value back to blank?
-      expect(noteTextField.prop('value')).toEqual('')
+      waitFor(() => {
+        expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)
+        expect(PatientRepository.saveOrUpdate).toHaveBeenCalledWith(
+          expect.objectContaining({
+            notes: [expect.objectContaining({ text: expectedNote })],
+          }),
+        )
+        // Does the form reset value back to blank?
+        expect(noteTextField).toHaveValue('')
+      })
     })
   })
 })