DocumentOrganizer/src/__tests__/UITests/patternDetailsPageUI.test.js

import {
  render,
  screen,
  fireEvent,
  waitFor,
  findByTestId,
} from "@testing-library/react";
import * as redux from "react-redux";
import store from "../../store";
import { mockState } from "../../mockState";
import { Router } from "react-router-dom";
import history from "../../store/utils/history";
import ColorModeProvider from "../../context/ColorModeContext";
import PatternDetailsPage from "../../pages/PatternsPage/PatternDetailsPage";

describe("PatternDetailsPage render tests", () => {
  var props = {
    history: {
      replace: jest.fn(),
      push: jest.fn(),
      location: {
        pathname: "/patterns/1",
      },
    },
  };

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

  let spyOnUseSelector;

  beforeEach(() => {
    spyOnUseSelector = jest.spyOn(redux, "useSelector");
    spyOnUseSelector
      .mockReturnValue(mockState.patterns.patterns[0])
      .mockReturnValue([
        {
          applicantId: 21359,
          firstName: "Jelena",
          lastName: "Zivkovic",
          email: "jelena.d.zivkovic@gmail.com",
        },
      ])
      .mockReturnValue(null);
  });

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

  it("Should render PatternDetaisPage", async () => {
    render(cont);
    waitFor(() => {
      expect(screen.getByTestId("pattern-details")).toBeDefined();
    });
  });

  it("Should render select input for choosing candidate", async () => {
    render(cont);
    waitFor(() => {
      expect(screen.getByTestId("pattern-details-select")).toBeDefined();
    });
  });

  it("Should render add candidate button for choosing email", async () => {
    render(cont);
    waitFor(() => {
      expect(screen.getByTestId("pattern-details-plus")).toBeDefined();
    });
  });

  it("Should render go back button", async () => {
    const { container } = render(cont);
    waitFor(() => {
      expect(
        container.getElementsByClassName("ad-details-buttons-link")[0]
      ).toBeDefined();
    });
  });

  it("Should go to patterns page when click go back button", async () => {
    const { container } = render(cont);

    waitFor(() => {
      fireEvent.click(screen.getByTestId("ad-details-buttons-link"));

      expect(props.history.push).toHaveBeenCalledWith("/patterns");
    });
  });

  it("Should render send email button", () => {
    render(cont);

    waitFor(() => {
      expect(screen.getByTestId("pattern-details-send-email")).toBeDefined();
    });
  });

  it("Should render send email modal", () => {
    render(cont);

    waitFor(() => {
      fireEvent.change(screen.getByTestId("pattern-details-select"), {
        target: { value: "jelena.d.zivkovic@gmail.com" },
      });

      fireEvent.click(screen.getByTestId("pattern-details-plus"));

      fireEvent.click(screen.getByTestId("pattern-details-send-email"));

      expect(props.history.push).toHaveBeenCalledWith("/patterns");
    });
  });
});