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

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 { render, screen, fireEvent } from "@testing-library/react";
import UsersPage from "../../pages/UsersPage/UsersPage";

describe("Stats reducer 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;
  let spyOnUseDispatch;
  let mockDispatch;

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

    // Mock useDispatch hook
    spyOnUseDispatch = jest.spyOn(redux, "useDispatch");

    // Mock dispatch function returned from useDispatch
    mockDispatch = jest.fn();
    spyOnUseDispatch.mockReturnValue(mockDispatch);
  });

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

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

  it("should not show user actions when rendered", () => {
    const { container } = render(cont);
    expect(container.getElementsByClassName("edit-row").length).toBe(0);
  });

  it("Should render last column when editing mode is active", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("edit-btn-class")[0]);
    expect(container.getElementsByClassName("edit-row").length).toBeGreaterThan(
      0
    );
  });

  it("Should open alert dialog when clicking on reset password button", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("edit-btn-class")[0]);
    // the resset password button is the first one to appear with this class
    fireEvent.click(container.getElementsByClassName("td-btn")[0]);
    expect(screen.getByTestId("alert-container")).toBeDefined();
  });

  it("Should open alert dialog when clicking on enable toggler", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("edit-btn-class")[0]);
    // the enable toggler button is the sedond one to appear with this class
    fireEvent.click(container.getElementsByClassName("td-btn")[1]);
    expect(screen.getByTestId("alert-container")).toBeDefined();
  });

  it("Should navigate to user details page when clicking on edit button", () => {
    const { container } = render(cont);
    fireEvent.click(container.getElementsByClassName("edit-btn-class")[0]);
    // the link to user details is the third button appear with this class
    fireEvent.click(container.getElementsByClassName("td-btn")[2]);

    // 7 is the id of the first user in our mockstate
    const arg = '/users/7'
    expect(props.history.push).toHaveBeenCalledWith(arg);
  });
});