import { render, screen, fireEvent } from "@testing-library/react";
import * as redux from "react-redux";
import CreateAdPage from "../../pages/AdsPage/CreateAdPage";
import store from "../../store";
import { mockState } from "../../mockState";
import { Router } from "react-router-dom";
import history from "../../store/utils/history";
import ColorModeProvider from "../../context/ColorModeContext";
import CreateAdSecondStep from "../../pages/AdsPage/CreateAdSecondStep";

describe("CreateAdPage render tests", () => {
  const cont = (
    <redux.Provider store={store}>
      <Router history={history}>
        <ColorModeProvider>
          <CreateAdPage />
        </ColorModeProvider>
      </Router>
    </redux.Provider>
  );

  let spyOnUseSelector;

  beforeEach(() => {
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValue([
      {
        technologyId: 1,
        name: ".NET",
        technologyType: "Backend",
        isChecked: true,
      },
    ]);
  });

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

  it("Should render create ad page", () => {
    render(cont);
    expect(screen.getByTestId("create-job-page")).toBeDefined();
  });

  it("Should render go back button", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("create-job-buttons-back")[0]
    ).toBeDefined();
  });

  it("Should render go forward button", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("create-job-buttons-forward")[0]
    ).toBeDefined();
  });

  it("Should render create ad first step form", () => {
    render(cont);
    expect(screen.getByTestId("create-job-first-step-form")).toBeDefined();
  });

  it("Should render sercond step form", () => {
    const { container } = render(cont);
    const formControls = container.getElementsByClassName(
      "create-job-form-control-first-step-input"
    );

    fireEvent.change(formControls[0], { target: { value: ".NET DEVELOPER" } });

    fireEvent.change(formControls[1], { target: { value: "2020-05-24" } });

    fireEvent.click(
      container.getElementsByClassName("create-job-buttons-forward")[0]
    );

    fireEvent.click(container.getElementsByClassName("create-job-second-step-checkbox")[0])

    fireEvent.click(
      container.getElementsByClassName("create-job-buttons-forward")[0]
    );

    expect(screen.getByTestId("create-ad-third-step-form")).toBeDefined();
  });
});
