Added tests for apply for ad modals

src/__tests__/UITests/adDetailsCandidateCardUI.test.js

+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import * as redux from "react-redux";
+import store from "../../store";
+import { Router } from "react-router-dom";
+import history from "../../store/utils/history";
+import { mockState } from "../../mockState";
+import ColorModeProvider from "../../context/ColorModeContext";
+import AdDetailsCandidateCard from "../../components/Ads/AdDetailsCandidateCard";
+
+describe("Ad details candidate card ui tests", () => {
+  const props = {
+    className: "ad-details-card",
+    id: 1,
+    firstName: "Ermin",
+    lastName: "Bronja",
+    experience: 1,
+    cv: "http://",
+    history: {
+      replace: jest.fn(),
+
+      push: jest.fn(),
+
+      location: {
+        pathname: "/ads/1",
+      },
+    },
+  };
+
+  const cont = (
+    <redux.Provider store={store}>
+      <Router history={history}>
+        <ColorModeProvider>
+          <AdDetailsCandidateCard {...props} />
+        </ColorModeProvider>
+      </Router>
+    </redux.Provider>
+  );
+
+  let spyOnUseSelector;
+
+  beforeEach(() => {
+    spyOnUseSelector = jest.spyOn(redux, "useSelector");
+    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("Should load ad details candidate card component", () => {
+    render(cont);
+    expect(screen.getByTestId("ad-details-candidate")).toBeDefined();
+  });
+
+  it("Should navigate on candidates page when button clicked", async () => {
+    render(cont);
+    waitFor(() => {
+      fireEvent.click(screen.getByTestId("ad-details-candidate-title-link"));
+      expect(props.history.push).toHaveBeenCalledWith("/candidates/1");
+    });
+  });
+});

src/__tests__/UITests/applyForAdFirstStageUI.test.js

+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import * as redux from "react-redux";
+import store from "../../store";
+import { Router } from "react-router-dom";
+import history from "../../store/utils/history";
+import { mockState } from "../../mockState";
+import ColorModeProvider from "../../context/ColorModeContext";
+import ApplyForAdFirstStage from "../../components/Ads/ApplyForAdFirstStage";
+
+describe("Apply for ad first stage ui tests", () => {
+  const props = {
+    firstName: "E",
+    setFirstName: jest.fn(),
+    lastName: "B",
+    gender: "Male",
+    setGender: jest.fn(),
+    setLastName: jest.fn(),
+    dateOfBirth: new Date(),
+    setDateOfBirth: jest.fn(),
+    phoneNumber: "0",
+    setPhoneNumber: jest.fn(),
+    onIncreaseStage: jest.fn(),
+  };
+
+  const cont = (
+    <redux.Provider store={store}>
+      <Router history={history}>
+        <ColorModeProvider>
+          <ApplyForAdFirstStage {...props} />
+        </ColorModeProvider>
+      </Router>
+    </redux.Provider>
+  );
+
+  let spyOnUseSelector;
+
+  beforeEach(() => {
+    spyOnUseSelector = jest.spyOn(redux, "useSelector");
+    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("Should render firstName input", () => {
+    render(cont);
+    expect(screen.getByTestId("apply-for-ad-modal-first-name-input")).toBeDefined();
+  });
+
+  it("Should change firstName on changing input", async () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-modal-first-name-input"),
+      { target: { value: "Ermin" } }
+    );
+
+    waitFor(() => expect(props.setFirstName).toHaveBeenCalled());
+  });
+
+  it("Should change last on changing input", async () => {
+    render(cont);
+    fireEvent.change(screen.getByTestId("apply-for-ad-modal-last-name-input"), {
+      target: { value: "Bronja" },
+    });
+
+    waitFor(() => expect(props.setLastName).toHaveBeenCalled());
+  });
+
+  it("Should select male gender", async () => {
+    const { container } = render(cont);
+    fireEvent.click(
+      container.getElementsByClassName("apply-for-ad-modal-gender-input")[0]
+    );
+
+    waitFor(() => expect(props.setGender).toHaveBeenCalled());
+  });
+
+  it("Should select female gender", async () => {
+    const { container } = render(cont);
+    fireEvent.click(
+      container.getElementsByClassName("apply-for-ad-modal-gender-input")[1]
+    );
+
+    waitFor(() => expect(props.setGender).toHaveBeenCalled());
+  });
+
+  it("Should change date of birth", async () => {
+    render(cont);
+    fireEvent.change(screen.getByTestId("apply-for-ad-modal-date-of-birth"), {
+      target: { value: "1998-05-05" },
+    });
+
+    waitFor(() => expect(props.setDateOfBirth).toHaveBeenCalled());
+  });
+
+  it("Should change phone number", async () => {
+    render(cont);
+    fireEvent.change(screen.getByTestId("apply-for-ad-modal-phone-number"), { target: { value: "0000000000" } });
+
+    waitFor(() => expect(props.setPhoneNumber).toHaveBeenCalled());
+  });
+
+  it("Should click go forward button", async () => {
+    render(cont);
+    fireEvent.click(screen.getByTestId("apply-for-ad-modal-go-forward-button"));
+
+    waitFor(() => expect(props.onIncreaseStage).toHaveBeenCalled());
+  });
+});

src/__tests__/UITests/applyForAdFourthStageUI.test.js

+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import * as redux from "react-redux";
+import store from "../../store";
+import { Router } from "react-router-dom";
+import history from "../../store/utils/history";
+import { mockState } from "../../mockState";
+import ColorModeProvider from "../../context/ColorModeContext";
+import ApplyForAdFourthStage from "../../components/Ads/ApplyForAdFourthStage";
+
+describe("Apply for ad fourth stage ui tests", () => {
+  const props = {
+    coverLetter: "",
+    setCoverLetter: jest.fn(),
+    pdfFile: null,
+    setPdfFile: jest.fn(),
+    onDecreaseStage: jest.fn(),
+    onFinishedFourStages: jest.fn(),
+  };
+
+  const cont = (
+    <redux.Provider store={store}>
+      <Router history={history}>
+        <ColorModeProvider>
+          <ApplyForAdFourthStage {...props} />
+        </ColorModeProvider>
+      </Router>
+    </redux.Provider>
+  );
+
+  let spyOnUseSelector;
+  let file;
+
+  beforeEach(() => {
+    file = new File(["(⌐□_□)"], "test.png", { type: "image/png" });
+    spyOnUseSelector = jest.spyOn(redux, "useSelector");
+    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("Should render apply for ad fourth stage modal", () => {
+    render(cont);
+    expect(screen.getByTestId("apply-for-ad-modal-fourth-stage")).toBeDefined();
+  });
+
+  it("Should change pdfFile", async () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-modal-fourth-stage-pdf-input"),
+      { target: { files: [file] } }
+    );
+
+    waitFor(() => expect(props.setPdfFile).toHaveBeenCalled());
+  });
+
+  it("Should change coverLetter", async () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-modal-fourth-stage-cover-letter-input"),
+      { target: { value: "Cover Letter" } }
+    );
+
+    waitFor(() => expect(props.setPdfFile).toHaveBeenCalled());
+  });
+
+  it("Should go back on click button", async () => {
+    render(cont);
+    fireEvent.click(
+      screen.getByTestId("apply-for-ad-modal-fourth-stage-go-back-button")
+    );
+
+    waitFor(() => expect(props.onDecreaseStage).toHaveBeenCalled());
+  });
+
+  it("Should finish stages on click button", async () => {
+    render(cont);
+    fireEvent.click(
+      screen.getByTestId("apply-for-ad-modal-fourth-stage-go-forward-button")
+    );
+
+    waitFor(() => expect(props.onFinishedFourStages).toHaveBeenCalled());
+  });
+
+  it("Drag and drop", async () => {
+    const { container } = render(cont);
+    fireEvent.drop(container.getElementsByClassName("uploadCV-input")[0], {
+      dataTransfer: { files: [file] },
+    });
+  });
+
+  it("Drag and drop over", async () => {
+    const { container } = render(cont);
+    fireEvent.dragOver(container.getElementsByClassName("uploadCV-input")[0], {
+      dataTransfer: { files: [file] },
+    });
+  });
+
+  it("Drag and drop leave", async () => {
+    const { container } = render(cont);
+    fireEvent.dragOver(container.getElementsByClassName("uploadCV-input")[0], {
+      dataTransfer: { files: [file] },
+    });
+  });
+});

