@netdata/charts/dist/es6/components/container.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 Container from "./container";
import { jsx as _jsx } from "react/jsx-runtime";
describe("Container", function () {
  it("renders container component with content", function () {
    renderWithChart(/*#__PURE__*/_jsx(Container, {
      children: "Test content"
    }));
    expect(screen.getByText("Test content")).toBeInTheDocument();
  });
  it("renders with data-testid and data-type attributes", function () {
    renderWithChart(/*#__PURE__*/_jsx(Container, {
      children: "Content"
    }));
    var container = screen.getByTestId("chart");
    expect(container).toHaveAttribute("data-type", "chart");
  });
  it("applies default dimensions", function () {
    renderWithChart(/*#__PURE__*/_jsx(Container, {
      children: "Content"
    }));
    var container = screen.getByTestId("chart");
    expect(container).toHaveStyle({
      height: "100%",
      width: "100%"
    });
  });
  it("accepts custom dimensions as strings", function () {
    renderWithChart(/*#__PURE__*/_jsx(Container, {
      height: "200px",
      width: "300px",
      children: "Content"
    }));
    var container = screen.getByTestId("chart");
    expect(container).toHaveStyle({
      height: "200px",
      width: "300px"
    });
  });
  it("accepts custom dimensions as numbers", function () {
    renderWithChart(/*#__PURE__*/_jsx(Container, {
      height: 250,
      width: 350,
      children: "Content"
    }));
    var container = screen.getByTestId("chart");
    expect(container).toHaveStyle({
      height: "250px",
      width: "350px"
    });
  });
  it("applies default styling", function () {
    renderWithChart(/*#__PURE__*/_jsx(Container, {
      children: "Content"
    }));
    var container = screen.getByTestId("chart");
    expect(container).toHaveStyle({
      position: "relative"
    });
    // Check that it has styled-component classes
    expect(container.className).toMatch(/sc-/);
  });
  it("passes through additional props", function () {
    renderWithChart(/*#__PURE__*/_jsx(Container, {
      className: "custom-class",
      "data-custom": "value",
      children: "Content"
    }));
    var container = screen.getByTestId("chart");
    expect(container).toHaveClass("custom-class");
    expect(container).toHaveAttribute("data-custom", "value");
  });
});