Unit test for browsing page

dashboard/package.json

@@ -37,9 +37,16 @@
   "scripts": {
     "start": "react-scripts start",
     "build": "react-scripts build",
-    "test": "react-scripts test",
+    "test": "react-scripts test --coverage",
     "eject": "react-scripts eject"
   },
+  "jest":{
+    "transform": {
+      "^.+\\.[t|j]sx?$": "babel-jest"
+    },
+    "transformIgnorePatterns":["node_modules/(?!@patternfly)/"]
+  }
+  ,
   "eslintConfig": {
     "extends": [
       "react-app",
@@ -59,7 +66,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/public/index.html

@@ -30,7 +30,7 @@
       Notice the use of %PUBLIC_URL% in the tags above.
       It will be replaced with the URL of the `public` folder during the build.
       Only files inside the `public` folder can be referenced from the HTML.
-
+      
       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
       work correctly both with client-side routing and a non-root public URL.
       Learn how to configure a non-root public URL by running `npm run build`.

dashboard/src/App.js

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

dashboard/src/modules/components/AlertComponent/Alert.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?');
+  expect(alert).toBeInTheDocument();
+});
+
+test("Alert message is closed on clicking close button", () => {
+  render(<AppWrapper />);
+  const alert = screen.getByText('Want to see your own data?');
+  const closeButton = screen.getByRole("button", {
+    name: /close info alert/i,
+  });
+  fireEvent.click(closeButton);
+  expect(alert).not.toBeVisible();
+});

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

@@ -0,0 +1,39 @@
+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,
+      status:200
+    }),
+  };
+});
+test("data is filtered based on date range selected from date picker", async () => {
+  render(<AppWrapper />);
+  await screen.findByText("pbench_user_benchmark1");
+  const datePickerInput = screen.getAllByPlaceholderText('YYYY-MM-DD');
+  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'});
+  fireEvent.click(updateBtn);
+  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/TableComponent/Table.test.js

@@ -0,0 +1,78 @@
+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,
+      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' });
+  expect(heading).toBeInTheDocument();
+});
+test("data from API is displayed on initial load", async () => {
+  render(<AppWrapper />);
+  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("pbench_user_benchmark1");
+  const starBtn = screen.getAllByRole("button", {
+    name: 'Not starred',
+  });
+  fireEvent.click(starBtn[0]);
+  fireEvent.click(starBtn[1]);
+  const favoriteBtn = screen.getByRole("button", {
+    name: 'see favorites button',
+  });
+  fireEvent.click(favoriteBtn);
+  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');
+  fireEvent.change(searchBox, { target: { value: "pbench_user_benchmark2" } });
+  const searchBtn = screen.getByRole("button", {
+    name: 'searchButton',
+  });
+  fireEvent.click(searchBtn);
+  const datasetNameTwo = screen.queryByText("pbench_user_benchmark2");
+  const datasetNameThree = screen.queryByText("pbench_user_benchmark3");
+  expect(datasetNameTwo).toBeInTheDocument();
+  expect(datasetNameThree).not.toBeInTheDocument();
+});

dashboard/src/modules/components/TableComponent/common-components.jsx

@@ -79,10 +79,10 @@ export const SearchBox = ({
     <InputGroup className="searchInputGroup">
       <TextInput
         type="text"
-        placeholder="Search"
+        placeholder="Search Dataset"
         onChange={(e) => setSearchKey(e)}
       ></TextInput>
-      <Button variant="control" onClick={search}>
+      <Button variant="control" onClick={search} aria-label="searchButton">
         <SearchIcon />
       </Button>
     </InputGroup>

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

@@ -26,11 +26,11 @@ import DatePickerWidget from "../DatePickerComponent";
 import PathBreadCrumb from "../BreadCrumbComponent";
 import { LoginHint, Heading, EmptyTable, SearchBox } from "./common-components";
 import { getTodayMidnightUTCDate } from "utils/dateFunctions";
+import { bumpToDate } from "utils/dateFunctions";
 
 let startDate = new Date(Date.UTC(1990, 10, 4));
-let endDate = getTodayMidnightUTCDate();
+let endDate = bumpToDate(getTodayMidnightUTCDate(),1);
 let datasetName = "";
-let dataArray = [];
 
 const TableWithFavorite = () => {
   const columnNames = {
@@ -51,7 +51,7 @@ const TableWithFavorite = () => {
     dispatch(getFavoritedDatasets());
   }, [dispatch]);
 
-  const { publicData, favoriteRepoNames } = useSelector(
+  const { publicData, favoriteRepoNames,tableData } = useSelector(
     (state) => state.datasetlist
   );
   const setPublicData = (data) => {
@@ -141,20 +141,17 @@ const TableWithFavorite = () => {
 
       <PageSection variant={PageSectionVariants.light}>
         <PathBreadCrumb pathList={datasetBreadcrumb} />
-        <Heading
-          containerClass="publicDataPageTitle"
-          headingTitle="Results"
-        />
+        <Heading containerClass="publicDataPageTitle" headingTitle="Results" />
         <div className="filterContainer">
           <SearchBox
-            dataArray={dataArray}
+            dataArray={tableData}
             setPublicData={setPublicData}
             startDate={startDate}
             endDate={endDate}
             setDatasetName={setDatasetName}
           />
           <DatePickerWidget
-            dataArray={dataArray}
+            dataArray={tableData}
             setPublicData={setPublicData}
             datasetName={datasetName}
             setDateRange={setDateRange}
@@ -167,13 +164,15 @@ const TableWithFavorite = () => {
             isSelected={isSelected === "datasetListButton"}
             onChange={handleButtonClick}
             className="datasetListButton"
+            aria-label="see dataset 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">

dashboard/src/utils/mockData.js

@@ -0,0 +1,32 @@
+export const MOCK_DATA = [
+  {
+    name: "pbench_user_benchmark1",
+    metadata: {
+      "dataset.created": "2022-02-16T13:21:29+00:00",
+    },
+  },
+  {
+    name: "pbench_user_benchmark2",
+    metadata: {
+      "dataset.created": "2022-02-18T13:21:29+00:00",
+    },
+  },
+  {
+    name: "pbench_user_benchmark3",
+    metadata: {
+      "dataset.created": "2022-02-20T13:21:29+00:00",
+    },
+  },
+  {
+    name: "pbench_user_benchmark4",
+    metadata: {
+      "dataset.created": "2022-02-25T13:21:29+00:00",
+    },
+  },
+  {
+    name: "pbench_user_benchmark5",
+    metadata: {
+      "dataset.created": "2022-03-08T13:21:29+00:00",
+    },
+  },
+];