From fa144110e96310200a3c9faf1efe0a8922296d8a Mon Sep 17 00:00:00 2001 From: shubhamBansal Date: Tue, 24 May 2022 17:14:19 +0530 Subject: [PATCH] Controller notion removed from test cases and support for coverage added --- dashboard/package.json | 5 +- .../DatePickerComponent/DatePicker.test.js | 15 +- .../components/EmptyStateComponent/index.jsx | 23 -- .../HeadingComponent/Heading.test.js | 16 -- .../components/HeadingComponent/index.css | 5 - .../components/HeadingComponent/index.jsx | 18 -- .../components/SearchComponent/Search.test.js | 33 --- .../components/SearchComponent/index.css | 3 - .../components/SearchComponent/index.jsx | 32 --- .../components/TableComponent/Table.test.js | 58 +++- .../components/TableComponent/index.css | 18 -- .../components/TableComponent/index.jsx | 268 +++++++++--------- dashboard/src/utils/mockData.js | 5 - 13 files changed, 201 insertions(+), 298 deletions(-) delete mode 100644 dashboard/src/modules/components/EmptyStateComponent/index.jsx delete mode 100644 dashboard/src/modules/components/HeadingComponent/Heading.test.js delete mode 100644 dashboard/src/modules/components/HeadingComponent/index.css delete mode 100644 dashboard/src/modules/components/HeadingComponent/index.jsx delete mode 100644 dashboard/src/modules/components/SearchComponent/Search.test.js delete mode 100644 dashboard/src/modules/components/SearchComponent/index.css delete mode 100644 dashboard/src/modules/components/SearchComponent/index.jsx delete mode 100644 dashboard/src/modules/components/TableComponent/index.css diff --git a/dashboard/package.json b/dashboard/package.json index 03e80389ea..439e4a6032 100644 --- a/dashboard/package.json +++ b/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":{ diff --git a/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js b/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js index e7711ccfd6..3c8b144a74 100644 --- a/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js +++ b/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(); - 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(); }); diff --git a/dashboard/src/modules/components/EmptyStateComponent/index.jsx b/dashboard/src/modules/components/EmptyStateComponent/index.jsx deleted file mode 100644 index d152557550..0000000000 --- a/dashboard/src/modules/components/EmptyStateComponent/index.jsx +++ /dev/null @@ -1,23 +0,0 @@ -import React from "react"; -import { - EmptyState, - EmptyStateVariant, - EmptyStateIcon, - Title, - EmptyStateBody, -} from "@patternfly/react-core"; -import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon"; - -function EmptyTable() { - return ( - - - - No results found - - No Records Available - - ); -} - -export default EmptyTable; diff --git a/dashboard/src/modules/components/HeadingComponent/Heading.test.js b/dashboard/src/modules/components/HeadingComponent/Heading.test.js deleted file mode 100644 index d890b7f119..0000000000 --- a/dashboard/src/modules/components/HeadingComponent/Heading.test.js +++ /dev/null @@ -1,16 +0,0 @@ -import { Provider } from "react-redux"; -import store from "store/store"; -import App from "../../../App"; -const { render, screen } = require("@testing-library/react"); -const AppWrapper = () => { - return ( - - - - ); -}; -test("Page heading is displayed on initial load", () => { - render(); - const heading = screen.getByRole("heading", { name: /controllers/i }); - expect(heading).toBeInTheDocument(); -}); diff --git a/dashboard/src/modules/components/HeadingComponent/index.css b/dashboard/src/modules/components/HeadingComponent/index.css deleted file mode 100644 index e76ac482b0..0000000000 --- a/dashboard/src/modules/components/HeadingComponent/index.css +++ /dev/null @@ -1,5 +0,0 @@ -.publicDataPageTitle{ - font-weight: 800 !important; - margin-bottom: 2vh !important; - margin-top: 2vh !important; -} diff --git a/dashboard/src/modules/components/HeadingComponent/index.jsx b/dashboard/src/modules/components/HeadingComponent/index.jsx deleted file mode 100644 index f2be38ae87..0000000000 --- a/dashboard/src/modules/components/HeadingComponent/index.jsx +++ /dev/null @@ -1,18 +0,0 @@ -import { Text, TextContent, TextVariants } from "@patternfly/react-core"; -import "./index.css" -import React from "react"; - -function Heading({ headingTitle }) { - return ( - - - {headingTitle} - - - ); -} - -export default Heading; diff --git a/dashboard/src/modules/components/SearchComponent/Search.test.js b/dashboard/src/modules/components/SearchComponent/Search.test.js deleted file mode 100644 index bb587fe755..0000000000 --- a/dashboard/src/modules/components/SearchComponent/Search.test.js +++ /dev/null @@ -1,33 +0,0 @@ -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 ( - - - - ); -}; -jest.mock("utils/api", () => { - return { - get: () => ({ - data: MOCK_DATA, - }), - }; -}); -test("data is filtered based on value in search box", async () => { - render(); - 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(); -}); diff --git a/dashboard/src/modules/components/SearchComponent/index.css b/dashboard/src/modules/components/SearchComponent/index.css deleted file mode 100644 index 37ee965e91..0000000000 --- a/dashboard/src/modules/components/SearchComponent/index.css +++ /dev/null @@ -1,3 +0,0 @@ -.searchInputGroup{ - width: 25vw !important; -} diff --git a/dashboard/src/modules/components/SearchComponent/index.jsx b/dashboard/src/modules/components/SearchComponent/index.jsx deleted file mode 100644 index ef8da69d36..0000000000 --- a/dashboard/src/modules/components/SearchComponent/index.jsx +++ /dev/null @@ -1,32 +0,0 @@ -import React,{useState} from "react"; -import "./index.css" -import { InputGroup, TextInput, Button } from "@patternfly/react-core"; -import SearchIcon from "@patternfly/react-icons/dist/esm/icons/search-icon"; -import { filterData } from "utils/filterDataset"; -function SearchBox({ - dataArray, - setPublicData, - startDate, - endDate, - setControllerName, -}) { - const [controllerValue, setControllerValue] = useState(""); - const searchController = () => { - setPublicData(filterData(dataArray, startDate, endDate, controllerValue)); - setControllerName(controllerValue); - }; - return ( - - setControllerValue(e)} - > - - - ); -} - -export default SearchBox; diff --git a/dashboard/src/modules/components/TableComponent/Table.test.js b/dashboard/src/modules/components/TableComponent/Table.test.js index b83254ee44..814f43499f 100644 --- a/dashboard/src/modules/components/TableComponent/Table.test.js +++ b/dashboard/src/modules/components/TableComponent/Table.test.js @@ -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 ( @@ -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(); + 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(); - 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(); - 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(); + 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(); }); diff --git a/dashboard/src/modules/components/TableComponent/index.css b/dashboard/src/modules/components/TableComponent/index.css deleted file mode 100644 index cdbda2df4a..0000000000 --- a/dashboard/src/modules/components/TableComponent/index.css +++ /dev/null @@ -1,18 +0,0 @@ -table th -{ - border-top: 1px solid #d2d2d2; -} -.sidebar{ -height: 100vh; -} - -.controllerListButton,.favoriteListButton{ - margin-top: 3vh; - margin-bottom: 2vh; -} - -.filterContainer{ - display: flex; - margin-right: 10px; - height: 36px; -} diff --git a/dashboard/src/modules/components/TableComponent/index.jsx b/dashboard/src/modules/components/TableComponent/index.jsx index 687e3bb41a..8845d6fd89 100644 --- a/dashboard/src/modules/components/TableComponent/index.jsx +++ b/dashboard/src/modules/components/TableComponent/index.jsx @@ -1,6 +1,6 @@ import React, { useState, useEffect } from "react"; -import { useDispatch } from "react-redux"; -import "./index.css"; +import { useDispatch, useSelector } from "react-redux"; +import "./index.less"; import { ToggleGroup, ToggleGroupItem, @@ -15,49 +15,48 @@ import { Tbody, Td, } from "@patternfly/react-table"; -import SearchBox from "../SearchComponent"; +import { + fetchPublicDatasets, + updateFavoriteRepoNames, + updateTblData, + getFavoritedDatasets, +} from "actions/datasetListActions"; +import TablePagination from "../PaginationComponent"; import DatePickerWidget from "../DatePickerComponent"; -import Heading from "../HeadingComponent"; import PathBreadCrumb from "../BreadCrumbComponent"; -import EmptyTable from "../EmptyStateComponent"; -import { fetchPublicDatasets } from "../../../actions/fetchPublicDatasets"; -import TablePagination from "../PaginationComponent"; -import MainLayout from "../../containers/MainLayout"; -import LoginAlertMessage from "../AlertComponent"; -import { getTodayMidnightUTCDate } from "utils/getMidnightUTCDate"; +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 controllerName = ""; -let dataArray = []; -export const TableWithFavorite = () => { +let endDate = bumpToDate(getTodayMidnightUTCDate(),1); +let datasetName = ""; + +const TableWithFavorite = () => { const columnNames = { - controller: "Controller", name: "Name", creationDate: "Created On", }; const [activeSortIndex, setActiveSortIndex] = useState(null); const [activeSortDirection, setActiveSortDirection] = useState(null); - const [favoriteRepoNames, setFavoriteRepoNames] = useState([]); - const [publicData, setPublicData] = useState([]); - const [isSelected, setIsSelected] = useState("controllerListButton"); + const [isSelected, setIsSelected] = useState("datasetListButton"); const [page, setPage] = useState(1); const [perPage, setPerPage] = useState(10); + const [loginHintVisible, setLoginHintVisible] = useState(true); + const dispatch = useDispatch(); + useEffect(() => { - dispatch(fetchPublicDatasets()) - .then((res) => { - dataArray = res.data; - setPublicData(res.data); - setFavoriteRepoNames( - localStorage.getItem("favControllers") !== null - ? JSON.parse(localStorage.getItem("favControllers")) - : [] - ); - }) - .catch((err) => { - console.log(err); - }); - }, []); + dispatch(fetchPublicDatasets()); + dispatch(getFavoritedDatasets()); + }, [dispatch]); + + const { publicData, favoriteRepoNames,tableData } = useSelector( + (state) => state.datasetlist + ); + const setPublicData = (data) => { + dispatch(updateTblData(data)); + }; const markRepoFavorited = (repo, isFavoriting = true) => { const otherFavorites = favoriteRepoNames.filter( (r) => r.name !== repo.name @@ -66,18 +65,19 @@ export const TableWithFavorite = () => { ? [...otherFavorites, repo] : otherFavorites; saveFavorites(newFavorite); - setFavoriteRepoNames(newFavorite); + dispatch(updateFavoriteRepoNames(newFavorite)); }; const selectedArray = - isSelected === "controllerListButton" - ? publicData.slice((page - 1) * perPage, page * perPage) - : favoriteRepoNames.slice((page - 1) * perPage, page * perPage); + isSelected === "datasetListButton" + ? publicData?.slice((page - 1) * perPage, page * perPage) + : favoriteRepoNames?.slice((page - 1) * perPage, page * perPage); const isRepoFavorited = (repo) => !!favoriteRepoNames.find((element) => element.name === repo.name); - const getSortableRowValues = (publicData) => { - const { controller, name } = publicData; - const creationDate = publicData.metadata["dataset.created"]; + + const getSortableRowValues = (data) => { + const { controller, name } = data; + const creationDate = data.metadata["dataset.created"]; return [controller, name, creationDate]; }; if (activeSortIndex !== null) { @@ -110,107 +110,121 @@ export const TableWithFavorite = () => { const id = event.currentTarget.id; setIsSelected(id); }; - const setControllerName = (controllerNameValue) => { - controllerName = controllerNameValue; + const setDatasetName = (datasetNameValue) => { + datasetName = datasetNameValue; }; const setDateRange = (startDateValue, endDateValue) => { startDate = startDateValue; endDate = endDateValue; }; const saveFavorites = (fav) => { - localStorage.setItem("favControllers", JSON.stringify(fav)); + localStorage.setItem("favorite_datasets", JSON.stringify(fav)); + }; + + const datasetBreadcrumb = [ + { name: "Dashboard", link: "/" }, + { name: "Results", link: "" }, + ]; + + const onCloseLoginHint = () => { + setLoginHintVisible(false); }; return ( <> - - - - - -
- - -
- - - - - - + {loginHintVisible && ( + + )} + + + + +
+ + +
+ + + + + + + + {columnNames.name} + {columnNames.creationDate} + + + + + {selectedArray && selectedArray.length > 0 ? ( + selectedArray.map((repo, rowIndex) => ( + + {repo.name} + + {repo.metadata["dataset.created"]} + + { + markRepoFavorited(repo, isFavoriting); + }, + rowIndex, + }} + /> + + )) + ) : ( - {columnNames.controller} - {columnNames.name} - {columnNames.creationDate} - - - - - {selectedArray.length > 0 ? ( - selectedArray.map((repo, rowIndex) => ( - - - {repo.controller} - - {repo.name} - - {repo.metadata["dataset.created"]} - - { - markRepoFavorited(repo, isFavoriting); - }, - rowIndex, - }} - /> - - )) - ) : ( - )} - - - - - + + )} + + + + ); }; + +export default TableWithFavorite; diff --git a/dashboard/src/utils/mockData.js b/dashboard/src/utils/mockData.js index 42a055f3b1..ec7e17b00e 100644 --- a/dashboard/src/utils/mockData.js +++ b/dashboard/src/utils/mockData.js @@ -1,34 +1,29 @@ export const MOCK_DATA = [ { - controller: "dhcp1", name: "pbench_user_benchmark1", metadata: { "dataset.created": "2022-02-16T13:21:29+00:00", }, }, { - controller: "dhcp2", name: "pbench_user_benchmark2", metadata: { "dataset.created": "2022-02-18T13:21:29+00:00", }, }, { - controller: "dhcp3", name: "pbench_user_benchmark3", metadata: { "dataset.created": "2022-02-20T13:21:29+00:00", }, }, { - controller: "dhcp4", name: "pbench_user_benchmark4", metadata: { "dataset.created": "2022-02-25T13:21:29+00:00", }, }, { - controller: "dhcp5", name: "pbench_user_benchmark5", metadata: { "dataset.created": "2022-03-08T13:21:29+00:00",