PLT-5868 Added tests for reusable components

react-web/package.json

@@ -42,7 +42,7 @@
     "build": "react-app-rewired build",
     "build:production": "REACT_APP_ENV=production yarn build",
     "test": "react-app-rewired test",
-    "test:coverage": "react-app-rewired test --coverage",
+    "test:coverage": "react-app-rewired test --collectCoverageFrom='src/**/*.tsx' --coverage",
     "eject": "react-app-rewired eject"
   },
   "eslintConfig": {

react-web/src/app/App.test.tsx

@@ -1,10 +1,8 @@
 import { fireEvent, render, screen } from "@testing-library/react";
 import { Link, MemoryRouter, Outlet, Route, Routes } from "react-router-dom";
 import "@testing-library/jest-dom";
-
 import Support from "pages/support/Support";
 
-
 const Header = () => {
   return (
     <>
@@ -15,16 +13,10 @@ const Header = () => {
   );
 };
 
-describe("renders landing page", () => {
-  // it("header contains button Connect Wallet", () => {})
-})
-
 describe("renders banners", () => {
   // it("renders banner when not in mainnet", () => {});
   // it("renders banner to ensure network is preprod", () => {});
-});
 
-describe("renders components on click of menu links", () => {
   it("header links navigates to corresponding components successfully", async () => {
     render(
       <MemoryRouter>
@@ -52,6 +44,6 @@ describe("renders components on click of menu links", () => {
     fireEvent.click(supportPageLink);
 
     // Expect content of support page to be in the DOM
-    expect(screen.getByText(/Coming soon.../i)).toBeInTheDocument();
+    expect(screen.getByText(/Support Coming soon.../i)).toBeInTheDocument();
   });
 });

react-web/src/components/Button/Button.test.tsx

@@ -48,7 +48,7 @@ describe("renders the Button component", () => {
     render(<Button showLoader={true} />);
     expect(screen.getByTestId("spinner")).toBeInTheDocument()
   })
-  
+
   it("renders with class is-loading when isLoading", () => {
     render(<Button isLoading={true} />);
     expect(screen.getAllByRole("button")[0]).toHaveClass("is-loading");

react-web/src/components/Loader/Loader.test.tsx

@@ -0,0 +1,9 @@
+import { render, screen } from "@testing-library/react";
+import Loader from "./Loader";
+
+describe("Loader component", () => {
+  it("renders loader properly", () => {
+    render(<Loader />);
+    expect(screen.getByTestId("spinner")).toBeInTheDocument();
+  });
+});

react-web/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,39 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import Modal from "./Modal";
+
+describe("Modal component", () => {
+  it("renders modal component with title and content", () => {
+    const onCloseModal = jest.fn();
+    const title = "Test Modal Title";
+    const content = "Test Modal Content";
+
+    render(
+      <Modal open={true} onCloseModal={onCloseModal} title={title}>
+        {content}
+      </Modal>
+    );
+
+    const modalTitle = screen.getByText(title);
+    expect(modalTitle).toBeInTheDocument();
+
+    const modalContent = screen.getByText(content);
+    expect(modalContent).toBeInTheDocument();
+  });
+
+  it("calls onCloseModal when close button is clicked", () => {
+    const onCloseModal = jest.fn();
+    const title = "Test Modal Title";
+    const content = "Test Modal Content";
+
+    render(
+      <Modal open={true} onCloseModal={onCloseModal} title={title}>
+        {content}
+      </Modal>
+    );
+
+    const closeButton = screen.getByLabelText("close");
+    fireEvent.click(closeButton);
+
+    expect(onCloseModal).toHaveBeenCalled();
+  });
+});

react-web/src/components/Modal/Modal.tsx

@@ -20,20 +20,18 @@ function BootstrapDialogTitle(props: DialogTitleProps) {
   return (
     <DialogTitle sx={{ m: 0, p: 2 }} {...other}>
       {children}
-      {onClose ? (
-        <IconButton
-          aria-label="close"
-          onClick={onClose}
-          sx={{
-            position: 'absolute',
-            right: 8,
-            top: 8,
-            color: (theme: any) => theme.palette.grey[500],
-          }}
-        >
-          <CloseIcon />
-        </IconButton>
-      ) : null}
+      <IconButton
+        aria-label="close"
+        onClick={onClose}
+        sx={{
+          position: 'absolute',
+          right: 8,
+          top: 8,
+          color: (theme: any) => theme.palette.grey[500],
+        }}
+      >
+        <CloseIcon />
+      </IconButton>
     </DialogTitle>
   );
 }

react-web/src/components/NotFound/NotFound.test.tsx

@@ -0,0 +1,27 @@
+import { fireEvent, render, screen } from "@testing-library/react";
+import NotFound from "./NotFound";
+import { MemoryRouter, Route, Routes } from "react-router";
+
+describe("Not found component", () => {
+  it("renders correctly", () => {
+    render(
+      <MemoryRouter>
+        <NotFound />
+      </MemoryRouter>
+    );
+    expect(screen.getByText("404 - No page found")).toBeInTheDocument();
+  });
+
+  it("renders component on accessing bad route", () => {
+    render(
+      <MemoryRouter initialEntries={["/test-path"]}>
+        <Routes>
+          <Route path="/" element={<div data-testid="home">Home</div>} />
+          <Route path="*" element={<NotFound />} />
+        </Routes>
+      </MemoryRouter>
+    );
+
+    expect(screen.getByText("404 - No page found")).toBeInTheDocument();
+  });
+});

react-web/src/components/NotFound/NotFound.tsx

@@ -9,7 +9,7 @@ const NotFound = () => {
         404 - No page found
       </div>
       <div className="buttons">
-        <Link to="">Go to homepage</Link>
+        <Link to="/" data-testid="home">Go to homepage</Link>
       </div>
     </div>
   );

react-web/src/components/Table/Table.test.tsx

@@ -0,0 +1,181 @@
+import {
+    cleanup,
+    fireEvent,
+    render,
+    screen
+  } from "@testing-library/react";
+  import TableComponent from "./Table";
+  import { act } from "react-dom/test-utils";
+  import userEvent from "@testing-library/user-event";
+
+  const data = [
+    {
+      adaUsdPrice: 0.371,
+      endDate: "2024-05-18T16:52:06.780295123Z",
+      features: [
+        {
+          id: "l1-run",
+          name: "allows running testing campaign for a DApp",
+        },
+        {
+          id: "l2-upload-report",
+          name: "allows an auditor to upload a report",
+        },
+      ],
+      id: "15",
+      name: "Standard",
+      price: 5390836,
+      profileId: "10",
+      startDate: "2023-05-19T16:52:06.780295123Z",
+      status: "active",
+      tierId: "2",
+      type: "auditor",
+    },
+  ];
+
+  const columns = [
+    {
+      Header: "Type of Subscription",
+      accessor: "name",
+    },
+    {
+      Header: "Amount Paid",
+      accessor: "adaUsdPrice",
+    },
+    {
+      Header: "Status",
+      accessor: "status",
+    },
+    {
+      Header: "Date of Subscription",
+      accessor: "startDate",
+    },
+    {
+      Header: "Date of Expiry",
+      accessor: "endDate",
+    },
+  ];
+
+  describe("Table component", () => {
+    afterEach(() => {
+      cleanup();
+    });
+
+    it("renders correctly", () => {
+      const updateMyData = jest.fn();
+      const skipPageReset = jest.fn();
+
+      render(
+        <TableComponent
+          dataSet={data}
+          columns={columns}
+          updateMyData={updateMyData}
+          skipPageReset={skipPageReset}
+        />
+      );
+
+      expect(screen.getByTestId("tableComp")).toBeInTheDocument();
+      columns
+        .filter((column) => column.Header.length)
+        .forEach((column) => {
+          expect(screen.getByText(column.Header)).toBeInTheDocument();
+        });
+    });
+
+    it("show colViz", () => {
+      const updateMyData = jest.fn();
+      const skipPageReset = jest.fn();
+
+      render(
+        <TableComponent
+          dataSet={data}
+          columns={columns}
+          showColViz
+          updateMyData={updateMyData}
+          skipPageReset={skipPageReset}
+        />
+      );
+
+      expect(screen.getByAltText("colvis")).toBeInTheDocument();
+    });
+
+    it("hide colViz", () => {
+      const updateMyData = jest.fn();
+      const skipPageReset = jest.fn();
+
+      render(
+        <TableComponent
+          dataSet={data}
+          columns={columns}
+          updateMyData={updateMyData}
+          skipPageReset={skipPageReset}
+        />
+      );
+
+      expect(screen.queryByAltText("colvis")).not.toBeInTheDocument();
+    });
+
+    it("toggle visibility of colviz on button click", async () => {
+      const updateMyData = jest.fn();
+      const skipPageReset = jest.fn();
+
+      render(
+        <TableComponent
+          dataSet={data}
+          columns={columns}
+          showColViz
+          updateMyData={updateMyData}
+          skipPageReset={skipPageReset}
+        />
+      );
+
+      const colVizContainer = screen.getByTestId("colviz-container");
+      expect(colVizContainer.style.display).toBe("none");
+
+      const toggleBtn = screen.getByTestId("colviz-sideBarButton");
+      await act(() => {
+        fireEvent.click(toggleBtn);
+      });
+      expect(colVizContainer.style.display).toBe("block");
+    });
+
+    it("displays the correct number of rows per page", async () => {
+      render(
+        <TableComponent dataSet={Array(20).fill(data[0])} columns={columns} />
+      );
+
+      // Click on row select dropdown
+      await userEvent.click(screen.getByRole("button", { name: /5/ }));
+
+      const options = screen.getAllByRole("option");
+      expect(options.length).toBe(3); // 3 rowsPerPageOptions
+
+      // Click on 10 rows per page option
+      await userEvent.click(options[1]);
+
+      const rows = screen.getAllByRole("row");
+      expect(rows).toHaveLength(11); // Header row + 10 data rows
+    });
+
+    it("changes the page when clicking on pagination buttons", () => {
+      render(
+        <TableComponent dataSet={Array(8).fill(data[0])} columns={columns} />
+      );
+
+      const nextPageButton = screen.getByLabelText("Go to next page");
+      const previousPageButton = screen.getByLabelText("Go to previous page");
+
+      const rows = screen.getAllByRole("row");
+      expect(rows).toHaveLength(6); // Header row + 5 data rows
+
+      fireEvent.click(nextPageButton);
+
+      const updatedRows = screen.getAllByRole("row");
+      expect(updatedRows).toHaveLength(4); // Header row + 3 data rows
+
+      fireEvent.click(previousPageButton);
+
+      const restoredRows = screen.getAllByRole("row");
+      expect(restoredRows).toHaveLength(6); // Header row + 5 data rows
+    });
+  });

react-web/src/components/Table/Table.tsx

@@ -44,7 +44,6 @@ const TableComponent: FC<any> = ({
     page,
     gotoPage,
     setPageSize,
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
     state: { pageIndex, pageSize },
   } = useTable(
     {
@@ -96,6 +95,7 @@ const TableComponent: FC<any> = ({
                 display: showPivot ? "block" : "none",
               }}
               className="colviz-container"
+              data-testid="colviz-container"
             >
               <ColViz
                 columns={columns}
@@ -104,6 +104,7 @@ const TableComponent: FC<any> = ({
             </div>
             <div className="sidebarButtons">
               <button
+                data-testid="colviz-sideBarButton"
                 className="sideBarButton"
                 onClick={(e) => setShowPivot(!showPivot)}
               >
@@ -114,7 +115,7 @@ const TableComponent: FC<any> = ({
             </div>
           </div>
         )}
-        <TableContainer component={Paper} id="tableComp">
+        <TableContainer component={Paper} id="tableComp" data-testid="tableComp">
           <Table
             sx={{ minWidth: 650 }}
             aria-label="simple table"