gather-content-ui
Version:
GatherContent UI Library
98 lines (97 loc) • 4.54 kB
JavaScript
;
var _vitest = require("vitest");
var _react = _interopRequireDefault(require("react"));
var _react2 = require("@testing-library/react");
var _ = require("..");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
var mockDropdownMenuItems = [{
name: "item 1",
type: "link",
href: "/",
action: function action() {}
}, {
type: "separator"
}, {
name: "item 2",
action: function action() {},
active: true
}, {
type: "separator"
}, {
name: "item 3",
action: function action() {},
additional: "more info",
type: "withAdditional"
}];
(0, _vitest.describe)("DropdownMenu", function () {
(0, _vitest.it)("Clicking the dropdown menu button should toggle the menu", function () {
(0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu"
}, "Menu text"));
_react2.fireEvent.click(_react2.screen.getByText("Menu text"));
(0, _vitest.expect)(_react2.screen.getByTestId("test-dropdown-menu").classList.contains("gui-open")).toBeTruthy();
(0, _vitest.expect)(_react2.screen.getByTestId("test-dropdown-menu").classList.contains("gui-is-active")).toBeTruthy();
_react2.fireEvent.click(_react2.screen.getByText("Menu text"));
(0, _vitest.expect)(_react2.screen.getByTestId("test-dropdown-menu").classList.contains("gui-open")).toBeFalsy();
(0, _vitest.expect)(_react2.screen.getByTestId("test-dropdown-menu").classList.contains("gui-is-active")).toBeFalsy();
});
(0, _vitest.it)("Should render an icon depending on the prop set", function () {
var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu",
downIcon: true
}, "Menu text")),
rerender = _render.rerender;
(0, _vitest.expect)(_react2.screen.getByTitle("Down icon"));
rerender( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu",
caret: true
}, "Menu text"));
(0, _vitest.expect)(_react2.screen.getByTitle("Caret icon"));
});
(0, _vitest.it)("Setting the fullWidth prop to true should add a full-width class", function () {
var classList = ["gui-full-width", "gui-dropup"];
var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu"
}, "Menu text")),
rerender = _render2.rerender;
classList.map(function (modifierClass) {
(0, _vitest.expect)(_react2.screen.getByTestId("test-dropdown-menu").classList.contains(modifierClass)).toBe(false);
});
rerender( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu",
fullWidth: true,
direction: "up"
}, "Menu text"));
classList.map(function (modifierClass) {
(0, _vitest.expect)(_react2.screen.getByTestId("test-dropdown-menu").classList.contains(modifierClass)).toBe(true);
});
});
(0, _vitest.it)("Should render items with modifier classes", function () {
(0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu"
}, "Menu text"));
(0, _vitest.expect)(_react2.screen.getAllByRole("listitem")[1].classList.contains("gui-dropdown__separator")).toBeTruthy();
(0, _vitest.expect)(_react2.screen.getAllByRole("link")[0].classList.contains("gui-dropdown__link")).toBeTruthy();
});
(0, _vitest.it)("Should render active items with a tick icon", function () {
(0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu"
}, "Menu text"));
(0, _vitest.expect)(_react2.screen.getByRole("figure").classList.contains("gui-icon--tick")).toBeTruthy();
});
(0, _vitest.it)("Should render an item with additional information", function () {
(0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_.DropdownMenu, {
items: mockDropdownMenuItems,
"data-testid": "test-dropdown-menu"
}, "Menu text"));
(0, _vitest.expect)(_react2.screen.getByText("more info")).toBeTruthy();
});
});
//# sourceMappingURL=DropdownMenu.spec.js.map