wix-style-react
Version:
wix-style-react
450 lines (449 loc) • 18.8 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
exports.__esModule = true;
exports.dropdownLayoutDriverFactory = void 0;
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _unidriver = require("../test-utils/utils/unidriver");
var _DataAttr = require("./DataAttr");
function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
var dropdownLayoutDriverFactory = (base, body) => {
var reactBase = (0, _unidriver.ReactBase)(base);
var contentContainer = () => (0, _unidriver.findByHook)(base, _DataAttr.DATA_HOOKS.CONTENT_CONTAINER);
var infiniteScrollContainer = () => (0, _unidriver.findByHook)(base, _DataAttr.DATA_HOOKS.INFINITE_SCROLL_CONTAINER);
var optionsElement = () => (0, _unidriver.findByHook)(base, _DataAttr.DATA_HOOKS.DROPDOWN_LAYOUT_OPTIONS);
function getOptionsContainerDataHook() {
return _getOptionsContainerDataHook.apply(this, arguments);
}
function _getOptionsContainerDataHook() {
_getOptionsContainerDataHook = (0, _asyncToGenerator2.default)(function* () {
return (yield infiniteScrollContainer().exists()) ? _DataAttr.DATA_HOOKS.INFINITE_SCROLL_CONTAINER : _DataAttr.DATA_HOOKS.DROPDOWN_LAYOUT_OPTIONS;
});
return _getOptionsContainerDataHook.apply(this, arguments);
}
var optionElementAt = /*#__PURE__*/function () {
var _ref = (0, _asyncToGenerator2.default)(function* (position) {
return yield base.$("[data-hook=".concat(yield getOptionsContainerDataHook(), "] > *:nth-child(").concat(position + 1, ")"));
});
return function optionElementAt(_x) {
return _ref.apply(this, arguments);
};
}();
var optionElementContentAt = /*#__PURE__*/function () {
var _ref2 = (0, _asyncToGenerator2.default)(function* (position) {
return yield base.$("[data-list-type=\"action\"] [data-hook=".concat(yield getOptionsContainerDataHook(), "] > *:nth-child(").concat(position + 1, ") > *"));
});
return function optionElementContentAt(_x2) {
return _ref2.apply(this, arguments);
};
}();
var optionElementByDataHook = /*#__PURE__*/function () {
var _ref3 = (0, _asyncToGenerator2.default)(function* (dataHook) {
return yield base.$("[data-hook=".concat(yield getOptionsContainerDataHook(), "] [data-hook=\"").concat(dataHook, "\"]"));
});
return function optionElementByDataHook(_x3) {
return _ref3.apply(this, arguments);
};
}();
var options = /*#__PURE__*/function () {
var _ref4 = (0, _asyncToGenerator2.default)(function* () {
return base.$$("[data-hook=".concat(yield getOptionsContainerDataHook(), "] > *")).map(i => i);
});
return function options() {
return _ref4.apply(this, arguments);
};
}();
var optionsLength = /*#__PURE__*/function () {
var _ref5 = (0, _asyncToGenerator2.default)(function* () {
return (yield options()).length;
});
return function optionsLength() {
return _ref5.apply(this, arguments);
};
}();
var doIfOptionExists = (position, onSuccess) => {
if (optionsLength() <= position) {
throw new Error("index out of bounds, try to get option ".concat(position, " while only ").concat(optionsLength(), " options exists"));
}
return onSuccess();
};
var getOptionDriver = position => doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionElementContent = yield optionElementContentAt(position);
return createOptionDriver((yield optionElementContent.exists()) ? optionElementContent : yield optionElementAt(position));
}));
return _objectSpread(_objectSpread({}, (0, _unidriver.baseUniDriverFactory)(base)), {}, {
/** @deprecated should be private */
classes: () => optionsElement()._prop('className'),
/** Clicks on an option at a specific index
* @param {number} option index
* @return {Promise<void>}
*/
clickAtOption: function () {
var _clickAtOption = (0, _asyncToGenerator2.default)(function* (index) {
return (yield getOptionDriver(index)).click();
});
function clickAtOption(_x4) {
return _clickAtOption.apply(this, arguments);
}
return clickAtOption;
}(),
/** Clicks on an option with a specific dataHook
* @param {string} dataHook
* @return {Promise<void>}
*/
clickAtOptionByDataHook: function () {
var _clickAtOptionByDataHook = (0, _asyncToGenerator2.default)(function* (dataHook) {
return (yield optionElementByDataHook(dataHook)).click();
});
function clickAtOptionByDataHook(_x5) {
return _clickAtOptionByDataHook.apply(this, arguments);
}
return clickAtOptionByDataHook;
}(),
/** Clicks on an option with a specific value
* @param {string} value
* @return {Promise<void>}
*/
clickAtOptionWithValue: function () {
var _clickAtOptionWithValue = (0, _asyncToGenerator2.default)(function* (value) {
for (var _option of yield options()) {
var optionDriver = yield createOptionDriver(_option);
if ((yield optionDriver.content()) === value) {
return optionDriver.click();
}
}
});
function clickAtOptionWithValue(_x6) {
return _clickAtOptionWithValue.apply(this, arguments);
}
return clickAtOptionWithValue;
}(),
/** @deprecated deprecated prop */
hasTopArrow: function () {
var _hasTopArrow = (0, _asyncToGenerator2.default)(function* () {
return yield (yield (0, _unidriver.findByHook)(base, _DataAttr.DATA_HOOKS.TOP_ARROW)).exists();
});
function hasTopArrow() {
return _hasTopArrow.apply(this, arguments);
}
return hasTopArrow;
}(),
/** @deprecated deprecated prop */
isDown: function () {
var _isDown = (0, _asyncToGenerator2.default)(function* () {
return (yield (yield contentContainer()).attr(_DataAttr.DATA_DIRECTION)) === _DataAttr.DROPDOWN_LAYOUT_DIRECTIONS.DOWN;
});
function isDown() {
return _isDown.apply(this, arguments);
}
return isDown;
}(),
/** @deprecated deprecated prop */
isUp: function () {
var _isUp = (0, _asyncToGenerator2.default)(function* () {
return (yield (yield contentContainer()).attr(_DataAttr.DATA_DIRECTION)) === _DataAttr.DROPDOWN_LAYOUT_DIRECTIONS.UP;
});
function isUp() {
return _isUp.apply(this, arguments);
}
return isUp;
}(),
isLinkOption: function () {
var _isLinkOption = (0, _asyncToGenerator2.default)(function* (position) {
return doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionDriver = yield getOptionDriver(position);
return optionDriver.isLink();
}));
});
function isLinkOption(_x7) {
return _isLinkOption.apply(this, arguments);
}
return isLinkOption;
}(),
isOptionADivider: position => doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionDriver = yield getOptionDriver(position);
return optionDriver.isDivider();
})),
isOptionExists: function () {
var _isOptionExists = (0, _asyncToGenerator2.default)(function* (optionText) {
for (var _option of yield options()) {
if ((yield _option.text()) === optionText) {
return true;
}
}
return false;
});
function isOptionExists(_x8) {
return _isOptionExists.apply(this, arguments);
}
return isOptionExists;
}(),
isOptionHovered: function () {
var _isOptionHovered = (0, _asyncToGenerator2.default)(function* (index) {
return doIfOptionExists(index, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionDriver = yield getOptionDriver(index);
return optionDriver.isHovered();
}));
});
function isOptionHovered(_x9) {
return _isOptionHovered.apply(this, arguments);
}
return isOptionHovered;
}(),
isOptionSelected: function () {
var _isOptionSelected = (0, _asyncToGenerator2.default)(function* (index) {
return doIfOptionExists(index, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionDriver = yield getOptionDriver(index);
return optionDriver.isSelected();
}));
});
function isOptionSelected(_x0) {
return _isOptionSelected.apply(this, arguments);
}
return isOptionSelected;
}(),
/** @deprecated */
isOptionHeightSmall: position => doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
return (yield (yield optionElementAt(position)).attr(_DataAttr.DATA_OPTION.SIZE)) === 'small';
})),
/** @deprecated */
isOptionHeightBig: position => doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
return (yield (yield optionElementAt(position)).attr(_DataAttr.DATA_OPTION.SIZE)) === 'big';
})),
isListItemFocused: function () {
var _isListItemFocused = (0, _asyncToGenerator2.default)(function* (position) {
return (0, _unidriver.isElementFocused)(yield optionElementContentAt(position));
});
function isListItemFocused(_x1) {
return _isListItemFocused.apply(this, arguments);
}
return isListItemFocused;
}(),
isShown: function () {
var _isShown = (0, _asyncToGenerator2.default)(function* () {
return !!(yield (yield contentContainer()).attr(_DataAttr.DATA_SHOWN));
});
function isShown() {
return _isShown.apply(this, arguments);
}
return isShown;
}(),
mouseEnter: () => base.hover(),
mouseEnterAtOption: position => doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionDriver = yield getOptionDriver(position);
return optionDriver.mouseEnter();
})),
mouseLeave: function () {
var _mouseLeave = (0, _asyncToGenerator2.default)(function* () {
switch (base.type) {
case 'react':
reactBase.mouseLeave();
return;
case 'puppeteer':
var {
element
} = yield (0, _unidriver.baseUniDriverFactory)(base).element();
page.evaluate(element => {
element.dispatchEvent(new MouseEvent('mouseout', {
bubbles: true,
view: window,
cancelable: true
}));
}, element);
return;
default:
return;
}
});
function mouseLeave() {
return _mouseLeave.apply(this, arguments);
}
return mouseLeave;
}(),
/** @deprecated deprecated prop */
mouseClickOutside: () => _unidriver.ReactBase.clickBody(),
mouseLeaveAtOption: position => doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionDriver = yield getOptionDriver(position);
return optionDriver.mouseLeave();
})),
/** @deprecated Use optionDriver*/
optionAt: () => {
return optionElementAt.getNative(); // eslint-disable-line no-restricted-properties
},
// This should be a private method since the hook include internal parts ('dropdown-divider-{id}, dropdown-item-{id})') */
/** @deprecated */
optionByHook: function () {
var _optionByHook = (0, _asyncToGenerator2.default)(function* (hook) {
var option = optionsElement().$("[data-hook=".concat(hook, "]"));
if (!(yield option.exists())) {
throw new Error("an option with data-hook ".concat(hook, " was not found"));
}
return createOptionDriver(option);
});
function optionByHook(_x10) {
return _optionByHook.apply(this, arguments);
}
return optionByHook;
}(),
/**
* Get Option by id
* @returns {Promise<any>}
*/
optionById(optionId) {
return this.optionByHook("dropdown-item-".concat(optionId));
},
optionContentAt: position => doIfOptionExists(position, /*#__PURE__*/(0, _asyncToGenerator2.default)(function* () {
var optionDriver = yield getOptionDriver(position);
return optionDriver.content();
})),
optionDriver: createOptionDriver,
/** Get Options drivers */
options: function () {
var _options = (0, _asyncToGenerator2.default)(function* () {
var drivers = [];
for (var position = 0; position < (yield optionsLength()); position++) {
drivers.push(yield getOptionDriver(position));
}
return drivers;
});
function options() {
return _options.apply(this, arguments);
}
return options;
}(),
optionsContent: function () {
var _optionsContent = (0, _asyncToGenerator2.default)(function* () {
var contentArray = [];
for (var option of yield options()) {
var optionDriver = yield createOptionDriver(option);
contentArray.push(yield optionDriver.content());
}
return contentArray;
});
function optionsContent() {
return _optionsContent.apply(this, arguments);
}
return optionsContent;
}(),
markedOption: function () {
var _markedOption = (0, _asyncToGenerator2.default)(function* () {
var allOptions = yield options();
var optionsWithHovered = yield Promise.all(allOptions.map(/*#__PURE__*/function () {
var _ref14 = (0, _asyncToGenerator2.default)(function* (option) {
return {
option,
hovered: !!(yield option.attr(_DataAttr.DATA_OPTION.HOVERED))
};
});
return function (_x11) {
return _ref14.apply(this, arguments);
};
}()));
var hoveredOptions = optionsWithHovered.filter(option => option.hovered).map(option => option.option);
return hoveredOptions.length && createOptionDriver(hoveredOptions[0]).content() || null;
});
function markedOption() {
return _markedOption.apply(this, arguments);
}
return markedOption;
}(),
getSelectedOptionId: function () {
var _getSelectedOptionId = (0, _asyncToGenerator2.default)(function* () {
return yield (0, _unidriver.getDataAttributeValue)(yield contentContainer(), _DataAttr.DATA_SELECTED_OPTION_ID);
});
function getSelectedOptionId() {
return _getSelectedOptionId.apply(this, arguments);
}
return getSelectedOptionId;
}(),
optionsLength,
/** @deprecated should be private */
optionsScrollTop: () => optionsElement()._prop('scrollTop'),
pressDownKey: () => base.pressKey('ArrowDown'),
pressUpKey: () => base.pressKey('ArrowUp'),
pressEnterKey: () => base.pressKey('Enter'),
pressSpaceKey: () => base.pressKey(' '),
pressTabKey: () => base.pressKey('Tab'),
pressEscKey: () => base.pressKey('Escape'),
keyDownListItem: function () {
var _keyDownListItem = (0, _asyncToGenerator2.default)(function* (position, key) {
var optionDriver = yield getOptionDriver(position);
return (yield optionDriver.element()).pressKey(key);
});
function keyDownListItem(_x12, _x13) {
return _keyDownListItem.apply(this, arguments);
}
return keyDownListItem;
}(),
tabIndex: () => base._prop('tabIndex'),
getListItemAttribute: function () {
var _getListItemAttribute = (0, _asyncToGenerator2.default)(function* (position, attribute) {
var optionDriver = yield getOptionDriver(position);
return (yield optionDriver.element()).attr(attribute);
});
function getListItemAttribute(_x14, _x15) {
return _getListItemAttribute.apply(this, arguments);
}
return getListItemAttribute;
}(),
/** Returns the list type prop value */
getListType: dataHook => (0, _unidriver.findByHook)(body, dataHook).attr('data-list-type'),
getOptionsContainerRole: () => optionsElement().attr('role')
});
};
exports.dropdownLayoutDriverFactory = dropdownLayoutDriverFactory;
var createOptionDriver = option => ({
element: () => option,
mouseEnter: () => option.hover(),
mouseLeave: () => (0, _unidriver.ReactBase)(option).mouseLeave(),
isHovered: function () {
var _isHovered = (0, _asyncToGenerator2.default)(function* () {
return !!(yield option.attr(_DataAttr.DATA_OPTION.HOVERED));
});
function isHovered() {
return _isHovered.apply(this, arguments);
}
return isHovered;
}(),
isSelected: function () {
var _isSelected = (0, _asyncToGenerator2.default)(function* () {
return !!(yield option.attr(_DataAttr.DATA_OPTION.SELECTED));
});
function isSelected() {
return _isSelected.apply(this, arguments);
}
return isSelected;
}(),
content: () => option.text(),
click: () => option.click(),
isDivider: function () {
var _isDivider = (0, _asyncToGenerator2.default)(function* () {
var divider = yield (0, _unidriver.findByHook)(option, _DataAttr.OPTION_DATA_HOOKS.DIVIDER);
return divider.exists();
});
function isDivider() {
return _isDivider.apply(this, arguments);
}
return isDivider;
}(),
isDisabled: function () {
var _isDisabled = (0, _asyncToGenerator2.default)(function* () {
return !!(yield option.attr(_DataAttr.DATA_OPTION.DISABLED));
});
function isDisabled() {
return _isDisabled.apply(this, arguments);
}
return isDisabled;
}(),
isLink: function () {
var _isLink = (0, _asyncToGenerator2.default)(function* () {
return (yield option._prop('tagName')).toLowerCase() === 'a';
});
function isLink() {
return _isLink.apply(this, arguments);
}
return isLink;
}()
});
//# sourceMappingURL=DropdownLayout.uni.driver.js.map