Add chip interaction tests

src/components/HomePage/SearchResultsArea/Offer/OfferDetails.js

@@ -19,7 +19,7 @@ import useSession from "../../../../hooks/useSession";
 import useSearchResultsWidgetStyles from "../SearchResultsWidget/searchResultsWidgetStyles";
 import { RouterLink } from "../../../../utils";
 import { JOB_MAX_DURATION } from "../../../../reducers/searchOffersReducer";
-import { useChipsFieldSearch } from "./useChipsFieldSearch";
+import useChipsFieldSearch from "./useChipsFieldSearch";
 import { useHistory } from "react-router-dom";
 
 const defaultLogo = require("./default_icon.svg");

src/components/HomePage/SearchResultsArea/Offer/useChipFieldSearchOffer.spec.js

@@ -0,0 +1,161 @@
+import { createTheme } from "@material-ui/core";
+import React from "react";
+import ReactRouterDom, { MemoryRouter, useLocation } from "react-router-dom";
+import { renderWithStoreAndTheme, fireEvent } from "../../../../test-utils";
+import useOffersSearcher from "../SearchResultsWidget/useOffersSearcher";
+import Offer from "./Offer";
+import OfferWidget from "./OfferWidget";
+import useChipsFieldSearch from "./useChipsFieldSearch";
+
+jest.mock("./useChipsFieldSearch");
+const mockHistoryPush = jest.fn();
+
+jest.mock('react-router-dom', () => ({
+  ...jest.requireActual('react-router-dom'),
+  useHistory: () => ({
+    push: mockHistoryPush,
+  }),
+}));
+
+describe("useChipsFieldSearch", () => {
+    const theme = createTheme({});
+
+
+    const offer = new Offer({
+        _id: "id1",
+        title: "position1",
+        owner: "company_id",
+        ownerName: "company1",
+        ownerLogo: "",
+        location: "location1",
+        fields: ["BACKEND"],
+        technologies: ["Cassandra"],
+        jobMinDuration: 1,
+        jobMaxDuration: 12,
+        jobStartDate: (new Date()).toISOString(),
+        publishDate: "2021-04-22T22:35:57.177Z",
+        publishEndDate: "2021-09-19T23:00:00.000Z",
+        isPaid: false,
+        vacancies: 2,
+        description: "description1",
+    });
+
+
+    it("should redirect and update field filter state if in page", async () => {
+        const addFieldMock = jest.fn();
+        useChipsFieldSearch.mockImplementation(() => ({
+            addField: addFieldMock,
+            setLoadUrlFromFilters: jest.fn(),
+        }));
+
+        const initialState = {
+            offerSearch: {
+                searchValue: "searchValue",
+                jobDuration: [1, 2],
+                fields: [],
+                technologies: [],
+            },
+        };
+
+
+        const wrapper = renderWithStoreAndTheme(
+            <MemoryRouter initialEntries={["/"]}>
+                <OfferWidget offer={offer} isPage={true} />
+            </MemoryRouter>,
+            { initialState, theme }
+        );
+
+        await fireEvent.click(wrapper.getByText("Back-End"));
+
+        expect(mockHistoryPush).toHaveBeenCalledWith("/");
+        expect(addFieldMock).toHaveBeenCalledWith("BACKEND");
+    });
+
+    it("should update field filter and url if in search page", async () => {
+        const addFieldWithUrlMock = jest.fn();
+
+        useChipsFieldSearch.mockImplementation(() => ({
+            addFieldWithUrl: addFieldWithUrlMock,
+        }));
+
+        const initialState = {
+            offerSearch: {
+                searchValue: "searchValue",
+                jobDuration: [1, 2],
+                fields: [],
+                technologies: [],
+            },
+        };
+
+
+        const wrapper = renderWithStoreAndTheme(
+            <MemoryRouter initialEntries={["/"]}>
+                <OfferWidget offer={offer} isPage={false} />
+            </MemoryRouter>,
+            { initialState, theme }
+        );
+
+        await fireEvent.click(wrapper.getByText("Back-End"));
+
+        expect(addFieldWithUrlMock).toHaveBeenCalledWith("BACKEND");
+    });
+
+    it("should redirect and update techs filter state if in page", async () => {
+        const addTechMock = jest.fn();
+        useChipsFieldSearch.mockImplementation(() => ({
+            addTech: addTechMock,
+            setLoadUrlFromFilters: jest.fn(),
+        }));
+
+        const initialState = {
+            offerSearch: {
+                searchValue: "searchValue",
+                jobDuration: [1, 2],
+                fields: [],
+                technologies: [],
+            },
+        };
+
+
+        const wrapper = renderWithStoreAndTheme(
+            <MemoryRouter initialEntries={["/"]}>
+                <OfferWidget offer={offer} isPage={true} />
+            </MemoryRouter>,
+            { initialState, theme }
+        );
+
+        await fireEvent.click(wrapper.getByText("Cassandra"));
+
+        expect(mockHistoryPush).toHaveBeenCalledWith("/");
+        expect(addTechMock).toHaveBeenCalledWith("Cassandra");
+    });
+
+    it("should update techs filter and url if in search page", async () => {
+        const addTechWithUrlMock = jest.fn();
+
+        useChipsFieldSearch.mockImplementation(() => ({
+            addTechWithUrl: addTechWithUrlMock,
+        }));
+
+        const initialState = {
+            offerSearch: {
+                searchValue: "searchValue",
+                jobDuration: [1, 2],
+                fields: [],
+                technologies: [],
+            },
+        };
+
+
+        const wrapper = renderWithStoreAndTheme(
+            <MemoryRouter initialEntries={["/"]}>
+                <OfferWidget offer={offer} isPage={false} />
+            </MemoryRouter>,
+            { initialState, theme }
+        );
+
+        await fireEvent.click(wrapper.getByText("Cassandra"));
+
+        expect(addTechWithUrlMock).toHaveBeenCalledWith("Cassandra");
+    });
+});

