@netdata/charts/dist/components/icon/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 _testUtilities = require("@jest/testUtilities");
var _index = _interopRequireWildcard(require("./index"));
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 }; }
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 mockSvg = "<svg viewBox=\"0 0 24 24\" xmlns=\"http://www.w3.org/2000/svg\">\n  <path d=\"M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z\"/>\n</svg>";
describe("Icon component", function () {
  beforeEach(function () {
    // Clean up any previously injected svg containers
    var existingContainer = document.getElementById("netdata-sdk-svg");
    if (existingContainer) {
      existingContainer.remove();
    }
  });
  it("renders icon component with svg", function () {
    var _renderWithChart = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
        svg: mockSvg
      })),
      container = _renderWithChart.container;
    var iconElement = container.querySelector("svg");
    expect(iconElement).toBeInTheDocument();
    expect(iconElement.querySelector("use")).toBeInTheDocument();
  });
  it("passes size props to icon component", function () {
    var _renderWithChart2 = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
        svg: mockSvg,
        width: "32px",
        height: "32px"
      })),
      container = _renderWithChart2.container;
    var iconElement = container.querySelector("svg");
    expect(iconElement).toHaveAttribute("width", "32px");
    expect(iconElement).toHaveAttribute("height", "32px");
  });
  it("uses size prop when width and height not provided", function () {
    var _renderWithChart3 = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
        svg: mockSvg,
        size: "48px"
      })),
      container = _renderWithChart3.container;
    var iconElement = container.querySelector("svg");
    expect(iconElement).toHaveAttribute("width", "48px");
    expect(iconElement).toHaveAttribute("height", "48px");
  });
  it("injects svg into document body", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      svg: mockSvg
    }));
    var svgContainer = document.getElementById("netdata-sdk-svg");
    expect(svgContainer).toBeInTheDocument();
    expect(svgContainer.querySelector("defs")).toBeInTheDocument();
  });
  it("handles svg with content property", function () {
    var svgObject = {
      content: mockSvg
    };
    var _renderWithChart4 = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
        svg: svgObject
      })),
      container = _renderWithChart4.container;
    var iconElement = container.querySelector("svg");
    expect(iconElement).toBeInTheDocument();
  });
  it("reuses existing svg if already injected", function () {
    var _renderWithChart5 = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
        svg: mockSvg
      })),
      rerender = _renderWithChart5.rerender;
    var defsBeforeRerender = document.querySelector("#netdata-sdk-svg defs").children.length;
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      svg: mockSvg
    }));
    var defsAfterRerender = document.querySelector("#netdata-sdk-svg defs").children.length;
    expect(defsAfterRerender).toBe(defsBeforeRerender);
  });
  it("creates unique ids for different svgs", function () {
    var anotherSvg = "<svg viewBox=\"0 0 24 24\"><circle cx=\"12\" cy=\"12\" r=\"10\"/></svg>";
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      svg: mockSvg
    }));
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index["default"], {
      svg: anotherSvg
    }));
    var defs = document.querySelector("#netdata-sdk-svg defs");
    expect(defs.children.length).toBe(2);
  });
});
describe("Button export", function () {
  it("exports Button component", function () {
    expect(_index.Button).toBeDefined();
    expect(_typeof(_index.Button)).toBe("function");
  });
});