monday-ui-react-core/src/hooks/__tests__/useSetFocus.jest.js

Official monday.com UI resources for application development in React.js

import React from "react";
import { renderHook, cleanup, act } from "@testing-library/react-hooks";
import useSetFocus from "../useSetFocus";
import { fireEvent } from "@testing-library/react";

describe("useSetFocus", () => {
  let element;
  let setActiveStub = jest.fn();
  let setUnActiveStub = jest.fn();
  let isActive = true;

  describe("click", () => {
    beforeEach(() => {
      element = document.createElement("div");
      document.body.appendChild(element);
      renderHook(() =>
        useSetFocus({
          ref: { current: element },
          setActive: setActiveStub,
          setUnActive: setUnActiveStub,
          isActive
        })
      );
    });

    afterEach(() => {
      element.remove();
      cleanup();
    });

    it("should call setActiveStub when moving mouse to the element", () => {
      act(() => {
        fireEvent.mouseOver(element);
      });
      expect(setActiveStub.mock.calls.length).toBe(1);
      expect(setUnActiveStub.mock.calls.length).toBe(0);
    });

    it("should call setUnActiveStub when moving mouse out of the element", () => {
      act(() => {
        fireEvent.mouseOver(element);
        fireEvent.mouseLeave(element);
      });
      expect(setActiveStub.mock.calls.length).toBe(1);
      expect(setUnActiveStub.mock.calls.length).toBe(1);
    });

    it("should focus on the element when isActive = true", () => {
      act(() => {
        fireEvent.mouseOver(element);
      });

      expect(element).toHaveFocus;
    });
  });
});