From 7fb20b0c0fd052e5a4ae636ddbc2bf42e963d1e0 Mon Sep 17 00:00:00 2001 From: codyarose Date: Wed, 13 Jan 2021 23:20:31 -0600 Subject: [PATCH 1/5] test: add form labels and refactor queries --- .../patients/visits/ViewVisit.test.tsx | 20 +++++++------- .../appointments/new/NewAppointment.test.tsx | 26 +++++++++---------- src/patients/visits/VisitForm.tsx | 2 +- .../appointments/new/NewAppointment.tsx | 2 +- 4 files changed, 23 insertions(+), 27 deletions(-) diff --git a/src/__tests__/patients/visits/ViewVisit.test.tsx b/src/__tests__/patients/visits/ViewVisit.test.tsx index edde1c8e7c..bcb911759d 100644 --- a/src/__tests__/patients/visits/ViewVisit.test.tsx +++ b/src/__tests__/patients/visits/ViewVisit.test.tsx @@ -1,4 +1,4 @@ -import { screen, render, waitFor } from '@testing-library/react' +import { screen, render, waitFor, within } from '@testing-library/react' import format from 'date-fns/format' import { createMemoryHistory } from 'history' import React from 'react' @@ -47,18 +47,16 @@ describe('View Visit', () => { }) it('should render a visit form with the correct data', async () => { - const { container } = setup() + setup() - await waitFor(() => { - expect(container.querySelector('form')).toBeInTheDocument() - }) + expect(await screen.findByLabelText('visit form')).toBeInTheDocument() - const startDateTimePicker = container.querySelectorAll( - '.react-datepicker__input-container input', - )[0] - const endDateTimePicker = container.querySelectorAll( - '.react-datepicker__input-container input', - )[1] + const startDateTimePicker = within(screen.getByTestId('startDateTimeDateTimePicker')).getByRole( + 'textbox', + ) + const endDateTimePicker = within(screen.getByTestId('endDateTimeDateTimePicker')).getByRole( + 'textbox', + ) const typeInput = screen.getByPlaceholderText(/patient.visits.type/i) const statusSelector = screen.getByPlaceholderText('-- Choose --') const reasonInput = screen.getAllByRole('textbox', { hidden: false })[3] diff --git a/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx b/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx index f81329819b..f64fcc3f22 100644 --- a/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx +++ b/src/__tests__/scheduling/appointments/new/NewAppointment.test.tsx @@ -1,5 +1,5 @@ import { Toaster } from '@hospitalrun/components' -import { render, screen, waitFor, fireEvent } from '@testing-library/react' +import { render, screen, waitFor, fireEvent, within } from '@testing-library/react' import userEvent from '@testing-library/user-event' import addMinutes from 'date-fns/addMinutes' import roundToNearestMinutes from 'date-fns/roundToNearestMinutes' @@ -78,11 +78,9 @@ describe('New Appointment', () => { describe('layout', () => { it('should render an Appointment Detail Component', async () => { - const { container } = setup() + setup() - await waitFor(() => { - expect(container.querySelector('form')).toBeInTheDocument() - }) + expect(await screen.findByLabelText('new appointment form')).toBeInTheDocument() }) }) @@ -122,7 +120,7 @@ describe('New Appointment', () => { }) it('should have error when error saving with end time earlier than start time', async () => { - const { container } = setup() + setup() const expectedError = { message: 'scheduling.appointment.errors.createAppointmentError', @@ -142,10 +140,10 @@ describe('New Appointment', () => { screen.getByPlaceholderText(/scheduling\.appointment\.patient/i), expectedAppointment.patient, ) - fireEvent.change(container.querySelectorAll('.react-datepicker__input-container input')[0], { + fireEvent.change(within(screen.getByTestId('startDateDateTimePicker')).getByRole('textbox'), { target: { value: expectedAppointment.startDateTime }, }) - fireEvent.change(container.querySelectorAll('.react-datepicker__input-container input')[1], { + fireEvent.change(within(screen.getByTestId('endDateDateTimePicker')).getByRole('textbox'), { target: { value: expectedAppointment.endDateTime }, }) userEvent.click(screen.getByText(/scheduling.appointments.createAppointment/i)) @@ -154,15 +152,15 @@ describe('New Appointment', () => { expect(screen.getByPlaceholderText(/scheduling\.appointment\.patient/i)).toHaveClass( 'is-invalid', ) - expect(container.querySelectorAll('.react-datepicker__input-container input')[0]).toHaveClass( - 'is-invalid', - ) + expect( + within(screen.getByTestId('startDateDateTimePicker')).getByRole('textbox'), + ).toHaveClass('is-invalid') expect(screen.getByText(expectedError.startDateTime)).toBeInTheDocument() expect(AppointmentRepository.save).toHaveBeenCalledTimes(0) }) it('should call AppointmentRepo.save when save button is clicked', async () => { - const { container } = setup() + setup() const expectedAppointment = { patient: expectedPatient.fullName, @@ -184,11 +182,11 @@ describe('New Appointment', () => { await screen.findByText(`${expectedPatient.fullName} (${expectedPatient.code})`), ) - fireEvent.change(container.querySelectorAll('.react-datepicker__input-container input')[0], { + fireEvent.change(within(screen.getByTestId('startDateDateTimePicker')).getByRole('textbox'), { target: { value: expectedAppointment.startDateTime }, }) - fireEvent.change(container.querySelectorAll('.react-datepicker__input-container input')[1], { + fireEvent.change(within(screen.getByTestId('endDateDateTimePicker')).getByRole('textbox'), { target: { value: expectedAppointment.endDateTime }, }) diff --git a/src/patients/visits/VisitForm.tsx b/src/patients/visits/VisitForm.tsx index ebc38b2424..24869b80f0 100644 --- a/src/patients/visits/VisitForm.tsx +++ b/src/patients/visits/VisitForm.tsx @@ -47,7 +47,7 @@ const VisitForm = (props: Props) => { Object.values(VisitStatus).map((v) => ({ label: v, value: v })) || [] return ( -
+ {visitError?.message && } diff --git a/src/scheduling/appointments/new/NewAppointment.tsx b/src/scheduling/appointments/new/NewAppointment.tsx index 75152b40f1..82de8823a8 100644 --- a/src/scheduling/appointments/new/NewAppointment.tsx +++ b/src/scheduling/appointments/new/NewAppointment.tsx @@ -102,7 +102,7 @@ const NewAppointment = () => { return (
- + Date: Wed, 13 Jan 2021 23:21:26 -0600 Subject: [PATCH 2/5] test: refactor sidebar active link queries --- .../shared/components/Sidebar.test.tsx | 84 +++++++++---------- 1 file changed, 38 insertions(+), 46 deletions(-) diff --git a/src/__tests__/shared/components/Sidebar.test.tsx b/src/__tests__/shared/components/Sidebar.test.tsx index 4f253bba3f..83da00a671 100644 --- a/src/__tests__/shared/components/Sidebar.test.tsx +++ b/src/__tests__/shared/components/Sidebar.test.tsx @@ -50,10 +50,8 @@ describe('Sidebar', () => { }) it('should be active when the current path is /', () => { - const { container } = setup('/') - const activeElement = container.querySelector('.active') - - expect(activeElement).toBeInTheDocument() + setup('/') + expect(screen.getByText(/dashboard\.label/i)).toHaveClass('active') }) it('should navigate to / when the dashboard link is clicked', () => { @@ -97,9 +95,9 @@ describe('Sidebar', () => { }) it('main patients link should be active when the current path is /patients', () => { - const { container } = setup('/patients') + setup('/patients') - expect(container.querySelector('.active')).toHaveTextContent(/patients.label/i) + expect(screen.getByText(/patients\.label/i)).toHaveClass('active') }) it('should navigate to /patients when the patients main link is clicked', () => { @@ -111,9 +109,9 @@ describe('Sidebar', () => { }) it('new patient should be active when the current path is /patients/new', () => { - const { container } = setup('/patients/new') + setup('/patients/new') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/patients.newPatient/i) + expect(screen.getByText(/patients\.newPatient/i)).toHaveClass('active') }) it('should navigate to /patients/new when the patients new link is clicked', () => { @@ -124,9 +122,9 @@ describe('Sidebar', () => { }) it('patients list link should be active when the current path is /patients', () => { - const { container } = setup('/patients') + setup('/patients') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/patients.patientsList/i) + expect(screen.getByText(/patients\.patientsList/i)).toHaveClass('active') }) it('should navigate to /patients when the patients list link is clicked', () => { @@ -169,9 +167,9 @@ describe('Sidebar', () => { }) it('main scheduling link should be active when the current path is /appointments', () => { - const { container } = setup('/appointments') + setup('/appointments') - expect(container.querySelector('.active')).toHaveTextContent(/scheduling.label/i) + expect(screen.getByText(/scheduling\.label/i)).toHaveClass('active') }) it('should navigate to /appointments when the main scheduling link is clicked', () => { @@ -183,9 +181,9 @@ describe('Sidebar', () => { }) it('new appointment link should be active when the current path is /appointments/new', () => { - const { container } = setup('/appointments/new') + setup('/appointments/new') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/appointments.new/i) + expect(screen.getByText(/appointments\.new/i)).toHaveClass('active') }) it('should navigate to /appointments/new when the new appointment link is clicked', () => { @@ -196,11 +194,9 @@ describe('Sidebar', () => { }) it('appointments schedule link should be active when the current path is /appointments', () => { - const { container } = setup('/appointments') + setup('/appointments') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent( - /scheduling.appointments.schedule/i, - ) + expect(screen.getByText(/scheduling\.appointments\.schedule/i)).toHaveClass('active') }) it('should navigate to /appointments when the appointments schedule link is clicked', () => { @@ -244,9 +240,9 @@ describe('Sidebar', () => { }) it('main labs link should be active when the current path is /labs', () => { - const { container } = setup('/labs') + setup('/labs') - expect(container.querySelector('.active')).toHaveTextContent(/labs.label/i) + expect(screen.getByText(/labs\.label/i)).toHaveClass('active') }) it('should navigate to /labs when the main lab link is clicked', () => { @@ -258,9 +254,9 @@ describe('Sidebar', () => { }) it('new lab request link should be active when the current path is /labs/new', () => { - const { container } = setup('/labs/new') + setup('/labs/new') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/labs.requests.new/i) + expect(screen.getByText(/labs\.requests\.new/i)).toHaveClass('active') }) it('should navigate to /labs/new when the new labs link is clicked', () => { @@ -272,9 +268,9 @@ describe('Sidebar', () => { }) it('labs list link should be active when the current path is /labs', () => { - const { container } = setup('/labs') + setup('/labs') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/labs.requests.label/i) + expect(screen.getByText(/labs\.requests\.label/i)).toHaveClass('active') }) it('should navigate to /labs when the labs list link is clicked', () => { @@ -336,9 +332,9 @@ describe('Sidebar', () => { }) it('main incidents link should be active when the current path is /incidents', () => { - const { container } = setup('/incidents') + setup('/incidents') - expect(container.querySelector('.active')).toHaveTextContent(/incidents.labe/i) + expect(screen.getByText(/incidents\.labe/i)).toHaveClass('active') }) it('should navigate to /incidents when the main incident link is clicked', () => { @@ -350,9 +346,9 @@ describe('Sidebar', () => { }) it('new incident report link should be active when the current path is /incidents/new', () => { - const { container } = setup('/incidents/new') + setup('/incidents/new') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/incidents.reports.new/i) + expect(screen.getByText(/incidents\.reports\.new/i)).toHaveClass('active') }) it('should navigate to /incidents/new when the new incidents link is clicked', () => { @@ -372,9 +368,9 @@ describe('Sidebar', () => { }) it('incidents list link should be active when the current path is /incidents', () => { - const { container } = setup('/incidents') + setup('/incidents') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/incidents.reports.label/i) + expect(screen.getByText(/incidents\.reports\.label/i)).toHaveClass('active') }) it('should navigate to /incidents/new when the incidents list link is clicked', () => { @@ -418,9 +414,9 @@ describe('Sidebar', () => { }) it('main imagings link should be active when the current path is /imagings', () => { - const { container } = setup('/imagings') + setup('/imagings') - expect(container.querySelector('.active')).toHaveTextContent(/imagings.label/i) + expect(screen.getByText(/imagings\.label/i)).toHaveClass('active') }) it('should navigate to /imaging when the main imagings link is clicked', () => { @@ -432,9 +428,9 @@ describe('Sidebar', () => { }) it('new imaging request link should be active when the current path is /imagings/new', () => { - const { container } = setup('/imagings/new') + setup('/imagings/new') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/imagings.requests.new/i) + expect(screen.getByText(/imagings\.requests\.new/i)).toHaveClass('active') }) it('should navigate to /imaging/new when the new imaging link is clicked', () => { @@ -446,9 +442,9 @@ describe('Sidebar', () => { }) it('imagings list link should be active when the current path is /imagings', () => { - const { container } = setup('/imagings') + setup('/imagings') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent(/imagings.requests.label/) + expect(screen.getByText(/imagings\.requests\.label/i)).toHaveClass('active') }) it('should navigate to /imaging when the imagings list link is clicked', () => { @@ -492,9 +488,9 @@ describe('Sidebar', () => { }) it('main medications link should be active when the current path is /medications', () => { - const { container } = setup('/medications') + setup('/medications') - expect(container.querySelector('.active')).toHaveTextContent(/medications.label/i) + expect(screen.getByText(/medications\.label/i)).toHaveClass('active') }) it('should navigate to /medications when the main lab link is clicked', () => { @@ -506,11 +502,9 @@ describe('Sidebar', () => { }) it('new lab request link should be active when the current path is /medications/new', () => { - const { container } = setup('/medications/new') + setup('/medications/new') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent( - /medications.requests.new/i, - ) + expect(screen.getByText(/medications\.requests\.new/i)).toHaveClass('active') }) it('should navigate to /medications/new when the new medications link is clicked', () => { @@ -521,11 +515,9 @@ describe('Sidebar', () => { }) it('medications list link should be active when the current path is /medications', () => { - const { container } = setup('/medications') + setup('/medications') - expect(container.querySelectorAll('.active')[1]).toHaveTextContent( - /medications.requests.label/i, - ) + expect(screen.getByText(/medications\.requests\.label/i)).toHaveClass('active') }) it('should navigate to /medications when the medications list link is clicked', () => { From 4860ebbd106ae0e71182f5b39736add2a5e17dfa Mon Sep 17 00:00:00 2001 From: codyarose Date: Wed, 13 Jan 2021 23:21:49 -0600 Subject: [PATCH 3/5] test: refactor to remove querySelector calls --- .../medications/ViewMedication.test.tsx | 8 +++---- .../search/MedicationRequestTable.test.tsx | 21 +++++++------------ .../search/ViewMedications.test.tsx | 13 +++++------- .../patients/care-goals/CareGoalTab.test.tsx | 5 ++--- .../care-goals/CareGoalTable.test.tsx | 18 ++++++++-------- .../care-goals/ViewCareGoals.test.tsx | 9 ++++---- .../patients/care-plans/CarePlanTab.test.tsx | 6 ++---- .../care-plans/CarePlanTable.test.tsx | 7 ++----- .../patients/care-plans/ViewCarePlan.test.tsx | 8 +++---- .../care-plans/ViewCarePlans.test.tsx | 8 +++---- src/__tests__/patients/labs/Labs.test.tsx | 8 +++---- .../patients/notes/NewNoteModal.test.tsx | 6 +++--- .../RelatedPersonsTab.test.tsx | 5 ++--- .../search/ViewPatientsTable.test.tsx | 5 ++--- .../patients/visits/AddVisitModal.test.tsx | 2 +- .../view/ViewAppointment.test.tsx | 8 +++---- 16 files changed, 57 insertions(+), 80 deletions(-) diff --git a/src/__tests__/medications/ViewMedication.test.tsx b/src/__tests__/medications/ViewMedication.test.tsx index 523719497f..66e3f9c057 100644 --- a/src/__tests__/medications/ViewMedication.test.tsx +++ b/src/__tests__/medications/ViewMedication.test.tsx @@ -116,11 +116,11 @@ describe('View Medication', () => { }) it('should not display the canceled date if the medication is not canceled', async () => { - const { container } = setup({} as Medication, [Permissions.ViewMedication]) + setup({} as Medication, [Permissions.ViewMedication]) - await waitFor(() => { - expect(container.querySelector('.canceled-on')).not.toBeInTheDocument() - }) + expect( + screen.queryByRole('heading', { name: /medications\.medication\.canceledOn/i }), + ).not.toBeInTheDocument() }) it('should display the notes in the notes text field', async () => { diff --git a/src/__tests__/medications/search/MedicationRequestTable.test.tsx b/src/__tests__/medications/search/MedicationRequestTable.test.tsx index 79ba71ff2c..00526a4d46 100644 --- a/src/__tests__/medications/search/MedicationRequestTable.test.tsx +++ b/src/__tests__/medications/search/MedicationRequestTable.test.tsx @@ -29,13 +29,11 @@ describe('Medication Request Table', () => { } it('should render a table with the correct columns', async () => { - const { container } = setup() + setup() - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + expect(await screen.findByRole('table')).toBeInTheDocument() - const columns = container.querySelectorAll('th') + const columns = screen.getAllByRole('columnheader') expect(columns[0]).toHaveTextContent(/medications.medication.medication/i) expect(columns[1]).toHaveTextContent(/medications.medication.priority/i) @@ -54,11 +52,9 @@ describe('Medication Request Table', () => { status: expectedSearchRequest.status, } as Medication, ] - const { container } = setup(expectedSearchRequest, expectedMedicationRequests) + setup(expectedSearchRequest, expectedMedicationRequests) - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + expect(await screen.findByRole('table')).toBeInTheDocument() expect(screen.getByText(expectedSearchRequest.text)).toBeInTheDocument() expect(screen.getByText(expectedSearchRequest.status)).toBeInTheDocument() }) @@ -66,11 +62,10 @@ describe('Medication Request Table', () => { it('should navigate to the medication when the view button is clicked', async () => { const expectedSearchRequest: MedicationSearchRequest = { text: 'someText', status: 'draft' } const expectedMedicationRequests: Medication[] = [{ id: 'someId' } as Medication] - const { container, history } = setup(expectedSearchRequest, expectedMedicationRequests) + const { history } = setup(expectedSearchRequest, expectedMedicationRequests) + + expect(await screen.findByRole('table')).toBeInTheDocument() - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) userEvent.click(screen.getByRole('button', { name: /actions.view/i })) expect(history.location.pathname).toBe(`/medications/${expectedMedicationRequests[0].id}`) diff --git a/src/__tests__/medications/search/ViewMedications.test.tsx b/src/__tests__/medications/search/ViewMedications.test.tsx index 92db6d6d66..6a973c6e26 100644 --- a/src/__tests__/medications/search/ViewMedications.test.tsx +++ b/src/__tests__/medications/search/ViewMedications.test.tsx @@ -79,10 +79,9 @@ describe('View Medications', () => { describe('table', () => { it('should render a table with data with the default search', async () => { - const { container } = await setup({} as Medication, [Permissions.ViewMedications]) - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + setup({} as Medication, [Permissions.ViewMedications]) + + expect(await screen.findByRole('table')).toBeInTheDocument() expect(screen.getByLabelText(/medications\.search/i)).toHaveDisplayValue('') }) }) @@ -108,15 +107,13 @@ describe('View Medications', () => { status: expectedSearchRequest.status, } as Medication, ] - const { container } = await setup( + setup( { medication: expectedSearchRequest.text } as Medication, [], expectedMedicationRequests, ) userEvent.type(screen.getByLabelText(/medications\.search/i), expectedSearchRequest.text) - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + expect(await screen.findByRole('table')).toBeInTheDocument() expect(screen.getByText(expectedSearchRequest.text)).toBeInTheDocument() }) diff --git a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx index 1d36bc43af..8137794b48 100644 --- a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx +++ b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx @@ -63,10 +63,9 @@ const setup = ( describe('Care Goals Tab', () => { it('should not render add care goal button if user does not have permissions', async () => { - const { container } = setup('/patients/123/care-goals', []) - - await waitForElementToBeRemoved(container.querySelector('.css-0')) + setup('/patients/123/care-goals', []) + expect(await screen.findByRole('table')).toBeInTheDocument() expect(screen.queryByRole('button', { name: /patient.careGoal.new/i })).not.toBeInTheDocument() }) diff --git a/src/__tests__/patients/care-goals/CareGoalTable.test.tsx b/src/__tests__/patients/care-goals/CareGoalTable.test.tsx index 2b2ead4d3a..12981b648f 100644 --- a/src/__tests__/patients/care-goals/CareGoalTable.test.tsx +++ b/src/__tests__/patients/care-goals/CareGoalTable.test.tsx @@ -47,11 +47,11 @@ describe('Care Goal Table', () => { } it('should render a table', async () => { - const { container } = await setup() - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) - const columns = container.querySelectorAll('th') + setup() + + expect(await screen.findByRole('table')).toBeInTheDocument() + + const columns = screen.getAllByRole('columnheader') expect(columns[0]).toHaveTextContent(/patient.careGoal.description/i) expect(columns[1]).toHaveTextContent(/patient.careGoal.startDate/i) expect(columns[2]).toHaveTextContent(/patient.careGoal.dueDate/i) @@ -67,10 +67,10 @@ describe('Care Goal Table', () => { }) it('should navigate to the care goal view when the view details button is clicked', async () => { - const { container, history } = await setup() - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + const { history } = await setup() + + expect(await screen.findByRole('table')).toBeInTheDocument() + userEvent.click(screen.getByRole('button', { name: /actions.view/i })) expect(history.location.pathname).toEqual(`/patients/${patient.id}/care-goals/${careGoal.id}`) }) diff --git a/src/__tests__/patients/care-goals/ViewCareGoals.test.tsx b/src/__tests__/patients/care-goals/ViewCareGoals.test.tsx index 078cd72e6e..d7205f7a2a 100644 --- a/src/__tests__/patients/care-goals/ViewCareGoals.test.tsx +++ b/src/__tests__/patients/care-goals/ViewCareGoals.test.tsx @@ -1,4 +1,4 @@ -import { render, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { createMemoryHistory } from 'history' import React from 'react' import { Route, Router } from 'react-router-dom' @@ -33,9 +33,8 @@ describe('View Care Goals', () => { } it('should render a care goals table', async () => { - const { container } = await setup() - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + setup() + + expect(await screen.findByRole('table')).toBeInTheDocument() }) }) diff --git a/src/__tests__/patients/care-plans/CarePlanTab.test.tsx b/src/__tests__/patients/care-plans/CarePlanTab.test.tsx index 54983722fb..0e08092f73 100644 --- a/src/__tests__/patients/care-plans/CarePlanTab.test.tsx +++ b/src/__tests__/patients/care-plans/CarePlanTab.test.tsx @@ -96,11 +96,9 @@ describe('Care Plan Tab', () => { }) it('should render the care plans table when on /patient/:id/care-plans', async () => { - const { container } = await setup('/patients/123/care-plans', [Permissions.ReadCarePlan]) + setup('/patients/123/care-plans', [Permissions.ReadCarePlan]) - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + expect(await screen.findByRole('table')).toBeInTheDocument() }) it('should render the care plan view when on /patient/:id/care-plans/:carePlanId', async () => { diff --git a/src/__tests__/patients/care-plans/CarePlanTable.test.tsx b/src/__tests__/patients/care-plans/CarePlanTable.test.tsx index 8e19452773..b0672f857b 100644 --- a/src/__tests__/patients/care-plans/CarePlanTable.test.tsx +++ b/src/__tests__/patients/care-plans/CarePlanTable.test.tsx @@ -44,18 +44,15 @@ describe('Care Plan Table', () => { } it('should render a table', async () => { - const { container } = await setup() + setup() await screen.findByRole('table') - const columns = container.querySelectorAll('th') as any + const columns = screen.getAllByRole('columnheader') expect(columns[0]).toHaveTextContent(/patient\.carePlan\.title/i) - expect(columns[1]).toHaveTextContent(/patient\.carePlan\.startDate/i) - expect(columns[2]).toHaveTextContent(/patient\.carePlan\.endDate/i) - expect(columns[3]).toHaveTextContent(/patient\.carePlan\.status/i) await waitFor(() => { diff --git a/src/__tests__/patients/care-plans/ViewCarePlan.test.tsx b/src/__tests__/patients/care-plans/ViewCarePlan.test.tsx index f438086eab..a8cb29bd23 100644 --- a/src/__tests__/patients/care-plans/ViewCarePlan.test.tsx +++ b/src/__tests__/patients/care-plans/ViewCarePlan.test.tsx @@ -1,4 +1,4 @@ -import { render, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { createMemoryHistory } from 'history' import React from 'react' import { Route, Router } from 'react-router-dom' @@ -35,10 +35,8 @@ describe('View Care Plan', () => { } it('should render the care plan title', async () => { - const { container } = await setup() + setup() - await waitFor(() => { - expect(container.querySelectorAll('div').length).toBe(4) - }) + expect(await screen.findByRole('heading', { name: carePlan.title })).toBeInTheDocument() }) }) diff --git a/src/__tests__/patients/care-plans/ViewCarePlans.test.tsx b/src/__tests__/patients/care-plans/ViewCarePlans.test.tsx index 55ec5c3217..44f4e64674 100644 --- a/src/__tests__/patients/care-plans/ViewCarePlans.test.tsx +++ b/src/__tests__/patients/care-plans/ViewCarePlans.test.tsx @@ -1,4 +1,4 @@ -import { render, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { createMemoryHistory } from 'history' import React from 'react' import { Route, Router } from 'react-router-dom' @@ -37,9 +37,7 @@ describe('View Care Plans', () => { } it('should render a care plans table with the patient id', async () => { - const { container } = await setup() - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + setup() + expect(await screen.findByRole('table')).toBeInTheDocument() }) }) diff --git a/src/__tests__/patients/labs/Labs.test.tsx b/src/__tests__/patients/labs/Labs.test.tsx index ed72740aea..29dd39c0bc 100644 --- a/src/__tests__/patients/labs/Labs.test.tsx +++ b/src/__tests__/patients/labs/Labs.test.tsx @@ -1,4 +1,4 @@ -import { render, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import { createMemoryHistory } from 'history' import React from 'react' import { Provider } from 'react-redux' @@ -67,10 +67,8 @@ describe('Labs', () => { describe('patient labs list', () => { it('should render patient labs', async () => { - const { container } = await setup() - await waitFor(() => { - expect(container.querySelector('table')).toBeInTheDocument() - }) + setup() + expect(await screen.findByRole('table')).toBeInTheDocument() }) }) }) diff --git a/src/__tests__/patients/notes/NewNoteModal.test.tsx b/src/__tests__/patients/notes/NewNoteModal.test.tsx index 55a74071d1..dcc7d7eeca 100644 --- a/src/__tests__/patients/notes/NewNoteModal.test.tsx +++ b/src/__tests__/patients/notes/NewNoteModal.test.tsx @@ -1,4 +1,4 @@ -import { screen, render, waitFor } from '@testing-library/react' +import { screen, render, waitFor, within } from '@testing-library/react' import userEvent from '@testing-library/user-event' import React from 'react' @@ -44,14 +44,14 @@ describe('New Note Modal', () => { expect(cancelButton).toHaveClass('btn-danger') expect(successButton).toHaveClass('btn-success') - expect(successButton.querySelector('svg')).toHaveAttribute('data-icon', 'plus') + expect(within(successButton).getByRole('img')).toHaveAttribute('data-icon', 'plus') }) it('should render a notes rich text editor', () => { setup() expect(screen.getByRole('textbox')).toBeInTheDocument() - expect(screen.getByText('patient.note').querySelector('svg')).toHaveAttribute( + expect(within(screen.getByText('patient.note')).getByRole('img')).toHaveAttribute( 'data-icon', 'asterisk', ) diff --git a/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx b/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx index e9aeefb363..b11ac4d95a 100644 --- a/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx +++ b/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx @@ -77,10 +77,9 @@ describe('Related Persons Tab', () => { }) it('should not render a New Related Person button if the user does not have write privileges for a patient', async () => { - const { container } = setup({ permissions: [Permissions.ReadPatients] }) - - await waitForElementToBeRemoved(container.querySelector(`[class^='css']`)) + setup({ permissions: [Permissions.ReadPatients] }) + expect(await screen.findByRole('alert')).toBeInTheDocument() expect( screen.queryByRole('button', { name: /patient\.relatedPersons\.add/i }), ).not.toBeInTheDocument() diff --git a/src/__tests__/patients/search/ViewPatientsTable.test.tsx b/src/__tests__/patients/search/ViewPatientsTable.test.tsx index 1e22809e48..951171bc31 100644 --- a/src/__tests__/patients/search/ViewPatientsTable.test.tsx +++ b/src/__tests__/patients/search/ViewPatientsTable.test.tsx @@ -28,9 +28,8 @@ describe('View Patients Table', () => { }) it('should display no patients exist if total patient count is 0', async () => { - const { container } = setup({ queryString: '' }, []) - await waitForElementToBeRemoved(container.querySelector('.css-0')) - expect(screen.getByRole('heading', { name: /patients.noPatients/i })).toBeInTheDocument() + setup({ queryString: '' }, []) + expect(await screen.findByRole('heading', { name: /patients.noPatients/i })).toBeInTheDocument() }) it('should render a table', async () => { diff --git a/src/__tests__/patients/visits/AddVisitModal.test.tsx b/src/__tests__/patients/visits/AddVisitModal.test.tsx index 8e7a021564..ab9a1d8401 100644 --- a/src/__tests__/patients/visits/AddVisitModal.test.tsx +++ b/src/__tests__/patients/visits/AddVisitModal.test.tsx @@ -41,7 +41,7 @@ describe('Add Visit Modal', () => { it('should render a modal and within a form', () => { setup() - expect(screen.getByRole('dialog').querySelector('form')).toBeInTheDocument() + expect(within(screen.getByRole('dialog')).getByLabelText('visit form')).toBeInTheDocument() }) it('should call the on close function when the cancel button is clicked', () => { diff --git a/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx b/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx index d28fad6a37..f5e7163994 100644 --- a/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx +++ b/src/__tests__/scheduling/appointments/view/ViewAppointment.test.tsx @@ -102,11 +102,11 @@ describe('View Appointment', () => { }) it('button toolbar empty if has only ReadAppointments permission', async () => { - const { container } = setup() + setup() - await waitFor(() => { - expect(container.querySelector(`[class^='css-']`)).not.toBeInTheDocument() - }) + expect( + await screen.findByPlaceholderText(/scheduling\.appointment\.patient/i), + ).toBeInTheDocument() expect(screen.queryAllByRole('button')).toHaveLength(0) }) From 6f3567cba7721632956a1b81388327c01a69fa59 Mon Sep 17 00:00:00 2001 From: codyarose Date: Wed, 13 Jan 2021 23:28:31 -0600 Subject: [PATCH 4/5] test: removed unused imports --- .../medications/search/MedicationRequestTable.test.tsx | 2 +- src/__tests__/medications/search/ViewMedications.test.tsx | 2 +- src/__tests__/patients/care-goals/CareGoalTab.test.tsx | 2 +- src/__tests__/patients/care-goals/CareGoalTable.test.tsx | 2 +- .../patients/related-persons/RelatedPersonsTab.test.tsx | 2 +- src/__tests__/patients/search/ViewPatientsTable.test.tsx | 2 +- 6 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/__tests__/medications/search/MedicationRequestTable.test.tsx b/src/__tests__/medications/search/MedicationRequestTable.test.tsx index 00526a4d46..f14737501d 100644 --- a/src/__tests__/medications/search/MedicationRequestTable.test.tsx +++ b/src/__tests__/medications/search/MedicationRequestTable.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' import React from 'react' diff --git a/src/__tests__/medications/search/ViewMedications.test.tsx b/src/__tests__/medications/search/ViewMedications.test.tsx index 6a973c6e26..2a4ad44b20 100644 --- a/src/__tests__/medications/search/ViewMedications.test.tsx +++ b/src/__tests__/medications/search/ViewMedications.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' import React from 'react' diff --git a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx index 8137794b48..054786e9a1 100644 --- a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx +++ b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react' +import { render, screen, waitFor, within } from '@testing-library/react' import userEvent, { specialChars } from '@testing-library/user-event' import format from 'date-fns/format' import { createMemoryHistory } from 'history' diff --git a/src/__tests__/patients/care-goals/CareGoalTable.test.tsx b/src/__tests__/patients/care-goals/CareGoalTable.test.tsx index 12981b648f..848d59b4ec 100644 --- a/src/__tests__/patients/care-goals/CareGoalTable.test.tsx +++ b/src/__tests__/patients/care-goals/CareGoalTable.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import format from 'date-fns/format' import { createMemoryHistory } from 'history' diff --git a/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx b/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx index b11ac4d95a..c2099b3ab9 100644 --- a/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx +++ b/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitForElementToBeRemoved } from '@testing-library/react' +import { render, screen } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' import React from 'react' diff --git a/src/__tests__/patients/search/ViewPatientsTable.test.tsx b/src/__tests__/patients/search/ViewPatientsTable.test.tsx index 951171bc31..9ad1e2fcce 100644 --- a/src/__tests__/patients/search/ViewPatientsTable.test.tsx +++ b/src/__tests__/patients/search/ViewPatientsTable.test.tsx @@ -1,4 +1,4 @@ -import { screen, render, waitFor, waitForElementToBeRemoved } from '@testing-library/react' +import { screen, render, waitFor } from '@testing-library/react' import format from 'date-fns/format' import React from 'react' From 1ea596f8b581b618d457c4d80bfee8f03213e243 Mon Sep 17 00:00:00 2001 From: codyarose Date: Thu, 14 Jan 2021 00:15:56 -0600 Subject: [PATCH 5/5] test: add back more semantic spinner queries --- src/__tests__/patients/care-goals/CareGoalTab.test.tsx | 7 ++++--- .../patients/related-persons/RelatedPersonsTab.test.tsx | 8 +++++--- 2 files changed, 9 insertions(+), 6 deletions(-) diff --git a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx index 054786e9a1..ec49489bb8 100644 --- a/src/__tests__/patients/care-goals/CareGoalTab.test.tsx +++ b/src/__tests__/patients/care-goals/CareGoalTab.test.tsx @@ -1,4 +1,4 @@ -import { render, screen, waitFor, within } from '@testing-library/react' +import { render, screen, waitFor, waitForElementToBeRemoved, within } from '@testing-library/react' import userEvent, { specialChars } from '@testing-library/user-event' import format from 'date-fns/format' import { createMemoryHistory } from 'history' @@ -63,9 +63,10 @@ const setup = ( describe('Care Goals Tab', () => { it('should not render add care goal button if user does not have permissions', async () => { - setup('/patients/123/care-goals', []) + const { container } = setup('/patients/123/care-goals', []) - expect(await screen.findByRole('table')).toBeInTheDocument() + // wait for spinner to disappear + await waitForElementToBeRemoved(container.querySelector('.css-0')) expect(screen.queryByRole('button', { name: /patient.careGoal.new/i })).not.toBeInTheDocument() }) diff --git a/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx b/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx index c2099b3ab9..ffdb97e62b 100644 --- a/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx +++ b/src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx @@ -1,4 +1,4 @@ -import { render, screen } from '@testing-library/react' +import { render, screen, waitForElementToBeRemoved } from '@testing-library/react' import userEvent from '@testing-library/user-event' import { createMemoryHistory } from 'history' import React from 'react' @@ -77,9 +77,11 @@ describe('Related Persons Tab', () => { }) it('should not render a New Related Person button if the user does not have write privileges for a patient', async () => { - setup({ permissions: [Permissions.ReadPatients] }) + const { container } = setup({ permissions: [Permissions.ReadPatients] }) + + // wait for spinner to disappear + await waitForElementToBeRemoved(container.querySelector(`[class^='css']`)) - expect(await screen.findByRole('alert')).toBeInTheDocument() expect( screen.queryByRole('button', { name: /patient\.relatedPersons\.add/i }), ).not.toBeInTheDocument()