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

Netdata frontend SDK and chart utilities

"use strict";

var _testUtilities = require("@jest/testUtilities");
var _index = _interopRequireDefault(require("./index"));
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); }
var mockDygraph = {
  updateOptions: jest.fn(),
  destroy: jest.fn(),
  resize: jest.fn(),
  setSelection: jest.fn(),
  xAxisRange: jest.fn(function () {
    return [1617946860000, 1617947750000];
  }),
  getArea: jest.fn(function () {
    return {
      w: 800,
      h: 400
    };
  }),
  toDomXCoord: jest.fn(function (x) {
    return x;
  }),
  xAxisExtremes: jest.fn(function () {
    return [1617946860000, 1617947750000];
  })
};
jest.mock("dygraphs", function () {
  return jest.fn(function () {
    return mockDygraph;
  });
});
describe("dygraphChart", function () {
  beforeEach(function () {
    jest.clearAllMocks();
  });
  it("creates chart instance with required methods", function () {
    var _makeTestChart = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart.sdk,
      chart = _makeTestChart.chart;
    var instance = (0, _index["default"])(sdk, chart);
    expect(instance).toHaveProperty("mount");
    expect(instance).toHaveProperty("unmount");
    expect(instance).toHaveProperty("render");
    expect(instance).toHaveProperty("getDygraph");
    expect(instance).toHaveProperty("getChartWidth");
    expect(instance).toHaveProperty("getChartHeight");
    expect(_typeof(instance.mount)).toBe("function");
    expect(_typeof(instance.unmount)).toBe("function");
    expect(_typeof(instance.render)).toBe("function");
  });
  it("mounts and creates dygraph instance", function () {
    var _makeTestChart2 = (0, _testUtilities.makeTestChart)({
        attributes: {
          theme: "dark",
          outOfLimits: false
        }
      }),
      sdk = _makeTestChart2.sdk,
      chart = _makeTestChart2.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10, 20]],
        labels: ["time", "load1", "load5"]
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    expect(function () {
      return instance.mount(element);
    }).not.toThrow();
    var Dygraph = require("dygraphs");
    expect(Dygraph).toHaveBeenCalledWith(element, expect.any(Array), expect.any(Object));
    expect(element.classList.contains("dark")).toBe(true);
  });
  it("handles empty data by creating placeholder chart", function () {
    var _makeTestChart3 = (0, _testUtilities.makeTestChart)({
        attributes: {
          theme: "light",
          outOfLimits: true
        }
      }),
      sdk = _makeTestChart3.sdk,
      chart = _makeTestChart3.chart;
    chart.getPayload = function () {
      return {
        data: [],
        labels: []
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    instance.mount(element);
    var Dygraph = require("dygraphs");
    expect(Dygraph).toHaveBeenCalledWith(element, [[0]], expect.objectContaining({
      labels: ["X"]
    }));
  });
  it("prevents multiple mounts on same element", function () {
    var _makeTestChart4 = (0, _testUtilities.makeTestChart)({
        attributes: {
          theme: "dark"
        }
      }),
      sdk = _makeTestChart4.sdk,
      chart = _makeTestChart4.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10]],
        labels: ["time", "value"]
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    instance.mount(element);
    var Dygraph = require("dygraphs");
    var firstCallCount = Dygraph.mock.calls.length;
    instance.mount(element);
    expect(Dygraph.mock.calls.length).toBe(firstCallCount);
  });
  it("renders without errors when not mounted", function () {
    var _makeTestChart5 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart5.sdk,
      chart = _makeTestChart5.chart;
    var instance = (0, _index["default"])(sdk, chart);
    expect(function () {
      return instance.render();
    }).not.toThrow();
  });
  it("skips render when highlighting, panning, or processing", function () {
    var _makeTestChart6 = (0, _testUtilities.makeTestChart)({
        attributes: {
          highlighting: true,
          panning: false,
          processing: false
        }
      }),
      sdk = _makeTestChart6.sdk,
      chart = _makeTestChart6.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10]],
        labels: ["time", "value"]
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    instance.mount(element);
    instance.render();
    expect(mockDygraph.updateOptions).not.toHaveBeenCalled();
  });
  it("unmounts without errors", function () {
    var _makeTestChart7 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart7.sdk,
      chart = _makeTestChart7.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10]],
        labels: ["time", "value"]
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    instance.mount(element);
    expect(function () {
      return instance.unmount();
    }).not.toThrow();
    expect(mockDygraph.destroy).toHaveBeenCalled();
  });
  it("returns dygraph instance from getDygraph", function () {
    var _makeTestChart8 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart8.sdk,
      chart = _makeTestChart8.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10]],
        labels: ["time", "value"]
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    expect(instance.getDygraph()).toBeNull();
    instance.mount(element);
    expect(instance.getDygraph()).toBe(mockDygraph);
  });
  it("calculates chart dimensions from dygraph when mounted", function () {
    var _makeTestChart9 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart9.sdk,
      chart = _makeTestChart9.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10]],
        labels: ["time", "value"]
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    instance.mount(element);
    expect(instance.getChartWidth()).toBe(800);
    expect(instance.getChartHeight()).toBe(400);
  });
  it("returns axis range from dygraph", function () {
    var _makeTestChart10 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart10.sdk,
      chart = _makeTestChart10.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10]],
        labels: ["time", "value"]
      };
    };
    chart.getDateWindow = function () {
      return [1617946860000, 1617947750000];
    };
    chart.formatXAxis = function (x) {
      return x.toString();
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    chart.getUnitSign = function () {
      return "";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    instance.mount(element);
    expect(instance.getXAxisRange()).toEqual([1617946860000, 1617947750000]);
  });
});