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

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

  let spyOnUseSelector;

  beforeEach(() => {
    // Mock useSelector hook
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector.mockReturnValue(mockState.users);

  });

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

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

  it("Should render a table row foreach mocked user", () => {
    render(cont);
    expect(screen.queryAllByTestId("user-row").length).toBe(3);
  });

  it("Should render a button with specific class for an enabled user", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("td-btn").length).toBe(0);
  });

  it("Should render enable edit btn", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("editEnableBtn").length).toBe(1);
  });

  it("Editing should be enabled/active after clicking on edit mode", () => {
    const { container } = render(cont);
    fireEvent.click(screen.getAllByTestId("btn-testid")[0]);
    expect(container.getElementsByClassName("userPageBtn")[0]).toHaveClass(
      "enabledEdit"
    );
  });
})