Add better mocking for tests

florist/app/jobs/hooks.tsx

@@ -0,0 +1,10 @@
+import useSWR from "swr";
+import { fetcher } from "../client_imports";
+
+export default function useJobStatus(status: string) {
+    const endpoint = "/api/server/job/".concat(status);
+    const { data, error, isLoading } = useSWR(endpoint, fetcher, {
+        refresh_interval: 1000,
+    });
+    return { data, error, isLoading };
+}

florist/app/jobs/page.tsx

@@ -1,7 +1,6 @@
 "use client";
 import { ReactElement } from "react/React";
-import useSWR from "swr";
-import { fetcher } from "../client_imports";
+import useJobStatus from "./hooks";
 
 const valid_statuses = {
     NOT_STARTED: "Not Started",
@@ -45,12 +44,9 @@ export default function Page(): ReactElement {
 }
 
 export function Status({ status }: StatusProp): ReactElement {
-    const endpoint = "/api/server/job/".concat(status);
-    const { data, error, isLoading } = useSWR(endpoint, fetcher, {
-        refresh_interval: 1000,
-    });
-    if (error) return <span> </span>;
-    if (isLoading) return <span> </span>;
+    const { data, error, isLoading } = useJobStatus(status);
+    if (error) return <span> Help1</span>;
+    if (isLoading) return <span> Help2 </span>;
 
     return (
         <div>
@@ -87,7 +83,10 @@ export function StatusTable({
     } else {
         return (
             <div>
-                <span> No jobs to display. </span>
+                <span data-testid={`status-no-jobs-${status}`}>
+                    {" "}
+                    No jobs to display.{" "}
+                </span>
             </div>
         );
     }

florist/tests/unit/app/jobs/page.test.tsx

@@ -1,14 +1,16 @@
-import useSWR from "swr";
 import "@testing-library/jest-dom";
 import { getByText, render, cleanup } from "@testing-library/react";
-import { describe, beforeEach, afterEach, it, expect } from "@jest/globals";
+import { describe, afterEach, it, expect } from "@jest/globals";
 
 import Page from "../../../../app/jobs/page";
+import useJobStatus from "../../../../app/jobs/hooks";
 
-jest.mock("swr", () => ({
-    __esModule: true,
-    default: jest.fn(),
-}));
+jest.mock("../../../../app/jobs/hooks");
+
+afterEach(() => {
+    jest.clearAllMocks();
+    cleanup();
+});
 
 function mock_job_data(
     model: string,
@@ -27,26 +29,53 @@ function mock_job_data(
     return data;
 }
 
-beforeEach(() => {
-    const mock_jobs = [
-        mock_job_data("MNIST", "localhost:8080", ["localhost:7080"]),
-    ];
-    useSWR.mockImplementation(() => ({
-        data: mock_jobs,
-        error: null,
-        isLoading: false,
-    }));
-});
+function setupMock(
+    valid_statuses: Array<string>,
+    data: Array<object>,
+    error: boolean,
+    isLoading: boolean,
+) {
+    useJobStatus.mockImplementation((status: string) => {
+        if (valid_statuses.includes(status)) {
+            return {
+                data,
+                error,
+                isLoading,
+            };
+        } else {
+            return {
+                data: [],
+                error: false,
+                isLoading: false,
+            };
+        }
+    });
+}
 
 describe("List Jobs Page", () => {
     it("Renders Page Title correct", () => {
+        setupMock([], [], false, false);
         const { container } = render(<Page />);
         const h1 = container.querySelector("h1");
         expect(h1).toBeInTheDocument();
         expect(h1).toHaveTextContent("Job Status");
     });
 
     it("Renders Status Components Headers", () => {
+        const data = [
+            mock_job_data("MNIST", "localhost:8080", ["localhost:7080"]),
+        ];
+        setupMock(
+            [
+                "NOT_STARTED",
+                "IN_PROGRESS",
+                "FINISHED_SUCCESSFULLY",
+                "FINISHED_WITH_ERROR",
+            ],
+            data,
+            false,
+            false,
+        );
         const { getByTestId } = render(<Page />);
         const ns_status = getByTestId("status-header-NOT_STARTED");
         const ip_status = getByTestId("status-header-IN_PROGRESS");
@@ -62,7 +91,21 @@ describe("List Jobs Page", () => {
         expect(fe_status).toHaveTextContent("Finished with Error");
     });
 
-    it("Renders Status Table", () => {
+    it("Renders Status Table With Table with Data", () => {
+        const data = [
+            mock_job_data("MNIST", "localhost:8080", ["localhost:7080"]),
+        ];
+        setupMock(
+            [
+                "NOT_STARTED",
+                "IN_PROGRESS",
+                "FINISHED_SUCCESSFULLY",
+                "FINISHED_WITH_ERROR",
+            ],
+            data,
+            false,
+            false,
+        );
         const { getByTestId } = render(<Page />);
         const ns_table = getByTestId("status-table-NOT_STARTED");
 
@@ -108,4 +151,33 @@ describe("List Jobs Page", () => {
         expect(getByText(fe_table, "localhost:8080")).toBeInTheDocument();
         expect(getByText(fe_table, "localhost:7080")).toBeInTheDocument();
     });
+
+    it("Renders Status Table With Table without Data", () => {
+        setupMock([], [], false, false);
+        const { getByTestId } = render(<Page />);
+
+        const not_started = getByTestId("status-no-jobs-NOT_STARTED");
+        expect(
+            getByText(not_started, "No jobs to display."),
+        ).toBeInTheDocument();
+
+        const in_progress = getByTestId("status-no-jobs-IN_PROGRESS");
+        expect(
+            getByText(in_progress, "No jobs to display."),
+        ).toBeInTheDocument();
+
+        const finished_success = getByTestId(
+            "status-no-jobs-FINISHED_SUCCESSFULLY",
+        );
+        expect(
+            getByText(finished_success, "No jobs to display."),
+        ).toBeInTheDocument();
+
+        const finished_error = getByTestId(
+            "status-no-jobs-FINISHED_WITH_ERROR",
+        );
+        expect(
+            getByText(finished_error, "No jobs to display."),
+        ).toBeInTheDocument();
+    });
 });