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 { render, screen, fireEvent, waitFor } from "@testing-library/react";
import RegisterPage from "../../pages/RegisterPage/RegisterPage";
import { FormProvider } from "../../context/FormContext";

const token =
"CfDJ8N77hhxpq99AuN1MAz9yxEG4HLGzmqe2fKGnXq8%2b3IWmhUdA3BZfaRAyhqLgUA%2fTAKarHSos484YEGrm13edjQbYXboYRnzXfEBdrhdAO5yFiEoij24x6k9os6JVfIiCVDfEmAA9zS23zaTqak9URTkUxYk4%2fsxR0DyE4YFqH485q%2fvIG0flGlotuHyLeE5i%2bQ%3d%3d";
const mail = "jest@dilig.net";

const mockHistoryPush = jest.fn();

jest.mock("react-router-dom", () => ({
...jest.requireActual("react-router-dom"),
useHistory: () => ({
  push: mockHistoryPush,
}),
useLocation: () => ({
  search: `/register?token=${token}&email=${mail}`,
}),
}));

describe("Register page tests", () => {
  var props = {
    history: {
      replace: jest.fn(),
      push: jest.fn(),
      location: {
        pathname: "",
      },
    },
  };
  const cont = (
    <FormProvider>
      <redux.Provider store={store}>
        <Router history={history}>
          <RegisterPage {...props} />
        </Router>
      </redux.Provider>
    </FormProvider>
  );

  //   let spyOnUseSelector;
  //   let spyOnUseDispatch;
  //   let mockDispatch;

  beforeEach(() => {
   //
  });

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

  it("Should render", () => {
    render(cont);
    expect(screen.getByTestId("btn")).toBeDefined();
  });

  it("Email input should have default value", () => {
    render(cont);
    expect(screen.getByTestId("reg-input-1").value).toBe("jest@dilig.net");
  });

  it("Email input should be disabled by default", () => {
    render(cont);
    expect(screen.getByTestId("reg-input-1")).toHaveAttribute("disabled");
  });

  it("Should show second step form after submiting first", async () => {
    render(cont);

    fireEvent.change(screen.getByTestId("reg-input-2"), {
      target: { value: "Password123!" },
    });
    fireEvent.change(screen.getByTestId("reg-input-3"), {
      target: { value: "Password123!" },
    });

    fireEvent.click(screen.getByTestId("btn"));

    // waiting for formik validation
    await waitFor(() =>
      expect(screen.getByTestId("reg-input-4")).toBeDefined()
    );
  });
});
