import { fireEvent, render, screen, waitFor } 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 CandidateFilters from "../../components/Candidates/CandidateFilters";

describe("Add ad modals ui tests", () => {
  const props = {
    open: true,
    handleClose: jest.fn(),
    pageSize: 3,
    currentPage: 1,
    isTableView: false,
    technologies: [
      {
        technologyId: 1,
        name: ".NET",
        technologyType: "Backend",
        isChecked: true,
      },
    ],
    startingDate: "",
    endingDate: "",
    typesOfEmployments: [],
  };

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

  let spyOnUseSelector;

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

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

  it("Should check checkbox", async () => {
    const { container } = render(cont);

    const a = container.getElementsByClassName(
      "ad-filters-technologies-checkboxes-checkbox"
    )[0];

    waitFor(() => {
      fireEvent.click(a);
      expect(a).toBeDefined();
    });
  });

  it("Should click type of employment button", async () => {
    const { container } = render(cont);
    const btn = container.getElementsByClassName("type-of-employment-btn");

    waitFor(() => {
      fireEvent.click(btn[1]);
      expect(btn).toBeDefined();
    });
  });
});
