@netdata/netdata-ui
Version:
netdata UI kit
73 lines • 3.44 kB
JavaScript
import React from "react";
import { renderWithProviders, screen } from "testUtilities";
import Pill from "./index";
describe("Pill component", function () {
test("should render default component", function () {
renderWithProviders(/*#__PURE__*/React.createElement(Pill, null, "Test"));
expect(screen.queryByTestId("pill")).toBeInTheDocument();
expect(screen.queryByTestId("pill-text")).toBeInTheDocument();
expect(screen.queryByTestId("pill-text")).toHaveAttribute("color", "bright");
expect(screen.queryByTestId("pill-text")).toHaveStyleRule("font-size", "12px");
expect(screen.queryByTestId("pill-icon-left")).not.toBeInTheDocument();
expect(screen.queryByTestId("pill-icon-right")).not.toBeInTheDocument();
});
test("should render component with custom test id", function () {
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
"data-testid": "custom-pill"
}, "Test"));
expect(screen.queryByTestId("pill")).not.toBeInTheDocument();
expect(screen.queryByTestId("pill-text")).not.toBeInTheDocument();
expect(screen.queryByTestId("custom-pill")).toBeInTheDocument();
expect(screen.queryByTestId("custom-pill-text")).toBeInTheDocument();
});
test("should render component with left icon only", function () {
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
icon: "alarm_bell"
}));
expect(screen.queryByTestId("pill-icon-left")).toBeInTheDocument();
expect(screen.queryByTestId("pill-text")).not.toBeInTheDocument();
expect(screen.queryByTestId("pill-icon-right")).not.toBeInTheDocument();
});
test("should render component with right icon only", function () {
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
icon: "alarm_bell",
reverse: true
}));
expect(screen.queryByTestId("pill-icon-left")).not.toBeInTheDocument();
expect(screen.queryByTestId("pill-text")).not.toBeInTheDocument();
expect(screen.queryByTestId("pill-icon-right")).toBeInTheDocument();
});
test("should render component with small text", function () {
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
textSize: "small"
}, "Test"));
expect(screen.queryByTestId("pill-text")).toHaveStyleRule("font-size", "11px");
});
test("should render component with normal text", function () {
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
size: "normal"
}, "Test"));
expect(screen.queryByTestId("pill-text")).toHaveStyleRule("font-size", "12px");
});
test("should render component with custom colored text", function () {
var mockedColor = "primary";
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
color: mockedColor
}, "Test"));
expect(screen.queryByTestId("pill-text")).toHaveAttribute("color", mockedColor);
});
test("should render component with hollowed warning colored text", function () {
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
hollow: true,
flavour: "warning"
}, "Test"));
expect(screen.queryByTestId("pill-text")).toHaveAttribute("color", "warning");
});
test("should render clickable component", function () {
var mockedOnClick = jest.fn();
renderWithProviders(/*#__PURE__*/React.createElement(Pill, {
onClick: mockedOnClick
}, "Test"));
expect(screen.queryByTestId("pill")).toHaveAttribute("cursor", "pointer");
});
});