@enact/sandstone
Version:
Large-screen/TV support library for Enact, containing a variety of UI components.
136 lines (135 loc) • 6.17 kB
JavaScript
;
var _FloatingLayer = require("@enact/ui/FloatingLayer");
require("@testing-library/jest-dom");
var _react = require("@testing-library/react");
var _userEvent = _interopRequireDefault(require("@testing-library/user-event"));
var _ContextualMenuDecorator = require("../ContextualMenuDecorator");
var _Button = _interopRequireDefault(require("../../Button"));
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { "default": obj }; }
function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { Promise.resolve(value).then(_next, _throw); } }
function _asyncToGenerator(fn) { return function () { var self = this, args = arguments; return new Promise(function (resolve, reject) { var gen = fn.apply(self, args); function _next(value) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "next", value); } function _throw(err) { asyncGeneratorStep(gen, resolve, reject, _next, _throw, "throw", err); } _next(undefined); }); }; }
var ContextualButton = (0, _ContextualMenuDecorator.ContextualMenuDecorator)(_Button["default"]);
var Root = (0, _FloatingLayer.FloatingLayerDecorator)('div');
var items = new Array(3).fill().map(function (i, index) {
return "Option ".concat(index + 1);
});
describe('ContextualMenuDecorator Specs', function () {
test('should render component into FloatingLayer if open', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
menuItems: items,
open: true,
children: "Hello"
})
}));
var contextualMenu = _react.screen.getByRole('list');
var expected = 'Option 1';
var actual = contextualMenu.children.item(0);
expect(actual).toHaveTextContent(expected);
});
test('should not render into FloatingLayer if not open', function () {
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
menuItems: items,
children: "Hello"
})
}));
var menu = _react.screen.queryByText('Option 1');
expect(menu).toBeNull();
});
test('should emit onClose event when clicking outside the contextual menu', /*#__PURE__*/_asyncToGenerator(function* () {
var handleClose = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
"data-testid": "contextualMenu",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
menuItems: items,
onClose: handleClose,
open: true,
children: "Hello"
})
}));
var floatingLayerScrim = _react.screen.getByTestId('contextualMenu').nextElementSibling.querySelector('.scrim');
yield user.click(floatingLayerScrim);
expect(handleClose).toHaveBeenCalled();
}));
test('should not close menu when clicking outside if noAutoDismiss is true', /*#__PURE__*/_asyncToGenerator(function* () {
var handleClose = jest.fn();
var user = _userEvent["default"].setup();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
"data-testid": "contextualMenu",
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
menuItems: items,
noAutoDismiss: true,
onClose: handleClose,
open: true,
children: "Hello"
})
}));
var floatingLayerScrim = _react.screen.getByTestId('contextualMenu').nextElementSibling.querySelector('.scrim');
yield user.click(floatingLayerScrim);
expect(handleClose).not.toHaveBeenCalled();
}));
test('should have \'below right\' className when direction is set to \'below right\'', function () {
var handleClose = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
direction: "below right",
menuItems: items,
onClose: handleClose,
open: true,
children: "Hello"
})
}));
var contextualMenu = _react.screen.getByRole('list');
var expected = 'below right';
var actual = contextualMenu.parentElement;
expect(actual).toHaveClass(expected);
});
test('should have offset \'none\' when offset is set to \'none\'', function () {
var handleClose = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
menuItems: items,
offset: "none",
onClose: handleClose,
open: true,
children: "Hello"
})
}));
var contextualMenu = _react.screen.getByRole('list').parentElement.parentElement;
var expected = 'none';
expect(contextualMenu).toHaveAttribute('offset', expected);
});
test('should have \'large\' className when popupWidth is set to \'large\'', function () {
var handleClose = jest.fn();
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
menuItems: items,
onClose: handleClose,
open: true,
popupWidth: "large",
children: "Hello"
})
}));
var contextualMenu = _react.screen.getByRole('list').parentElement;
var expected = 'large';
expect(contextualMenu).toHaveClass(expected);
});
test('should wrap content in Scroller component if menuItem length exceeds MAX_VISIBLE_MENU_ITEMS', function () {
var moreItems = new Array(8).fill().map(function (i, index) {
return "Option ".concat(index + 1);
});
(0, _react.render)( /*#__PURE__*/(0, _jsxRuntime.jsx)(Root, {
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(ContextualButton, {
menuItems: moreItems,
open: true,
children: "Hello"
})
}));
var scroller = _react.screen.getByRole('list').parentElement;
var expected = 'scroller';
expect(scroller).toHaveClass(expected);
});
});