@netdata/charts/dist/es6/components/provider/index.test.js

Netdata frontend SDK and chart utilities

import React from "react";
import { render, screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { renderWithChart, makeTestChart } from "@jest/testUtilities";
import ChartProvider, { withChartProvider } from "./index";
import { convert, useChart } from "./selectors";
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
describe("ChartProvider", function () {
  it("provides chart context to children", function () {
    var TestComponent = function TestComponent() {
      var chart = useChart();
      return /*#__PURE__*/_jsx("div", {
        "data-testid": "chart-id",
        children: chart.getId()
      });
    };
    renderWithChart(/*#__PURE__*/_jsx(TestComponent, {}));
    expect(screen.getByTestId("chart-id")).toHaveTextContent(/^[a-f0-9-]+$/);
  });
  it("renders children components", function () {
    renderWithChart(/*#__PURE__*/_jsx("div", {
      "data-testid": "child",
      children: "Child Component"
    }));
    expect(screen.getByTestId("child")).toBeInTheDocument();
  });
  it("handles null chart gracefully", function () {
    var TestComponent = function TestComponent() {
      var chart = useChart();
      return /*#__PURE__*/_jsx("div", {
        "data-testid": "chart-value",
        children: chart ? "has chart" : "no chart"
      });
    };
    render(/*#__PURE__*/_jsx(ChartProvider, {
      chart: null,
      children: /*#__PURE__*/_jsx(TestComponent, {})
    }));
    expect(screen.getByTestId("chart-value")).toHaveTextContent("no chart");
  });
});
describe("withChartProvider", function () {
  it("wraps component with chart provider", function () {
    var _makeTestChart = makeTestChart(),
      chart = _makeTestChart.chart;
    var TestComponent = function TestComponent() {
      var contextChart = useChart();
      return /*#__PURE__*/_jsx("div", {
        "data-testid": "wrapped-chart-id",
        children: contextChart.getId()
      });
    };
    var WrappedComponent = withChartProvider(TestComponent);
    render(/*#__PURE__*/_jsx(WrappedComponent, {
      chart: chart
    }));
    expect(screen.getByTestId("wrapped-chart-id")).toHaveTextContent(chart.getId());
  });
  it("passes through other props to wrapped component", function () {
    var _makeTestChart2 = makeTestChart(),
      chart = _makeTestChart2.chart;
    var TestComponent = function TestComponent(_ref) {
      var testProp = _ref.testProp;
      return /*#__PURE__*/_jsx("div", {
        "data-testid": "test-prop",
        children: testProp
      });
    };
    var WrappedComponent = withChartProvider(TestComponent);
    render(/*#__PURE__*/_jsx(WrappedComponent, {
      chart: chart,
      testProp: "passed through"
    }));
    expect(screen.getByTestId("test-prop")).toHaveTextContent("passed through");
  });
  it("excludes chart prop from passed props", function () {
    var _makeTestChart3 = makeTestChart(),
      chart = _makeTestChart3.chart;
    var TestComponent = function TestComponent(_ref2) {
      var propChart = _ref2.chart;
      var contextChart = useChart();
      return /*#__PURE__*/_jsxs("div", {
        children: [/*#__PURE__*/_jsx("div", {
          "data-testid": "context-chart",
          children: contextChart.getId()
        }), /*#__PURE__*/_jsx("div", {
          "data-testid": "prop-chart",
          children: propChart ? "has prop chart" : "no prop chart"
        })]
      });
    };
    var WrappedComponent = withChartProvider(TestComponent);
    render(/*#__PURE__*/_jsx(WrappedComponent, {
      chart: chart
    }));
    expect(screen.getByTestId("context-chart")).toHaveTextContent(chart.getId());
    expect(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 = 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(convert(chart, 95.9, {
      dimensionId: "spiky"
    })).toBe("0.0001");
    expect(convert(chart, 95.9, {
      dimensionId: "spiky",
      scaleByValue: true
    })).toBe("95.9");
    expect(convert(chart, 10000000, {
      dimensionId: "spiky",
      scaleByValue: true
    })).toBe("10");
  });
});