Unit tests for browsing page component

Author: shubhamBansal

dashboard/package.json

@@ -37,6 +37,13 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject"
   },
+  "jest":{
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    },
+    "transformIgnorePatterns":["node_modules/(?!@patternfly)/"]
+  }
+  ,
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -56,7 +63,10 @@
     ]
   },
   "devDependencies": {
+    "@babel/preset-env": "^7.17.10",
+    "babel-jest": "^28.1.0",
     "css-loader": "^6.7.1",
+    "jest": "^28.1.0",
     "less": "^4.1.2",
     "less-loader": "^10.2.0",
     "style-loader": "^3.3.1"

dashboard/src/App.js

@@ -10,7 +10,7 @@ import { TableWithFavorite } from 'modules/components/TableComponent';
 function App() {  
   useEffect(() => {
     const faviconLogo = document.getElementById("favicon");
-    faviconLogo.setAttribute("href", favicon);
+    faviconLogo?.setAttribute("href", favicon);
   }, []);
 
   return (

dashboard/src/App.test.js

@@ -0,0 +1,26 @@
+import { Provider } from "react-redux";
+import store from "store/store";
+import App from "../../../App";
+const { render, screen, fireEvent } = require("@testing-library/react");
+const AppWrapper = () => {
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+test("Alert message is displayed on initial load", () => {
+  render(<AppWrapper />);
+  const alert = screen.getByText(/want to see your own data/i);
+  expect(alert).toBeInTheDocument();
+});
+
+test("Alert message is closed on clicking close button", () => {
+  render(<AppWrapper />);
+  const alert = screen.getByText(/want to see your own data/i);
+  const closeButton = screen.getByRole("button", {
+    name: /close info alert/i,
+  });
+  fireEvent.click(closeButton);
+  expect(alert).not.toBeVisible();
+});

dashboard/src/modules/components/AlertComponent/Alert.test.js

@@ -0,0 +1,30 @@
+import { Provider } from "react-redux";
+import store from "store/store";
+import { MOCK_DATA } from "utils/mockData";
+import App from "../../../App";
+const { render, screen, fireEvent } = require("@testing-library/react");
+const AppWrapper = () => {
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+jest.mock("utils/api", () => {
+  return {
+    get: () => ({
+      data: MOCK_DATA,
+    }),
+  };
+});
+test("data is filtered based on date range selected from date picker", async () => {
+  render(<AppWrapper />);
+  await screen.findByText("dhcp1");
+  const datePickerInput = screen.getAllByPlaceholderText(/yyyy-mm-dd/i);
+  fireEvent.change(datePickerInput[0], { target: { value: "2022-02-16" } });
+  fireEvent.change(datePickerInput[1], { target: { value: "2022-02-20" } });
+  const updateBtn = screen.getByRole("button", { name: /update/i });
+  fireEvent.click(updateBtn);
+  const cells = screen.getAllByRole("cell");
+  expect(cells).toHaveLength(12);
+});

dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js

@@ -0,0 +1,16 @@
+import { Provider } from "react-redux";
+import store from "store/store";
+import App from "../../../App";
+const { render, screen } = require("@testing-library/react");
+const AppWrapper = () => {
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+test("Page heading is displayed on initial load", () => {
+  render(<AppWrapper />);
+  const heading = screen.getByRole("heading", { name: /controllers/i });
+  expect(heading).toBeInTheDocument();
+});

dashboard/src/modules/components/HeadingComponent/Heading.test.js

@@ -0,0 +1,33 @@
+import { Provider } from "react-redux";
+import store from "store/store";
+import { MOCK_DATA } from "utils/mockData";
+import App from "../../../App";
+const { render, screen, fireEvent } = require("@testing-library/react");
+const AppWrapper = () => {
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+jest.mock("utils/api", () => {
+  return {
+    get: () => ({
+      data: MOCK_DATA,
+    }),
+  };
+});
+test("data is filtered based on value in search box", async () => {
+  render(<AppWrapper />);
+  await screen.findByText("dhcp1");
+  const searchBox = screen.getByPlaceholderText(/search controllers/i);
+  fireEvent.change(searchBox, { target: { value: "dhcp2" } });
+  const searchBtn = screen.getByRole("button", {
+    name: /searchButton/i,
+  });
+  fireEvent.click(searchBtn);
+  const controllerTwo = screen.queryByText("dhcp2");
+  const controllerThree = screen.queryByText("dhcp3");
+  expect(controllerTwo).toBeInTheDocument();
+  expect(controllerThree).not.toBeInTheDocument();
+});

dashboard/src/modules/components/SearchComponent/Search.test.js

@@ -22,7 +22,7 @@ function SearchBox({
         placeholder="Search Controllers"
         onChange={(e) => setControllerValue(e)}
       ></TextInput>
-      <Button variant="control" onClick={searchController}>
+      <Button variant="control" onClick={searchController} aria-label="searchButton">
         <SearchIcon />
       </Button>
     </InputGroup>

dashboard/src/modules/components/SearchComponent/index.jsx

@@ -0,0 +1,48 @@
+import { Provider } from "react-redux";
+import store from "store/store";
+import { MOCK_DATA } from "utils/mockData";
+import App from "../../../App";
+const {
+  render,
+  screen,
+  waitFor,
+  fireEvent,
+} = require("@testing-library/react");
+const AppWrapper = () => {
+  return (
+    <Provider store={store}>
+      <App />
+    </Provider>
+  );
+};
+jest.mock("utils/api", () => {
+  return {
+    get: () => ({
+      data: MOCK_DATA,
+    }),
+  };
+});
+
+test("data from API is displayed on initial load", async () => {
+  render(<AppWrapper />);
+  const benchmarkName = await screen.findByText("pbench_user_benchmark1");
+  const cells = await screen.findAllByRole("cell");
+  await waitFor(() => expect(benchmarkName).toBeInTheDocument());
+  await waitFor(() => expect(cells).toHaveLength(20));
+});
+
+test("row is favorited after clicking on favorite icon", async () => {
+  render(<AppWrapper />);
+  await screen.findByText("dhcp1");
+  const starBtn = screen.getAllByRole("button", {
+    name: /not starred/i,
+  });
+  fireEvent.click(starBtn[0]);
+  fireEvent.click(starBtn[1]);
+  const favoriteBtn = screen.getByRole("button", {
+    name: /see favorites button/i,
+  });
+  fireEvent.click(favoriteBtn);
+  const favoriteCell = screen.getAllByRole("cell");
+  expect(favoriteCell).toHaveLength(8);
+});

dashboard/src/modules/components/TableComponent/Table.test.js

@@ -149,13 +149,15 @@ export const TableWithFavorite = () => {
               isSelected={isSelected === "controllerListButton"}
               onChange={handleButtonClick}
               className="controllerListButton"
+              aria-label="See Controller Button"
             />
             <ToggleGroupItem
               text={`Favorites(${favoriteRepoNames.length})`}
               buttonId="favoriteListButton"
               isSelected={isSelected === "favoriteListButton"}
               onChange={handleButtonClick}
               className="favoriteListButton"
+              aria-label="See Favorites Button"
             />
           </ToggleGroup>
           <TableComposable aria-label="Favoritable table" variant="compact">