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 AddAdModalSecondStage from "../../components/Ads/AddAdModalSecondStage";

describe("Add ad modals ui tests", () => {
  const props = {
    onIncrementStage: jest.fn(),
    onDecrementStage: jest.fn(),
    technologies: [
      {
        value: ".NET",
        isChecked: false,
        technologyId: 1,
        technologyType: "Backend",
      },
    ],
    experience: 1,
    setExperience: jest.fn(),
  };

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

  let spyOnUseSelector;

  beforeEach(() => {
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValue(mockState.ads.ads);
  });

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

  it("Should render add ad modal second stage", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("add-ad-modal-stages")[0]
    ).toBeDefined();
  });

  it("Should change experience input", async () => {
    render(cont);
    fireEvent.change(screen.getByTestId("add-ad-modal-experience"), {
      target: { value: 1 },
    });
    waitFor(() => expect(props.setExperience).toBeCalled());
  });

  it("Should call go back", async () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-second-go-back"));
    waitFor(() => expect(props.onDecrementStage).toBeCalled());
  });

  it("Should call go forward", async () => {
    render(cont);
    fireEvent.click(screen.getByTestId("add-ad-modal-second-go-forward"));
    waitFor(() => expect(props.onIncrementStage).toBeCalled());
  });
});
