@netdata/charts
Version:
Netdata frontend SDK and chart utilities
141 lines (140 loc) • 6.49 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); }
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
require("@testing-library/jest-dom");
var _testUtilities = require("@jest/testUtilities");
var _index = _interopRequireWildcard(require("./index"));
var _selectors = require("./selectors");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("ChartProvider", function () {
it("provides chart context to children", function () {
var TestComponent = function TestComponent() {
var chart = (0, _selectors.useChart)();
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "chart-id",
children: chart.getId()
});
};
(0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {}));
expect(_react2.screen.getByTestId("chart-id")).toHaveTextContent(/^[a-f0-9-]+$/);
});
it("renders children components", function () {
(0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "child",
children: "Child Component"
}));
expect(_react2.screen.getByTestId("child")).toBeInTheDocument();
});
it("handles null chart gracefully", function () {
var TestComponent = function TestComponent() {
var chart = (0, _selectors.useChart)();
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "chart-value",
children: chart ? "has chart" : "no chart"
});
};
(0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
chart: null,
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(TestComponent, {})
}));
expect(_react2.screen.getByTestId("chart-value")).toHaveTextContent("no chart");
});
});
describe("withChartProvider", function () {
it("wraps component with chart provider", function () {
var _makeTestChart = (0, _testUtilities.makeTestChart)(),
chart = _makeTestChart.chart;
var TestComponent = function TestComponent() {
var contextChart = (0, _selectors.useChart)();
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "wrapped-chart-id",
children: contextChart.getId()
});
};
var WrappedComponent = (0, _index.withChartProvider)(TestComponent);
(0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
chart: chart
}));
expect(_react2.screen.getByTestId("wrapped-chart-id")).toHaveTextContent(chart.getId());
});
it("passes through other props to wrapped component", function () {
var _makeTestChart2 = (0, _testUtilities.makeTestChart)(),
chart = _makeTestChart2.chart;
var TestComponent = function TestComponent(_ref) {
var testProp = _ref.testProp;
return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "test-prop",
children: testProp
});
};
var WrappedComponent = (0, _index.withChartProvider)(TestComponent);
(0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
chart: chart,
testProp: "passed through"
}));
expect(_react2.screen.getByTestId("test-prop")).toHaveTextContent("passed through");
});
it("excludes chart prop from passed props", function () {
var _makeTestChart3 = (0, _testUtilities.makeTestChart)(),
chart = _makeTestChart3.chart;
var TestComponent = function TestComponent(_ref2) {
var propChart = _ref2.chart;
var contextChart = (0, _selectors.useChart)();
return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "context-chart",
children: contextChart.getId()
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
"data-testid": "prop-chart",
children: propChart ? "has prop chart" : "no prop chart"
})]
});
};
var WrappedComponent = (0, _index.withChartProvider)(TestComponent);
(0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(WrappedComponent, {
chart: chart
}));
expect(_react2.screen.getByTestId("context-chart")).toHaveTextContent(chart.getId());
expect(_react2.screen.getByTestId("prop-chart")).toHaveTextContent("no prop chart");
});
});
describe("convert", function () {
it("scales a displayed value independently from the dimension time-series scale", function () {
var _makeTestChart4 = (0, _testUtilities.makeTestChart)({
attributes: {
units: ["operations/s"],
desiredUnits: ["auto"],
viewDimensions: {
ids: ["spiky"],
names: ["spiky"],
units: ["operations/s"],
contexts: ["storybook.units_scaling"]
},
dimensionIds: ["spiky"],
visibleDimensionIds: ["spiky"]
}
}),
chart = _makeTestChart4.chart;
chart.updateDimensions();
var spikeAttributes = chart.getUnitAttributesForValue(10000000, {
dimensionId: "spiky"
});
chart.updateAttribute("unitsByDimension", {
spiky: spikeAttributes
});
expect((0, _selectors.convert)(chart, 95.9, {
dimensionId: "spiky"
})).toBe("0.0001");
expect((0, _selectors.convert)(chart, 95.9, {
dimensionId: "spiky",
scaleByValue: true
})).toBe("95.9");
expect((0, _selectors.convert)(chart, 10000000, {
dimensionId: "spiky",
scaleByValue: true
})).toBe("10");
});
});