@netdata/charts
Version:
Netdata frontend SDK and chart utilities
95 lines • 4.04 kB
JavaScript
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); }
import React from "react";
import { screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { renderWithChart } from "@jest/testUtilities";
import Icon, { Button } from "./index";
import { jsx as _jsx } from "react/jsx-runtime";
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 = renderWithChart(/*#__PURE__*/_jsx(Icon, {
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 = renderWithChart(/*#__PURE__*/_jsx(Icon, {
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 = renderWithChart(/*#__PURE__*/_jsx(Icon, {
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 () {
renderWithChart(/*#__PURE__*/_jsx(Icon, {
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 = renderWithChart(/*#__PURE__*/_jsx(Icon, {
svg: svgObject
})),
container = _renderWithChart4.container;
var iconElement = container.querySelector("svg");
expect(iconElement).toBeInTheDocument();
});
it("reuses existing svg if already injected", function () {
var _renderWithChart5 = renderWithChart(/*#__PURE__*/_jsx(Icon, {
svg: mockSvg
})),
rerender = _renderWithChart5.rerender;
var defsBeforeRerender = document.querySelector("#netdata-sdk-svg defs").children.length;
rerender(/*#__PURE__*/_jsx(Icon, {
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>";
renderWithChart(/*#__PURE__*/_jsx(Icon, {
svg: mockSvg
}));
renderWithChart(/*#__PURE__*/_jsx(Icon, {
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(Button).toBeDefined();
expect(_typeof(Button)).toBe("function");
});
});