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

Netdata frontend SDK and chart utilities

import { renderHook, act } from "@testing-library/react";
import useWindowSize from "./useWindowSize";
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 = renderHook(function () {
        return useWindowSize();
      }),
      result = _renderHook.result;
    expect(result.current).toEqual({
      width: 1024,
      height: 768
    });
  });
  it("initializes with current window dimensions", function () {
    var _renderHook2 = renderHook(function () {
        return useWindowSize();
      }),
      result = _renderHook2.result;
    expect(result.current.width).toBe(1024);
    expect(result.current.height).toBe(768);
  });
  it("adds resize event listener on mount", function () {
    renderHook(function () {
      return useWindowSize();
    });
    expect(addEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
  });
  it("updates size when window is resized", function () {
    var _renderHook3 = renderHook(function () {
        return useWindowSize();
      }),
      result = _renderHook3.result;
    Object.defineProperty(window, "innerWidth", {
      value: 1280,
      writable: true,
      configurable: true
    });
    Object.defineProperty(window, "innerHeight", {
      value: 720,
      writable: true,
      configurable: true
    });
    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 = renderHook(function () {
        return useWindowSize();
      }),
      unmount = _renderHook4.unmount;
    unmount();
    expect(removeEventListenerSpy).toHaveBeenCalledWith("resize", expect.any(Function));
  });
  it("handles multiple resize events correctly", function () {
    var _renderHook5 = renderHook(function () {
        return useWindowSize();
      }),
      result = _renderHook5.result;
    Object.defineProperty(window, "innerWidth", {
      value: 800,
      writable: true,
      configurable: true
    });
    Object.defineProperty(window, "innerHeight", {
      value: 600,
      writable: true,
      configurable: true
    });
    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
    });
    act(function () {
      window.dispatchEvent(new Event("resize"));
    });
    expect(result.current).toEqual({
      width: 1920,
      height: 1080
    });
  });
});