src/__tests__/UITests/applyForAdSecondStageUI.test.js

+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import * as redux from "react-redux";
+import store from "../../store";
+import { Router } from "react-router-dom";
+import history from "../../store/utils/history";
+import { mockState } from "../../mockState";
+import ColorModeProvider from "../../context/ColorModeContext";
+import ApplyForAdSecondStage from "../../components/Ads/ApplyForAdSecondStage";
+
+describe("Apply for ad second stage ui tests", () => {
+  const props = {
+    professionalQualification: "Professional Qualification",
+    setProfessionalQualification: jest.fn(),
+    technologies: [
+      {
+        value: ".NET",
+        isChecked: false,
+        technologyId: 1,
+        technologyType: "Backend",
+      },
+      {
+        value: "React",
+        isChecked: false,
+        technologyId: 2,
+        technologyType: "Frontend",
+      },
+      {
+        value: "Git",
+        isChecked: false,
+        technologyId: 3,
+        technologyType: "Other",
+      },
+    ],
+    setTechnologies: jest.fn(),
+    experience: 1,
+    setExperience: jest.fn(),
+    onIncreaseStage: jest.fn(),
+    onDecreaseStage: jest.fn(),
+  };
+
+  const cont = (
+    <redux.Provider store={store}>
+      <Router history={history}>
+        <ColorModeProvider>
+          <ApplyForAdSecondStage {...props} />
+        </ColorModeProvider>
+      </Router>
+    </redux.Provider>
+  );
+
+  let spyOnUseSelector;
+
+  beforeEach(() => {
+    spyOnUseSelector = jest.spyOn(redux, "useSelector");
+    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("Should render apply for ad second stage", () => {
+    render(cont);
+    expect(screen.getByTestId("apply-for-ad-second-stage")).toBeDefined();
+  });
+
+  it("Should change professional qualification input", () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId(
+        "apply-for-ad-second-stage-professional-qualification"
+      ),
+      {
+        target: { value: "Faculty" },
+      }
+    );
+
+    expect(props.setProfessionalQualification).toHaveBeenCalled();
+  });
+
+  it("Should render backend technology", () => {
+    const { container } = render(cont);
+
+    expect(
+      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[0]
+    ).toBeDefined();
+  });
+
+  it("Should render frontend technology", () => {
+    const { container } = render(cont);
+
+    expect(
+      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[1]
+    ).toBeDefined();
+  });
+
+  it("Should render others technology", () => {
+    const { container } = render(cont);
+
+    expect(
+      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[2]
+    ).toBeDefined();
+  });
+
+  it("Should change experience", async () => {
+    render(cont);
+
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-second-stage-experience-input"),
+      { target: { value: 2 } }
+    );
+
+    waitFor(() => expect(props.professionalQualification).toHaveBeenCalled());
+  });
+
+  it("Should change backend technology to checked", async () => {
+    const { container } = render(cont);
+
+    fireEvent.click(
+      container.getElementsByClassName("apply-for-ad-second-stage-checkbox")[0]
+    );
+
+    waitFor(() => expect(props.technologies[0]).toBe(true));
+  });
+});

