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");
    });
  });
});