From 24dbd85087ea777697de16d4b496b80cfc7a8614 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 | 2 +- .../DatePickerComponent/DatePicker.test.js | 15 ++++- .../HeadingComponent/Heading.test.js | 16 ----- .../components/SearchComponent/Search.test.js | 33 ----------- .../components/SearchComponent/index.jsx | 32 ---------- .../components/TableComponent/Table.test.js | 58 ++++++++++++++----- .../components/TableComponent/index.jsx | 17 +++--- dashboard/src/utils/mockData.js | 5 -- 8 files changed, 65 insertions(+), 113 deletions(-) delete mode 100644 dashboard/src/modules/components/HeadingComponent/Heading.test.js delete mode 100644 dashboard/src/modules/components/SearchComponent/Search.test.js delete mode 100644 dashboard/src/modules/components/SearchComponent/index.jsx diff --git a/dashboard/package.json b/dashboard/package.json index 2b4a931bc7..439e4a6032 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -37,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/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/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.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.jsx b/dashboard/src/modules/components/TableComponent/index.jsx index 69f1062d6d..8845d6fd89 100644 --- a/dashboard/src/modules/components/TableComponent/index.jsx +++ b/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 = () => { - +
{ isSelected={isSelected === "datasetListButton"} onChange={handleButtonClick} className="datasetListButton" + aria-label="see dataset button" /> { isSelected={isSelected === "favoriteListButton"} onChange={handleButtonClick} className="favoriteListButton" + aria-label="see favorites button" /> 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",