@netdata/charts
Version:
Netdata frontend SDK and chart utilities
251 lines • 10.2 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); }
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
function _defineProperty(e, r, t) { return (r = _toPropertyKey(r)) in e ? Object.defineProperty(e, r, { value: t, enumerable: !0, configurable: !0, writable: !0 }) : e[r] = t, e; }
function _toPropertyKey(t) { var i = _toPrimitive(t, "string"); return "symbol" == _typeof(i) ? i : i + ""; }
function _toPrimitive(t, r) { if ("object" != _typeof(t) || !t) return t; var e = t[Symbol.toPrimitive]; if (void 0 !== e) { var i = e.call(t, r || "default"); if ("object" != _typeof(i)) return i; throw new TypeError("@@toPrimitive must return a primitive value."); } return ("string" === r ? String : Number)(t); }
import React from "react";
import { screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { renderWithChart } from "@jest/testUtilities";
import Compare from "./index";
import { jsx as _jsx } from "react/jsx-runtime";
describe("Compare", function () {
var periods = [{
id: "selected",
label: "Selected timeframe",
after: 1645459425,
before: 1645459485,
isBase: true,
payload: {
data: [[1, 50, 30], [2, 60, 40]],
dimensions: ["cpu", "memory"]
},
error: null
}, {
id: "24h",
label: "24 hours before",
after: 1645373025,
before: 1645373085,
payload: {
data: [[1, 45, 25], [2, 55, 35]],
dimensions: ["cpu", "memory"]
},
error: null
}, {
id: "7d",
label: "7 days before",
after: 1644854625,
before: 1644854685,
payload: null,
error: "Failed to fetch data"
}];
var defaultAttributes = {
comparePeriods: periods,
compareLoading: false,
compareError: null,
drawer: {
action: "compare",
tab: "window",
showAdvancedStats: false
}
};
var renderCompare = function renderCompare() {
var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
return renderWithChart(/*#__PURE__*/_jsx(Compare, {}), {
attributes: _objectSpread(_objectSpread(_objectSpread({}, defaultAttributes), attributes), {}, {
drawer: _objectSpread(_objectSpread({}, defaultAttributes.drawer), attributes.drawer)
})
});
};
it("renders comparison cards for each period", function () {
renderCompare();
expect(screen.getByText("Selected timeframe")).toBeInTheDocument();
expect(screen.getByText("24 hours before")).toBeInTheDocument();
expect(screen.getByText("7 days before")).toBeInTheDocument();
});
it("shows error state for failed periods", function () {
renderCompare();
expect(screen.getByText("Error loading data")).toBeInTheDocument();
});
it("shows error message when hook returns error", function () {
var error = "Network connection failed";
renderCompare({
compareError: error
});
expect(screen.getByText("Error: ".concat(error))).toBeInTheDocument();
});
it("shows custom period selector when periods are loaded", function () {
renderCompare();
expect(screen.getByText("Custom")).toBeInTheDocument();
expect(screen.getByText("Select a timeframe")).toBeInTheDocument();
});
it("uses the design-system scale for its grid, card, change, and edit icon", function () {
renderCompare();
expect(screen.getByTestId("comparison-grid")).toHaveStyle("display: grid; gap: 12px; grid-template-columns: repeat(auto-fill,minmax(260px,1fr))");
expect(screen.getByTestId("custom-period-card")).toHaveStyle("min-height: 144px");
var editIcon = screen.getAllByTestId("period-edit")[0].querySelector("svg");
expect(editIcon).toHaveStyle({
height: "12px",
width: "12px"
});
});
it("shows custom period selector even when no periods loaded", function () {
renderCompare({
comparePeriods: []
});
expect(screen.getByText("Custom")).toBeInTheDocument();
expect(screen.getByText("Select a timeframe")).toBeInTheDocument();
});
it("shows min, avg, max values for periods with data", function () {
renderCompare();
var minElements = screen.getAllByText("Min");
var avgElements = screen.getAllByText("Avg");
var maxElements = screen.getAllByText("Max");
expect(minElements).toHaveLength(2);
expect(avgElements).toHaveLength(2);
expect(maxElements).toHaveLength(2);
});
it("handles periods without payload gracefully", function () {
var periodsWithoutPayload = [{
id: "selected",
label: "Selected timeframe",
after: 1000,
before: 2000,
payload: null,
error: null
}];
renderCompare({
comparePeriods: periodsWithoutPayload
});
expect(screen.getByText("No data available for the selected time range")).toBeInTheDocument();
});
describe("Custom Period Form", function () {
it("shows custom period form when button is clicked", function () {
renderCompare();
fireEvent.click(screen.getByText("Select a timeframe"));
expect(screen.getByText("Add Custom Period")).toBeInTheDocument();
expect(screen.getByPlaceholderText("e.g. 3 days ago")).toBeInTheDocument();
expect(screen.getByText("Days")).toBeInTheDocument();
expect(screen.getByText("Hours")).toBeInTheDocument();
});
it("hides custom period selector when form is shown", function () {
renderCompare();
fireEvent.click(screen.getByText("Select a timeframe"));
expect(screen.queryByText("Custom")).not.toBeInTheDocument();
expect(screen.queryByText("Select a timeframe")).not.toBeInTheDocument();
});
it("cancels form and shows selector again", function () {
renderCompare();
fireEvent.click(screen.getByText("Select a timeframe"));
fireEvent.click(screen.getByRole("button", {
name: "Cancel"
}));
expect(screen.queryByText("Add Custom Period")).not.toBeInTheDocument();
expect(screen.getByText("Custom")).toBeInTheDocument();
expect(screen.getByText("Select a timeframe")).toBeInTheDocument();
});
it("adds custom period and updates chart attribute", function () {
var _renderCompare = renderCompare(),
chart = _renderCompare.chart;
fireEvent.click(screen.getByText("Select a timeframe"));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: "3 days ago"
}
});
fireEvent.change(numberInputs[0], {
target: {
value: "3"
}
});
fireEvent.click(screen.getByRole("button", {
name: "Add"
}));
expect(chart.getAttribute("customPeriods")).toEqual(expect.arrayContaining([expect.objectContaining({
id: expect.stringMatching(/^custom_\d+$/),
label: "3 days ago",
offsetSeconds: 259200
})]));
expect(screen.queryByText("Add Custom Period")).not.toBeInTheDocument();
});
it("appends to existing custom periods", function () {
var existingPeriods = [{
id: "existing",
label: "Existing",
offsetSeconds: 3600
}];
var _renderCompare2 = renderCompare({
customPeriods: existingPeriods
}),
chart = _renderCompare2.chart;
fireEvent.click(screen.getByText("Select a timeframe"));
var labelInput = screen.getByPlaceholderText("e.g. 3 days ago");
var numberInputs = screen.getAllByRole("spinbutton");
fireEvent.change(labelInput, {
target: {
value: "New period"
}
});
fireEvent.change(numberInputs[1], {
target: {
value: "6"
}
});
fireEvent.click(screen.getByRole("button", {
name: "Add"
}));
expect(chart.getAttribute("customPeriods")).toEqual([].concat(existingPeriods, [expect.objectContaining({
id: expect.stringMatching(/^custom_\d+$/),
label: "New period",
offsetSeconds: 21600
})]));
});
});
describe("Volume visibility", function () {
var periodsWithVolume = [{
id: "selected",
label: "Selected timeframe",
after: 1645459425,
before: 1645459485,
isBase: true,
payload: {
data: [[1, 50, 30]],
dimensions: ["a", "b"]
},
error: null
}];
it("shows volume for rate units ending with /s", function () {
renderCompare({
comparePeriods: periodsWithVolume,
units: ["kilobits/s"],
drawer: {
showAdvancedStats: true
}
});
expect(screen.getByText("Volume")).toBeInTheDocument();
});
it("hides volume for non-rate units", function () {
renderCompare({
comparePeriods: periodsWithVolume,
units: ["%"],
drawer: {
showAdvancedStats: true
}
});
expect(screen.queryByText("Volume")).not.toBeInTheDocument();
});
it("hides volume when units is empty", function () {
renderCompare({
comparePeriods: periodsWithVolume,
units: [""],
drawer: {
showAdvancedStats: true
}
});
expect(screen.queryByText("Volume")).not.toBeInTheDocument();
});
});
});