src/__tests__/UITests/applyForAdThirdStageUI.test.js

+import { render, screen, waitFor, fireEvent } from "@testing-library/react";
+import * as redux from "react-redux";
+import store from "../../store";
+import { Router } from "react-router-dom";
+import history from "../../store/utils/history";
+import { mockState } from "../../mockState";
+import ColorModeProvider from "../../context/ColorModeContext";
+import ApplyForAdThirdStage from "../../components/Ads/ApplyForAdThirdStage";
+
+describe("Apply for ad third stage ui tests", () => {
+  const props = {
+    onIncreaseStage: jest.fn(),
+    onDecreaseStage: jest.fn(),
+    linkedinLink: "",
+    setLinkedinLink: jest.fn(),
+    githubLink: "",
+    setGithubLink: jest.fn(),
+    bitBucketLink: "",
+    setBitBucketLink: jest.fn(),
+    email: "",
+    setEmail: jest.fn(),
+  };
+
+  const cont = (
+    <redux.Provider store={store}>
+      <Router history={history}>
+        <ColorModeProvider>
+          <ApplyForAdThirdStage {...props} />
+        </ColorModeProvider>
+      </Router>
+    </redux.Provider>
+  );
+
+  let spyOnUseSelector;
+
+  beforeEach(() => {
+    spyOnUseSelector = jest.spyOn(redux, "useSelector");
+    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
+  });
+
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it("Should change linkedin input", async () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-modal-third-stage-linkedin-input"),
+      { target: { value: "https://linkedin" } }
+    );
+
+    waitFor(() => expect(props.linkedinLink).toBe("https://linkedin"));
+  });
+
+  it("Should render linkedin input", () => {
+    render(cont);
+
+    expect(
+      screen.getByTestId("apply-for-ad-modal-third-stage-linkedin-input")
+    ).toBeDefined();
+  });
+
+  it("Should change github input", async () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-modal-third-stage-github-input"),
+      { target: { value: "https://github" } }
+    );
+
+    waitFor(() => expect(props.githubLink).toBe("https://github"));
+  });
+
+  it("Should change bitbucket input", async () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-modal-third-stage-bitbucket-input"),
+      { target: { value: "https://bitbucket" } }
+    );
+
+    waitFor(() => expect(props.bitBucketLink).toBe("https://bitbucket"));
+  });
+
+  it("Should change email input", async () => {
+    render(cont);
+    fireEvent.change(
+      screen.getByTestId("apply-for-ad-modal-third-stage-email-input"),
+      { target: { value: "ermin.bronja@dilig.net" } }
+    );
+
+    waitFor(() => expect(props.email).toBe("ermin.bronja@dilig.net"));
+  });
+
+  it("Should go back when button clicked", async () => {
+    render(cont);
+    fireEvent.click(
+      screen.getByTestId("apply-for-ad-modal-third-stage-go-back-button")
+    );
+
+    waitFor(() => expect(props.onDecreaseStage).toHaveBeenCalled());
+  });
+
+  it("Should go forward when button clicked", async () => {
+    render(cont);
+    fireEvent.click(
+      screen.getByTestId("apply-for-ad-modal-third-stage-go-forward-button")
+    );
+
+    waitFor(() => expect(props.onIncreaseStage).toHaveBeenCalled());
+  });
+});

