diff --git a/src/__tests__/patients/labs/LabsList.test.tsx b/src/__tests__/patients/labs/LabsList.test.tsx index 959ddf8edb..e59c225922 100644 --- a/src/__tests__/patients/labs/LabsList.test.tsx +++ b/src/__tests__/patients/labs/LabsList.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, within } 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' @@ -25,16 +23,16 @@ const expectedLabs = [ rev: '1', patient: '1234', requestedOn: new Date(2020, 1, 1, 9, 0, 0, 0).toISOString(), - requestedBy: 'someone', - type: 'lab type', + requestedBy: 'Dr Strange', + type: 'Blood type', }, { id: '123', rev: '1', patient: '1234', requestedOn: new Date(2020, 1, 1, 9, 0, 0, 0).toISOString(), - requestedBy: 'someone', - type: 'lab type', + requestedBy: 'Dr Meredith Gray', + type: 'another type ', }, ] as Lab[] @@ -48,71 +46,79 @@ const setup = async (patient = expectedPatient, labs = expectedLabs) => { jest.spyOn(PatientRepository, 'getLabs').mockResolvedValue(labs) store = mockStore({ patient, labs: { labs } } as any) - let wrapper: any - - await act(async () => { - wrapper = await mount( - - - - - , - ) - }) - - wrapper.update() - - return { wrapper: wrapper as ReactWrapper } + return render( + + + + + , + ) } -describe('LabsList', () => { - describe('Table', () => { - it('should render a list of labs', async () => { - const { wrapper } = await setup() - - const table = wrapper.find(Table) - - const columns = table.prop('columns') - const actions = table.prop('actions') as any +describe('Table', () => { + it('should render a list of labs', async () => { + await setup() + await waitFor(() => { + expect(screen.getByRole('table')).toBeInTheDocument() + }) + expect(screen.getAllByRole('columnheader')).toHaveLength(4) + + expect( + screen.getByRole('columnheader', { + name: /labs\.lab\.type/i, + }), + ).toBeInTheDocument() + + expect( + screen.getByRole('columnheader', { + name: /labs\.lab\.requestedon/i, + }), + ).toBeInTheDocument() + + expect( + screen.getByRole('columnheader', { + name: /labs\.lab\.status/i, + }), + ).toBeInTheDocument() + + expect( + screen.getByRole('columnheader', { + name: /actions\.label/i, + }), + ).toBeInTheDocument() + }) + it('should navigate to lab view on lab click', async () => { + let row: any + await setup() - expect(table).toHaveLength(1) + await waitFor(() => { + row = screen.getByRole('row', { + name: /blood type 2020-02-01 09:00 am actions\.view/i, + }) + }) - expect(columns[0]).toEqual(expect.objectContaining({ label: 'labs.lab.type', key: 'type' })) - expect(columns[1]).toEqual( - expect.objectContaining({ label: 'labs.lab.requestedOn', key: 'requestedOn' }), - ) - expect(columns[2]).toEqual( - expect.objectContaining({ - label: 'labs.lab.status', - key: 'status', + await waitFor(() => + userEvent.click( + within(row).getByRole('button', { + name: /actions\.view/i, }), - ) - expect(actions[0]).toEqual(expect.objectContaining({ label: 'actions.view' })) - expect(table.prop('actionsHeaderText')).toEqual('actions.label') - expect(table.prop('data')).toEqual(expectedLabs) - }) + ), + ) - it('should navigate to lab view on lab click', async () => { - const { wrapper } = await setup() - const tr = wrapper.find('tr').at(1) + expect(history.location.pathname).toEqual('/labs/456') + }) +}) - act(() => { - const onClick = tr.find('button').at(0).prop('onClick') as any - onClick({ stopPropagation: jest.fn() }) - }) +describe('no patient labs', () => { + it('should render a warning message if there are no labs', async () => { + await setup(expectedPatient, []) - expect(history.location.pathname).toEqual('/labs/456') + await waitFor(() => { + expect(screen.getByText(/patient\.labs\.warning\.noLabs/i)).toBeInTheDocument() }) - }) - - describe('no patient labs', () => { - it('should render a warning message if there are no labs', async () => { - const { wrapper } = await setup(expectedPatient, []) - const alert = wrapper.find(components.Alert) - expect(alert).toHaveLength(1) - expect(alert.prop('title')).toEqual('patient.labs.warning.noLabs') - expect(alert.prop('message')).toEqual('patient.labs.noLabsMessage') + await waitFor(() => { + expect(screen.getByText(/patient\.labs\.noLabsMessage/i)) }) }) })