Merge pull request #246 from codyarose/codyarose_ViewLabs

test: improve ViewLabs.test
HospitalRun · Jan 10, 2021 · b0a87e1 · b0a87e1
2 parents d7090b4 + f3e9b12
commit b0a87e1
Showing 1 changed file with 47 additions and 46 deletions.
diff --git a/src/__tests__/labs/ViewLabs.test.tsx b/src/__tests__/labs/ViewLabs.test.tsx
@@ -1,4 +1,4 @@
-import { act, render, screen, waitFor } from '@testing-library/react'
+import { render, screen, waitFor } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
 import format from 'date-fns/format'
 import { createMemoryHistory } from 'history'
@@ -41,22 +41,21 @@ const setup = (permissions: Permissions[] = []) => {
     },
   } as any)
 
-  // eslint-disable-next-line react/prop-types
-  const Wrapper: React.FC = ({ children }) => (
-    <Provider store={store}>
-      <Router history={history}>
-        <ButtonBarProvider.ButtonBarProvider>
-          <ButtonToolbar />
-          <titleUtil.TitleProvider>{children}</titleUtil.TitleProvider>
-        </ButtonBarProvider.ButtonBarProvider>
-      </Router>
-    </Provider>
-  )
-
   return {
     expectedLab,
     history,
-    ...render(<ViewLabs />, { wrapper: Wrapper }),
+    ...render(
+      <Provider store={store}>
+        <Router history={history}>
+          <ButtonBarProvider.ButtonBarProvider>
+            <ButtonToolbar />
+            <titleUtil.TitleProvider>
+              <ViewLabs />
+            </titleUtil.TitleProvider>
+          </ButtonBarProvider.ButtonBarProvider>
+        </Router>
+      </Provider>,
+    ),
   }
 }
 
@@ -69,9 +68,9 @@ describe('View Labs', () => {
     it('should display button to add new lab request', async () => {
       setup([Permissions.ViewLab, Permissions.RequestLab])
 
-      await waitFor(() => {
-        expect(screen.getByRole('button', { name: /labs\.requests\.new/i })).toBeInTheDocument()
-      })
+      expect(
+        await screen.findByRole('button', { name: /labs\.requests\.new/i }),
+      ).toBeInTheDocument()
     })
 
     it('should not display button to add new lab request if the user does not have permissions', async () => {
@@ -85,24 +84,20 @@ describe('View Labs', () => {
     it('should render a table with data', async () => {
       const { expectedLab } = setup([Permissions.ViewLabs, Permissions.RequestLab])
 
-      expect(screen.getByRole('columnheader', { name: /labs.lab.code/i })).toBeInTheDocument()
-      expect(screen.getByRole('columnheader', { name: /labs.lab.type/i })).toBeInTheDocument()
-      expect(
-        screen.getByRole('columnheader', { name: /labs.lab.requestedOn/i }),
-      ).toBeInTheDocument()
-
-      expect(
-        await screen.findByRole('columnheader', { name: /labs.lab.status/i }),
-      ).toBeInTheDocument()
+      const headers = await screen.findAllByRole('columnheader')
+      const cells = screen.getAllByRole('cell')
+
+      expect(headers[0]).toHaveTextContent(/labs\.lab\.code/i)
+      expect(headers[1]).toHaveTextContent(/labs\.lab\.type/i)
+      expect(headers[2]).toHaveTextContent(/labs\.lab\.requestedOn/i)
+      expect(headers[3]).toHaveTextContent(/labs\.lab\.status/i)
+      expect(cells[0]).toHaveTextContent(expectedLab.code)
+      expect(cells[1]).toHaveTextContent(expectedLab.type)
+      expect(cells[2]).toHaveTextContent(
+        format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
+      )
+      expect(cells[3]).toHaveTextContent(expectedLab.status)
       expect(screen.getByRole('button', { name: /actions.view/i })).toBeInTheDocument()
-      expect(screen.getByRole('cell', { name: expectedLab.code })).toBeInTheDocument()
-      expect(screen.getByRole('cell', { name: expectedLab.type })).toBeInTheDocument()
-      expect(screen.getByRole('cell', { name: expectedLab.status })).toBeInTheDocument()
-      expect(
-        screen.getByRole('cell', {
-          name: format(new Date(expectedLab.requestedOn), 'yyyy-MM-dd hh:mm a'),
-        }),
-      ).toBeInTheDocument()
     })
 
     it('should navigate to the lab when the view button is clicked', async () => {
@@ -125,30 +120,36 @@ describe('View Labs', () => {
         screen.getByRole('combobox'),
         `{selectall}{backspace}${expectedStatus}{arrowdown}{enter}`,
       )
-
-      expect(LabRepository.search).toHaveBeenCalledTimes(2)
-      expect(LabRepository.search).toHaveBeenCalledWith(
-        expect.objectContaining({ status: expectedStatus }),
-      )
+      expect(screen.getByRole('combobox')).toHaveValue('labs.status.requested')
     })
   })
 
   describe('search functionality', () => {
     it('should search for labs after the search text has not changed for 500 milliseconds', async () => {
+      const expectedLab2 = {
+        code: 'L-5678',
+        id: '5678',
+        type: 'another type',
+        patient: 'patientIdB',
+        status: 'requested',
+        requestedOn: '2020-03-30T04:43:20.102Z',
+      } as Lab
+      const expectedSearchText = 'another'
+      const { expectedLab } = setup([Permissions.ViewLabs, Permissions.RequestLab])
+
+      jest.spyOn(LabRepository, 'findAll').mockResolvedValue([expectedLab2])
       jest.useFakeTimers()
-      setup([Permissions.ViewLabs])
 
-      const expectedSearchText = 'search text'
+      expect(await screen.findByRole('cell', { name: expectedLab.code })).toBeInTheDocument()
+
       userEvent.type(screen.getByRole('textbox', { name: /labs.search/i }), expectedSearchText)
 
-      act(() => {
+      await waitFor(() => {
         jest.advanceTimersByTime(500)
       })
 
-      expect(LabRepository.search).toHaveBeenCalledTimes(1)
-      expect(LabRepository.search).toHaveBeenCalledWith(
-        expect.objectContaining({ text: expectedSearchText }),
-      )
+      expect(await screen.findByText(/another/i)).toBeInTheDocument()
+      expect(screen.queryByRole('cell', { name: expectedLab.code })).not.toBeInTheDocument()
     })
   })
 })