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

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

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

  let spyOnUseSelector;

  beforeEach(() => {
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector
      .mockReturnValueOnce(mockState.users.users)
      .mockReturnValueOnce(mockState.users.user)
      .mockReturnValueOnce(mockState.candidate.candidate)
      .mockReturnValueOnce(mockState.users.users)
      .mockReturnValueOnce(mockState.users.user)
      .mockReturnValueOnce(mockState.candidate.candidate);
  });

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

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

  it("Should render button for deleting candidate", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("candidate-btn")[0]).toBeDefined();
  });

  it("Should render dialog after clicking button for deleting candidate", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("candidate-btn")[0]);
    expect(screen.getByTestId("alert-container")).toBeDefined();
  });

  it("Should render div for sending comment", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("comment-container")[0]
    ).toBeDefined();
  });

  it("Should render button for downloading CV", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("applicant-cv-button")[0]
    ).toBeDefined();
  });

  it("Should render two ads for candidate", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("applicant-add").length).toBe(2);
  });

  it("Should render three comments", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("comment-sub-container").length
    ).toBe(3);
  });

  it("Should render page with all candidates", () => {
    const { container } = render(cont);
    fireEvent.click(
      container.getElementsByClassName("applicant-ads-back-button")[0]
    );
    const arg = { pathname: "/candidates" };
    expect(props.history.push).toHaveBeenCalledWith(arg);
  });
});
