@netdata/netdata-ui
Version:
netdata UI kit
408 lines (406 loc) • 15.8 kB
JavaScript
"use strict";
var _react = _interopRequireDefault(require("react"));
var _testUtilities = require("testUtilities");
var _button = require("./button");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { "default": e }; }
/**
* @jest-environment jsdom
*/
describe("Button states", function () {
it("renders disabled", function () {
var _renderWithProviders = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
disabled: true
})),
container = _renderWithProviders.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("opacity", "0.4", {
modifier: "&&"
});
expect(button).toHaveStyleRule("pointer-events", "none", {
modifier: "&&"
});
});
it("renders a button with text being in default format", function () {
var _renderWithProviders2 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text"
})),
container = _renderWithProviders2.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("text-transform", "lowercase", {
modifier: "&&>span"
});
expect(button).toHaveStyleRule("text-transform", "uppercase", {
modifier: "&&>span::first-letter"
});
});
it("renders a button with text that has no text-transform", function () {
var _renderWithProviders3 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
textTransform: "none"
})),
container = _renderWithProviders3.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("text-transform", "none", {
modifier: "&&>span"
});
});
it("renders a button with text being capitalized", function () {
var _renderWithProviders4 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
textTransform: "capitalize"
})),
container = _renderWithProviders4.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("text-transform", "capitalize", {
modifier: "&&>span"
});
});
it("renders a button with text being in uppercase", function () {
var _renderWithProviders5 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
textTransform: "uppercase"
})),
container = _renderWithProviders5.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("text-transform", "uppercase", {
modifier: "&&>span"
});
});
it("renders a button with text being in lowercase", function () {
var _renderWithProviders6 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
textTransform: "lowercase"
})),
container = _renderWithProviders6.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("text-transform", "lowercase", {
modifier: "&&>span"
});
});
it("renders a button with text being in full-width", function () {
var _renderWithProviders7 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
textTransform: "fullWidth"
})),
container = _renderWithProviders7.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("text-transform", "full-width", {
modifier: "&&>span"
});
});
it("renders a text with only one capital letter, the first one", function () {
var _renderWithProviders8 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
textTransform: "firstLetter"
})),
container = _renderWithProviders8.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("text-transform", "lowercase", {
modifier: "&&>span"
});
expect(button).toHaveStyleRule("text-transform", "uppercase", {
modifier: "&&>span::first-letter"
});
});
it("renders loading text", function () {
var _renderWithProviders9 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
loadingLabel: "loading...",
isLoading: true
})),
getByText = _renderWithProviders9.getByText;
expect(getByText(/loading/)).toBeInTheDocument();
});
it("renders with icon", function () {
var _renderWithProviders10 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
icon: "plus"
})),
container = _renderWithProviders10.container,
getByText = _renderWithProviders10.getByText,
getByTitle = _renderWithProviders10.getByTitle;
var button = container.firstChild;
expect(getByText(/prop text/)).toBeInTheDocument();
expect(button).toHaveStyleRule("margin-left", "4px", {
modifier: "&&>span"
});
expect(getByTitle("plus")).toBeInTheDocument();
});
it("renders only icon", function () {
var _renderWithProviders11 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
flavour: "hollow",
icon: "plus"
})),
container = _renderWithProviders11.container;
var button = container.firstChild;
expect(button).toMatchSnapshot();
});
it("renders smaller only icon", function () {
var _renderWithProviders12 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
flavour: "hollow",
icon: "plus",
small: true
})),
container = _renderWithProviders12.container;
var button = container.firstChild;
expect(button).toMatchSnapshot();
});
it("renders loading icon", function () {
var _renderWithProviders13 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
icon: "plus",
isLoading: true
})),
container = _renderWithProviders13.container,
getByText = _renderWithProviders13.getByText,
queryByTitle = _renderWithProviders13.queryByTitle;
expect(container.firstChild).toMatchSnapshot();
expect(getByText(/prop text/)).toBeInTheDocument();
expect(queryByTitle("plus")).not.toBeInTheDocument();
});
it("is clickable", function () {
var onClickFn = jest.fn();
var _renderWithProviders14 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
onClick: onClickFn
})),
getByText = _renderWithProviders14.getByText;
_testUtilities.fireEvent.click(getByText(/prop text/));
expect(onClickFn).toBeCalled();
});
});
describe("Default Button", function () {
it("renders", function () {
var _renderWithProviders15 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
textTransform: "fullWidth"
})),
container = _renderWithProviders15.container,
getByText = _renderWithProviders15.getByText;
expect(getByText(/prop text/)).toBeInTheDocument();
var button = container.firstChild;
expect(button).toMatchSnapshot();
expect(button).toHaveStyleRule("background-color", "#00AB44", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#00AB44", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#F6F7F7", {
modifier: "&&"
});
expect(button).toHaveStyleRule("pointer-events", "auto", {
modifier: "&&"
});
});
it("renders for danger", function () {
var _renderWithProviders16 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
danger: true
})),
container = _renderWithProviders16.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "#DB162F", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#DB162F", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#F6F7F7", {
modifier: "&&"
});
});
it("renders for warning", function () {
var _renderWithProviders17 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
warning: true
})),
container = _renderWithProviders17.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "#FF9700", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#FF9700", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#F6F7F7", {
modifier: "&&"
});
});
it("renders neutral", function () {
var _renderWithProviders18 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
neutral: true
})),
container = _renderWithProviders18.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "#526161", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#526161", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#F6F7F7", {
modifier: "&&"
});
});
});
describe("Hollow Button", function () {
it("renders", function () {
var _renderWithProviders19 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "hollow"
})),
container = _renderWithProviders19.container,
getByText = _renderWithProviders19.getByText;
expect(getByText(/prop text/)).toBeInTheDocument();
var button = container.firstChild;
expect(button).toMatchSnapshot();
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#00AB44", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#00AB44", {
modifier: "&&"
});
expect(button).toHaveStyleRule("pointer-events", "auto", {
modifier: "&&"
});
});
it("renders for danger", function () {
var _renderWithProviders20 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "hollow",
danger: true
})),
container = _renderWithProviders20.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#DB162F", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#DB162F", {
modifier: "&&"
});
});
it("renders for warning", function () {
var _renderWithProviders21 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "hollow",
warning: true
})),
container = _renderWithProviders21.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#FF9700", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#FF9700", {
modifier: "&&"
});
});
it("renders for neutral", function () {
var _renderWithProviders22 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "hollow",
neutral: true
})),
container = _renderWithProviders22.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "#C0CACA", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#526161", {
modifier: "&&"
});
});
});
describe("Borderless Button", function () {
it("renders", function () {
var _renderWithProviders23 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "borderless"
})),
container = _renderWithProviders23.container,
getByText = _renderWithProviders23.getByText;
expect(getByText(/prop text/)).toBeInTheDocument();
var button = container.firstChild;
expect(button).toMatchSnapshot();
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#00AB44", {
modifier: "&&"
});
expect(button).toHaveStyleRule("pointer-events", "auto", {
modifier: "&&"
});
});
it("renders for danger", function () {
var _renderWithProviders24 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "borderless",
danger: true
})),
container = _renderWithProviders24.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#DB162F", {
modifier: "&&"
});
});
it("renders for warning", function () {
var _renderWithProviders25 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "borderless",
warning: true
})),
container = _renderWithProviders25.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#FF9700", {
modifier: "&&"
});
});
it("renders for neutral", function () {
var _renderWithProviders26 = (0, _testUtilities.renderWithProviders)(/*#__PURE__*/_react["default"].createElement(_button.Button, {
label: "Test prop text",
flavour: "borderless",
neutral: true
})),
container = _renderWithProviders26.container;
var button = container.firstChild;
expect(button).toHaveStyleRule("background-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("border-color", "rgba(255,255,255,0.0)", {
modifier: "&&"
});
expect(button).toHaveStyleRule("color", "#526161", {
modifier: "&&"
});
});
});