@netdata/charts
Version:
Netdata frontend SDK and chart utilities
310 lines • 9.42 kB
JavaScript
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); }
import { makeTestChart } from "@jest/testUtilities";
import dygraphChart from "./index";
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 = makeTestChart(),
sdk = _makeTestChart.sdk,
chart = _makeTestChart.chart;
var instance = dygraphChart(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 = 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 = dygraphChart(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 = 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 = dygraphChart(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 = 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 = dygraphChart(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 = makeTestChart(),
sdk = _makeTestChart5.sdk,
chart = _makeTestChart5.chart;
var instance = dygraphChart(sdk, chart);
expect(function () {
return instance.render();
}).not.toThrow();
});
it("skips render when highlighting, panning, or processing", function () {
var _makeTestChart6 = 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 = dygraphChart(sdk, chart);
var element = document.createElement("div");
instance.mount(element);
instance.render();
expect(mockDygraph.updateOptions).not.toHaveBeenCalled();
});
it("unmounts without errors", function () {
var _makeTestChart7 = 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 = dygraphChart(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 = 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 = dygraphChart(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 = 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 = dygraphChart(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 = 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 = dygraphChart(sdk, chart);
var element = document.createElement("div");
instance.mount(element);
expect(instance.getXAxisRange()).toEqual([1617946860000, 1617947750000]);
});
});