@netdata/charts
Version:
Netdata frontend SDK and chart utilities
149 lines • 4.9 kB
JavaScript
import React from "react";
import { screen } from "@testing-library/react";
import "@testing-library/jest-dom";
import { renderWithChart } from "@jest/testUtilities";
import Toolbox, { Container, Separator, ChartType, Fullscreen, Information, Download } from "./index";
import { jsx as _jsx } from "react/jsx-runtime";
describe("Toolbox exports", function () {
it("exports all required components", function () {
expect(Toolbox).toBeDefined();
expect(Container).toBeDefined();
expect(Separator).toBeDefined();
expect(ChartType).toBeDefined();
expect(Fullscreen).toBeDefined();
expect(Information).toBeDefined();
expect(Download).toBeDefined();
});
});
describe("Container component", function () {
it("renders container with children", function () {
renderWithChart(/*#__PURE__*/_jsx(Container, {
children: "Test Content"
}));
expect(screen.getByText("Test Content")).toBeInTheDocument();
});
it("has correct testid attribute", function () {
renderWithChart(/*#__PURE__*/_jsx(Container, {
children: "Content"
}));
expect(screen.getByTestId("chartHeaderToolbox")).toBeInTheDocument();
expect(screen.getByText("Content")).toBeInTheDocument();
});
});
describe("Toolbox component", function () {
it("renders toolbox with children", function () {
renderWithChart(/*#__PURE__*/_jsx(Toolbox, {
children: "Test Content"
}), {
attributes: {
focused: true,
toolboxElements: []
}
});
expect(screen.getByText("Test Content")).toBeInTheDocument();
expect(screen.getByTestId("chartHeaderToolbox")).toBeInTheDocument();
});
it("renders custom toolbox elements with correct disabled state when not focused", function () {
var CustomElement = function CustomElement(_ref) {
var disabled = _ref.disabled;
return /*#__PURE__*/_jsx("button", {
disabled: disabled,
children: "Custom Button"
});
};
renderWithChart(/*#__PURE__*/_jsx(Toolbox, {
children: "Regular Content"
}), {
attributes: {
focused: false,
toolboxElements: [CustomElement]
}
});
expect(screen.getByText("Custom Button")).toBeInTheDocument();
expect(screen.getByText("Custom Button")).toBeDisabled();
expect(screen.getByText("Regular Content")).toBeInTheDocument();
});
it("renders custom toolbox elements enabled when focused", function () {
var CustomElement = function CustomElement(_ref2) {
var disabled = _ref2.disabled;
return /*#__PURE__*/_jsx("button", {
disabled: disabled,
children: "Custom Button"
});
};
renderWithChart(/*#__PURE__*/_jsx(Toolbox, {
children: "Regular Content"
}), {
attributes: {
focused: true,
toolboxElements: [CustomElement]
}
});
expect(screen.getByText("Custom Button")).toBeInTheDocument();
expect(screen.getByText("Custom Button")).not.toBeDisabled();
});
it("renders multiple toolbox elements", function () {
var Element1 = function Element1(_ref3) {
var disabled = _ref3.disabled;
return /*#__PURE__*/_jsx("button", {
disabled: disabled,
children: "Element 1"
});
};
var Element2 = function Element2(_ref4) {
var disabled = _ref4.disabled;
return /*#__PURE__*/_jsx("button", {
disabled: disabled,
children: "Element 2"
});
};
renderWithChart(/*#__PURE__*/_jsx(Toolbox, {
children: "Content"
}), {
attributes: {
focused: true,
toolboxElements: [Element1, Element2]
}
});
expect(screen.getByText("Element 1")).toBeInTheDocument();
expect(screen.getByText("Element 2")).toBeInTheDocument();
expect(screen.getByText("Content")).toBeInTheDocument();
});
it("passes additional props to Container", function () {
renderWithChart(/*#__PURE__*/_jsx(Toolbox, {
className: "custom-toolbox",
"data-test": "toolbox",
children: "Content"
}), {
attributes: {
focused: true,
toolboxElements: []
}
});
var container = screen.getByTestId("chartHeaderToolbox");
expect(container).toHaveClass("custom-toolbox");
expect(container).toHaveAttribute("data-test", "toolbox");
});
it("handles null toolboxElements gracefully", function () {
renderWithChart(/*#__PURE__*/_jsx(Toolbox, {
children: "Content"
}), {
attributes: {
focused: true,
toolboxElements: null
}
});
expect(screen.getByText("Content")).toBeInTheDocument();
});
it("handles empty toolboxElements array", function () {
renderWithChart(/*#__PURE__*/_jsx(Toolbox, {
children: "Content"
}), {
attributes: {
focused: true,
toolboxElements: []
}
});
expect(screen.getByText("Content")).toBeInTheDocument();
});
});