Merge branch 'feature/fe_ads_patterns_tests' of Neca/HRCenter into FE_dev

src/__tests__/UITests/adDetailsPageUI.test.js

@@ -54,6 +54,18 @@ describe("AdDetailsPage render tests", () => {
     expect(screen.getByTestId("alert-container")).toBeDefined();
   });
 
+  it("Should render ads page when confirm archive ad modal", async () => {
+    const { container } = render(cont);
+
+    waitFor(() => {
+      fireEvent.click(container.getElementsByClassName("archive-ad-button")[0]);
+
+      fireEvent.click(container.getElementsByClassName("dialog-btn")[1]);
+
+      waitFor(() => expect(props.history.push).toHaveBeenCalledWith('/ads'));
+    });
+  });
+
   it("Should render apply for ad button", () => {
     const { container } = render(cont);
     expect(

src/__tests__/UITests/adsPageUI.test.js

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import * as redux from "react-redux";
 import AdsPage from "../../pages/AdsPage/AdsPage";
 import store from "../../store";
@@ -34,7 +34,16 @@ describe("AdsPage render tests", () => {
 
   beforeEach(() => {
     spyOnUseSelector = jest.spyOn(redux, "useSelector");
-    spyOnUseSelector.mockReturnValueOnce(mockState.ads.ads);
+    spyOnUseSelector
+      .mockReturnValueOnce(mockState.ads.ads)
+      .mockReturnValueOnce([
+        {
+          name: ".NET",
+          technologyId: 1,
+          technologyType: "Backend",
+          isChecked: false,
+        },
+      ]);
   });
 
   afterEach(() => {
@@ -65,7 +74,7 @@ describe("AdsPage render tests", () => {
     const { container } = render(cont);
     fireEvent.click(container.getElementsByClassName("ads-page-btn")[2]);
 
-    expect(props.history.push).toHaveBeenCalledWith('/create-ad');
+    expect(props.history.push).toHaveBeenCalledWith("/create-ad");
   });
 
   it("Input for searching by title should not be shown when component is initialy rendered", () => {
@@ -90,6 +99,7 @@ describe("AdsPage render tests", () => {
 
   it("Should render filter drawer after click filter button", () => {
     const { container } = render(cont);
+
     fireEvent.click(container.getElementsByClassName("fltr-btn")[0]);
     expect(screen.getByTestId("ad-filters-drawer")).toBeDefined();
   });
@@ -107,4 +117,20 @@ describe("AdsPage render tests", () => {
       container.getElementsByClassName("archived-ads-ads-arrows")
     ).toBeDefined();
   });
+
+  it("Should filter ads when click search button", async () => {
+    const { container } = render(cont);
+
+    waitFor(() => {
+      fireEvent.click(container.getElementsByClassName("fltr-btn")[0]);
+
+      fireEvent.click(
+        container.getElementsByClassName("ad-filters-checkbox")[0]
+      );
+
+      fireEvent.click(container.getByTestId("ad-filters-submit")[0]);
+
+      expect(container.getElementsByClassName("ad-card").length).toBeGreaterThan(0);
+    });
+  });
 });

src/__tests__/UITests/patternDetailsPageUI.test.js

@@ -0,0 +1,121 @@
+import {
+  render,
+  screen,
+  fireEvent,
+  waitFor,
+  findByTestId,
+} from "@testing-library/react";
+import * as redux from "react-redux";
+import store from "../../store";
+import { mockState } from "../../mockState";
+import { Router } from "react-router-dom";
+import history from "../../store/utils/history";
+import ColorModeProvider from "../../context/ColorModeContext";
+import PatternDetailsPage from "../../pages/PatternsPage/PatternDetailsPage";
+
+describe("PatternDetailsPage render tests", () => {
+  var props = {
+    history: {
+      replace: jest.fn(),
+      push: jest.fn(),
+      location: {
+        pathname: "/patterns/1",
+      },
+    },
+  };
+
+  const cont = (
+    <redux.Provider store={store}>
+      <Router history={history}>
+        <ColorModeProvider>
+          <PatternDetailsPage {...props} />
+        </ColorModeProvider>
+      </Router>
+    </redux.Provider>
+  );
+
+  let spyOnUseSelector;
+
+  beforeEach(() => {
+    spyOnUseSelector = jest.spyOn(redux, "useSelector");
+    spyOnUseSelector
+      .mockReturnValue(mockState.patterns.patterns[0])
+      .mockReturnValue([
+        {
+          applicantId: 21359,
+          firstName: "Jelena",
+          lastName: "Zivkovic",
+          email: "jelena.d.zivkovic@gmail.com",
+        },
+      ])
+      .mockReturnValue(null);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("Should render PatternDetaisPage", async () => {
+    render(cont);
+    waitFor(() => {
+      expect(screen.getByTestId("pattern-details")).toBeDefined();
+    });
+  });
+
+  it("Should render select input for choosing candidate", async () => {
+    render(cont);
+    waitFor(() => {
+      expect(screen.getByTestId("pattern-details-select")).toBeDefined();
+    });
+  });
+
+  it("Should render add candidate button for choosing email", async () => {
+    render(cont);
+    waitFor(() => {
+      expect(screen.getByTestId("pattern-details-plus")).toBeDefined();
+    });
+  });
+
+  it("Should render go back button", async () => {
+    const { container } = render(cont);
+    waitFor(() => {
+      expect(
+        container.getElementsByClassName("ad-details-buttons-link")[0]
+      ).toBeDefined();
+    });
+  });
+
+  it("Should go to patterns page when click go back button", async () => {
+    const { container } = render(cont);
+
+    waitFor(() => {
+      fireEvent.click(screen.getByTestId("ad-details-buttons-link"));
+
+      expect(props.history.push).toHaveBeenCalledWith("/patterns");
+    });
+  });
+
+  it("Should render send email button", () => {
+    render(cont);
+
+    waitFor(() => {
+      expect(screen.getByTestId("pattern-details-send-email")).toBeDefined();
+    });
+  });
+
+  it("Should render send email modal", () => {
+    render(cont);
+
+    waitFor(() => {
+      fireEvent.change(screen.getByTestId("pattern-details-select"), {
+        target: { value: "jelena.d.zivkovic@gmail.com" },
+      });
+
+      fireEvent.click(screen.getByTestId("pattern-details-plus"));
+
+      fireEvent.click(screen.getByTestId("pattern-details-send-email"));
+
+      expect(props.history.push).toHaveBeenCalledWith("/patterns");
+    });
+  });
+});

src/__tests__/UITests/patternsPageUI.test.js

@@ -1,4 +1,4 @@
-import { render, screen, fireEvent } from "@testing-library/react";
+import { render, screen, fireEvent, waitFor } from "@testing-library/react";
 import * as redux from "react-redux";
 import PatternsPage from "../../pages/PatternsPage/PatternsPage";
 import store from "../../store";
@@ -19,15 +19,14 @@ describe("PatternsPage render tests", () => {
 
   beforeEach(() => {
     spyOnUseSelector = jest.spyOn(redux, "useSelector");
-    spyOnUseSelector
-      .mockReturnValueOnce(mockState.patterns.patterns)
-      // .mockReturnValueOnce([
-      //   {
-      //     id: 1,
-      //     name: "HR intervju",
-      //     selectionProcesses: [],
-      //   },
-      // ]);
+    spyOnUseSelector.mockReturnValue(mockState.patterns.patterns);
+    // .mockReturnValueOnce([
+    //   {
+    //     id: 1,
+    //     name: "HR intervju",
+    //     selectionProcesses: [],
+    //   },
+    // ]);
   });
 
   afterEach(() => {
@@ -52,13 +51,6 @@ describe("PatternsPage render tests", () => {
     expect(btn1).toBeDefined();
   });
 
-  it("Should render pattern cards", async () => {
-    const { container } = render(cont);
-    expect(
-      container.getElementsByClassName("pattern-card-parent").length
-    ).toBeGreaterThan(0);
-  });
-
   it("Should render add pattern button", () => {
     const { container } = render(cont);
     expect(container.getElementsByClassName("add-ad-btn")[0]).toBeDefined();
@@ -96,4 +88,11 @@ describe("PatternsPage render tests", () => {
     );
     expect(screen.getByTestId("pattern-filters")).toBeDefined();
   });
+
+  it("Should render pattern cards", () => {
+    const { container } = render(cont);
+    expect(
+      container.getElementsByClassName("pattern-card-parent").length
+    ).toBeGreaterThan(0);
+  });
 });

src/components/Ads/AdFilters.js

@@ -119,6 +119,7 @@ const AdFilters = ({ open, handleClose, technologies }) => {
                       onChange={handleCheckboxes}
                       value={technology.name}
                       checked={technology.isChecked}
+                      className="ad-filters-checkbox"
                     />
                   }
                   label={technology.name}
@@ -182,7 +183,7 @@ const AdFilters = ({ open, handleClose, technologies }) => {
           </div>
         </div>
         <div className="ad-filters-search">
-          <button onClick={onSubmitFilters} className="c-btn c-btn--primary">
+          <button onClick={onSubmitFilters} className="c-btn c-btn--primary" data-testid="ad-filters-submit">
             Pretrazi
           </button>
         </div>

src/pages/PatternsPage/PatternDetailsPage.js

@@ -1,6 +1,5 @@
 import React, { useEffect, useState } from "react";
 import { IconButton } from "@mui/material";
-import { Link } from "react-router-dom";
 import plusIcon from "../../assets/images/plus.png";
 import sendMessage from "../../assets/images/send_message.png";
 import { useParams } from "react-router-dom";
@@ -55,7 +54,7 @@ const PatternDetailsPage = () => {
 
   useEffect(() => {
     const arrOfApplicants = [];
-    if(!patternApplicants || !emails) return
+    if (!patternApplicants || !emails) return;
     for (let i = 0; i < patternApplicants.length; i++) {
       let s = 0;
       for (let j = 0; j < emails.length; j++) {
@@ -77,7 +76,7 @@ const PatternDetailsPage = () => {
 
   const addNewEmailHandler = () => {
     if (email.length === 0) return;
-    if(selectedPatternApplicants.length === 0) return;
+    if (selectedPatternApplicants.length === 0) return;
     setEmails((oldState) => [...oldState, email]);
     setEmail("");
   };
@@ -138,8 +137,12 @@ const PatternDetailsPage = () => {
                 <p>{pattern.selectionLevel.name}</p>
               </div>
               <div className="pattern-details-card-sub-card-add-email">
-                <select onChange={(e) => setEmail(e.target.value)}>
-                  {selectedPatternApplicants && selectedPatternApplicants.length > 0 &&
+                <select
+                  data-testid="pattern-details-select"
+                  onChange={(e) => setEmail(e.target.value)}
+                >
+                  {selectedPatternApplicants &&
+                    selectedPatternApplicants.length > 0 &&
                     selectedPatternApplicants.map((applicant) => (
                       <option
                         key={applicant.applicantId}
@@ -149,7 +152,10 @@ const PatternDetailsPage = () => {
                       </option>
                     ))}
                 </select>
-                <button onClick={addNewEmailHandler}>
+                <button
+                  onClick={addNewEmailHandler}
+                  data-testid="pattern-details-plus"
+                >
                   <img src={plusIcon} alt="plus" />
                 </button>
               </div>
@@ -163,17 +169,22 @@ const PatternDetailsPage = () => {
               </div>
               <div className="pattern-details-card-sub-card-message-pattern">
                 {/* <textarea disabled value={pattern.message}></textarea> */}
-                  {parse(pattern.message)}
+                {parse(pattern.message)}
               </div>
             </div>
 
             <div className="pattern-details-card-buttons">
-              <Link className="ad-details-buttons-link" to="/patterns">
-                Nazad na sve šablone
-              </Link>
+              <button
+                className="ad-details-buttons-link"
+                data-testid="ad-details-buttons-link"
+                onClick={() => history.push(PATTERNS_PAGE)}
+              >
+                Nazad na sve oglase
+              </button>
               <IconButton
                 disabled={emails && emails.length === 0}
                 className="c-btn c-btn--primary add-ad-btn"
+                data-testid="pattern-details-send-email"
                 onClick={scheduleAppointmentHandler}
               >
                 <img