@netdata/charts/dist/components/container.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 _container = _interopRequireDefault(require("./container"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("Container", function () {
  it("renders container component with content", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_container["default"], {
      children: "Test content"
    }));
    expect(_react2.screen.getByText("Test content")).toBeInTheDocument();
  });
  it("renders with data-testid and data-type attributes", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_container["default"], {
      children: "Content"
    }));
    var container = _react2.screen.getByTestId("chart");
    expect(container).toHaveAttribute("data-type", "chart");
  });
  it("applies default dimensions", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_container["default"], {
      children: "Content"
    }));
    var container = _react2.screen.getByTestId("chart");
    expect(container).toHaveStyle({
      height: "100%",
      width: "100%"
    });
  });
  it("accepts custom dimensions as strings", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_container["default"], {
      height: "200px",
      width: "300px",
      children: "Content"
    }));
    var container = _react2.screen.getByTestId("chart");
    expect(container).toHaveStyle({
      height: "200px",
      width: "300px"
    });
  });
  it("accepts custom dimensions as numbers", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_container["default"], {
      height: 250,
      width: 350,
      children: "Content"
    }));
    var container = _react2.screen.getByTestId("chart");
    expect(container).toHaveStyle({
      height: "250px",
      width: "350px"
    });
  });
  it("applies default styling", function () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_container["default"], {
      children: "Content"
    }));
    var container = _react2.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 () {
    (0, _testUtilities.renderWithChart)(/*#__PURE__*/(0, _jsxRuntime.jsx)(_container["default"], {
      className: "custom-class",
      "data-custom": "value",
      children: "Content"
    }));
    var container = _react2.screen.getByTestId("chart");
    expect(container).toHaveClass("custom-class");
    expect(container).toHaveAttribute("data-custom", "value");
  });
});