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') })