Add tests to check if the audit logs are showing

BrunoQuaresma · BrunoQuaresma · commit 1b0ed592aa7c · 2022-08-31T18:31:58.000Z
diff --git a/site/src/api/api.ts b/site/src/api/api.ts
@@ -1,6 +1,5 @@
 import axios, { AxiosRequestHeaders } from "axios"
 import dayjs from "dayjs"
-import { MockAuditLog } from "testHelpers/entities"
 import * as Types from "./types"
 import { WorkspaceBuildTransition } from "./types"
 import * as TypesGen from "./typesGenerated"
@@ -386,8 +385,6 @@ export const getEntitlements = async (): Promise<TypesGen.Entitlements> => {
 }
 
 export const getAuditLogs = async (): Promise<TypesGen.AuditLog[]> => {
-  return [MockAuditLog]
-  // TODO: Uncomment this to get the data from the API instead of mock
-  // const response = await axios.get("/api/v2/audit")
-  // return response.data
+  const response = await axios.get("/api/v2/audit")
+  return response.data
 }
diff --git a/site/src/components/AuditLogRow/AuditLogRow.tsx b/site/src/components/AuditLogRow/AuditLogRow.tsx
@@ -109,7 +109,11 @@ export const AuditLogRow: React.FC<AuditLogRowProps> = ({
   }
 
   return (
-    <TableRow key={auditLog.id} hover={shouldDisplayDiff}>
+    <TableRow
+      key={auditLog.id}
+      hover={shouldDisplayDiff}
+      data-testid={`audit-log-row-${auditLog.id}`}
+    >
       <TableCell className={styles.auditLogCell}>
         <Stack
           style={{ cursor: shouldDisplayDiff ? "pointer" : undefined }}
diff --git a/site/src/pages/AuditPage/AuditPage.test.tsx b/site/src/pages/AuditPage/AuditPage.test.tsx
@@ -2,11 +2,18 @@ import { fireEvent, screen } from "@testing-library/react"
 import { Language as CopyButtonLanguage } from "components/CopyButton/CopyButton"
 import { Language as AuditTooltipLanguage } from "components/Tooltips/AuditHelpTooltip"
 import { Language as TooltipLanguage } from "components/Tooltips/HelpTooltip/HelpTooltip"
-import { render } from "testHelpers/renderHelpers"
+import { MockAuditLog, MockAuditLog2, render } from "testHelpers/renderHelpers"
+import * as CreateDayString from "util/createDayString"
 import AuditPage from "./AuditPage"
 import { Language as AuditViewLanguage } from "./AuditPageView"
 
 describe("AuditPage", () => {
+  beforeEach(() => {
+    // Mocking the dayjs module within the createDayString file
+    const mock = jest.spyOn(CreateDayString, "createDayString")
+    mock.mockImplementation(() => "a minute ago")
+  })
+
   it("renders a page with a title and subtitle", async () => {
     // When
     render(<AuditPage />)
@@ -29,4 +36,13 @@ describe("AuditPage", () => {
     fireEvent.mouseOver(copyIcon)
     expect(await screen.findByText(AuditViewLanguage.tooltipTitle)).toBeInTheDocument()
   })
+
+  it("shows the audit logs", async () => {
+    // When
+    render(<AuditPage />)
+
+    // Then
+    await screen.findByTestId(`audit-log-row-${MockAuditLog.id}`)
+    screen.getByTestId(`audit-log-row-${MockAuditLog2.id}`)
+  })
 })
diff --git a/site/src/testHelpers/entities.ts b/site/src/testHelpers/entities.ts
@@ -706,6 +706,7 @@ export const MockAuditLog: TypesGen.AuditLog = {
 
 export const MockAuditLog2: TypesGen.AuditLog = {
   ...MockAuditLog,
+  id: "53bded77-7b9d-4e82-8771-991a34d759f9",
   action: "write",
   diff: {
     workspace_name: {
diff --git a/site/src/testHelpers/handlers.ts b/site/src/testHelpers/handlers.ts
@@ -150,6 +150,6 @@ export const handlers = [
 
   // Audit
   rest.get("/api/v2/audit", (req, res, ctx) => {
-    return res(ctx.status(200), ctx.json(M.MockAuditLog))
+    return res(ctx.status(200), ctx.json([M.MockAuditLog, M.MockAuditLog2]))
   }),
 ]
diff --git a/site/src/xServices/audit/auditXService.ts b/site/src/xServices/audit/auditXService.ts
@@ -15,6 +15,7 @@ export const auditMachine = createMachine(
       },
     },
     tsTypes: {} as import("./auditXService.typegen").Typegen0,
+    initial: "loadingLogs",
     states: {
       loadingLogs: {
         invoke: {

Original file line number	Diff line number	Diff line change
`@@ -150,6 +150,6 @@ export const handlers = [`
`150`	`150`
`151`	`151`	`// Audit`
`152`	`152`	`rest.get("/api/v2/audit", (req, res, ctx) => {`
`153`		`- return res(ctx.status(200), ctx.json(M.MockAuditLog))`
	`153`	`+ return res(ctx.status(200), ctx.json([M.MockAuditLog, M.MockAuditLog2]))`
`154`	`154`	`}),`
`155`	`155`	`]`