Frontend test improvements (#766)

grai-io · Nov 2, 2023 · 01c456d · 01c456d
1 parent 432eb73
commit 01c456d
Show file tree

Hide file tree

Showing 25 changed files with 242 additions and 166 deletions.
diff --git a/grai-frontend/src/components/connections/ConnectionDelete.test.tsx b/grai-frontend/src/components/connections/ConnectionDelete.test.tsx
@@ -14,10 +14,12 @@ const connection = {
   },
 }
 
+const onClose = jest.fn()
+
 test("renders", async () => {
   const user = userEvent.setup()
 
-  render(<ConnectionDelete connection={connection} onClose={() => {}} />)
+  render(<ConnectionDelete connection={connection} onClose={onClose} />)
 
   await act(
     async () =>
@@ -28,7 +30,7 @@ test("renders", async () => {
 test("renders no name", async () => {
   const user = userEvent.setup()
 
-  render(<ConnectionDelete connection={connection} onClose={() => {}} />)
+  render(<ConnectionDelete connection={connection} onClose={onClose} />)
 
   await act(
     async () =>
@@ -39,7 +41,7 @@ test("renders no name", async () => {
 test("delete", async () => {
   const user = userEvent.setup()
 
-  render(<ConnectionDelete connection={connection} onClose={() => {}} />)
+  render(<ConnectionDelete connection={connection} onClose={onClose} />)
 
   await act(
     async () =>
@@ -65,7 +67,7 @@ test("delete one run", async () => {
     },
   }
 
-  render(<ConnectionDelete connection={connection} onClose={() => {}} />)
+  render(<ConnectionDelete connection={connection} onClose={onClose} />)
 
   await act(
     async () =>
@@ -91,7 +93,7 @@ test("delete two runs", async () => {
     },
   }
 
-  render(<ConnectionDelete connection={connection} onClose={() => {}} />)
+  render(<ConnectionDelete connection={connection} onClose={onClose} />)
 
   await act(
     async () =>
@@ -107,7 +109,7 @@ test("delete two runs", async () => {
 test("error", async () => {
   const user = userEvent.setup()
 
-  render(<ConnectionDelete connection={connection} onClose={() => {}} />, {
+  render(<ConnectionDelete connection={connection} onClose={onClose} />, {
     mocks: [
       {
         request: {

diff --git a/grai-frontend/src/components/connections/ConnectionRunButton.test.tsx b/grai-frontend/src/components/connections/ConnectionRunButton.test.tsx
@@ -3,28 +3,29 @@ import userEvent from "@testing-library/user-event"
 import { act, render, screen, waitFor } from "testing"
 import ConnectionRunButton from "./ConnectionRunButton"
 
+const onRun = jest.fn()
+
 test("renders", async () => {
-  render(<ConnectionRunButton onRun={() => {}} status={null} />)
+  render(<ConnectionRunButton onRun={onRun} status={null} />)
 })
 
 test("run", async () => {
   const user = userEvent.setup()
 
-  render(<ConnectionRunButton onRun={() => {}} events status={null} />)
+  render(<ConnectionRunButton onRun={onRun} events status={null} />)
 
   await act(async () => await user.click(screen.getByText("Run")))
 
-  // eslint-disable-next-line testing-library/no-wait-for-empty-callback
-  await waitFor(() => {})
+  expect(onRun).toHaveBeenCalled()
 })
 
 test("open", async () => {
   const user = userEvent.setup()
 
-  render(<ConnectionRunButton onRun={() => {}} events status={null} />)
+  render(<ConnectionRunButton onRun={onRun} events status={null} />)
 
   await act(
-    async () => await user.click(screen.getByTestId("ArrowDropDownIcon"))
+    async () => await user.click(screen.getByTestId("ArrowDropDownIcon")),
   )
 
   await waitFor(() => {

diff --git a/grai-frontend/src/components/connections/connectors/ConnectorCard.test.tsx b/grai-frontend/src/components/connections/connectors/ConnectorCard.test.tsx
@@ -3,6 +3,8 @@ import userEvent from "@testing-library/user-event"
 import { act, render, screen, waitFor } from "testing"
 import ConnectorCard from "./ConnectorCard"
 
+const onSelect = jest.fn()
+
 test("renders", async () => {
   render(
     <ConnectorCard
@@ -11,7 +13,7 @@ test("renders", async () => {
         name: "connector 1",
         metadata: null,
       }}
-      onSelect={() => {}}
+      onSelect={onSelect}
     />,
     {
       withRouter: true,
@@ -28,7 +30,7 @@ test("coming soon", async () => {
         metadata: null,
         status: "coming_soon",
       }}
-      onSelect={() => {}}
+      onSelect={onSelect}
     />,
     {
       withRouter: true,
@@ -46,7 +48,7 @@ test("click", async () => {
         name: "connector 1",
         metadata: null,
       }}
-      onSelect={() => {}}
+      onSelect={onSelect}
     />,
     {
       withRouter: true,
@@ -56,6 +58,8 @@ test("click", async () => {
   await act(async () => {
     await user.click(screen.getByText("connector 1"))
   })
+
+  expect(onSelect).toHaveBeenCalled()
 })
 
 test("to", async () => {
@@ -69,7 +73,7 @@ test("to", async () => {
         metadata: null,
         to: "a",
       }}
-      onSelect={() => {}}
+      onSelect={onSelect}
     />,
     {
       withRouter: true,

diff --git a/grai-frontend/src/components/connections/create/ConnectorSelect.test.tsx b/grai-frontend/src/components/connections/create/ConnectorSelect.test.tsx
@@ -3,8 +3,10 @@ import { GraphQLError } from "graphql"
 import { render, waitFor, screen } from "testing"
 import ConnectorSelect, { GET_CONNECTORS } from "./ConnectorSelect"
 
+const onSelect = jest.fn()
+
 test("renders", async () => {
-  render(<ConnectorSelect onSelect={() => {}} />, { withRouter: true })
+  render(<ConnectorSelect onSelect={onSelect} />, { withRouter: true })
 
   await waitFor(() => {
     expect(screen.getAllByText("Hello World")).toBeTruthy()
@@ -68,7 +70,7 @@ test("renders other", async () => {
     },
   ]
 
-  render(<ConnectorSelect onSelect={() => {}} />, { mocks, withRouter: true })
+  render(<ConnectorSelect onSelect={onSelect} />, { mocks, withRouter: true })
 
   await waitFor(() => {
     expect(screen.getByText("other")).toBeInTheDocument()
@@ -91,7 +93,7 @@ test("error", async () => {
     },
   ]
 
-  render(<ConnectorSelect onSelect={() => {}} />, { mocks, withRouter: true })
+  render(<ConnectorSelect onSelect={onSelect} />, { mocks, withRouter: true })
 
   await waitFor(() => {
     expect(screen.getByText("Error!")).toBeInTheDocument()

diff --git a/grai-frontend/src/components/connections/create/SetSchedule.test.tsx b/grai-frontend/src/components/connections/create/SetSchedule.test.tsx
@@ -4,6 +4,8 @@ import { GraphQLError } from "graphql"
 import { render, waitFor, screen, act } from "testing"
 import SetSchedule, { UPDATE_CONNECTION } from "./SetSchedule"
 
+const onComplete = jest.fn()
+
 const opts = {
   activeStep: 0,
   setActiveStep: function (activeStep: number): void {
@@ -28,7 +30,7 @@ const connection = {
 
 test("renders", async () => {
   render(
-    <SetSchedule opts={opts} connection={connection} onComplete={() => {}} />
+    <SetSchedule opts={opts} connection={connection} onComplete={onComplete} />,
   )
 
   expect(screen.getByText("Set a schedule for this connection")).toBeTruthy()
@@ -38,7 +40,7 @@ test("submit", async () => {
   const user = userEvent.setup()
 
   render(
-    <SetSchedule opts={opts} connection={connection} onComplete={() => {}} />
+    <SetSchedule opts={opts} connection={connection} onComplete={onComplete} />,
   )
 
   expect(screen.getByText("Set a schedule for this connection")).toBeTruthy()
@@ -47,17 +49,24 @@ test("submit", async () => {
 
   await act(
     async () =>
-      await user.type(screen.getByRole("textbox", { name: "Minutes" }), "10,30")
+      await user.type(
+        screen.getByRole("textbox", { name: "Minutes" }),
+        "10,30",
+      ),
   )
   await act(
     async () =>
-      await user.type(screen.getByRole("textbox", { name: "Hours" }), "1,8")
+      await user.type(screen.getByRole("textbox", { name: "Hours" }), "1,8"),
   )
 
   await act(
     async () =>
-      await user.click(screen.getByRole("button", { name: /finish/i }))
+      await user.click(screen.getByRole("button", { name: /finish/i })),
   )
+
+  await waitFor(() => {
+    expect(onComplete).toHaveBeenCalled()
+  })
 })
 
 test("error", async () => {
@@ -89,8 +98,8 @@ test("error", async () => {
   ]
 
   render(
-    <SetSchedule opts={opts} connection={connection} onComplete={() => {}} />,
-    { mocks }
+    <SetSchedule opts={opts} connection={connection} onComplete={onComplete} />,
+    { mocks },
   )
 
   expect(screen.getByText("Set a schedule for this connection")).toBeTruthy()
@@ -99,16 +108,19 @@ test("error", async () => {
 
   await act(
     async () =>
-      await user.type(screen.getByRole("textbox", { name: "Minutes" }), "10,30")
+      await user.type(
+        screen.getByRole("textbox", { name: "Minutes" }),
+        "10,30",
+      ),
   )
   await act(
     async () =>
-      await user.type(screen.getByRole("textbox", { name: "Hours" }), "1,8")
+      await user.type(screen.getByRole("textbox", { name: "Hours" }), "1,8"),
   )
 
   await act(
     async () =>
-      await user.click(screen.getByRole("button", { name: /finish/i }))
+      await user.click(screen.getByRole("button", { name: /finish/i })),
   )
 
   await waitFor(() => {

diff --git a/grai-frontend/src/components/connections/create/SetupConnection.test.tsx b/grai-frontend/src/components/connections/create/SetupConnection.test.tsx
@@ -6,6 +6,8 @@ import { UPLOAD_CONNECTOR_FILE } from "./ConnectionFile"
 import SetupConnection, { CREATE_RUN } from "./SetupConnection"
 import { CREATE_CONNECTION, UPDATE_CONNECTION } from "./SetupConnectionForm"
 
+const setConnection = jest.fn()
+
 const opts = {
   activeStep: 0,
   setActiveStep: function (activeStep: number): void {
@@ -26,7 +28,7 @@ test("renders", async () => {
       opts={opts}
       connector={{ id: "1", name: "Test Connector", metadata: null }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       withRouter: true,
@@ -45,7 +47,7 @@ test("submit", async () => {
       opts={opts}
       connector={{ id: "1", name: "Test Connector", metadata: null }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       withRouter: true,
@@ -58,6 +60,8 @@ test("submit", async () => {
     async () =>
       await user.click(screen.getByRole("button", { name: /continue/i })),
   )
+
+  expect(setConnection).toHaveBeenCalled()
 })
 
 test("submit run error", async () => {
@@ -120,7 +124,7 @@ test("submit run error", async () => {
       opts={opts}
       connector={{ id: "1", name: "Test Connector", metadata: null }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       mocks,
@@ -156,7 +160,7 @@ test("submit update", async () => {
         secrets: {},
         sourceName: "default",
       }}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       withRouter: true,
@@ -215,7 +219,7 @@ test("submit update error", async () => {
         metadata: {},
         secrets: {},
       }}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       mocks,
@@ -251,7 +255,7 @@ test("renders file", async () => {
         },
       }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       withRouter: true,
@@ -277,7 +281,7 @@ test("renders file yaml", async () => {
         },
       }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       withRouter: true,
@@ -305,7 +309,7 @@ test("upload file", async () => {
         },
       }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       routes: ["/:organisationName/:workspaceName/runs/:runId"],
@@ -366,7 +370,7 @@ test("upload wrong file", async () => {
         },
       }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       withRouter: true,
@@ -430,7 +434,7 @@ test("upload file error", async () => {
         },
       }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     { withRouter: true, mocks },
   )
@@ -477,7 +481,7 @@ test("renders coming soon", async () => {
         status: "coming_soon",
       }}
       connection={null}
-      setConnection={() => {}}
+      setConnection={setConnection}
     />,
     {
       withRouter: true,