Merge pull request #273 from codyarose/codyarose_RemoveQuerySelectors

Refactor to remove querySelector calls where possible

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 () => {

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'
@@ -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,23 +52,20 @@ 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()
   })
 
   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}`)

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

src/__tests__/patients/care-goals/CareGoalTab.test.tsx

@@ -65,8 +65,8 @@ 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', [])
 
+    // wait for spinner to disappear
     await waitForElementToBeRemoved(container.querySelector('.css-0'))
-
     expect(screen.queryByRole('button', { name: /patient.careGoal.new/i })).not.toBeInTheDocument()
   })
 

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

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

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 () => {

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(() => {

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

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

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

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

src/__tests__/patients/related-persons/RelatedPersonsTab.test.tsx

@@ -79,6 +79,7 @@ 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] })
 
+      // wait for spinner to disappear
       await waitForElementToBeRemoved(container.querySelector(`[class^='css']`))
 
       expect(

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'
 
@@ -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 () => {

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', () => {

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]