@netdata/netdata-ui
Version:
netdata UI kit
92 lines • 4.37 kB
JavaScript
import React from "react";
import { renderWithProviders } from "testUtilities";
import { DefaultTheme as theme } from "../../theme/default";
import { H0, H1, H2, H3, H4, H5, H6, TextHuge, TextBigger, TextBig, Text, TextSmall, TextMicro, TextNano, TextFemto, List, ListItem } from "./index";
var headers = [H0, H1, H2, H3, H4, H5, H6];
var texts = [TextHuge, TextBigger, TextBig, Text, TextSmall, TextMicro, TextNano, TextFemto];
var typographies = [].concat(headers, texts);
var list = [List, ListItem];
it("renders", function () {
typographies.forEach(function (Component) {
var _renderWithProviders = renderWithProviders(/*#__PURE__*/React.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 = renderWithProviders(/*#__PURE__*/React.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 = renderWithProviders(/*#__PURE__*/React.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 = renderWithProviders(/*#__PURE__*/React.createElement(Component, null, "Typo content")),
container = _renderWithProviders4.container,
unmount = _renderWithProviders4.unmount;
expect(container.firstChild).toHaveStyleRule("color", theme.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 = renderWithProviders(/*#__PURE__*/React.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", theme.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 = renderWithProviders(/*#__PURE__*/React.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();
});
});