diff --git a/src/__tests__/patients/appointments/AppointmentsList.test.tsx b/src/__tests__/patients/appointments/AppointmentsList.test.tsx
index e4de312670..42497ceeee 100644
--- a/src/__tests__/patients/appointments/AppointmentsList.test.tsx
+++ b/src/__tests__/patients/appointments/AppointmentsList.test.tsx
@@ -1,9 +1,7 @@
-import * as components from '@hospitalrun/components'
-import { Table } from '@hospitalrun/components'
-import { mount, ReactWrapper } from 'enzyme'
+import { render, screen, waitFor } from '@testing-library/react'
+import userEvent from '@testing-library/user-event'
import { createMemoryHistory } from 'history'
import React from 'react'
-import { act } from 'react-dom/test-utils'
import { Provider } from 'react-redux'
import { Router } from 'react-router-dom'
import createMockStore from 'redux-mock-store'
@@ -50,63 +48,36 @@ const setup = async (patient = expectedPatient, appointments = expectedAppointme
jest.spyOn(PatientRepository, 'getAppointments').mockResolvedValue(appointments)
store = mockStore({ patient, appointments: { appointments } } as any)
- let wrapper: any
-
- await act(async () => {
- wrapper = await mount(
-
-
-
-
- ,
- )
- })
-
- wrapper.update()
-
- return { wrapper: wrapper as ReactWrapper }
+ return render(
+
+
+
+
+ ,
+ )
}
describe('AppointmentsList', () => {
describe('Table', () => {
it('should render a list of appointments', async () => {
- const { wrapper } = await setup()
-
- const table = wrapper.find(Table)
-
- const columns = table.prop('columns')
- const actions = table.prop('actions') as any
-
- expect(table).toHaveLength(1)
-
- expect(columns[0]).toEqual(
- expect.objectContaining({
- label: 'scheduling.appointment.startDate',
- key: 'startDateTime',
- }),
- )
- expect(columns[1]).toEqual(
- expect.objectContaining({ label: 'scheduling.appointment.endDate', key: 'endDateTime' }),
- )
- expect(columns[2]).toEqual(
- expect.objectContaining({ label: 'scheduling.appointment.location', key: 'location' }),
- )
- expect(columns[3]).toEqual(
- expect.objectContaining({ label: 'scheduling.appointment.type', key: 'type' }),
- )
-
- expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' }))
- expect(table.prop('actionsHeaderText')).toEqual('actions.label')
+ const { container } = await setup()
+ await waitFor(() => {
+ expect(container.querySelector('table')).toBeInTheDocument()
+ })
+ const columns = container.querySelectorAll('th')
+
+ expect(columns[0]).toHaveTextContent(/scheduling.appointment.startDate/i)
+ expect(columns[1]).toHaveTextContent(/scheduling.appointment.endDate/i)
+ expect(columns[2]).toHaveTextContent(/scheduling.appointment.location/i)
+ expect(columns[3]).toHaveTextContent(/scheduling.appointment.type/i)
+ expect(columns[4]).toHaveTextContent(/actions.label/i)
+ expect(screen.getAllByRole('button', { name: /actions.view/i })[0]).toBeInTheDocument()
})
it('should navigate to appointment profile on appointment click', async () => {
- const { wrapper } = await setup()
- const tr = wrapper.find('tr').at(1)
+ setup()
- act(() => {
- const onClick = tr.find('button').at(0).prop('onClick') as any
- onClick({ stopPropagation: jest.fn() })
- })
+ userEvent.click(screen.getAllByRole('button', { name: /actions.view/i })[0])
expect(history.location.pathname).toEqual('/appointments/456')
})
@@ -114,39 +85,36 @@ describe('AppointmentsList', () => {
describe('Empty list', () => {
it('should render a warning message if there are no appointments', async () => {
- const { wrapper } = await setup(expectedPatient, [])
- const alert = wrapper.find(components.Alert)
+ setup(expectedPatient, [])
+ const alert = await screen.findByRole('alert')
- expect(alert).toHaveLength(1)
- expect(alert.prop('title')).toEqual('patient.appointments.warning.noAppointments')
- expect(alert.prop('message')).toEqual('patient.appointments.addAppointmentAbove')
+ expect(alert).toBeInTheDocument()
+ expect(screen.getByText(/patient.appointments.warning.noAppointments/i)).toBeInTheDocument()
+ expect(screen.getByText(/patient.appointments.addAppointmentAbove/i)).toBeInTheDocument()
})
})
describe('New appointment button', () => {
it('should render a new appointment button if there is an appointment', async () => {
- const { wrapper } = await setup()
+ setup()
- const addNewAppointmentButton = wrapper.find(components.Button).at(0)
- expect(addNewAppointmentButton).toHaveLength(1)
- expect(addNewAppointmentButton.text().trim()).toEqual('scheduling.appointments.new')
+ expect(
+ await screen.findByRole('button', { name: /scheduling.appointments.new/i }),
+ ).toBeInTheDocument()
})
it('should render a new appointment button if there are no appointments', async () => {
- const { wrapper } = await setup(expectedPatient, [])
+ setup(expectedPatient, [])
- const addNewAppointmentButton = wrapper.find(components.Button).at(0)
- expect(addNewAppointmentButton).toHaveLength(1)
- expect(addNewAppointmentButton.text().trim()).toEqual('scheduling.appointments.new')
+ expect(
+ await screen.findByRole('button', { name: /scheduling.appointments.new/i }),
+ ).toBeInTheDocument()
})
it('should navigate to new appointment page', async () => {
- const { wrapper } = await setup()
+ setup()
- await act(async () => {
- await wrapper.find(components.Button).at(0).simulate('click')
- })
- wrapper.update()
+ userEvent.click(await screen.findByRole('button', { name: /scheduling.appointments.new/i }))
expect(history.location.pathname).toEqual('/appointments/new')
})