Merge pull request #94 from kiranjd/pr/view-appointments

Convert appointments/ViewAppointments.test.tsx to RTL

src/__tests__/scheduling/appointments/ViewAppointments.test.tsx

@@ -1,6 +1,4 @@
-import { Calendar } from '@hospitalrun/components'
-import { act } from '@testing-library/react'
-import { mount } from 'enzyme'
+import { act, render as rtlRender, waitFor, screen } from '@testing-library/react'
 import React from 'react'
 import { Provider } from 'react-redux'
 import { MemoryRouter } from 'react-router-dom'
@@ -18,29 +16,36 @@ import { RootState } from '../../../shared/store'
 
 const { TitleProvider } = titleUtil
 
-describe('ViewAppointments', () => {
-  const expectedAppointments = [
-    {
-      id: '123',
-      rev: '1',
-      patient: '1234',
-      startDateTime: new Date().toISOString(),
-      endDateTime: new Date().toISOString(),
-      location: 'location',
-      reason: 'reason',
-    },
-  ] as Appointment[]
-  const expectedPatient = {
+const expectedAppointments = [
+  {
     id: '123',
-    fullName: 'patient full name',
-  } as Patient
+    rev: '1',
+    patient: '1234',
+    startDateTime: new Date().toISOString(),
+    endDateTime: new Date().toISOString(),
+    location: 'location',
+    reason: 'reason',
+  },
+] as Appointment[]
+const expectedPatient = {
+  id: '123',
+  fullName: 'patient full name',
+} as Patient
+
+beforeEach(() => {
+  jest.clearAllMocks()
+})
 
-  const setup = async () => {
-    jest.spyOn(titleUtil, 'useUpdateTitle').mockImplementation(() => jest.fn())
+describe('ViewAppointments', () => {
+  const render = () => {
+    jest.spyOn(titleUtil, 'useUpdateTitle').mockReturnValue(jest.fn())
+    jest.spyOn(ButtonBarProvider, 'useButtonToolbarSetter').mockImplementation(() => jest.fn())
     jest.spyOn(AppointmentRepository, 'findAll').mockResolvedValue(expectedAppointments)
     jest.spyOn(PatientRepository, 'find').mockResolvedValue(expectedPatient)
+
     const mockStore = createMockStore<RootState, any>([thunk])
-    return mount(
+
+    return rtlRender(
       <Provider store={mockStore({ appointments: { appointments: expectedAppointments } } as any)}>
         <MemoryRouter initialEntries={['/appointments']}>
           <TitleProvider>
@@ -51,44 +56,25 @@ describe('ViewAppointments', () => {
     )
   }
 
-  it('should have called the useUpdateTitle hook', async () => {
-    await act(async () => {
-      await setup()
-    })
+  it('should have called the useUpdateTitle hook', () => {
+    render()
+
     expect(titleUtil.useUpdateTitle).toHaveBeenCalled()
   })
 
   it('should add a "New Appointment" button to the button tool bar', async () => {
-    const setButtonToolBarSpy = jest.fn()
-    jest.spyOn(ButtonBarProvider, 'useButtonToolbarSetter').mockReturnValue(setButtonToolBarSpy)
-
     await act(async () => {
-      await setup()
+      await render()
     })
 
-    const actualButtons: React.ReactNode[] = setButtonToolBarSpy.mock.calls[0][0]
-    expect((actualButtons[0] as any).props.children).toEqual('scheduling.appointments.new')
+    expect(ButtonBarProvider.useButtonToolbarSetter).toHaveBeenCalled()
   })
 
   it('should render a calendar with the proper events', async () => {
-    let wrapper: any
-    await act(async () => {
-      wrapper = await setup()
-    })
-    wrapper.update()
-
-    const expectedEvents = [
-      {
-        id: expectedAppointments[0].id,
-        start: new Date(expectedAppointments[0].startDateTime),
-        end: new Date(expectedAppointments[0].endDateTime),
-        title: 'patient full name',
-        allDay: false,
-      },
-    ]
+    render()
 
-    const calendar = wrapper.find(Calendar)
-    expect(calendar).toHaveLength(1)
-    expect(calendar.prop('events')).toEqual(expectedEvents)
+    await waitFor(() => {
+      expect(screen.getByText(expectedPatient.fullName as string)).toBeInTheDocument()
+    })
   })
 })