HRCenter/src/__tests__/UITests/dayDetailsComponentUI.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 } from "@testing-library/react";
import history from "../../store/utils/history";
import DayDetailsComponent from "../../components/Schedules/DayDetailsComponent";
import ColorModeProvider from "../../context/ColorModeContext";

const setCurrentlySelected = jest.fn();
const setCurrentlySelectedDay = jest.fn();

const props = {
  selectedDate: "20.12.2023",
  selectionProcesses: mockState.schedule.schedule,
  open: jest.fn(),
  onClose: jest.fn(),
  setCurrentlySelected: setCurrentlySelected,
  setCurrentlySelectedDay: setCurrentlySelectedDay,
  currentlySelectedDay: 20,
  numberOfDaysInMonth: 31,
  history: {
    replace: jest.fn(),
    push: jest.fn(),
    location: {
      pathname: "/schedule",
    },
  },
};

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

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

  it("Should render", () => {
    render(cont);
    expect(screen.getByTestId("day-component-dialog")).toBeDefined();
  });

  it("Should render left arrow as enabled because currenlty selected day is not 1", () => {
    render(cont);
    expect(screen.getAllByTestId("day-details-left-arrow")[0]).toBeDefined();
  });

  it("Should render right arrow as enabled because currently selected day is not 31", () => {
    render(cont);
    expect(screen.getAllByTestId("day-details-right-arrow")[0]).toBeDefined();
  });

  it("Should show all interviews which we pass to component", () => {
    render(cont);
    expect(screen.getAllByTestId("day-details-component-process").length).toBe(
      mockState.schedule.schedule.length
    );
  });

  it("Should render candidate details page after clicking on candidate name", () => {
    render(cont);
    fireEvent.click(screen.getAllByTestId("day-details-applicant")[0]);
    const arg = { pathname: "/candidates/1" };
    expect(props.history.push).toHaveBeenCalledWith(arg);
  });

  it("Should call function when we press right arrow", () => {
    render(cont);
    fireEvent.click(screen.getAllByTestId("day-details-right-arrow")[0]);
    expect(setCurrentlySelected.mock.calls).toHaveLength(1);
    expect(setCurrentlySelectedDay.mock.calls).toHaveLength(1);
  });

  it("Should call function when we press right arrow", () => {
    render(cont);
    fireEvent.click(screen.getAllByTestId("day-details-left-arrow")[0]);
    expect(setCurrentlySelected.mock.calls).toHaveLength(1);
    expect(setCurrentlySelectedDay.mock.calls).toHaveLength(1);
  });
});