@netdata/netdata-ui
Version:
netdata UI kit
77 lines • 3.79 kB
JavaScript
import React from "react";
import { renderWithProviders, fireEvent } from "testUtilities";
import { Text } from "../../typography";
import Popover from "./index";
it("renders", function () {
var _renderWithProviders = renderWithProviders(/*#__PURE__*/React.createElement(Popover, {
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target"))),
queryByText = _renderWithProviders.queryByText;
expect(queryByText("popover target")).toBeVisible();
expect(queryByText("popover content")).not.toBeInTheDocument();
});
it("hovers", function () {
var _renderWithProviders2 = renderWithProviders(/*#__PURE__*/React.createElement(Popover, {
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target"))),
queryByText = _renderWithProviders2.queryByText;
fireEvent.mouseOver(queryByText("popover target"));
expect(queryByText("popover content")).toBeInTheDocument();
});
it("remains open on drop content hover", function () {
var _renderWithProviders3 = renderWithProviders(/*#__PURE__*/React.createElement(Popover, {
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target"))),
queryByText = _renderWithProviders3.queryByText;
fireEvent.mouseOver(queryByText("popover target"));
fireEvent.mouseOver(queryByText("popover content"));
expect(queryByText("popover content")).toBeInTheDocument();
});
it("renders plain", function () {
var _renderWithProviders4 = renderWithProviders(/*#__PURE__*/React.createElement(Popover, {
plain: true,
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target"))),
queryByTestId = _renderWithProviders4.queryByTestId,
queryByText = _renderWithProviders4.queryByText;
fireEvent.mouseOver(queryByText("popover target"));
expect(queryByTestId("drop")).toHaveTextContent("popover content");
});
it("renders content from function", function () {
var _renderWithProviders5 = renderWithProviders(/*#__PURE__*/React.createElement(Popover, {
content: function content() {
return "popover content";
}
}, function (props) {
return /*#__PURE__*/React.createElement(Text, props, "popover target");
})),
queryByText = _renderWithProviders5.queryByText;
fireEvent.mouseOver(queryByText("popover target"));
expect(queryByText("popover target")).toBeVisible();
expect(queryByText("popover content")).toBeInTheDocument();
});
it("align", function () {
var _renderWithProviders6 = renderWithProviders(/*#__PURE__*/React.createElement(Popover, {
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target"))),
getByTestId = _renderWithProviders6.getByTestId,
queryByText = _renderWithProviders6.queryByText,
rerender = _renderWithProviders6.rerender;
fireEvent.mouseOver(queryByText("popover target"));
expect(getByTestId("drop-arrow")).not.toHaveStyleRule("transform");
rerender(/*#__PURE__*/React.createElement(Popover, {
align: "right",
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target")));
expect(getByTestId("drop-arrow")).toHaveStyleRule("transform", "rotate(90deg)");
rerender(/*#__PURE__*/React.createElement(Popover, {
align: "bottom",
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target")));
expect(getByTestId("drop-arrow")).toHaveStyleRule("transform", "rotate(180deg)");
rerender(/*#__PURE__*/React.createElement(Popover, {
align: "left",
content: "popover content"
}, /*#__PURE__*/React.createElement(Text, null, "popover target")));
expect(getByTestId("drop-arrow")).toHaveStyleRule("transform", "rotate(270deg)");
});