@netdata/charts
Version:
Netdata frontend SDK and chart utilities
112 lines (111 loc) • 3.85 kB
JavaScript
import React from "react";
import { screen, fireEvent } from "@testing-library/react";
import "@testing-library/jest-dom";
import { renderWithChart } from "@jest/testUtilities";
import Button from "./button";
import { jsx as _jsx } from "react/jsx-runtime";
describe("Icon Button", function () {
it("renders button with children", function () {
renderWithChart(/*#__PURE__*/_jsx(Button, {
children: "Click me"
}));
expect(screen.getByRole("button")).toHaveTextContent("Click me");
});
it("renders button with icon prop", function () {
var Icon = function Icon() {
return /*#__PURE__*/_jsx("svg", {
"data-testid": "test-icon"
});
};
renderWithChart(/*#__PURE__*/_jsx(Button, {
icon: /*#__PURE__*/_jsx(Icon, {})
}));
expect(screen.getByTestId("test-icon")).toBeInTheDocument();
});
it("applies active state", function () {
renderWithChart(/*#__PURE__*/_jsx(Button, {
active: true,
children: "Active Button"
}));
var button = screen.getByRole("button");
// Active state affects styling, check that button renders
expect(button).toBeInTheDocument();
expect(button).toHaveTextContent("Active Button");
});
it("applies disabled attribute when disabled", function () {
renderWithChart(/*#__PURE__*/_jsx(Button, {
disabled: true,
children: "Disabled Button"
}));
var button = screen.getByRole("button");
expect(button).toBeDisabled();
});
it("handles click events", function () {
var handleClick = jest.fn();
renderWithChart(/*#__PURE__*/_jsx(Button, {
onClick: handleClick,
children: "Click me"
}));
var button = screen.getByRole("button");
fireEvent.click(button);
expect(handleClick).toHaveBeenCalled();
});
it("shows tooltip when title prop is provided", function () {
renderWithChart(/*#__PURE__*/_jsx(Button, {
title: "This is a tooltip",
children: "Hover me"
}));
var button = screen.getByRole("button");
expect(button).toBeInTheDocument();
// Button is wrapped with withTooltip HOC which handles tooltip display
});
it("respects aria-expanded attribute for active state", function () {
renderWithChart(/*#__PURE__*/_jsx(Button, {
"aria-expanded": "true",
children: "Expanded"
}));
var button = screen.getByRole("button");
expect(button).toHaveAttribute("aria-expanded", "true");
});
it("passes custom props to button", function () {
renderWithChart(/*#__PURE__*/_jsx(Button, {
"data-testid": "custom-button",
className: "custom-class",
children: "Custom props"
}));
var button = screen.getByTestId("custom-button");
expect(button).toHaveClass("custom-class");
});
it("applies hover indicator by default", function () {
var _renderWithChart = renderWithChart(/*#__PURE__*/_jsx(Button, {
children: "Hover indicator"
})),
container = _renderWithChart.container;
var button = container.querySelector("button");
// hoverIndicator prop defaults to true
expect(button).toBeInTheDocument();
});
it("can disable hover indicator", function () {
renderWithChart(/*#__PURE__*/_jsx(Button, {
hoverIndicator: false,
children: "No hover"
}));
var button = screen.getByRole("button");
expect(button).toBeInTheDocument();
});
it("handles stroked prop for SVG styling", function () {
var StrokedIcon = function StrokedIcon() {
return /*#__PURE__*/_jsx("svg", {
"data-testid": "stroked-icon",
children: /*#__PURE__*/_jsx("path", {
d: "M10 10"
})
});
};
renderWithChart(/*#__PURE__*/_jsx(Button, {
icon: /*#__PURE__*/_jsx(StrokedIcon, {}),
stroked: true
}));
expect(screen.getByTestId("stroked-icon")).toBeInTheDocument();
});
});