@netdata/charts/dist/es6/components/title/index.test.js

Netdata frontend SDK and chart utilities

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