@netdata/charts
Version:
Netdata frontend SDK and chart utilities
88 lines • 3.8 kB
JavaScript
import React from "react";
import { screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { renderWithChart, makeTestChart } from "@jest/testUtilities";
import useHeadlessChart from "./useHeadlessChart";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
var TestComponent = function TestComponent() {
var _useHeadlessChart = useHeadlessChart(),
chart = _useHeadlessChart.chart,
data = _useHeadlessChart.data,
dimensionIds = _useHeadlessChart.dimensionIds,
helpers = _useHeadlessChart.helpers,
state = _useHeadlessChart.state;
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("div", {
"data-testid": "chart-id",
children: chart.getId()
}), /*#__PURE__*/_jsx("div", {
"data-testid": "data-length",
children: data.length
}), /*#__PURE__*/_jsx("div", {
"data-testid": "dimension-ids",
children: dimensionIds.length
}), /*#__PURE__*/_jsx("div", {
"data-testid": "helpers",
children: typeof helpers.getDimensionIds === "function" ? "has helpers" : "no helpers"
}), /*#__PURE__*/_jsx("div", {
"data-testid": "state-loading",
children: state.loading ? "loading" : "not loading"
}), /*#__PURE__*/_jsx("div", {
"data-testid": "state-empty",
children: state.empty ? "empty" : "not empty"
})]
});
};
describe("useHeadlessChart", function () {
it("provides chart instance", function () {
renderWithChart(/*#__PURE__*/_jsx(TestComponent, {}));
expect(screen.getByTestId("chart-id")).toHaveTextContent(/^[a-f0-9-]+$/);
});
it("provides data array", function () {
renderWithChart(/*#__PURE__*/_jsx(TestComponent, {}));
expect(screen.getByTestId("data-length")).toHaveTextContent(/^\d+$/);
});
it("provides dimension ids", function () {
renderWithChart(/*#__PURE__*/_jsx(TestComponent, {}));
expect(screen.getByTestId("dimension-ids")).toHaveTextContent(/^\d+$/);
});
it("provides helper functions", function () {
renderWithChart(/*#__PURE__*/_jsx(TestComponent, {}));
expect(screen.getByTestId("helpers")).toHaveTextContent("has helpers");
});
it("provides state object", function () {
renderWithChart(/*#__PURE__*/_jsx(TestComponent, {}));
expect(screen.getByTestId("state-loading")).toHaveTextContent(/^(loading|not loading)$/);
expect(screen.getByTestId("state-empty")).toHaveTextContent(/^(empty|not empty)$/);
});
it("returns processed data with formatted values", function () {
var _makeTestChart = makeTestChart({
payload: {
data: [[1000, 10, 20], [2000, 15, 25]]
}
}),
chart = _makeTestChart.chart;
var TestDataComponent = function TestDataComponent() {
var _data$, _data$2;
var _useHeadlessChart2 = useHeadlessChart(),
data = _useHeadlessChart2.data;
return /*#__PURE__*/_jsxs("div", {
children: [/*#__PURE__*/_jsx("div", {
"data-testid": "data-available",
children: data.length > 0 ? "has data" : "no data"
}), /*#__PURE__*/_jsx("div", {
"data-testid": "first-timestamp",
children: ((_data$ = data[0]) === null || _data$ === void 0 ? void 0 : _data$.timestamp) || "no timestamp"
}), /*#__PURE__*/_jsx("div", {
"data-testid": "dimensions-count",
children: ((_data$2 = data[0]) === null || _data$2 === void 0 || (_data$2 = _data$2.dimensions) === null || _data$2 === void 0 ? void 0 : _data$2.length) || 0
})]
});
};
renderWithChart(/*#__PURE__*/_jsx(TestDataComponent, {}), {
chart: chart
});
expect(screen.getByTestId("data-available")).toHaveTextContent(/^(has data|no data)$/);
expect(screen.getByTestId("dimensions-count")).toHaveTextContent(/^\d+$/);
});
});