add tests for visitTable, and add aria labels to visit table component

CodeForPhilly · Dec 29, 2020 · a3a54ad · a3a54ad
1 parent c98be2c
commit a3a54ad
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 8 deletions.
diff --git a/frontend/src/components/VisitRouter/VisitTable.js b/frontend/src/components/VisitRouter/VisitTable.js
@@ -31,7 +31,7 @@ const VisitTable = ({
     //eslint-disable-next-line react-hooks/exhaustive-deps
   }, [fullName])
 
-  const mockHeaderTitles = [
+  const headerTitles = [
     { title: "Program", mobile: true },
     { title: "Service", mobile: true },
     { title: "Date", mobile: true },
@@ -51,12 +51,12 @@ const VisitTable = ({
           <Paper>
             <Table className={classes.visitTable} aria-label="visits table">
               <PrevPointTableHead
-                headerTitles={mockHeaderTitles}
+                headerTitles={headerTitles}
                 forParticipantTable={false}
               />
               <TableBody>
                 {participantVisits.map(visit => (
-                  <TableRow key={visit.id}>
+                  <TableRow aria-label="visit row" key={visit.id}>
                     <TableCell>
                       <PrevPointCopy>{visit.program.name}</PrevPointCopy>
                     </TableCell>
@@ -80,7 +80,7 @@ const VisitTable = ({
                       <Fab
                         color="primary"
                         size="small"
-                        aria-label="add"
+                        aria-label="get protected visit data"
                         onClick={() => getProtectedVisitData(visit.id)}
                       >
                         <VerifiedUserIcon />

diff --git a/frontend/test/PrevPointTable.test.js b/frontend/test/PrevPointTable.test.js
@@ -4,6 +4,6 @@ import PrevPointTable from "./../src/components/ParticipantTableComponent/PrevPo
 
 describe("<PrevPointTable />", () => {
   it("should render a PrevPointTable component", () => {
-    render(<PrevPointTable participants={[]} />)
+    render(<PrevPointTable participants={[]} headerTitles={[]} />)
   })
 })
diff --git a/frontend/test/VisitTable.test.js b/frontend/test/VisitTable.test.js
@@ -2,7 +2,32 @@ import { render } from "@testing-library/react"
 import React from "react"
 import VisitTable from "../src/components/VisitRouter/VisitTable"
 
+const defaultVisitCount = 5
+function generateMockVisit(index) {
+  return {
+    id: index,
+    created_at: new Date(),
+    program: {
+      name: `program-${index}`,
+    },
+    service: {
+      name: `service-${index}`,
+    },
+  }
+}
+
+function generateMockVisits(visitCount = defaultVisitCount) {
+  const visits = []
+  for (let i = 0; i < visitCount; i++) {
+    visits.push(generateMockVisit(i))
+  }
+
+  return visits
+}
+
 describe("<VisitTable />", () => {
+  const aName = "Kamala Harris"
+
   it("Renders", () => {
     render(
       <VisitTable
@@ -13,16 +38,66 @@ describe("<VisitTable />", () => {
     )
   })
 
-  it("Renders", () => {
-    const aName = "Kamala Harris"
+  it("Displays the participant nane", () => {
+    const { getByText } = render(
+      <VisitTable
+        fullName={aName}
+        getParticipantVisits={() => {}}
+        participantVisits={[]}
+        getProtectedVisitData={() => {}}
+      />
+    )
+
+    expect(getByText(`${aName}'s Previous Visits`)).toBeInTheDocument()
+  })
+
+  it("calls fn passed to getParticipantVisits on mount", () => {
+    const mockVisitsRequest = jest.fn()
 
     render(
       <VisitTable
         fullName={aName}
-        getParticipantVisits={() => {}}
+        getParticipantVisits={mockVisitsRequest}
         participantVisits={[]}
         getProtectedVisitData={() => {}}
       />
     )
+
+    expect(mockVisitsRequest).toHaveBeenCalled()
+  })
+
+  it("displays mock visits", () => {
+    const { getAllByLabelText } = render(
+      <VisitTable
+        fullName={aName}
+        getParticipantVisits={() => {}}
+        participantVisits={generateMockVisits()}
+        getProtectedVisitData={() => {}}
+      />
+    )
+
+    const visitRows = getAllByLabelText("visit row")
+    expect(visitRows.length).toEqual(defaultVisitCount)
+  })
+
+  it("calls getProtectedVisitData with id on click", () => {
+    const mockDataRequest = jest.fn(x => {
+      x
+    })
+    const visitId = 0
+
+    const { getAllByLabelText } = render(
+      <VisitTable
+        fullName={aName}
+        getParticipantVisits={() => {}}
+        participantVisits={generateMockVisits(2)}
+        getProtectedVisitData={x => mockDataRequest(x)}
+      />
+    )
+
+    const icon = getAllByLabelText("get protected visit data")[0]
+    icon.click()
+
+    expect(mockDataRequest).toBeCalledWith(visitId)
   })
 })