@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 _slicedToArray(r, e) { return _arrayWithHoles(r) || _iterableToArrayLimit(r, e) || _unsupportedIterableToArray(r, e) || _nonIterableRest(); }
function _nonIterableRest() { throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); }
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
function _iterableToArrayLimit(r, l) { var t = null == r ? null : "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (null != t) { var e, n, i, u, a = [], f = !0, o = !1; try { if (i = (t = t.call(r)).next, 0 === l) { if (Object(t) !== t) return; f = !1; } else for (; !(f = (e = i.call(t)).done) && (a.push(e.value), a.length !== l); f = !0); } catch (r) { o = !0, n = r; } finally { try { if (!f && null != t["return"] && (u = t["return"](), Object(u) !== u)) return; } finally { if (o) throw n; } } return a; } }
function _arrayWithHoles(r) { if (Array.isArray(r)) return r; }
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 view = (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"
      })
    }));
    var _sdk$getRoot$getChild = sdk.getRoot().getChildren(),
      _sdk$getRoot$getChild2 = _slicedToArray(_sdk$getRoot$getChild, 1),
      chart = _sdk$getRoot$getChild2[0];
    expect(chart.getAttributes()).toMatchObject({
      contextScope: ["system.load"],
      agent: true,
      host: "http://localhost:19999/api/v3"
    });
    view.unmount();
    expect(sdk.getRoot().getChildren()).toEqual([]);
  });
  it("updates an owned chart without recreating it", function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    var view = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      sdk: sdk,
      contextScope: ["system.load"],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "Test"
      })
    }));
    var _sdk$getRoot$getChild3 = sdk.getRoot().getChildren(),
      _sdk$getRoot$getChild4 = _slicedToArray(_sdk$getRoot$getChild3, 1),
      chart = _sdk$getRoot$getChild4[0];
    view.rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      sdk: sdk,
      contextScope: ["system.cpu"],
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "Test"
      })
    }));
    expect(sdk.getRoot().getChildren()).toEqual([chart]);
    expect(chart.getAttribute("contextScope")).toEqual(["system.cpu"]);
  });
  it("does not destroy a borrowed chart", function () {
    var sdk = (0, _makeDefaultSDK["default"])();
    var chart = sdk.makeChart();
    sdk.appendChild(chart);
    var view = (0, _react2.render)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      chart: chart,
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
        children: "Test"
      })
    }));
    view.unmount();
    expect(sdk.getRoot().getChildren()).toEqual([chart]);
  });
  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");
  });
});