Controller notion removed from test cases and support for coverage added

Author: shubhamBansal

dashboard/package.json

@@ -15,6 +15,9 @@
     "classnames": "^2.3.1",
     "crypto-js": "^4.1.1",
     "js-cookie": "^3.0.1",
+    "babel-jest": "^27.5.1",
+    "gulp": "^4.0.2",
+    "jest": "^27.5.1",
     "less-watch-compiler": "^1.16.3",
     "patternfly": "^3.9.0",
     "react": "^17.0.2",
@@ -34,7 +37,7 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --coverage",
     "eject": "react-scripts eject"
   },
   "jest":{

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

@@ -14,17 +14,26 @@ jest.mock("utils/api", () => {
   return {
     get: () => ({
       data: MOCK_DATA,
+      status:200
     }),
   };
 });
 test("data is filtered based on date range selected from date picker", async () => {
   render(<AppWrapper />);
-  await screen.findByText("dhcp1");
+  await screen.findByText("pbench_user_benchmark1");
   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);
+  const datasetNameOne = screen.queryByText("pbench_user_benchmark1");
+  const datasetNameTwo = screen.queryByText("pbench_user_benchmark2");
+  const datasetNameThree = screen.queryByText("pbench_user_benchmark3");
+  const datasetNameFour = screen.queryByText("pbench_user_benchmark4");
+  const datasetNameFive = screen.queryByText("pbench_user_benchmark5");
+  expect(datasetNameOne).toBeInTheDocument();
+  expect(datasetNameTwo).toBeInTheDocument();
+  expect(datasetNameThree).toBeInTheDocument();
+  expect(datasetNameFour).not.toBeInTheDocument();
+  expect(datasetNameFive).not.toBeInTheDocument();
 });

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

@@ -2,12 +2,7 @@ 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 { render, screen, fireEvent } = require("@testing-library/react");
 const AppWrapper = () => {
   return (
     <Provider store={store}>
@@ -19,21 +14,34 @@ jest.mock("utils/api", () => {
   return {
     get: () => ({
       data: MOCK_DATA,
+      status: 200,
     }),
   };
 });
-
+test("Page heading is displayed on initial load", async () => {
+  render(<AppWrapper />);
+  await screen.findByText("pbench_user_benchmark1");
+  const heading = screen.getByRole("heading", { name: /results/i });
+  expect(heading).toBeInTheDocument();
+});
 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));
+  await screen.findByText("pbench_user_benchmark1");
+  const datasetNameOne = screen.queryByText("pbench_user_benchmark1");
+  const datasetNameTwo = screen.queryByText("pbench_user_benchmark2");
+  const datasetNameThree = screen.queryByText("pbench_user_benchmark3");
+  const datasetNameFour = screen.queryByText("pbench_user_benchmark4");
+  const datasetNameFive = screen.queryByText("pbench_user_benchmark5");
+  expect(datasetNameOne).toBeInTheDocument();
+  expect(datasetNameTwo).toBeInTheDocument();
+  expect(datasetNameThree).toBeInTheDocument();
+  expect(datasetNameFour).toBeInTheDocument();
+  expect(datasetNameFive).toBeInTheDocument();
 });
 
 test("row is favorited after clicking on favorite icon", async () => {
   render(<AppWrapper />);
-  await screen.findByText("dhcp1");
+  await screen.findByText("pbench_user_benchmark1");
   const starBtn = screen.getAllByRole("button", {
     name: /not starred/i,
   });
@@ -43,6 +51,28 @@ test("row is favorited after clicking on favorite icon", async () => {
     name: /see favorites button/i,
   });
   fireEvent.click(favoriteBtn);
-  const favoriteCell = screen.getAllByRole("cell");
-  expect(favoriteCell).toHaveLength(8);
+  const datasetNameOne = screen.queryByText("pbench_user_benchmark1");
+  const datasetNameTwo = screen.queryByText("pbench_user_benchmark2");
+  const datasetNameThree = screen.queryByText("pbench_user_benchmark3");
+  const datasetNameFour = screen.queryByText("pbench_user_benchmark4");
+  const datasetNameFive = screen.queryByText("pbench_user_benchmark5");
+  expect(datasetNameOne).toBeInTheDocument();
+  expect(datasetNameTwo).toBeInTheDocument();
+  expect(datasetNameThree).not.toBeInTheDocument();
+  expect(datasetNameFour).not.toBeInTheDocument();
+  expect(datasetNameFive).not.toBeInTheDocument();
+});
+test("data is filtered based on value in search box", async () => {
+  render(<AppWrapper />);
+  await screen.findByText("pbench_user_benchmark1");
+  const searchBox = screen.getByPlaceholderText(/search dataset/i);
+  fireEvent.change(searchBox, { target: { value: "pbench_user_benchmark2" } });
+  const searchBtn = screen.getByRole("button", {
+    name: /searchButton/i,
+  });
+  fireEvent.click(searchBtn);
+  const datasetNameTwo = screen.queryByText("pbench_user_benchmark2");
+  const datasetNameThree = screen.queryByText("pbench_user_benchmark3");
+  expect(datasetNameTwo).toBeInTheDocument();
+  expect(datasetNameThree).not.toBeInTheDocument();
 });