fix(unit-tests): metadata and job data table

DIRACGrid · May 27, 2024 · 5791c5e · 5791c5e
1 parent 0177655
commit 5791c5e
Show file tree

Hide file tree

Showing 3 changed files with 64 additions and 20 deletions.
diff --git a/src/components/ui/DataTable.tsx b/src/components/ui/DataTable.tsx
@@ -470,7 +470,7 @@ export function DataTable(props: DataTableProps) {
   };
 
   // Wait for the data to load
-  if ((!rows && !error) || isValidating || isLoading) {
+  if (isValidating || isLoading) {
     return (
       <>
         <FilterToolbar

diff --git a/test/unit-tests/JobDataTable.test.tsx b/test/unit-tests/JobDataTable.test.tsx
@@ -2,6 +2,7 @@ import React from "react";
 import { render } from "@testing-library/react";
 import useSWR from "swr";
 import { useOidcAccessToken } from "@axa-fr/react-oidc";
+import { VirtuosoMockContext } from "react-virtuoso";
 import { JobDataTable } from "@/components/ui/JobDataTable";
 
 // Mock modules
@@ -32,16 +33,39 @@ jest.mock("jsoncrush", () => ({
 }));
 
 describe("<JobDataTable />", () => {
-  it("displays loading state", () => {
-    (useSWR as jest.Mock).mockReturnValue({ data: null, error: null });
+  it("displays loading state when data is being validated", () => {
+    (useSWR as jest.Mock).mockReturnValue({
+      data: null,
+      error: null,
+      isValidating: true,
+      isLoading: false,
+    });
+    (useOidcAccessToken as jest.Mock).mockReturnValue("1234");
+
+    const { getByTestId } = render(<JobDataTable />);
+    expect(getByTestId("skeleton")).toBeVisible();
+  });
+
+  it("displays loading state when data is being loaded", () => {
+    (useSWR as jest.Mock).mockReturnValue({
+      data: null,
+      error: null,
+      isValidating: false,
+      isLoading: true,
+    });
     (useOidcAccessToken as jest.Mock).mockReturnValue("1234");
 
     const { getByTestId } = render(<JobDataTable />);
     expect(getByTestId("skeleton")).toBeVisible();
   });
 
   it("displays error state", () => {
-    (useSWR as jest.Mock).mockReturnValue({ error: true });
+    (useSWR as jest.Mock).mockReturnValue({
+      data: null,
+      error: true,
+      isValidating: false,
+      isLoading: false,
+    });
 
     const { getByText } = render(<JobDataTable />);
     expect(
@@ -50,7 +74,12 @@ describe("<JobDataTable />", () => {
   });
 
   it("displays no jobs data state", () => {
-    (useSWR as jest.Mock).mockReturnValue({ data: [] });
+    (useSWR as jest.Mock).mockReturnValue({
+      data: [],
+      error: false,
+      isValidating: false,
+      isLoading: false,
+    });
 
     const { getByText } = render(<JobDataTable />);
     expect(
@@ -59,18 +88,33 @@ describe("<JobDataTable />", () => {
   });
 
   it("displays jobs data in the grid", () => {
-    const mockData = [
-      {
-        JobID: "1",
-        JobName: "TestJob1",
-        Status: "Running",
-        MinorStatus: "Processing",
-        SubmissionTime: "2023-10-13",
-      },
-    ];
-    (useSWR as jest.Mock).mockReturnValue({ data: mockData });
+    const mockData = {
+      data: [
+        {
+          JobID: "1",
+          JobName: "TestJob1",
+          Status: "Running",
+          MinorStatus: "Processing",
+          SubmissionTime: "2023-10-13",
+        },
+      ],
+    };
+    (useSWR as jest.Mock).mockReturnValue({
+      data: mockData,
+      error: false,
+      isValidating: false,
+      isLoading: false,
+    });
 
-    const { getByText } = render(<JobDataTable />);
+    const { getByText } = render(<JobDataTable />, {
+      wrapper: ({ children }) => (
+        <VirtuosoMockContext.Provider
+          value={{ viewportHeight: 300, itemHeight: 100 }}
+        >
+          {children}
+        </VirtuosoMockContext.Provider>
+      ),
+    });
     expect(getByText("TestJob1")).toBeInTheDocument();
   });
 });
diff --git a/test/unit-tests/LoginForm.test.tsx b/test/unit-tests/LoginForm.test.tsx
@@ -90,9 +90,9 @@ jest.mock("next/navigation", () => {
 describe("LoginForm", () => {
   // Should render a text field to select the VO
   it("renders correctly multiple VOs", () => {
-    (useMetadata as jest.Mock).mockReturnValue({ data: multiVOMetadata });
+    (useMetadata as jest.Mock).mockReturnValue({ metadata: multiVOMetadata });
 
-    const { getByText } = render(
+    render(
       <ThemeProvider>
         <LoginForm />
       </ThemeProvider>,
@@ -125,9 +125,9 @@ describe("LoginForm", () => {
 
   // Should render a title with the VO name
   it("renders correctly single VO", () => {
-    (useMetadata as jest.Mock).mockReturnValue({ data: singleVOMetadata });
+    (useMetadata as jest.Mock).mockReturnValue({ metadata: singleVOMetadata });
 
-    const { getByText } = render(
+    render(
       <ThemeProvider>
         <LoginForm />
       </ThemeProvider>,