From e7766198413ec0cb3f2fef3cf52488e9a9af4592 Mon Sep 17 00:00:00 2001 From: Suhas H C Date: Mon, 24 Jun 2024 22:15:27 +0530 Subject: [PATCH 01/22] multiple dropdown selection button --- src/App.js | 4 +++- src/component/DropDown.js | 19 ++++++++++++++++++ src/component/Generic.js | 42 +++++++++++++++++++++++++++++++++++++++ 3 files changed, 64 insertions(+), 1 deletion(-) create mode 100644 src/component/DropDown.js create mode 100644 src/component/Generic.js diff --git a/src/App.js b/src/App.js index e4fcb8e..8ce12c2 100644 --- a/src/App.js +++ b/src/App.js @@ -1,10 +1,12 @@ import "./App.css"; +import Generic from "./component/Generic"; import UserDropDown from "./component/UserDropDown"; function App() { return ( <> - + {/* */} + ); } diff --git a/src/component/DropDown.js b/src/component/DropDown.js new file mode 100644 index 0000000..c06321c --- /dev/null +++ b/src/component/DropDown.js @@ -0,0 +1,19 @@ +import { Autocomplete, TextField } from "@mui/material"; +import React from "react"; + +const DropDown = ({ label, options, value, onChange }) => { + return ( + option.label} + value={value} + onChange={(event, newValue) => onChange(newValue)} + renderInput={(params) => ( + + )} + isOptionEqualToValue={(option, value) => option.value === value.value} + /> + ); +}; + +export default DropDown; diff --git a/src/component/Generic.js b/src/component/Generic.js new file mode 100644 index 0000000..6dfd3bf --- /dev/null +++ b/src/component/Generic.js @@ -0,0 +1,42 @@ +import React, { useState } from "react"; +import { Button } from "@mui/material"; +import DropDown from "./DropDown"; + +const Generic = () => { + const [dropdown1Value, setDropdown1Value] = useState(null); + const [dropdown2Value, setDropdown2Value] = useState(null); + + const options1 = [ + { value: "option1_1", label: "Option 1-1" }, + { value: "option1_2", label: "Option 1-2" }, + ]; + + const options2 = [ + { value: "option2_1", label: "Option 2-1" }, + { value: "option2_2", label: "Option 2-2" }, + ]; + + const isButtonEnabled = dropdown1Value !== null && dropdown2Value !== null; + + return ( +
+ + + +
+ ); +}; + +export default Generic; From 66c3f010d2dc29bef75ca2e8a9fb6b3ebb5f236a Mon Sep 17 00:00:00 2001 From: Suhas H C Date: Sun, 14 Jul 2024 12:18:34 +0530 Subject: [PATCH 02/22] used context to fetch the state and update the existing --- src/App.js | 9 +++-- src/component/DropDown.js | 19 ---------- src/component/Generic.js | 42 ---------------------- src/component/UserDropDown.js | 17 +++++---- src/constant/Constant.js | 1 + src/context/InitialState.js | 5 +++ src/context/UserDropDownContextProvider.js | 38 ++++++++++++++++++++ src/service/DropDownService.js | 16 ++++----- 8 files changed, 62 insertions(+), 85 deletions(-) delete mode 100644 src/component/DropDown.js delete mode 100644 src/component/Generic.js create mode 100644 src/constant/Constant.js create mode 100644 src/context/InitialState.js create mode 100644 src/context/UserDropDownContextProvider.js diff --git a/src/App.js b/src/App.js index 8ce12c2..4e35e53 100644 --- a/src/App.js +++ b/src/App.js @@ -1,13 +1,12 @@ import "./App.css"; -import Generic from "./component/Generic"; import UserDropDown from "./component/UserDropDown"; +import UserDropDownContextProvider from "./context/UserDropDownContextProvider"; function App() { return ( - <> - {/* */} - - + + + ); } diff --git a/src/component/DropDown.js b/src/component/DropDown.js deleted file mode 100644 index c06321c..0000000 --- a/src/component/DropDown.js +++ /dev/null @@ -1,19 +0,0 @@ -import { Autocomplete, TextField } from "@mui/material"; -import React from "react"; - -const DropDown = ({ label, options, value, onChange }) => { - return ( - option.label} - value={value} - onChange={(event, newValue) => onChange(newValue)} - renderInput={(params) => ( - - )} - isOptionEqualToValue={(option, value) => option.value === value.value} - /> - ); -}; - -export default DropDown; diff --git a/src/component/Generic.js b/src/component/Generic.js deleted file mode 100644 index 6dfd3bf..0000000 --- a/src/component/Generic.js +++ /dev/null @@ -1,42 +0,0 @@ -import React, { useState } from "react"; -import { Button } from "@mui/material"; -import DropDown from "./DropDown"; - -const Generic = () => { - const [dropdown1Value, setDropdown1Value] = useState(null); - const [dropdown2Value, setDropdown2Value] = useState(null); - - const options1 = [ - { value: "option1_1", label: "Option 1-1" }, - { value: "option1_2", label: "Option 1-2" }, - ]; - - const options2 = [ - { value: "option2_1", label: "Option 2-1" }, - { value: "option2_2", label: "Option 2-2" }, - ]; - - const isButtonEnabled = dropdown1Value !== null && dropdown2Value !== null; - - return ( -
- - - -
- ); -}; - -export default Generic; diff --git a/src/component/UserDropDown.js b/src/component/UserDropDown.js index 5e91f9a..0411555 100644 --- a/src/component/UserDropDown.js +++ b/src/component/UserDropDown.js @@ -1,17 +1,16 @@ import { Autocomplete, Button, TextField } from "@mui/material"; -import React, { useEffect, useState } from "react"; +import React, { useContext, useEffect } from "react"; import "../css/UserDropDown.css"; -import getUsers from "../service/DropDownService"; +import { UserDropDownContext } from "../context/UserDropDownContextProvider"; const UserDropDown = () => { - const url = "https://jsonplaceholder.typicode.com/users"; - const [state, setState] = useState({ - username: [], - selectedUser: [], - isButtonDisabled: true, - }); + const { state, setState, fetchUserDetails } = useContext(UserDropDownContext); - getUsers(url, setState); + useEffect(() => { + (async () => { + await fetchUserDetails(); + })(); + }, []); const handleChange = (event, newValue) => { let showButton = newValue.length === 0 ? true : false; diff --git a/src/constant/Constant.js b/src/constant/Constant.js new file mode 100644 index 0000000..fa2d333 --- /dev/null +++ b/src/constant/Constant.js @@ -0,0 +1 @@ +export const URL = "https://jsonplaceholder.typicode.com/users"; diff --git a/src/context/InitialState.js b/src/context/InitialState.js new file mode 100644 index 0000000..1bd8df7 --- /dev/null +++ b/src/context/InitialState.js @@ -0,0 +1,5 @@ +export const userInitialState = { + username: [], + selectedUser: [], + isButtonDisabled: true, +}; diff --git a/src/context/UserDropDownContextProvider.js b/src/context/UserDropDownContextProvider.js new file mode 100644 index 0000000..879a58f --- /dev/null +++ b/src/context/UserDropDownContextProvider.js @@ -0,0 +1,38 @@ +import React, { createContext, useState } from "react"; +import getUsers from "../service/DropDownService"; +import { userInitialState } from "./InitialState"; +import { URL } from "../constant/Constant"; + +export const UserDropDownContext = createContext(); + +const UserDropDownContextProvider = ({ children }) => { + const [state, setState] = useState(userInitialState); + + const fetchUserDetails = async () => { + try { + const response = await getUsers(URL); + if (!response.ok) { + throw new Error("Network response was not ok"); + } + const users = await response.json(); + const names = users.map((user) => user.name); + setState((prev) => ({ ...prev, username: names })); + } catch (error) { + console.error("Failed fetching users data:", error); + } + }; + + return ( + + {children} + + ); +}; + +export default UserDropDownContextProvider; diff --git a/src/service/DropDownService.js b/src/service/DropDownService.js index 5665419..ccc4d35 100644 --- a/src/service/DropDownService.js +++ b/src/service/DropDownService.js @@ -1,13 +1,9 @@ -const getUsers = (url, setState) => { - fetch(url) - .then((response) => response.json()) - .then((result) => { - let names = result.map((user) => user.name); - setState((prev) => { - return { ...prev, username: names }; - }); - }) - .catch((err) => console.warn(err)); +const getUsers = async (url) => { + const response = await fetch(url); + if (!response.ok) { + console.error("Network call failed"); + } + return response; }; export default getUsers; From 310ecfe13e6cd56f072545b9c203660f35f722eb Mon Sep 17 00:00:00 2001 From: Suhas H C Date: Sun, 14 Jul 2024 12:50:45 +0530 Subject: [PATCH 03/22] tests added --- src/component/UserDropDown.js | 4 ++-- src/service/DropDownService.js | 2 +- src/tests/UserDropDown.test.js | 32 ++++++++++++++++++++++---------- src/tests/utils/TestUtils.js | 25 +++++++++++++++++++++++++ 4 files changed, 50 insertions(+), 13 deletions(-) create mode 100644 src/tests/utils/TestUtils.js diff --git a/src/component/UserDropDown.js b/src/component/UserDropDown.js index 0411555..e4a113a 100644 --- a/src/component/UserDropDown.js +++ b/src/component/UserDropDown.js @@ -34,7 +34,7 @@ const UserDropDown = () => { value={state.selectedUser} sx={{ width: 500 }} onChange={handleChange} - data-testid="my-user-dropdown" + data-testid="user-dropdown-type-testid" renderInput={(params) => } /> + ); +}; + +export default BackNavigationButton; diff --git a/src/tests/component/BackNavigationButton.test.js b/src/tests/component/BackNavigationButton.test.js new file mode 100644 index 0000000..f39e79a --- /dev/null +++ b/src/tests/component/BackNavigationButton.test.js @@ -0,0 +1,55 @@ +import "@testing-library/jest-dom"; +import { render, screen, waitFor } from "@testing-library/react"; +import userEvent from "@testing-library/user-event"; +import React, { act } from "react"; +import BackNavigationButton from "../../component/BackNavigationButton"; +import { + UserDropDownContext, +} from "../../context/UserDropDownContextProvider"; +import { BACK_NAVIGATION_CONTEXT } from "../utils/TestUtils"; + +describe("Tests for Back Navigation component", () => { + it("should render back navigation button", async () => { + render( + + + + ); + expect(screen.getByTestId("back-button-type-testid")).toBeInTheDocument(); + }); + + it("should render back navigation button which is not disabled", async () => { + render( + + + + ); + const button = screen.getByTestId("back-button-type-testid"); + expect(button).toBeInTheDocument(); + expect(button).not.toBeDisabled(); + }); + + it("should call handle navigation when back button is clicked", async () => { + await act(async () => + render( + + + + ) + ); + await waitFor(() => { + const button = screen.getByTestId("back-button-type-testid"); + expect(button).toBeInTheDocument(); + expect(button).not.toBeDisabled(); + userEvent.click(button); + }); + await waitFor(() => { + expect(BACK_NAVIGATION_CONTEXT.setClientDashboard).toHaveBeenCalled(); + expect(BACK_NAVIGATION_CONTEXT.setClientDashboard).toHaveBeenCalledTimes(1); + expect(BACK_NAVIGATION_CONTEXT.setClientDashboard).toHaveBeenCalledWith({ + childPage: false, + parentPage: true, + }); + }); + }); +}); diff --git a/src/tests/utils/TestUtils.js b/src/tests/utils/TestUtils.js index d4f19b8..e7b1605 100644 --- a/src/tests/utils/TestUtils.js +++ b/src/tests/utils/TestUtils.js @@ -48,3 +48,7 @@ export const todos = [ completed: false, }, ]; + +export const BACK_NAVIGATION_CONTEXT = { + setClientDashboard: jest.fn(), +}; From fe2e7e582c6b65271d00d9fa27a6861a5ccc35e2 Mon Sep 17 00:00:00 2001 From: Suhas H C Date: Mon, 23 Dec 2024 14:32:37 +0530 Subject: [PATCH 21/22] Added App.test.js and some more assertions --- src/component/ClientDashboard.js | 1 + src/tests/App.test.js | 41 +++++++++++++++++++ .../component/BackNavigationButton.test.js | 4 ++ src/tests/component/ClientDashboard.test.js | 6 +++ src/tests/component/UserDropDown.test.js | 13 +++++- src/tests/utils/TestUtils.js | 40 +++++++++++++----- 6 files changed, 93 insertions(+), 12 deletions(-) create mode 100644 src/tests/App.test.js diff --git a/src/component/ClientDashboard.js b/src/component/ClientDashboard.js index 8c766ca..958e67f 100644 --- a/src/component/ClientDashboard.js +++ b/src/component/ClientDashboard.js @@ -49,6 +49,7 @@ const ClientDashboard = ({ name }) => { }, }} pageSizeOptions={[5]} + data-testid="data-grid-testid" disableRowSelectionOnClick /> diff --git a/src/tests/App.test.js b/src/tests/App.test.js new file mode 100644 index 0000000..1531945 --- /dev/null +++ b/src/tests/App.test.js @@ -0,0 +1,41 @@ +import "@testing-library/jest-dom"; +import { act, render, screen, waitFor } from "@testing-library/react"; +import React from "react"; +import App from "../App"; +import UserDropDownContextProvider, { UserDropDownContext } from "../context/UserDropDownContextProvider"; +import { APP_CONTEXT, todos } from "./utils/TestUtils"; + +describe("Tests for App component", () => { + it("should render user dropdown component when viewForAdmin is true", async () => { + render( + + + + ); + expect(screen.getByTestId("user-dropdown-type-testid")).toBeInTheDocument(); + }); + + it("should render data grid component when viewForAdmin is false", async () => { + const NON_ADMIN_DASHBOARD_CONTEXT = { ...APP_CONTEXT, clientDashboard: { childPage: true, parentPage: false } } + await act(async () => + render( + + + + ) + ) + await waitFor(() => { + expect(screen.getByTestId("back-button-type-testid")).toBeInTheDocument(); + expect(screen.getByTestId("data-grid-testid")).toBeInTheDocument(); + expect(NON_ADMIN_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalled(); + expect(NON_ADMIN_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalledTimes(1); + expect(NON_ADMIN_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalledWith(); + expect(NON_ADMIN_DASHBOARD_CONTEXT.fetchGridData).toHaveReturnedTimes(1); + expect(NON_ADMIN_DASHBOARD_CONTEXT.fetchGridData).toHaveReturnedWith({ data: todos }); + expect(NON_ADMIN_DASHBOARD_CONTEXT.fetchUserDetails).not.toHaveBeenCalled(); + expect(NON_ADMIN_DASHBOARD_CONTEXT.fetchUserDetails).not.toHaveReturned(); + expect(NON_ADMIN_DASHBOARD_CONTEXT.setClientDashboard).not.toHaveBeenCalled(); + expect(NON_ADMIN_DASHBOARD_CONTEXT.setClientDashboard).not.toHaveReturned(); + }); + }); +}); diff --git a/src/tests/component/BackNavigationButton.test.js b/src/tests/component/BackNavigationButton.test.js index f39e79a..49f8ea9 100644 --- a/src/tests/component/BackNavigationButton.test.js +++ b/src/tests/component/BackNavigationButton.test.js @@ -7,6 +7,7 @@ import { UserDropDownContext, } from "../../context/UserDropDownContextProvider"; import { BACK_NAVIGATION_CONTEXT } from "../utils/TestUtils"; +import { EMPTY_OBJECT } from "../../constant/Constant"; describe("Tests for Back Navigation component", () => { it("should render back navigation button", async () => { @@ -50,6 +51,9 @@ describe("Tests for Back Navigation component", () => { childPage: false, parentPage: true, }); + expect(BACK_NAVIGATION_CONTEXT.setClientDashboard).toHaveReturned(); + expect(BACK_NAVIGATION_CONTEXT.setClientDashboard).toHaveReturnedTimes(1); + expect(BACK_NAVIGATION_CONTEXT.setClientDashboard).toHaveReturnedWith(EMPTY_OBJECT); }); }); }); diff --git a/src/tests/component/ClientDashboard.test.js b/src/tests/component/ClientDashboard.test.js index 744d7da..3998dfd 100644 --- a/src/tests/component/ClientDashboard.test.js +++ b/src/tests/component/ClientDashboard.test.js @@ -29,6 +29,9 @@ describe("Tests for Client Dashboard component", () => { expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalled(); expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalledTimes(1); expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalledWith(); + expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveReturned(); + expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveReturnedTimes(1); + expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveReturnedWith({ data: todos }); }); it("user should see a row on the data grid when component is rendered", async () => { @@ -48,6 +51,9 @@ describe("Tests for Client Dashboard component", () => { expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalled(); expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalledTimes(1); expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveBeenCalledWith(); + expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveReturned(); + expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveReturnedTimes(1); + expect(CLIENT_DASHBOARD_CONTEXT.fetchGridData).toHaveReturnedWith({ data: todos }); }); }); }); diff --git a/src/tests/component/UserDropDown.test.js b/src/tests/component/UserDropDown.test.js index 70abd5f..dcd4639 100644 --- a/src/tests/component/UserDropDown.test.js +++ b/src/tests/component/UserDropDown.test.js @@ -9,7 +9,7 @@ import { users } from "../utils/TestUtils"; import { EMPTY_OBJECT, GET, HEADERS, USERS_ENDPOINT } from "../../constant/Constant"; describe("Tests for User Dropdown component", () => { - ApiConfig.fetchResponse = jest.fn().mockResolvedValue({ + ApiConfig.fetchResponse = jest.fn().mockReturnValue({ data: users, }); @@ -25,6 +25,9 @@ describe("Tests for User Dropdown component", () => { await waitFor(() => { expect(ApiConfig.fetchResponse).toHaveBeenCalled(); expect(ApiConfig.fetchResponse).toHaveBeenNthCalledWith(1, USERS_ENDPOINT, GET, HEADERS, EMPTY_OBJECT); + expect(ApiConfig.fetchResponse).toHaveReturned(); + expect(ApiConfig.fetchResponse).toHaveReturnedTimes(1); + expect(ApiConfig.fetchResponse).toHaveReturnedWith({ data: users }); }); }); @@ -40,6 +43,8 @@ describe("Tests for User Dropdown component", () => { await waitFor(() => { expect(ApiConfig.fetchResponse).toHaveBeenCalled(); expect(ApiConfig.fetchResponse).toHaveBeenNthCalledWith(1, USERS_ENDPOINT, GET, HEADERS, EMPTY_OBJECT); + expect(ApiConfig.fetchResponse).toHaveReturned(); + expect(ApiConfig.fetchResponse).toHaveReturnedWith({ data: users }); }); }); @@ -56,6 +61,8 @@ describe("Tests for User Dropdown component", () => { await waitFor(() => { expect(ApiConfig.fetchResponse).toHaveBeenCalled(); expect(ApiConfig.fetchResponse).toHaveBeenNthCalledWith(1, USERS_ENDPOINT, GET, HEADERS, EMPTY_OBJECT); + expect(ApiConfig.fetchResponse).toHaveReturned(); + expect(ApiConfig.fetchResponse).toHaveReturnedWith({ data: users }); }); }); @@ -73,6 +80,8 @@ describe("Tests for User Dropdown component", () => { await waitFor(() => { expect(ApiConfig.fetchResponse).toHaveBeenCalled(); expect(ApiConfig.fetchResponse).toHaveBeenNthCalledWith(1, USERS_ENDPOINT, GET, HEADERS, EMPTY_OBJECT); + expect(ApiConfig.fetchResponse).toHaveReturned(); + expect(ApiConfig.fetchResponse).toHaveReturnedWith({ data: users }); }); }); @@ -92,6 +101,8 @@ describe("Tests for User Dropdown component", () => { await waitFor(() => { expect(ApiConfig.fetchResponse).toHaveBeenCalled(); expect(ApiConfig.fetchResponse).toHaveBeenNthCalledWith(1, USERS_ENDPOINT, GET, HEADERS, EMPTY_OBJECT); + expect(ApiConfig.fetchResponse).toHaveReturned(); + expect(ApiConfig.fetchResponse).toHaveReturnedWith({ data: users }); }); }); }); diff --git a/src/tests/utils/TestUtils.js b/src/tests/utils/TestUtils.js index e7b1605..31cd947 100644 --- a/src/tests/utils/TestUtils.js +++ b/src/tests/utils/TestUtils.js @@ -1,3 +1,6 @@ +import { EMPTY_OBJECT } from "../../constant/Constant"; +import { userInitialState, viewForAdmin } from "../../context/InitialState"; + export const users = [ { id: 1, @@ -24,8 +27,19 @@ export const users = [ }, ]; +export const todos = [ + { + userId: 1, + id: 1, + title: "delectus aut autem", + completed: false, + }, +]; + export const CLIENT_DASHBOARD_CONTEXT = { - fetchGridData: jest.fn(), + fetchGridData: jest.fn().mockReturnValue({ + data: todos + }), names: ["John", "Marco", "Elvis"], }; @@ -40,15 +54,19 @@ export const USER_DROPDOWN_CONTEXT = { setClientDashboard: jest.fn(), }; -export const todos = [ - { - userId: 1, - id: 1, - title: "delectus aut autem", - completed: false, - }, -]; - export const BACK_NAVIGATION_CONTEXT = { - setClientDashboard: jest.fn(), + setClientDashboard: jest.fn().mockReturnValue(EMPTY_OBJECT), }; + +export const APP_CONTEXT = { + state: userInitialState, + setState: jest.fn(), + fetchUserDetails: jest.fn().mockReturnValue({ + data: users + }), + fetchGridData: jest.fn().mockReturnValue({ + data: todos + }), + clientDashboard: viewForAdmin, + setClientDashboard: jest.fn(), +}; \ No newline at end of file From 5451383aa8dbe14a90b3da8906837bbb78f76591 Mon Sep 17 00:00:00 2001 From: Suhas H C Date: Mon, 23 Dec 2024 16:26:59 +0530 Subject: [PATCH 22/22] Added tests for service layer --- src/tests/service/ApiFetchConfig.test.js | 30 ++++++++++++++++++++ src/tests/service/DropDownService.test.js | 34 +++++++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 src/tests/service/ApiFetchConfig.test.js create mode 100644 src/tests/service/DropDownService.test.js diff --git a/src/tests/service/ApiFetchConfig.test.js b/src/tests/service/ApiFetchConfig.test.js new file mode 100644 index 0000000..922bbc7 --- /dev/null +++ b/src/tests/service/ApiFetchConfig.test.js @@ -0,0 +1,30 @@ +import "@testing-library/jest-dom"; +import axios from 'axios'; +import { EMPTY_OBJECT, GET, HEADERS } from "../../constant/Constant"; +import * as ApiConfig from "../../service/ApiFetchConfig"; +import { users } from "../utils/TestUtils"; + +jest.mock("axios"); +describe("Tests for API Fetch Config component", () => { + it("should return appropriate response based on status", async () => { + const APIResponse = { status: 200 }; + const statusResponse = await ApiConfig.handleResponse(APIResponse); + expect(statusResponse).toEqual(APIResponse); + }); + + it("should call axios with appropriate parameters and return the response", async () => { + const url = "https://test/users"; + axios.mockResolvedValue({ + status: 200, + data: users + }); + const fetchResponse = await ApiConfig.fetchResponse(url, GET, HEADERS, EMPTY_OBJECT); + expect(fetchResponse.data.length).toEqual(users.length); + expect(fetchResponse.status).toEqual(200); + expect(axios).toHaveBeenCalled(); + expect(axios).toHaveBeenCalledTimes(1); + expect(axios).toHaveBeenCalledWith({ url, method: GET, headers: HEADERS, data: EMPTY_OBJECT }); + expect(axios).toHaveReturned(); + expect(axios).toHaveReturnedTimes(1); + }); +}); diff --git a/src/tests/service/DropDownService.test.js b/src/tests/service/DropDownService.test.js new file mode 100644 index 0000000..bd91029 --- /dev/null +++ b/src/tests/service/DropDownService.test.js @@ -0,0 +1,34 @@ +import "@testing-library/jest-dom"; +import { EMPTY_OBJECT, GET, HEADERS } from "../../constant/Constant"; +import * as ApiConfig from "../../service/ApiFetchConfig"; +import getUsers, { getGridData } from "../../service/DropDownService"; +import { todos, users } from "../utils/TestUtils"; + +describe("Tests for Drop Down Service component", () => { + it("should return users when API is triggered", async () => { + const url = "https://test/users"; + const APIResponse = { + data: users + }; + ApiConfig.fetchResponse = jest.fn().mockReturnValue(APIResponse); + const response = await getUsers(url); + expect(response.length).toEqual(users.length); + expect(ApiConfig.fetchResponse).toHaveBeenCalled(); + expect(ApiConfig.fetchResponse).toHaveBeenCalledWith(url, GET, HEADERS, EMPTY_OBJECT); + expect(ApiConfig.fetchResponse).toHaveReturned(); + expect(ApiConfig.fetchResponse).toHaveReturnedWith(APIResponse); + }); + it("should return grid data when API is triggered", async () => { + const url = "https://test/grid"; + const APIResponse = { + data: todos + }; + ApiConfig.fetchResponse = jest.fn().mockReturnValue(APIResponse); + const response = await getGridData(url); + expect(response.length).toEqual(users.length); + expect(ApiConfig.fetchResponse).toHaveBeenCalled(); + expect(ApiConfig.fetchResponse).toHaveBeenCalledWith(url, GET, HEADERS, EMPTY_OBJECT); + expect(ApiConfig.fetchResponse).toHaveReturned(); + expect(ApiConfig.fetchResponse).toHaveReturnedWith(APIResponse); + }); +});