@netdata/charts/dist/chartLibraries/gauge/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 mockGauge = {
  setOptions: jest.fn().mockReturnThis(),
  setMinValue: jest.fn(),
  setMaxValue: jest.fn(),
  set: jest.fn(),
  update: jest.fn(),
  render: jest.fn(),
  maxValue: 100,
  minValue: 0,
  animationSpeed: 32
};
jest.mock("./library", function () {
  return jest.fn(function () {
    return mockGauge;
  });
});
describe("gaugeChart", 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("getMinMax");
    expect(_typeof(instance.mount)).toBe("function");
    expect(_typeof(instance.unmount)).toBe("function");
    expect(_typeof(instance.render)).toBe("function");
    expect(_typeof(instance.getMinMax)).toBe("function");
  });
  it("mounts successfully when canvas element exists", function () {
    var _makeTestChart2 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart2.sdk,
      chart = _makeTestChart2.chart;
    chart.selectDimensionColor = function () {
      return "#ff0000";
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    var canvas = document.createElement("canvas");
    canvas.width = 200;
    canvas.height = 200;
    element.appendChild(canvas);
    expect(function () {
      return instance.mount(element);
    }).not.toThrow();
    var GaugeLibrary = require("./library");
    expect(GaugeLibrary).toHaveBeenCalledWith(canvas);
    expect(mockGauge.setOptions).toHaveBeenCalled();
    expect(mockGauge.setMinValue).toHaveBeenCalledWith(0);
  });
  it("skips mounting when gauge already exists", function () {
    var _makeTestChart3 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart3.sdk,
      chart = _makeTestChart3.chart;
    chart.selectDimensionColor = function () {
      return "#ff0000";
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    var canvas = document.createElement("canvas");
    element.appendChild(canvas);
    instance.mount(element);
    var GaugeLibrary = require("./library");
    var firstCallCount = GaugeLibrary.mock.calls.length;
    instance.mount(element);
    expect(GaugeLibrary.mock.calls.length).toBe(firstCallCount);
  });
  it("renders without errors when not loaded", function () {
    var _makeTestChart4 = (0, _testUtilities.makeTestChart)({
        attributes: {
          loaded: false
        }
      }),
      sdk = _makeTestChart4.sdk,
      chart = _makeTestChart4.chart;
    var instance = (0, _index["default"])(sdk, chart);
    expect(function () {
      return instance.render();
    }).not.toThrow();
  });
  it("renders without errors when gauge not mounted", function () {
    var _makeTestChart5 = (0, _testUtilities.makeTestChart)({
        attributes: {
          loaded: true
        }
      }),
      sdk = _makeTestChart5.sdk,
      chart = _makeTestChart5.chart;
    var instance = (0, _index["default"])(sdk, chart);
    expect(function () {
      return instance.render();
    }).not.toThrow();
  });
  it("renders with data when loaded and mounted", function () {
    var _makeTestChart6 = (0, _testUtilities.makeTestChart)({
        attributes: {
          loaded: true,
          getValueRange: function getValueRange() {
            return [0, 100];
          }
        }
      }),
      sdk = _makeTestChart6.sdk,
      chart = _makeTestChart6.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 75], [1617946870000, 82]]
      };
    };
    chart.getClosestRow = function () {
      return 1;
    };
    chart.selectDimensionColor = function () {
      return "#ff0000";
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    var canvas = document.createElement("canvas");
    element.appendChild(canvas);
    instance.mount(element);
    expect(function () {
      return instance.render();
    }).not.toThrow();
  });
  it("handles hoverX when rendering", function () {
    var _makeTestChart7 = (0, _testUtilities.makeTestChart)({
        attributes: {
          loaded: true,
          hoverX: [1617946865000],
          getValueRange: function getValueRange() {
            return [0, 100];
          }
        }
      }),
      sdk = _makeTestChart7.sdk,
      chart = _makeTestChart7.chart;
    chart.getPayload = function () {
      return {
        data: [[1617946860000, 10], [1617946870000, 20]]
      };
    };
    chart.getClosestRow = function () {
      return 0;
    };
    chart.selectDimensionColor = function () {
      return "#ff0000";
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    var canvas = document.createElement("canvas");
    element.appendChild(canvas);
    instance.mount(element);
    expect(function () {
      return instance.render();
    }).not.toThrow();
  });
  it("handles empty data gracefully", function () {
    var _makeTestChart8 = (0, _testUtilities.makeTestChart)({
        attributes: {
          loaded: true
        }
      }),
      sdk = _makeTestChart8.sdk,
      chart = _makeTestChart8.chart;
    chart.getPayload = function () {
      return {
        data: []
      };
    };
    var instance = (0, _index["default"])(sdk, chart);
    expect(function () {
      return instance.render();
    }).not.toThrow();
  });
  it("unmounts without errors", function () {
    var _makeTestChart9 = (0, _testUtilities.makeTestChart)(),
      sdk = _makeTestChart9.sdk,
      chart = _makeTestChart9.chart;
    chart.selectDimensionColor = function () {
      return "#ff0000";
    };
    chart.getThemeAttribute = function () {
      return "#333";
    };
    var instance = (0, _index["default"])(sdk, chart);
    var element = document.createElement("div");
    var canvas = document.createElement("canvas");
    element.appendChild(canvas);
    instance.mount(element);
    expect(function () {
      return instance.unmount();
    }).not.toThrow();
  });
  it("getMinMax returns result from getValueRange attribute", function () {
    var _makeTestChart10 = (0, _testUtilities.makeTestChart)({
        attributes: {
          getValueRange: function getValueRange() {
            return [20, 80];
          }
        }
      }),
      sdk = _makeTestChart10.sdk,
      chart = _makeTestChart10.chart;
    var instance = (0, _index["default"])(sdk, chart);
    var result = instance.getMinMax();
    expect(result).toEqual([20, 80]);
  });
});