Merge pull request #122 from codyarose/codyarose_NewAllergyModal

Convert NewAllergyModal.test.tsx to RTL

src/__tests__/patients/allergies/NewAllergyModal.test.tsx

@@ -1,12 +1,11 @@
 /* eslint-disable no-console */
 
-import { Modal, Alert } from '@hospitalrun/components'
-import { mount } from 'enzyme'
+import { render, screen } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
 import React from 'react'
 import { act } from 'react-dom/test-utils'
 
 import NewAllergyModal from '../../../patients/allergies/NewAllergyModal'
-import TextInputWithLabelFormGroup from '../../../shared/components/input/TextInputWithLabelFormGroup'
 import PatientRepository from '../../../shared/db/PatientRepository'
 import Patient from '../../../shared/model/Patient'
 
@@ -17,86 +16,71 @@ describe('New Allergy Modal', () => {
   } as Patient
 
   const setup = (onCloseSpy = jest.fn()) => {
+    jest.resetAllMocks()
     jest.spyOn(PatientRepository, 'saveOrUpdate').mockResolvedValue(mockPatient)
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(mockPatient)
-    const wrapper = mount(
+
+    return render(
       <NewAllergyModal patientId={mockPatient.id} show onCloseButtonClick={onCloseSpy} />,
     )
-
-    return { wrapper }
   }
 
   beforeEach(() => {
     console.error = jest.fn()
   })
 
   it('should render a modal with the correct labels', () => {
-    const { wrapper } = setup()
-
-    const modal = wrapper.find(Modal)
-    expect(wrapper.exists(Modal)).toBeTruthy()
-    expect(modal.prop('title')).toEqual('patient.allergies.new')
-    expect(modal.prop('closeButton')?.children).toEqual('actions.cancel')
-    expect(modal.prop('closeButton')?.color).toEqual('danger')
-    expect(modal.prop('successButton')?.children).toEqual('patient.allergies.new')
-    expect(modal.prop('successButton')?.color).toEqual('success')
-    expect(modal.prop('successButton')?.icon).toEqual('add')
+    setup()
+    const modal = screen.getByRole('dialog')
+    const cancelButton = screen.getByRole('button', { name: /actions.cancel/i })
+    const successButton = screen.getByRole('button', { name: /patient.allergies.new/i })
+
+    expect(modal).toBeInTheDocument()
+    expect(screen.getByText('patient.allergies.new', { selector: 'div' })).toBeInTheDocument()
+    expect(cancelButton).toBeInTheDocument()
+    expect(cancelButton).toHaveClass('btn-danger')
+    expect(successButton).toBeInTheDocument()
+    expect(successButton).toHaveClass('btn-success')
+    expect(successButton.children[0]).toHaveAttribute('data-icon', 'plus')
   })
 
   it('should display errors when there is an error saving', async () => {
     const expectedError = {
       message: 'patient.allergies.error.unableToAdd',
       nameError: 'patient.allergies.error.nameRequired',
     }
-    const { wrapper } = setup()
-
-    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 nameField = wrapper.find(TextInputWithLabelFormGroup)
-
-    expect(alert.prop('title')).toEqual('states.error')
-    expect(alert.prop('message')).toEqual(expectedError.message)
-    expect(nameField.prop('isInvalid')).toBeTruthy()
-    expect(nameField.prop('feedback')).toEqual(expectedError.nameError)
+    setup()
+    const successButton = screen.getByRole('button', { name: /patient.allergies.new/i })
+    const nameField = screen.getByLabelText(/patient.allergies.allergyName/i)
+
+    userEvent.click(successButton)
+    const alert = await screen.findByRole('alert')
+
+    expect(alert).toBeInTheDocument()
+    expect(screen.getByText(/states.error/i)).toBeInTheDocument()
+    expect(screen.getByText(expectedError.message)).toBeInTheDocument()
+    expect(nameField).toHaveClass('is-invalid')
+    expect(nameField.nextSibling).toHaveTextContent(expectedError.nameError)
   })
 
   describe('cancel', () => {
     it('should call the onCloseButtonClick function when the close 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()
-      })
+      setup(onCloseButtonClickSpy)
 
+      userEvent.click(screen.getByRole('button', { name: /actions.cancel/i }))
       expect(onCloseButtonClickSpy).toHaveBeenCalledTimes(1)
     })
   })
 
   describe('save', () => {
     it('should save the allergy for the given patient', async () => {
       const expectedName = 'expected name'
-      const { wrapper } = setup()
-
-      act(() => {
-        const input = wrapper.findWhere((c) => c.prop('name') === 'name')
-        const onChange = input.prop('onChange')
-        onChange({ target: { value: expectedName } })
-      })
-
-      wrapper.update()
+      setup()
 
+      userEvent.type(screen.getByLabelText(/patient.allergies.allergyName/i), expectedName)
       await act(async () => {
-        const modal = wrapper.find(Modal)
-        const onSave = (modal.prop('successButton') as any).onClick
-        await onSave({} as React.MouseEvent<HTMLButtonElement>)
+        userEvent.click(screen.getByRole('button', { name: /patient.allergies.new/i }))
       })
 
       expect(PatientRepository.saveOrUpdate).toHaveBeenCalledTimes(1)