import * as redux from "react-redux";
import store from "../../store";
import { Router } from "react-router-dom";
import { mockState } from "../../mockState";
import { render, screen, fireEvent, waitFor } from "@testing-library/react";
import history from "../../store/utils/history";
import StatsPage from "../../pages/StatsPage/StatsPage";

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

  let spyOnUseSelector;

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

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

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

  it("Should render 4 levels for selection process section", () => {
    render(cont);
    expect(screen.getAllByTestId("stats-item").length).toBe(4);
  });

  it("Should render 4 levels for relationship section", () => {
    render(cont);
    expect(screen.getAllByTestId("stats-item2").length).toBe(4);
  });

  it("Should render ads because there is more than 0 ads", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("archived-ads")[0]).toBeDefined();
  });

  it("Should render only one right arrow and that depends on screen size", () => {
    render(cont);
    expect(screen.getAllByTestId("right-arrow").length).toBe(1);
  });

  it("Should render right arrow because there is more than 3 ads", () => {
    render(cont);
    expect(screen.getAllByTestId("right-arrow")[0]).toBeDefined();
  });

  it("Should render only one left arrow and that depends on screen size", () => {
    render(cont);
    expect(screen.getAllByTestId("left-arrow").length).toBe(1);
  });

  it("Should render all ads in slider", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("stats-ad").length).toBe(
      mockState.stats.ads.length
    );
  });

  it("Slider should represent 5 ads", () => {
    const { container } = render(cont);
    expect(
      container
        .getElementsByClassName("slick-list")[0]
        .getElementsByClassName("slick-active").length
    ).toBe(5);
  });

  it("After clicking on right arrow slider should represent ad number six as fifth ad in slider", async () => {
    const { container } = render(cont);
    fireEvent.click(screen.getAllByTestId("right-arrow")[0]);
    await waitFor(() =>
      expect(
        container
          .getElementsByClassName("slick-list")[0]
          .getElementsByClassName("slick-active")[4]
          .getElementsByClassName("archive-ad-title")[0].textContent
      ).toBe("React")
    );
  });
});
