From 4860ebbd106ae0e71182f5b39736add2a5e17dfa Mon Sep 17 00:00:00 2001 From: codyarose Date: Wed, 13 Jan 2021 23:21:49 -0600 Subject: [PATCH] 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) })