HRCenter/src/__tests__/UITests/usersPageUI.test.js

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 UsersPage from "../../pages/UsersPage/UsersPage";

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

  let spyOnUseSelector;

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

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

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

  it("Number of rows of table should be equal to the number of users", () => {
    const { container } = render(cont);
    expect(
      container
        .getElementsByClassName("usersTable-users")[0]
        .getElementsByClassName("secondaryRow").length
    ).toBe(mockState.users.users.length);
  });

  it("Should render edit button", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("userPageBtn")[0]).toBeDefined();
  });

  it("Should render search button", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("userPageBtn")[1]).toBeDefined();
  });

  it("Should render invite button", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("inviteBtn")[0]).toBeDefined();
  });

  it("After clicking edit button there should be shown three buttons for each row of our table", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("userPageBtn")[0]);
    expect(container.getElementsByClassName("td-btn").length).toBe(
      3 * mockState.users.users.length
    );
  });

  it("After clicking invite button invote dialog should be shown", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("inviteBtn")[0]);
    expect(screen.getByTestId("invite-dialog")).toBeDefined();
  });

  it("After clicking button for reseting password dialog should be shown", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("userPageBtn")[0]);
    fireEvent.click(container.getElementsByClassName("td-btn")[0]);
    expect(screen.getByTestId("alert-container")).toBeDefined();
  });

  it("After clicking button editing we should be redirected to user details page", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("userPageBtn")[0]);
    fireEvent.click(container.getElementsByClassName("td-btn")[2]);
    expect(props.history.push).toHaveBeenCalledWith("/users/1");
  });

  it("Initially input for searching by name should not be shown", () => {
    const { container } = render(cont);
    expect(
      container.getElementsByClassName("search-input-users")[0].style.visibility
    ).toBe("hidden");
  });

  //   it("input for searching by name should be shown after clicking button for first time", async () => {
  //     const { container } = render(cont);
  //     fireEvent.click(container.getElementsByClassName("userPageBtn")[1]);
  //     await waitFor(() =>
  //       expect(
  //         container.getElementsByClassName("search-input-users")[0].style
  //           .visibility
  //       ).toBe("vissible")
  //     );
  //   });
});