From ae145bc40c771c2400e6fb315ea1e94fdd4e4a6e Mon Sep 17 00:00:00 2001 From: shubhamBansal Date: Thu, 31 Mar 2022 17:52:28 +0530 Subject: [PATCH 1/3] Unit tests for browsing page component --- dashboard/package.json | 10 ++++ dashboard/public/index.html | 2 +- dashboard/src/App.js | 2 +- dashboard/src/App.test.js | 8 ---- .../components/AlertComponent/Alert.test.js | 26 ++++++++++ .../DatePickerComponent/DatePicker.test.js | 30 ++++++++++++ .../HeadingComponent/Heading.test.js | 16 +++++++ .../components/SearchComponent/Search.test.js | 33 +++++++++++++ .../components/SearchComponent/index.jsx | 32 +++++++++++++ .../components/TableComponent/Table.test.js | 48 +++++++++++++++++++ dashboard/src/utils/mockData.js | 37 ++++++++++++++ 11 files changed, 234 insertions(+), 10 deletions(-) delete mode 100644 dashboard/src/App.test.js create mode 100644 dashboard/src/modules/components/AlertComponent/Alert.test.js create mode 100644 dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js create mode 100644 dashboard/src/modules/components/HeadingComponent/Heading.test.js create mode 100644 dashboard/src/modules/components/SearchComponent/Search.test.js create mode 100644 dashboard/src/modules/components/SearchComponent/index.jsx create mode 100644 dashboard/src/modules/components/TableComponent/Table.test.js create mode 100644 dashboard/src/utils/mockData.js diff --git a/dashboard/package.json b/dashboard/package.json index a373f6882f..2b4a931bc7 100644 --- a/dashboard/package.json +++ b/dashboard/package.json @@ -40,6 +40,13 @@ "test": "react-scripts test", "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" diff --git a/dashboard/public/index.html b/dashboard/public/index.html index 896deda7e5..a386a682bc 100644 --- a/dashboard/public/index.html +++ b/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`. diff --git a/dashboard/src/App.js b/dashboard/src/App.js index 5301b7cce5..c9e3f58991 100644 --- a/dashboard/src/App.js +++ b/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 ( diff --git a/dashboard/src/App.test.js b/dashboard/src/App.test.js deleted file mode 100644 index 1f03afeece..0000000000 --- a/dashboard/src/App.test.js +++ /dev/null @@ -1,8 +0,0 @@ -import { render, screen } from '@testing-library/react'; -import App from './App'; - -test('renders learn react link', () => { - render(); - const linkElement = screen.getByText(/learn react/i); - expect(linkElement).toBeInTheDocument(); -}); diff --git a/dashboard/src/modules/components/AlertComponent/Alert.test.js b/dashboard/src/modules/components/AlertComponent/Alert.test.js new file mode 100644 index 0000000000..e70e15ed3b --- /dev/null +++ b/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 ( + + + + ); +}; +test("Alert message is displayed on initial load", () => { + render(); + const alert = screen.getByText(/want to see your own data/i); + expect(alert).toBeInTheDocument(); +}); + +test("Alert message is closed on clicking close button", () => { + render(); + 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(); +}); diff --git a/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js b/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js new file mode 100644 index 0000000000..e7711ccfd6 --- /dev/null +++ b/dashboard/src/modules/components/DatePickerComponent/DatePicker.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 ( + + + + ); +}; +jest.mock("utils/api", () => { + return { + get: () => ({ + data: MOCK_DATA, + }), + }; +}); +test("data is filtered based on date range selected from date picker", async () => { + render(); + 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); +}); diff --git a/dashboard/src/modules/components/HeadingComponent/Heading.test.js b/dashboard/src/modules/components/HeadingComponent/Heading.test.js new file mode 100644 index 0000000000..d890b7f119 --- /dev/null +++ b/dashboard/src/modules/components/HeadingComponent/Heading.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 ( + + + + ); +}; +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 new file mode 100644 index 0000000000..bb587fe755 --- /dev/null +++ b/dashboard/src/modules/components/SearchComponent/Search.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 ( + + + + ); +}; +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 new file mode 100644 index 0000000000..ef8da69d36 --- /dev/null +++ b/dashboard/src/modules/components/SearchComponent/index.jsx @@ -0,0 +1,32 @@ +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 new file mode 100644 index 0000000000..b83254ee44 --- /dev/null +++ b/dashboard/src/modules/components/TableComponent/Table.test.js @@ -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 ( + + + + ); +}; +jest.mock("utils/api", () => { + return { + get: () => ({ + data: MOCK_DATA, + }), + }; +}); + +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)); +}); + +test("row is favorited after clicking on favorite icon", async () => { + render(); + 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); +}); diff --git a/dashboard/src/utils/mockData.js b/dashboard/src/utils/mockData.js new file mode 100644 index 0000000000..42a055f3b1 --- /dev/null +++ b/dashboard/src/utils/mockData.js @@ -0,0 +1,37 @@ +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", + }, + }, +]; From 24dbd85087ea777697de16d4b496b80cfc7a8614 Mon Sep 17 00:00:00 2001 From: shubhamBansal Date: Tue, 24 May 2022 17:14:19 +0530 Subject: [PATCH 2/3] 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", From 17d87f24a35dd7466073404374b97ab2277a62be Mon Sep 17 00:00:00 2001 From: shubhamBansal Date: Wed, 25 May 2022 02:30:50 +0530 Subject: [PATCH 3/3] Removed case binding match --- .../modules/components/AlertComponent/Alert.test.js | 4 ++-- .../components/DatePickerComponent/DatePicker.test.js | 4 ++-- .../modules/components/TableComponent/Table.test.js | 10 +++++----- .../components/TableComponent/common-components.jsx | 4 ++-- 4 files changed, 11 insertions(+), 11 deletions(-) diff --git a/dashboard/src/modules/components/AlertComponent/Alert.test.js b/dashboard/src/modules/components/AlertComponent/Alert.test.js index e70e15ed3b..eeac933b88 100644 --- a/dashboard/src/modules/components/AlertComponent/Alert.test.js +++ b/dashboard/src/modules/components/AlertComponent/Alert.test.js @@ -11,13 +11,13 @@ const AppWrapper = () => { }; test("Alert message is displayed on initial load", () => { render(); - const alert = screen.getByText(/want to see your own data/i); + const alert = screen.getByText('Want to see your own data?'); expect(alert).toBeInTheDocument(); }); test("Alert message is closed on clicking close button", () => { render(); - const alert = screen.getByText(/want to see your own data/i); + const alert = screen.getByText('Want to see your own data?'); const closeButton = screen.getByRole("button", { name: /close info alert/i, }); diff --git a/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js b/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js index 3c8b144a74..aa325e4ff9 100644 --- a/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js +++ b/dashboard/src/modules/components/DatePickerComponent/DatePicker.test.js @@ -21,10 +21,10 @@ jest.mock("utils/api", () => { test("data is filtered based on date range selected from date picker", async () => { render(); await screen.findByText("pbench_user_benchmark1"); - const datePickerInput = screen.getAllByPlaceholderText(/yyyy-mm-dd/i); + 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/i }); + const updateBtn = screen.getByRole("button", { name: 'Update'}); fireEvent.click(updateBtn); const datasetNameOne = screen.queryByText("pbench_user_benchmark1"); const datasetNameTwo = screen.queryByText("pbench_user_benchmark2"); diff --git a/dashboard/src/modules/components/TableComponent/Table.test.js b/dashboard/src/modules/components/TableComponent/Table.test.js index 814f43499f..6c8474f57a 100644 --- a/dashboard/src/modules/components/TableComponent/Table.test.js +++ b/dashboard/src/modules/components/TableComponent/Table.test.js @@ -21,7 +21,7 @@ jest.mock("utils/api", () => { test("Page heading is displayed on initial load", async () => { render(); await screen.findByText("pbench_user_benchmark1"); - const heading = screen.getByRole("heading", { name: /results/i }); + const heading = screen.getByRole("heading", { name: 'Results' }); expect(heading).toBeInTheDocument(); }); test("data from API is displayed on initial load", async () => { @@ -43,12 +43,12 @@ test("row is favorited after clicking on favorite icon", async () => { render(); await screen.findByText("pbench_user_benchmark1"); const starBtn = screen.getAllByRole("button", { - name: /not starred/i, + name: 'Not starred', }); fireEvent.click(starBtn[0]); fireEvent.click(starBtn[1]); const favoriteBtn = screen.getByRole("button", { - name: /see favorites button/i, + name: 'see favorites button', }); fireEvent.click(favoriteBtn); const datasetNameOne = screen.queryByText("pbench_user_benchmark1"); @@ -65,10 +65,10 @@ test("row is favorited after clicking on favorite icon", async () => { 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); + const searchBox = screen.getByPlaceholderText('Search Dataset'); fireEvent.change(searchBox, { target: { value: "pbench_user_benchmark2" } }); const searchBtn = screen.getByRole("button", { - name: /searchButton/i, + name: 'searchButton', }); fireEvent.click(searchBtn); const datasetNameTwo = screen.queryByText("pbench_user_benchmark2"); diff --git a/dashboard/src/modules/components/TableComponent/common-components.jsx b/dashboard/src/modules/components/TableComponent/common-components.jsx index edb1c30c03..16d0f23bef 100644 --- a/dashboard/src/modules/components/TableComponent/common-components.jsx +++ b/dashboard/src/modules/components/TableComponent/common-components.jsx @@ -79,10 +79,10 @@ export const SearchBox = ({ setSearchKey(e)} > -