@netdata/charts/dist/components/title/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 = require("./index");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("Title component", function () {
  it("renders title with chart title", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
      attributes: {
        title: "CPU Usage",
        name: "system.cpu",
        isMinimal: false,
        units: ["%"]
      }
    });
    expect(_react2.screen.getByText("CPU Usage")).toBeInTheDocument();
    expect(_react2.screen.getByText(/system\.cpu/)).toBeInTheDocument();
  });
  it("renders with units when not minimal", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
      attributes: {
        title: "Memory Usage",
        name: "system.memory",
        isMinimal: false,
        units: ["By"],
        unitsCurrent: ["By"],
        unitsConversionBase: ["B"],
        unitsConversionPrefix: ["Ki"]
      }
    });
    expect(_react2.screen.getByText("Memory Usage")).toBeInTheDocument();
    expect(_react2.screen.getByText(/\[.*\]/)).toBeInTheDocument(); // Units in brackets
  });
  it("hides name and units when isMinimal is true", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
      attributes: {
        title: "Minimal Title",
        name: "system.test",
        designFlavour: "minimal",
        units: ["%"]
      }
    });
    expect(_react2.screen.getByText("Minimal Title")).toBeInTheDocument();
    expect(_react2.screen.queryByText(/system\.test/)).not.toBeInTheDocument();
    expect(_react2.screen.queryByText(/\[.*\]/)).not.toBeInTheDocument();
  });
  it("shows name when no title but has name", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
      attributes: {
        title: "",
        name: "system.noTitle",
        isMinimal: false
      }
    });
    expect(_react2.screen.getByText("system.noTitle")).toBeInTheDocument();
  });
  it("updates when attributes change", function () {
    var _renderWithChart = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
        attributes: {
          title: "Initial Title",
          name: "initial.name",
          isMinimal: false
        }
      }),
      rerender = _renderWithChart.rerender,
      chart = _renderWithChart.chart;
    expect(_react2.screen.getByText("Initial Title")).toBeInTheDocument();
    chart.updateAttribute("title", "Updated Title");
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}));
    expect(_react2.screen.queryByText("Initial Title")).not.toBeInTheDocument();
    expect(_react2.screen.getByText("Updated Title")).toBeInTheDocument();
  });
  it("handles toggling isMinimal state", function () {
    var _renderWithChart2 = (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
        attributes: {
          title: "Toggle Test",
          name: "system.toggle",
          designFlavour: "default",
          units: ["%"]
        }
      }),
      rerender = _renderWithChart2.rerender,
      chart = _renderWithChart2.chart;
    expect(_react2.screen.getByText(/system\.toggle/)).toBeInTheDocument();
    chart.updateAttribute("designFlavour", "minimal");
    rerender(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}));
    expect(_react2.screen.queryByText(/system\.toggle/)).not.toBeInTheDocument();
  });
  it("applies custom className", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {
      className: "custom-title"
    }), {
      attributes: {
        title: "Styled Title"
      }
    });
    var container = _react2.screen.getByTestId("chartHeaderStatus-title");
    expect(container).toHaveClass("custom-title");
  });
  it("passes additional props", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {
      "data-custom": "value"
    }), {
      attributes: {
        title: "Props Test"
      }
    });
    var container = _react2.screen.getByTestId("chartHeaderStatus-title");
    expect(container).toHaveAttribute("data-custom", "value");
  });
  it("handles empty strings gracefully", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
      attributes: {
        title: "",
        name: "",
        units: [""]
      }
    });
    var container = _react2.screen.getByTestId("chartHeaderStatus-title");
    expect(container).toBeInTheDocument();
    // Should not render bullets when empty
    expect(_react2.screen.queryByText("•")).not.toBeInTheDocument();
  });
  it("shows bullet separator between title and name", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
      attributes: {
        title: "Title Part",
        name: "Name Part",
        isMinimal: false
      }
    });
    expect(_react2.screen.getByText("Title Part")).toBeInTheDocument();
    expect(_react2.screen.getByText(/•.*Name Part/)).toBeInTheDocument();
  });
  it("truncates long titles", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.Title, {}), {
      attributes: {
        title: "This is a very long title that should be truncated to prevent overflow in the UI"
      }
    });
    var titleElement = _react2.screen.getByText(/This is a very long title/);
    // TextSmall component should have truncate prop
    expect(titleElement).toBeInTheDocument();
  });
});