@netdata/netdata-ui/dist/components/typography/index.test.js

netdata UI kit

"use strict";

var _react = _interopRequireDefault(require("react"));
var _testUtilities = require("testUtilities");
var _default = require("../../theme/default");
var _index = require("./index");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
var headers = [_index.H0, _index.H1, _index.H2, _index.H3, _index.H4, _index.H5, _index.H6];
var texts = [_index.TextHuge, _index.TextBigger, _index.TextBig, _index.Text, _index.TextSmall, _index.TextMicro, _index.TextNano, _index.TextFemto];
var typographies = [].concat(headers, texts);
var list = [_index.List, _index.ListItem];
it("renders", function () {
  typographies.forEach(function (Component) {
    var _renderWithProviders = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(Component, null, "Typo content")),
      container = _renderWithProviders.container,
      unmount = _renderWithProviders.unmount;
    expect(container.firstChild).toHaveTextContent("Typo content");
    unmount();
  });
});
it("renders headers as bold weight", function () {
  headers.forEach(function (Component) {
    var _renderWithProviders2 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(Component, null, "Typo content")),
      container = _renderWithProviders2.container,
      unmount = _renderWithProviders2.unmount;
    expect(container.firstChild).toHaveStyleRule("font-weight", "bold");
    unmount();
  });
});
it("renders texts as normal weight", function () {
  texts.forEach(function (Component) {
    var _renderWithProviders3 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(Component, null, "Typo content")),
      container = _renderWithProviders3.container,
      unmount = _renderWithProviders3.unmount;
    expect(container.firstChild).toHaveStyleRule("font-weight", "normal");
    unmount();
  });
});
it("renders typography default mixins", function () {
  typographies.forEach(function (Component) {
    var _renderWithProviders4 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(Component, null, "Typo content")),
      container = _renderWithProviders4.container,
      unmount = _renderWithProviders4.unmount;
    expect(container.firstChild).toHaveStyleRule("color", _default.DefaultTheme.colors.text);
    expect(container.firstChild).not.toHaveStyleRule("align-self");
    expect(container.firstChild).not.toHaveStyleRule("margin");
    expect(container.firstChild).not.toHaveStyleRule("padding");
    expect(container.firstChild).not.toHaveStyleRule("text-align");
    expect(container.firstChild).not.toHaveStyleRule("truncate");
    expect(container.firstChild).not.toHaveStyleRule("word-break");
    expect(container.firstChild).toHaveStyleRule("text-transform: none");
    unmount();
  });
});
it("renders typography mixins", function () {
  typographies.forEach(function (Component) {
    var _renderWithProviders5 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(Component, {
        strong: true,
        color: "disabled",
        margin: [2, 3],
        padding: [0],
        alignSelf: "end",
        textAlign: "center",
        wordBreak: "break-all",
        textTransform: "uppercase",
        truncate: true
      }, "Typo content")),
      container = _renderWithProviders5.container,
      unmount = _renderWithProviders5.unmount;
    expect(container.firstChild).toHaveStyleRule("color", _default.DefaultTheme.colors.disabled);
    expect(container.firstChild).toHaveStyleRule("font-weight", "bold");
    expect(container.firstChild).toHaveStyleRule("align-self", "flex-end");
    expect(container.firstChild).toHaveStyleRule("margin", "8px 12px");
    expect(container.firstChild).toHaveStyleRule("padding", "0");
    expect(container.firstChild).toHaveStyleRule("text-align", "center");
    expect(container.firstChild).toHaveStyleRule("word-break", "break-all");
    expect(container.firstChild).toHaveStyleRule("text-transform", "uppercase");
    unmount();
  });
});
it("renders list mixins", function () {
  list.forEach(function (Component) {
    var _renderWithProviders6 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(Component, {
        margin: [2, 3],
        padding: [0],
        alignSelf: "end"
      })),
      container = _renderWithProviders6.container,
      unmount = _renderWithProviders6.unmount;
    expect(container.firstChild).toHaveStyleRule("align-self", "flex-end");
    expect(container.firstChild).toHaveStyleRule("margin", "8px 12px");
    expect(container.firstChild).toHaveStyleRule("padding", "0");
    unmount();
  });
});