HRCenter/src/__tests__/UITests/adsCandidatesPageUI.test.js

import { render, fireEvent, waitFor } 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 AdsCandidatesPage from "../../pages/CandidatesPage/AdsCandidatesPage";

describe("TableViewPage render tests", () => {
  var props = {
    history: {
      replace: jest.fn(),
      push: jest.fn(),
      location: {
        pathname: "/candidates",
      },
    },
  };

  const cont = (
    <redux.Provider store={store}>
      <Router history={history}>
        <AdsCandidatesPage search="" {...props} />
      </Router>
    </redux.Provider>
  );

  let spyOnUseSelector;

  beforeEach(() => {
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValueOnce(mockState.candidates.adsCandidates);
  });

  afterEach(() => {
    jest.restoreAllMocks();
  });

  it("Should render", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("jobs-candidates-container")[0]
    ).toBeDefined();
  });

  it("Number of sliders should be equal to length of our adsCandidates array", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("jobs-candidates").length).toBe(
      mockState.candidates.adsCandidates.length
    );
  });

  it("Number of candidates in slider (vissible and hidden) should be equal to the number of candidates which applied for ad", () => {
    const { container } = render(cont);
    expect(
      container
        .getElementsByClassName("jobs-candidates")[0]
        .getElementsByClassName("slick-slide").length
    ).toBe(mockState.candidates.adsCandidates[0].applicants.length);
  });

  it("Number of arrows (left and right) should be 1 because there is more than 4 candidates which applied for ad", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("active-jobs-jobs-arrows").length
    ).toBe(1);
  });

  it("After clicking on right arrow of first slider, first slider should show fifth candidate as forth card of slider", async () => {
    const { container } = render(cont);
    fireEvent.click(
      container
        .getElementsByClassName("active-jobs-jobs-arrows")[0]
        .getElementsByTagName("button")[1]
    );

    await waitFor(() =>
      expect(
        container
          .getElementsByClassName("jobs-candidates")[0]
          .getElementsByClassName("slick-active")[0]
          .getElementsByClassName("candidate-card-container")[0]
          .getElementsByClassName("candidate-card-applicant-name")[0]
          .textContent
      ).toBe(
        mockState.candidates.adsCandidates[0].applicants[3].firstName +
          " " +
          mockState.candidates.adsCandidates[0].applicants[3].lastName
      )
    );
  });

  it("Should render candidate details page after clicking on candidate card", () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("candidate-card-container")[0]
    );
    const arg = { pathname: "/candidates/1" };
    expect(props.history.push).toHaveBeenCalledWith(arg);
  });
});