import { render } from "@testing-library/react";
import * as redux from "react-redux";
import store from "../../store";
import { mockState } from "../../mockState";
import { Router } from "react-router-dom";
import history from "../../store/utils/history";
import AdsCandidatesPage from "../../pages/CandidatesPage/AdsCandidatesPage";

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

  let spyOnUseSelector;

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

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

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

  it("Number of sliders should be equal to length of our array adsCandidates", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("ads-candidates").length).toBe(
      mockState.candidates.adsCandidates.length
    );
  });

  it("Number of arrows (left and right) should be 0 because there is no more than 4 candidates in any of ads", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("active-ads-ads-arrows").length
    ).toBe(0);
  });
});