@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 }; }
// Store original window
var originalWindow = global.window;
describe("useWindowSize", function () {
  beforeEach(function () {
    // Set up a mock window with initial dimensions
    Object.defineProperty(global, "window", {
      value: {
        innerWidth: 1024,
        innerHeight: 768,
        addEventListener: jest.fn(),
        removeEventListener: jest.fn()
      },
      writable: true
    });
  });
  afterEach(function () {
    // Restore original window
    Object.defineProperty(global, "window", {
      value: originalWindow,
      writable: true
    });
  });
  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 zero dimensions and then updates", function () {
    var _renderHook2 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook2.result;

    // Hook should return current window dimensions
    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(global.window.addEventListener).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;

    // Get the resize handler
    var resizeHandler = global.window.addEventListener.mock.calls.find(function (call) {
      return call[0] === "resize";
    })[1];

    // Change window dimensions
    global.window.innerWidth = 1280;
    global.window.innerHeight = 720;

    // Trigger resize event
    (0, _react.act)(function () {
      resizeHandler();
    });
    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;

    // Get the resize handler that was added
    var resizeHandler = global.window.addEventListener.mock.calls.find(function (call) {
      return call[0] === "resize";
    })[1];
    unmount();
    expect(global.window.removeEventListener).toHaveBeenCalledWith("resize", resizeHandler);
  });
  it("handles multiple resize events correctly", function () {
    var _renderHook5 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook5.result;
    var resizeHandler = global.window.addEventListener.mock.calls.find(function (call) {
      return call[0] === "resize";
    })[1];

    // First resize
    global.window.innerWidth = 800;
    global.window.innerHeight = 600;
    (0, _react.act)(function () {
      resizeHandler();
    });
    expect(result.current).toEqual({
      width: 800,
      height: 600
    });

    // Second resize
    global.window.innerWidth = 1920;
    global.window.innerHeight = 1080;
    (0, _react.act)(function () {
      resizeHandler();
    });
    expect(result.current).toEqual({
      width: 1920,
      height: 1080
    });
  });
  it("handles window without addEventListener gracefully", function () {
    Object.defineProperty(global, "window", {
      value: {
        innerWidth: 500,
        innerHeight: 400
        // No addEventListener method
      },
      writable: true
    });
    var _renderHook6 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook6.result;

    // When addEventListener is not available, hook returns initial state (0,0)
    expect(result.current).toEqual({
      width: 0,
      height: 0
    });
  });
  it("provides stable state object reference when size doesn't change", function () {
    var _renderHook7 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook7.result,
      rerender = _renderHook7.rerender;
    var initialResult = result.current;
    rerender();

    // Since window size hasn't changed, we should get the same object reference
    expect(result.current).toEqual(initialResult);
  });
  it("handles window with missing innerWidth/innerHeight", function () {
    Object.defineProperty(global, "window", {
      value: {
        addEventListener: jest.fn(),
        removeEventListener: jest.fn(),
        innerWidth: undefined,
        innerHeight: undefined
      },
      writable: true
    });
    var _renderHook8 = (0, _react.renderHook)(function () {
        return (0, _useWindowSize["default"])();
      }),
      result = _renderHook8.result;

    // The hook returns whatever window.innerWidth/innerHeight are, even if undefined
    // This is the actual behavior of the hook
    expect(result.current).toEqual({
      width: undefined,
      height: undefined
    });
  });
});