@netdata/netdata-ui/dist/components/pill/pill.test.js

netdata UI kit

"use strict";

var _react = _interopRequireDefault(require("react"));
var _testUtilities = require("testUtilities");
var _index = _interopRequireDefault(require("./index"));
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
describe("Pill component", function () {
  test("should render default component", function () {
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], null, "Test"));
    expect(_testUtilities.screen.queryByTestId("pill")).toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-text")).toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-text")).toHaveAttribute("color", "bright");
    expect(_testUtilities.screen.queryByTestId("pill-text")).toHaveStyleRule("font-size", "12px");
    expect(_testUtilities.screen.queryByTestId("pill-icon-left")).not.toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-icon-right")).not.toBeInTheDocument();
  });
  test("should render component with custom test id", function () {
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      "data-testid": "custom-pill"
    }, "Test"));
    expect(_testUtilities.screen.queryByTestId("pill")).not.toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-text")).not.toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("custom-pill")).toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("custom-pill-text")).toBeInTheDocument();
  });
  test("should render component with left icon only", function () {
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      icon: "alarm_bell"
    }));
    expect(_testUtilities.screen.queryByTestId("pill-icon-left")).toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-text")).not.toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-icon-right")).not.toBeInTheDocument();
  });
  test("should render component with right icon only", function () {
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      icon: "alarm_bell",
      reverse: true
    }));
    expect(_testUtilities.screen.queryByTestId("pill-icon-left")).not.toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-text")).not.toBeInTheDocument();
    expect(_testUtilities.screen.queryByTestId("pill-icon-right")).toBeInTheDocument();
  });
  test("should render component with small text", function () {
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      textSize: "small"
    }, "Test"));
    expect(_testUtilities.screen.queryByTestId("pill-text")).toHaveStyleRule("font-size", "11px");
  });
  test("should render component with normal text", function () {
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      size: "normal"
    }, "Test"));
    expect(_testUtilities.screen.queryByTestId("pill-text")).toHaveStyleRule("font-size", "12px");
  });
  test("should render component with custom colored text", function () {
    var mockedColor = "primary";
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      color: mockedColor
    }, "Test"));
    expect(_testUtilities.screen.queryByTestId("pill-text")).toHaveAttribute("color", mockedColor);
  });
  test("should render component with hollowed warning colored text", function () {
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      hollow: true,
      flavour: "warning"
    }, "Test"));
    expect(_testUtilities.screen.queryByTestId("pill-text")).toHaveAttribute("color", "warning");
  });
  test("should render clickable component", function () {
    var mockedOnClick = jest.fn();
    (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_index["default"], {
      onClick: mockedOnClick
    }, "Test"));
    expect(_testUtilities.screen.queryByTestId("pill")).toHaveAttribute("cursor", "pointer");
  });
});