@netdata/charts/dist/es6/components/useHover.test.js

Netdata frontend SDK and chart utilities

function _typeof(o) { "@babel/helpers - typeof"; return _typeof = "function" == typeof Symbol && "symbol" == typeof Symbol.iterator ? function (o) { return typeof o; } : function (o) { return o && "function" == typeof Symbol && o.constructor === Symbol && o !== Symbol.prototype ? "symbol" : typeof o; }, _typeof(o); }
function _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
import { renderHook, act } from "@testing-library/react";
import useHover, { useHovered } from "./useHover";
describe("useHover", function () {
  var mockElement;
  var mockOnHover;
  var mockOnBlur;
  beforeEach(function () {
    mockElement = {
      addEventListener: jest.fn(),
      removeEventListener: jest.fn(),
      parentElement: null
    };
    mockOnHover = jest.fn();
    mockOnBlur = jest.fn();
  });
  it("returns a ref object", function () {
    var _renderHook = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur
        }, []);
      }),
      result = _renderHook.result;
    expect(result.current).toHaveProperty("current");
    expect(result.current.current).toBeUndefined();
  });
  it("adds event listeners when ref.current is set", function () {
    var _renderHook2 = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur
        }, []);
      }),
      result = _renderHook2.result,
      rerender = _renderHook2.rerender;
    act(function () {
      result.current.current = mockElement;
    });
    rerender();
    expect(mockElement.addEventListener).toHaveBeenCalledWith("mouseover", mockOnHover);
    expect(mockElement.addEventListener).toHaveBeenCalledWith("mouseout", expect.any(Function));
  });
  it("calls onHover when mouseover event is triggered", function () {
    var _renderHook3 = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur
        }, []);
      }),
      result = _renderHook3.result,
      rerender = _renderHook3.rerender;
    act(function () {
      result.current.current = mockElement;
    });
    rerender();
    var mouseoverHandler = mockElement.addEventListener.mock.calls.find(function (call) {
      return call[0] === "mouseover";
    })[1];
    act(function () {
      mouseoverHandler();
    });
    expect(mockOnHover).toHaveBeenCalled();
  });
  it("calls onBlur when mouseout event is triggered and mouse leaves element", function () {
    var _renderHook4 = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur,
          isOut: function isOut() {
            return true;
          }
        }, []);
      }),
      result = _renderHook4.result,
      rerender = _renderHook4.rerender;
    act(function () {
      result.current.current = mockElement;
    });
    rerender();
    var mouseoutHandler = mockElement.addEventListener.mock.calls.find(function (call) {
      return call[0] === "mouseout";
    })[1];
    var mockEvent = {
      relatedTarget: null
    };
    act(function () {
      mouseoutHandler(mockEvent);
    });
    expect(mockOnBlur).toHaveBeenCalled();
  });
  it("does not call onBlur when mouse moves to child element", function () {
    var childElement = {
      parentElement: mockElement
    };
    var _renderHook5 = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur
        }, []);
      }),
      result = _renderHook5.result,
      rerender = _renderHook5.rerender;
    act(function () {
      result.current.current = mockElement;
    });
    rerender();
    var mouseoutHandler = mockElement.addEventListener.mock.calls.find(function (call) {
      return call[0] === "mouseout";
    })[1];
    var mockEvent = {
      relatedTarget: childElement
    };
    act(function () {
      mouseoutHandler(mockEvent);
    });
    expect(mockOnBlur).not.toHaveBeenCalled();
  });
  it("removes event listeners on unmount", function () {
    var _renderHook6 = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur
        }, []);
      }),
      result = _renderHook6.result,
      unmount = _renderHook6.unmount,
      rerender = _renderHook6.rerender;
    act(function () {
      result.current.current = mockElement;
    });
    rerender();
    var addedCalls = mockElement.addEventListener.mock.calls;
    var mouseoverHandler = addedCalls.find(function (call) {
      return call[0] === "mouseover";
    })[1];
    var mouseoutHandler = addedCalls.find(function (call) {
      return call[0] === "mouseout";
    })[1];
    unmount();
    expect(mockElement.removeEventListener).toHaveBeenCalledWith("mouseover", mouseoverHandler);
    expect(mockElement.removeEventListener).toHaveBeenCalledWith("mouseout", mouseoutHandler);
  });
  it("uses default isOut function when not provided", function () {
    var _renderHook7 = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur
        }, []);
      }),
      result = _renderHook7.result,
      rerender = _renderHook7.rerender;
    act(function () {
      result.current.current = mockElement;
    });
    rerender();
    var mouseoutHandler = mockElement.addEventListener.mock.calls.find(function (call) {
      return call[0] === "mouseout";
    })[1];
    var mockEvent = {
      relatedTarget: null
    };
    act(function () {
      mouseoutHandler(mockEvent);
    });
    expect(mockOnBlur).toHaveBeenCalled();
  });
  it("handles dependencies correctly by re-running effect", function () {
    var deps = ["dep1"];
    var _renderHook8 = renderHook(function () {
        return useHover({
          onHover: mockOnHover,
          onBlur: mockOnBlur
        }, deps);
      }),
      rerender = _renderHook8.rerender;
    deps = ["dep2"];
    rerender();

    // Hook should handle dependency changes
    expect(mockOnHover).toBeDefined();
  });
});
describe("useHovered", function () {
  it("returns array with ref and focused state", function () {
    var _renderHook9 = renderHook(function () {
        return useHovered();
      }),
      result = _renderHook9.result;
    expect(Array.isArray(result.current)).toBe(true);
    expect(result.current).toHaveLength(2);
    var _result$current = _slicedToArray(result.current, 2),
      ref = _result$current[0],
      focused = _result$current[1];
    expect(ref).toHaveProperty("current");
    expect(_typeof(focused)).toBe("boolean");
  });
  it("initializes focused state to false", function () {
    var _renderHook10 = renderHook(function () {
        return useHovered();
      }),
      result = _renderHook10.result;
    var _result$current2 = _slicedToArray(result.current, 2),
      focused = _result$current2[1];
    expect(focused).toBe(false);
  });
  it("sets focused to true on hover", function () {
    var mockElement = {
      addEventListener: jest.fn(),
      removeEventListener: jest.fn()
    };
    var _renderHook11 = renderHook(function () {
        return useHovered();
      }),
      result = _renderHook11.result,
      rerender = _renderHook11.rerender;
    act(function () {
      result.current[0].current = mockElement;
    });
    rerender();
    var onHover = mockElement.addEventListener.mock.calls.find(function (call) {
      return call[0] === "mouseover";
    })[1];
    act(function () {
      onHover();
    });
    var _result$current3 = _slicedToArray(result.current, 2),
      focusedAfterHover = _result$current3[1];
    expect(focusedAfterHover).toBe(true);
  });
  it("sets focused to false on blur", function () {
    var mockElement = {
      addEventListener: jest.fn(),
      removeEventListener: jest.fn()
    };
    var _renderHook12 = renderHook(function () {
        return useHovered();
      }),
      result = _renderHook12.result,
      rerender = _renderHook12.rerender;
    act(function () {
      result.current[0].current = mockElement;
    });
    rerender();
    var onHover = mockElement.addEventListener.mock.calls.find(function (call) {
      return call[0] === "mouseover";
    })[1];
    act(function () {
      onHover();
    });
    var onMouseout = mockElement.addEventListener.mock.calls.find(function (call) {
      return call[0] === "mouseout";
    })[1];
    act(function () {
      onMouseout({
        relatedTarget: null
      });
    });
    var _result$current4 = _slicedToArray(result.current, 2),
      focusedAfterBlur = _result$current4[1];
    expect(focusedAfterBlur).toBe(false);
  });
  it("accepts custom options parameter", function () {
    var customOptions = {
      isOut: jest.fn(function () {
        return true;
      })
    };
    var _renderHook13 = renderHook(function () {
        return useHovered(customOptions);
      }),
      result = _renderHook13.result;
    expect(Array.isArray(result.current)).toBe(true);
    expect(result.current).toHaveLength(2);
  });
  it("accepts dependencies parameter", function () {
    var deps = ["dep1", "dep2"];
    var _renderHook14 = renderHook(function () {
        return useHovered({}, deps);
      }),
      result = _renderHook14.result;
    expect(Array.isArray(result.current)).toBe(true);
    expect(result.current).toHaveLength(2);
  });
  it("handles no parameters", function () {
    var _renderHook15 = renderHook(function () {
        return useHovered();
      }),
      result = _renderHook15.result;
    expect(Array.isArray(result.current)).toBe(true);
    expect(result.current).toHaveLength(2);
  });
  it("provides stable ref reference", function () {
    var _renderHook16 = renderHook(function () {
        return useHovered();
      }),
      result = _renderHook16.result,
      rerender = _renderHook16.rerender;
    var _result$current5 = _slicedToArray(result.current, 1),
      initialRef = _result$current5[0];
    rerender();
    var _result$current6 = _slicedToArray(result.current, 1),
      refAfterRerender = _result$current6[0];
    expect(initialRef).toBe(refAfterRerender);
  });
});