@netdata/charts/dist/chartLibraries/dygraph/hoverX.test.js

Netdata frontend SDK and chart utilities

"use strict";

var _hoverX = _interopRequireDefault(require("./hoverX"));
var _testUtilities = require("@jest/testUtilities");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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); }
describe("hoverX", function () {
  var chart, chartUI, hoverXInstance;
  beforeEach(function () {
    var testChart = (0, _testUtilities.makeTestChart)({
      attributes: {
        chartType: "line",
        overlays: {}
      }
    });
    chart = testChart.chart;
    chart.trigger = jest.fn();
    chart.updateAttribute = jest.fn();
    chartUI = {
      on: jest.fn().mockReturnThis(),
      off: jest.fn().mockReturnThis(),
      getDygraph: jest.fn(function () {
        return {
          getArea: jest.fn(function () {
            return {
              h: 200
            };
          }),
          findStackedPoint: jest.fn(function () {
            return {
              point: {
                canvasy: 100
              },
              row: 0,
              seriesName: "test"
            };
          }),
          findClosestPoint: jest.fn(function () {
            return {
              seriesName: "test"
            };
          }),
          getPropertiesForSeries: jest.fn(function () {
            return {
              column: 1
            };
          }),
          toDomXCoord: jest.fn(function (x) {
            return x;
          })
        };
      }),
      sdk: {
        trigger: jest.fn()
      },
      chart: chart
    };
    hoverXInstance = (0, _hoverX["default"])(chartUI);
  });
  it("creates hoverX handler", function () {
    expect(_typeof(_hoverX["default"])).toBe("function");
    expect(hoverXInstance).toHaveProperty("toggle");
    expect(hoverXInstance).toHaveProperty("destroy");
  });
  it("registers event listeners when toggled on", function () {
    hoverXInstance.toggle(true);
    expect(chartUI.on).toHaveBeenCalledWith("highlightCallback", expect.any(Function));
    expect(chartUI.on).toHaveBeenCalledWith("mousemove", expect.any(Function));
    expect(chartUI.on).toHaveBeenCalledWith("mouseout", expect.any(Function));
    expect(chartUI.on).toHaveBeenCalledWith("click", expect.any(Function));
  });
  it("handles highlight event with valid data", function () {
    hoverXInstance.toggle(true);
    var highlightHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "highlightCallback";
    })[1];
    var mockEvent = {
      offsetX: 100,
      offsetY: 100,
      stopImmediatePropagation: jest.fn(),
      preventDefault: jest.fn(),
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    var xValue = 1640995200000;
    var points = [{
      xval: xValue,
      yval: 100,
      idx: 0,
      name: "test"
    }];
    chart.getPayloadDimensionIds = jest.fn(function () {
      return ["test"];
    });
    highlightHandler(mockEvent, xValue, points);
    expect(chartUI.sdk.trigger).toHaveBeenCalledWith("highlightHover", chart, xValue, "test");
    expect(chart.trigger).toHaveBeenCalledWith("highlightHover", xValue, "test");
  });
  it("handles mouseout event", function () {
    hoverXInstance.toggle(true);
    var mouseoutHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "mouseout";
    })[1];
    mouseoutHandler();
    expect(chartUI.sdk.trigger).toHaveBeenCalledWith("highlightBlur", chart);
    expect(chart.trigger).toHaveBeenCalledWith("highlightBlur");
  });
  it("handles annotations area hover", function () {
    hoverXInstance.toggle(true);
    var highlightHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "highlightCallback";
    })[1];
    var mockEvent = {
      offsetX: 100,
      offsetY: 195,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    highlightHandler(mockEvent, 1640995200000, []);
    expect(chartUI.sdk.trigger).not.toHaveBeenCalled();
    expect(chart.trigger).not.toHaveBeenCalled();
  });
  it("handles anomaly rate area hover", function () {
    hoverXInstance.toggle(true);
    var highlightHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "highlightCallback";
    })[1];
    var mockEvent = {
      offsetX: 100,
      offsetY: 10,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    highlightHandler(mockEvent, 1640995200000, []);
    expect(chartUI.sdk.trigger).not.toHaveBeenCalled();
    expect(chart.trigger).not.toHaveBeenCalled();
  });
  it("handles stacked chart type", function () {
    chart.getAttribute = jest.fn(function (key) {
      if (key === "chartType") return "stacked";
      if (key === "overlays") return {};
      return null;
    });
    hoverXInstance.toggle(true);
    var highlightHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "highlightCallback";
    })[1];
    var mockEvent = {
      offsetX: 100,
      offsetY: 100,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    var points = [{
      yval: 10,
      idx: 0,
      name: "cpu"
    }, {
      yval: 20,
      idx: 0,
      name: "memory"
    }];
    chart.getPayloadDimensionIds = jest.fn(function () {
      return ["cpu", "memory"];
    });
    highlightHandler(mockEvent, 1640995200000, points);
    expect(chartUI.sdk.trigger).toHaveBeenCalled();
  });
  it("triggers SDK hover event", function () {
    hoverXInstance.toggle(true);
    var highlightHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "highlightCallback";
    })[1];
    var mockEvent = {
      offsetX: 100,
      offsetY: 100,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    chart.getPayloadDimensionIds = jest.fn(function () {
      return ["test"];
    });
    highlightHandler(mockEvent, 1640995200000, []);
    expect(chartUI.sdk.trigger).toHaveBeenCalledWith("highlightHover", chart, 1640995200000, "test");
  });
  it("handles destroy method", function () {
    hoverXInstance.toggle(true);
    hoverXInstance.destroy();
    expect(chartUI.off).toHaveBeenCalledWith("highlightCallback", expect.any(Function));
    expect(chartUI.off).toHaveBeenCalledWith("mousemove", expect.any(Function));
    expect(chartUI.off).toHaveBeenCalledWith("mouseout", expect.any(Function));
    expect(chartUI.off).toHaveBeenCalledWith("click", expect.any(Function));
  });
  it("deduplicates repeated hover events at same position", function () {
    hoverXInstance.toggle(true);
    var highlightHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "highlightCallback";
    })[1];
    var mockEvent = {
      offsetX: 100,
      offsetY: 100,
      stopImmediatePropagation: jest.fn(),
      preventDefault: jest.fn(),
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    var xValue = 1640995200000;
    var points = [{
      idx: 0,
      name: "test"
    }];
    chart.getPayloadDimensionIds = jest.fn(function () {
      return ["test"];
    });
    highlightHandler(mockEvent, xValue, points);
    expect(chartUI.sdk.trigger).toHaveBeenCalledTimes(1);
    highlightHandler(mockEvent, xValue, points);
    expect(chartUI.sdk.trigger).toHaveBeenCalledTimes(1);
    highlightHandler(mockEvent, xValue + 60000, points);
    expect(chartUI.sdk.trigger).toHaveBeenCalledTimes(2);
  });
  it("handles click event for annotations", function () {
    hoverXInstance.toggle(true);
    var clickHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "click";
    })[1];
    var mockEvent = {
      offsetX: 100,
      offsetY: 100,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    chart.getPayloadDimensionIds = jest.fn(function () {
      return ["test"];
    });
    clickHandler(mockEvent, 1640995200000, []);
    expect(chart.updateAttribute).toHaveBeenCalledWith("draftAnnotation", expect.objectContaining({
      timestamp: 1640995200,
      status: "draft"
    }));
    expect(chart.trigger).toHaveBeenCalledWith("annotationCreate", 1640995200);
    expect(chartUI.sdk.trigger).toHaveBeenCalledWith("annotationCreate", expect.objectContaining({
      trigger: chart.trigger,
      getAttribute: chart.getAttribute
    }), 1640995200);
  });
  it("skips annotation creation near existing annotations", function () {
    chart.getAttribute = jest.fn(function (key) {
      if (key === "overlays") return {
        1: {
          type: "annotation",
          timestamp: 1640995200
        }
      };
      return null;
    });
    chartUI.getDygraph = jest.fn(function () {
      return {
        getArea: jest.fn(function () {
          return {
            h: 200
          };
        }),
        findClosestPoint: jest.fn(function () {
          return {
            seriesName: "test"
          };
        }),
        getPropertiesForSeries: jest.fn(function () {
          return {
            column: 1
          };
        }),
        toDomXCoord: jest.fn(function (timestamp) {
          if (timestamp === 1640995200 * 1000) return 105;
          return timestamp;
        })
      };
    });
    hoverXInstance.toggle(true);
    var clickHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "click";
    })[1];
    var mockEvent = {
      clientX: 105,
      clientY: 100,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    chart.getPayloadDimensionIds = jest.fn(function () {
      return ["test"];
    });
    clickHandler(mockEvent, 1640995200000, []);
    expect(chart.updateAttribute).not.toHaveBeenCalledWith("draftAnnotation", expect.anything());
  });
  it("handles mousemove event", function () {
    hoverXInstance.toggle(true);
    var highlightHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "highlightCallback";
    })[1];
    var mousemoveHandler = chartUI.on.mock.calls.find(function (call) {
      return call[0] === "mousemove";
    })[1];
    chart.getPayloadDimensionIds = jest.fn(function () {
      return ["test"];
    });
    highlightHandler({
      offsetX: 100,
      offsetY: 100,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    }, 1640995200000, []);
    var mockEvent = {
      offsetX: 200,
      offsetY: 150,
      target: {
        getBoundingClientRect: function getBoundingClientRect() {
          return {
            left: 0,
            top: 0
          };
        }
      }
    };
    mousemoveHandler(mockEvent);
    expect(chartUI.sdk.trigger).toHaveBeenCalledWith("highlightHover", chart, 1640995200000, "test");
  });
});