@netdata/charts/dist/components/useWindowSize.test.js

Netdata frontend SDK and chart utilities

"use strict";

var _react = require("@testing-library/react");
var _useWindowSize = _interopRequireDefault(require("./useWindowSize"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("useWindowSize", function () {
  var addEventListenerSpy;
  var removeEventListenerSpy;
  beforeEach(function () {
    addEventListenerSpy = jest.spyOn(window, "addEventListener");
    removeEventListenerSpy = jest.spyOn(window, "removeEventListener");
    Object.defineProperty(window, "innerWidth", {
      value: 1024,
      writable: true,
      configurable: true
    });
    Object.defineProperty(window, "innerHeight", {
      value: 768,
      writable: true,
      configurable: true
    });
  });
  afterEach(function () {
    addEventListenerSpy.mockRestore();
    removeEventListenerSpy.mockRestore();
  });
  it("returns initial window size", function () {
    var _renderHook = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook.result;
    expect(result.current).toEqual({
      width: 1024,
      height: 768
    });
  });
  it("initializes with current window dimensions", function () {
    var _renderHook2 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook2.result;
    expect(result.current.width).toBe(1024);
    expect(result.current.height).toBe(768);
  });
  it("adds resize event listener on mount", function () {
    (0, _react.renderHook)(function () {
      return (0, _useWindowSize["default"])();
    });
    expect(addEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
  });
  it("updates size when window is resized", function () {
    var _renderHook3 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook3.result;
    Object.defineProperty(window, "innerWidth", {
      value: 1280,
      writable: true,
      configurable: true
    });
    Object.defineProperty(window, "innerHeight", {
      value: 720,
      writable: true,
      configurable: true
    });
    (0, _react.act)(function () {
      window.dispatchEvent(new Event("resize"));
    });
    expect(result.current).toEqual({
      width: 1280,
      height: 720
    });
  });
  it("removes resize event listener on unmount", function () {
    var _renderHook4 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      unmount = _renderHook4.unmount;
    unmount();
    expect(removeEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
  });
  it("handles multiple resize events correctly", function () {
    var _renderHook5 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook5.result;
    Object.defineProperty(window, "innerWidth", {
      value: 800,
      writable: true,
      configurable: true
    });
    Object.defineProperty(window, "innerHeight", {
      value: 600,
      writable: true,
      configurable: true
    });
    (0, _react.act)(function () {
      window.dispatchEvent(new Event("resize"));
    });
    expect(result.current).toEqual({
      width: 800,
      height: 600
    });
    Object.defineProperty(window, "innerWidth", {
      value: 1920,
      writable: true,
      configurable: true
    });
    Object.defineProperty(window, "innerHeight", {
      value: 1080,
      writable: true,
      configurable: true
    });
    (0, _react.act)(function () {
      window.dispatchEvent(new Event("resize"));
    });
    expect(result.current).toEqual({
      width: 1920,
      height: 1080
    });
  });
});