src/components/HomePage/SearchResultsArea/Offer/useChipsFieldSearch.js

@@ -6,7 +6,7 @@ import useSearchParams from "../../SearchArea/useUrlSearchParams";
 import { SearchResultsConstants } from "../SearchResultsWidget/SearchResultsUtils";
 import useOffersSearcher from "../SearchResultsWidget/useOffersSearcher";
 
-export const useChipsFieldSearch = () => {
+export default () => {
     const dispatch = useDispatch();
     const fields = useSelector((state) => state.offerSearch.fields);
     const techs = useSelector((state) => state.offerSearch.technologies);

src/components/HomePage/SearchResultsArea/Offer/useChipsFieldSearch.spec.js

@@ -3,29 +3,25 @@ import React from "react";
 import { MemoryRouter, useLocation } from "react-router-dom";
 import qs from "qs";
 
-import { renderWithStoreAndTheme, TestComponent } from "../../../../test-utils";
+import { renderWithStoreAndTheme, TestComponent, fireEvent } from "../../../../test-utils";
 import { act } from "react-dom/test-utils";
-import { useChipsFieldSearch } from "./useChipsFieldSearch";
+import useChipsFieldSearch from "./useChipsFieldSearch";
 import { createTheme } from "@material-ui/core";
-import { applyMiddleware, createStore } from "redux";
-import searchOffersReducer from "../../../../reducers/searchOffersReducer";
-import thunk from "redux-thunk";
-import { useSelector } from "react-redux";
 
-describe("useUrlSearchParams", () => {
+describe("useChipsFieldSearch", () => {
     const theme = createTheme({});
 
     it("should change fields's search param when adding fields", async () => {
         let addFieldWithUrl, location;
         const initialState = {
-            searchValue: "searchValue",
-            jobDuration: [1, 2],
-            fields: [],
-            technologies: [],
+            offerSearch: {
+                searchValue: "searchValue",
+                jobDuration: [1, 2],
+                fields: [],
+                technologies: [],
+            },
         };
 
-        const store = createStore(searchOffersReducer, initialState, applyMiddleware(...[thunk]),);
-
         const callback = () => {
             addFieldWithUrl = useChipsFieldSearch().addFieldWithUrl;
 
@@ -37,7 +33,7 @@ describe("useUrlSearchParams", () => {
             <MemoryRouter initialEntries={["/"]}>
                 <TestComponent callback={callback} />
             </MemoryRouter>,
-            { store, theme }
+            { initialState, theme }
         );
 
 
@@ -70,14 +66,14 @@ describe("useUrlSearchParams", () => {
     it("should change technologies's search param when adding fields", async () => {
         let addTechWithUrl, location;
         const initialState = {
-            searchValue: "searchValue",
-            jobDuration: [1, 2],
-            fields: [],
-            technologies: [],
+            offerSearch: {
+                searchValue: "searchValue",
+                jobDuration: [1, 2],
+                fields: [],
+                technologies: [],
+            },
         };
 
-        const store = createStore(searchOffersReducer, initialState, applyMiddleware(...[thunk]),);
-
         const callback = () => {
             addTechWithUrl = useChipsFieldSearch().addTechWithUrl;
 
@@ -89,7 +85,7 @@ describe("useUrlSearchParams", () => {
             <MemoryRouter initialEntries={["/"]}>
                 <TestComponent callback={callback} />
             </MemoryRouter>,
-            { store, theme }
+            { initialState, theme }
         );