src/components/Ads/AdDetailsCandidateCard.js

 }) => {
   const history = useHistory();
   return (
-    <div className={`ad-details-candidate ${className}`}>
+    <div data-testid="ad-details-candidate" className={`ad-details-candidate ${className}`}>
       <div className="ad-details-candidate-date">
         <p>{new Date().toLocaleDateString()}</p>
       </div>
       <div className="ad-details-candidate-title">
-        <h3 onClick={() => history.push(CANDIDATES_DETAILS_PAGE.replace(":id", id))}>
+        <h3 data-testid="ad-details-candidate-title-link" onClick={() => history.push(CANDIDATES_DETAILS_PAGE.replace(":id", id))}>
           {firstName} {lastName}
         </h3>
       </div>

src/components/Ads/ApplyForAdFirstStage.js

           type="text"
           placeholder="ex. Petar"
           value={firstName}
+          data-testid="apply-for-ad-modal-first-name-input"
           onChange={(e) => setFirstName(e.target.value)}
         />
       </div>
           type="text"
           placeholder="ex. Petrovic"
           value={lastName}
+          data-testid="apply-for-ad-modal-last-name-input"
           onChange={(e) => setLastName(e.target.value)}
         />
       </div>
               type="radio"
               name="gender"
               value="Muski"
+              className="apply-for-ad-modal-gender-input"
               checked={gender === "Muski"}
               onChange={(e) => setGender(e.target.value)}
             />
               type="radio"
               name="gender"
               value="Zenski"
+              className="apply-for-ad-modal-gender-input"
               checked={gender === "Zenski"}
               onChange={(e) => setGender(e.target.value)}
             />
         <input
           type="date"
           placeholder="ex. Datum rodjenja"
+          data-testid="apply-for-ad-modal-date-of-birth"
           value={dateOfBirth}
           onChange={(e) => setDateOfBirth(e.target.value)}
         />
         <input
           type="text"
           placeholder="ex. +381/60/000/0000"
+          data-testid="apply-for-ad-modal-phone-number"
           value={phoneNumber}
           onChange={(e) => setPhoneNumber(e.target.value)}
         />
       </div>
       <div className="apply-for-ad-buttons">
         <button disabled>NAZAD</button>
-        <button disabled={disabled} onClick={() => onIncreaseStage()}>
+        <button disabled={disabled}
+          data-testid="apply-for-ad-modal-go-forward-button" onClick={() => onIncreaseStage()}>
           NASTAVI
         </button>
       </div>

src/components/Ads/ApplyForAdFourthStage.js

   };
 
   return (
-    <div>
+    <div data-testid="apply-for-ad-modal-fourth-stage">
       <div className="apply-for-ad-modal-form-control">
         <label>CV</label>
         <div
                     id="upload-file"
                     style={{ display: "none", zIndex: -1 }}
                     value={pdfFile}
+                    data-testid="apply-for-ad-modal-fourth-stage-pdf-input"
                     onChange={(e) => {
                       console.log("Ovde smo");
                       setPdfFile(e.target.files[0]);
         <textarea
           value={coverLetter}
           onChange={(e) => setCoverLetter(e.target.value)}
+          data-testid="apply-for-ad-modal-fourth-stage-cover-letter-input"
           placeholder="ex. Kao student Elektronskog fakulteta u Nišu..."
           rows={5}
         ></textarea>
       </div>
       <div className="apply-for-ad-buttons">
-        <button onClick={onDecreaseStage}>NAZAD</button>
-        <button disabled={disabled} onClick={onFinishedFourStages}>
+        <button
+          onClick={onDecreaseStage}
+          data-testid="apply-for-ad-modal-fourth-stage-go-back-button"
+        >
+          NAZAD
+        </button>
+        <button
+          disabled={disabled}
+          data-testid="apply-for-ad-modal-fourth-stage-go-forward-button"
+          onClick={onFinishedFourStages}
+        >
           PRIJAVI SE
         </button>
       </div>

src/components/Ads/ApplyForAdSecondStage.js

   };
 
   return (
-    <div>
+    <div data-testid="apply-for-ad-second-stage">
       <div className="apply-for-ad-header-title">
         <p>Strucna sprema</p>
       </div>
         <input
           type="text"
           placeholder="ex. Elektrotehnicki fakultet"
+          data-testid="apply-for-ad-second-stage-professional-qualification"
           value={professionalQualification}
           onChange={(e) => setProfessionalQualification(e.target.value)}
         />
                   key={x.technologyId}
                   control={
                     <Checkbox
+                      className="apply-for-ad-second-stage-checkbox"
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
                   key={x.technologyId}
                   control={
                     <Checkbox
+                      className="apply-for-ad-second-stage-checkbox"
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
                   key={x.technologyId}
                   control={
                     <Checkbox
+                      className="apply-for-ad-second-stage-checkbox"
                       value={x.name}
                       checked={x.isChecked}
                       onChange={handleCheckboxes.bind(this, x.technologyId)}
           type="number"
           placeholder="ex. 3 godine iskustva"
           value={experience}
+          data-testid="apply-for-ad-second-stage-experience-input"
           onChange={(e) => setExperience(e.target.value)}
         />
       </div>

src/components/Ads/ApplyForAdThirdStage.js

         <input
           type="text"
           value={linkedinLink}
+          data-testid="apply-for-ad-modal-third-stage-linkedin-input"
           onChange={(e) => setLinkedinLink(e.target.value)}
           placeholder="ex. https://www.linkedin.com/in/petar-petrovic"
         />
         <label>GitHub</label>
         <input
           type="text"
-          value={githubLink}
+          value={githubLink}data-testid="apply-for-ad-modal-third-stage-github-input"
           onChange={(e) => setGithubLink(e.target.value)}
           placeholder="ex. https://www.github.com/petarpetrovic"
         />
         <label>BitBucket</label>
         <input
           type="text"
-          value={bitBucketLink}
+          value={bitBucketLink}data-testid="apply-for-ad-modal-third-stage-bitbucket-input"
           onChange={(e) => setBitBucketLink(e.target.value)}
           placeholder="ex. https://developer.atlassian.com/user/petarapetrovic"
         />
         <label>Email</label>
         <input
           type="email"
-          value={email}
+          value={email}data-testid="apply-for-ad-modal-third-stage-email-input"
           onChange={(e) => setEmail(e.target.value)}
           placeholder="ex. petar.petrovic@dilig.net"
         />
       </div>
       <div className="apply-for-ad-buttons">
-        <button onClick={onDecreaseStage}>NAZAD</button>
-        <button onClick={onIncreaseStage} disabled={disabled}>
+        <button onClick={onDecreaseStage}data-testid="apply-for-ad-modal-third-stage-go-back-button">NAZAD</button>
+        <button onClick={onIncreaseStage} disabled={disabled}data-testid="apply-for-ad-modal-third-stage-go-forward-button">
           NASTAVI
         </button>
       </div>