@netdata/charts/dist/components/icon/button.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 _button = _interopRequireDefault(require("./button"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("Icon Button", function () {
  it("renders button with children", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      children: "Click me"
    }));
    expect(_react2.screen.getByRole("button")).toHaveTextContent("Click me");
  });
  it("renders button with icon prop", function () {
    var Icon = function Icon() {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
        "data-testid": "test-icon"
      });
    };
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(Icon, {})
    }));
    expect(_react2.screen.getByTestId("test-icon")).toBeInTheDocument();
  });
  it("applies active state", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      active: true,
      children: "Active Button"
    }));
    var button = _react2.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 () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      disabled: true,
      children: "Disabled Button"
    }));
    var button = _react2.screen.getByRole("button");
    expect(button).toBeDisabled();
  });
  it("handles click events", function () {
    var handleClick = jest.fn();
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      onClick: handleClick,
      children: "Click me"
    }));
    var button = _react2.screen.getByRole("button");
    _react2.fireEvent.click(button);
    expect(handleClick).toHaveBeenCalled();
  });
  it("shows tooltip when title prop is provided", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      title: "This is a tooltip",
      children: "Hover me"
    }));
    var button = _react2.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 () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      "aria-expanded": "true",
      children: "Expanded"
    }));
    var button = _react2.screen.getByRole("button");
    expect(button).toHaveAttribute("aria-expanded", "true");
  });
  it("passes custom props to button", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      "data-testid": "custom-button",
      className: "custom-class",
      children: "Custom props"
    }));
    var button = _react2.screen.getByTestId("custom-button");
    expect(button).toHaveClass("custom-class");
  });
  it("applies hover indicator by default", function () {
    var _renderWithChart = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
        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 () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      hoverIndicator: false,
      children: "No hover"
    }));
    var button = _react2.screen.getByRole("button");
    expect(button).toBeInTheDocument();
  });
  it("handles stroked prop for SVG styling", function () {
    var StrokedIcon = function StrokedIcon() {
      return /*#__PURE__*/(0, _jsxRuntime.jsx)("svg", {
        "data-testid": "stroked-icon",
        children: /*#__PURE__*/(0, _jsxRuntime.jsx)("path", {
          d: "M10 10"
        })
      });
    };
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_button["default"], {
      icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(StrokedIcon, {}),
      stroked: true
    }));
    expect(_react2.screen.getByTestId("stroked-icon")).toBeInTheDocument();
  });
});