@netdata/charts/dist/components/headlessChart/index.test.js

Netdata frontend SDK and chart utilities

"use strict";

var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
require("@testing-library/jest-dom");
var _index = _interopRequireDefault(require("./index"));
var _makeDefaultSDK = _interopRequireDefault(require("../../makeDefaultSDK"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
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); }
describe("HeadlessChart", function () {
  it("renders children components", function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      sdk: sdk,
      contextScope: ["system.load"],
      agent: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "child",
        children: "Child Component"
      })
    }));
    expect(_react2.screen.getByTestId("child")).toBeInTheDocument();
  });
  it("provides chart data via render prop", function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      sdk: sdk,
      contextScope: ["system.load"],
      agent: true,
      children: function children(_ref) {
        var data = _ref.data,
          helpers = _ref.helpers,
          chart = _ref.chart,
          state = _ref.state;
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          "data-testid": "render-prop",
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "helpers",
            children: typeof helpers.getDimensionIds === "function" ? "has helpers" : "no helpers"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "chart",
            children: chart ? "has chart" : "no chart"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "data",
            children: Array.isArray(data) ? "has data" : "no data"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "state",
            children: _typeof(state) === "object" ? "has state" : "no state"
          })]
        });
      }
    }));
    expect(_react2.screen.getByTestId("render-prop")).toBeInTheDocument();
    expect(_react2.screen.getByTestId("helpers")).toHaveTextContent("has helpers");
    expect(_react2.screen.getByTestId("chart")).toHaveTextContent("has chart");
    expect(_react2.screen.getByTestId("data")).toHaveTextContent("has data");
    expect(_react2.screen.getByTestId("state")).toHaveTextContent("has state");
  });
  it("creates chart with provided SDK", function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    var createChartSpy = jest.spyOn(sdk, "makeChart");
    (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      sdk: sdk,
      contextScope: ["system.load"],
      agent: true,
      host: "http://localhost:19999/api/v3",
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "Test"
      })
    }));
    expect(createChartSpy).toHaveBeenCalledWith({
      attributes: {
        contextScope: ["system.load"],
        agent: true,
        host: "http://localhost:19999/api/v3"
      }
    });
  });
  it("creates default SDK when none provided", function () {
    (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      contextScope: ["system.load"],
      agent: true,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        "data-testid": "default-sdk",
        children: "Default SDK"
      })
    }));
    expect(_react2.screen.getByTestId("default-sdk")).toBeInTheDocument();
  });
  it("provides helper functions in render prop", function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      sdk: sdk,
      contextScope: ["system.load"],
      agent: true,
      children: function children(_ref2) {
        var helpers = _ref2.helpers;
        return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
          children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "update-attribute",
            children: typeof helpers.updateAttribute === "function" ? "function" : "not function"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "get-attribute",
            children: typeof helpers.getAttribute === "function" ? "function" : "not function"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "get-dimension-ids",
            children: typeof helpers.getDimensionIds === "function" ? "function" : "not function"
          }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
            "data-testid": "format-time",
            children: typeof helpers.formatTime === "function" ? "function" : "not function"
          })]
        });
      }
    }));
    expect(_react2.screen.getByTestId("update-attribute")).toHaveTextContent("function");
    expect(_react2.screen.getByTestId("get-attribute")).toHaveTextContent("function");
    expect(_react2.screen.getByTestId("get-dimension-ids")).toHaveTextContent("function");
    expect(_react2.screen.getByTestId("format-time")).toHaveTextContent("function");
  });
});