@wix/design-system
Version:
@wix/design-system
3,282 lines • 144 kB
JavaScript
"use strict";
var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
var _typeof = require("@babel/runtime/helpers/typeof");
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
var _react = _interopRequireWildcard(require("react"));
var _react2 = require("../../utils/test-utils/react");
var _react3 = require("@testing-library/react");
var _testUtils = require("../../utils/test-utils");
var _InputWithOptions = require("../InputWithOptions");
var _InputWithOptionsPrivateUni = require("./InputWithOptions.private.uni.driver");
var _HighlightContext = require("../HighlightContext");
var _WixDesignSystemProvider = require("../../WixDesignSystemProvider");
var _jsxFileName = "/home/builduser/work/57e038ea7326c1ec/packages/wix-design-system/dist/cjs/InputWithOptions/test/InputWithOptions.spec.jsx",
_this = void 0;
function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, "default": e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t84 in e) "default" !== _t84 && {}.hasOwnProperty.call(e, _t84) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t84)) && (i.get || i.set) ? o(f, _t84, i) : f[_t84] = e[_t84]); return f; })(e, t); }
function _regenerator() { /*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/babel/babel/blob/main/packages/babel-helpers/LICENSE */ var e, t, r = "function" == typeof Symbol ? Symbol : {}, n = r.iterator || "@@iterator", o = r.toStringTag || "@@toStringTag"; function i(r, n, o, i) { var c = n && n.prototype instanceof Generator ? n : Generator, u = Object.create(c.prototype); return _regeneratorDefine2(u, "_invoke", function (r, n, o) { var i, c, u, f = 0, p = o || [], y = !1, G = { p: 0, n: 0, v: e, a: d, f: d.bind(e, 4), d: function d(t, r) { return i = t, c = 0, u = e, G.n = r, a; } }; function d(r, n) { for (c = r, u = n, t = 0; !y && f && !o && t < p.length; t++) { var o, i = p[t], d = G.p, l = i[2]; r > 3 ? (o = l === n) && (u = i[(c = i[4]) ? 5 : (c = 3, 3)], i[4] = i[5] = e) : i[0] <= d && ((o = r < 2 && d < i[1]) ? (c = 0, G.v = n, G.n = i[1]) : d < l && (o = r < 3 || i[0] > n || n > l) && (i[4] = r, i[5] = n, G.n = l, c = 0)); } if (o || r > 1) return a; throw y = !0, n; } return function (o, p, l) { if (f > 1) throw TypeError("Generator is already running"); for (y && 1 === p && d(p, l), c = p, u = l; (t = c < 2 ? e : u) || !y;) { i || (c ? c < 3 ? (c > 1 && (G.n = -1), d(c, u)) : G.n = u : G.v = u); try { if (f = 2, i) { if (c || (o = "next"), t = i[o]) { if (!(t = t.call(i, u))) throw TypeError("iterator result is not an object"); if (!t.done) return t; u = t.value, c < 2 && (c = 0); } else 1 === c && (t = i["return"]) && t.call(i), c < 2 && (u = TypeError("The iterator does not provide a '" + o + "' method"), c = 1); i = e; } else if ((t = (y = G.n < 0) ? u : r.call(n, G)) !== a) break; } catch (t) { i = e, c = 1, u = t; } finally { f = 1; } } return { value: t, done: y }; }; }(r, o, i), !0), u; } var a = {}; function Generator() {} function GeneratorFunction() {} function GeneratorFunctionPrototype() {} t = Object.getPrototypeOf; var c = [][n] ? t(t([][n]())) : (_regeneratorDefine2(t = {}, n, function () { return this; }), t), u = GeneratorFunctionPrototype.prototype = Generator.prototype = Object.create(c); function f(e) { return Object.setPrototypeOf ? Object.setPrototypeOf(e, GeneratorFunctionPrototype) : (e.__proto__ = GeneratorFunctionPrototype, _regeneratorDefine2(e, o, "GeneratorFunction")), e.prototype = Object.create(u), e; } return GeneratorFunction.prototype = GeneratorFunctionPrototype, _regeneratorDefine2(u, "constructor", GeneratorFunctionPrototype), _regeneratorDefine2(GeneratorFunctionPrototype, "constructor", GeneratorFunction), GeneratorFunction.displayName = "GeneratorFunction", _regeneratorDefine2(GeneratorFunctionPrototype, o, "GeneratorFunction"), _regeneratorDefine2(u), _regeneratorDefine2(u, o, "Generator"), _regeneratorDefine2(u, n, function () { return this; }), _regeneratorDefine2(u, "toString", function () { return "[object Generator]"; }), (_regenerator = function _regenerator() { return { w: i, m: f }; })(); }
function _regeneratorDefine2(e, r, n, t) { var i = Object.defineProperty; try { i({}, "", {}); } catch (e) { i = 0; } _regeneratorDefine2 = function _regeneratorDefine(e, r, n, t) { function o(r, n) { _regeneratorDefine2(e, r, function (e) { return this._invoke(r, n, e); }); } r ? i ? i(e, r, { value: n, enumerable: !t, configurable: !t, writable: !t }) : e[r] = n : (o("next", 0), o("throw", 1), o("return", 2)); }, _regeneratorDefine2(e, r, n, t); }
describe('InputWithOptions', function () {
var ControlledInputWithOptions = (0, _testUtils.makeControlled)(_InputWithOptions.InputWithOptions);
var options = [{
id: 0,
value: 'Option 1'
}, {
id: 1,
value: 'Option 2'
}, {
id: 2,
value: 'Option 3',
disabled: true
}, {
id: 3,
value: 'Option 4'
}, {
id: 'divider1',
value: '-'
}, {
id: 'element1',
value: /*#__PURE__*/_react["default"].createElement("span", {
style: {
color: 'brown'
},
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 32,
columnNumber: 14
}
}, "Option 4")
}, {
id: 5,
value: 'An option with a veryyyyyyyyy long text that exceeds the input'
}];
describe('[async]', function () {
runTests((0, _react2.createRendererWithUniDriver)(_InputWithOptionsPrivateUni.inputWithOptionsUniDriverFactory));
});
function runTests(render) {
var _this2 = this;
afterEach(function () {
return (0, _react2.cleanup)();
});
var createDriver = function createDriver(jsx) {
return render(jsx).driver;
};
it('should render input with ellipsis text-overflow style', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee() {
var _createDriver, inputDriver, _t;
return _regenerator().w(function (_context) {
while (1) switch (_context.n) {
case 0:
_createDriver = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
textOverflow: "ellipsis",
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 50,
columnNumber: 9
}
})), inputDriver = _createDriver.inputDriver;
_t = expect;
_context.n = 1;
return inputDriver.getTextOverflow();
case 1:
_t(_context.v).toBe('ellipsis');
case 2:
return _context.a(2);
}
}, _callee);
})));
it('should render input with default clip text-overflow style', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee2() {
var _createDriver2, inputDriver, _t2;
return _regenerator().w(function (_context2) {
while (1) switch (_context2.n) {
case 0:
_createDriver2 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 57,
columnNumber: 9
}
})), inputDriver = _createDriver2.inputDriver;
_t2 = expect;
_context2.n = 1;
return inputDriver.getTextOverflow();
case 1:
_t2(_context2.v).toBe('clip');
case 2:
return _context2.a(2);
}
}, _callee2);
})));
it('should NOT show dropdown when autofocus is on', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee3() {
var _createDriver3, inputDriver, dropdownLayoutDriver, _t3, _t4;
return _regenerator().w(function (_context3) {
while (1) switch (_context3.n) {
case 0:
_createDriver3 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
autoFocus: true,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 64,
columnNumber: 9
}
})), inputDriver = _createDriver3.inputDriver, dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;
_t3 = expect;
_context3.n = 1;
return inputDriver.isFocus();
case 1:
_t3(_context3.v).toBe(true);
_t4 = expect;
_context3.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t4(_context3.v).toBe(false);
case 3:
return _context3.a(2);
}
}, _callee3);
})));
it('should have an Input and an hidden DropdownLayout', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee4() {
var _createDriver4, inputDriver, dropdownLayoutDriver, _t5, _t6, _t7;
return _regenerator().w(function (_context4) {
while (1) switch (_context4.n) {
case 0:
_createDriver4 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 72,
columnNumber: 9
}
})), inputDriver = _createDriver4.inputDriver, dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver;
_t5 = expect;
_context4.n = 1;
return inputDriver.exists();
case 1:
_t5(_context4.v).toBe(true);
_t6 = expect;
_context4.n = 2;
return dropdownLayoutDriver.exists();
case 2:
_t6(_context4.v).toBe(false);
_t7 = expect;
_context4.n = 3;
return dropdownLayoutDriver.isShown();
case 3:
_t7(_context4.v).toBe(false);
case 4:
return _context4.a(2);
}
}, _callee4);
})));
it('should show DropdownLayout when input get focused', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee5() {
var _createDriver5, driver, dropdownLayoutDriver, _t8;
return _regenerator().w(function (_context5) {
while (1) switch (_context5.n) {
case 0:
_createDriver5 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 81,
columnNumber: 9
}
})), driver = _createDriver5.driver, dropdownLayoutDriver = _createDriver5.dropdownLayoutDriver;
_context5.n = 1;
return driver.focus();
case 1:
_t8 = expect;
_context5.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t8(_context5.v).toBe(false);
case 3:
return _context5.a(2);
}
}, _callee5);
})));
describe('showOptionsIfEmptyInput property', function () {
describe('show options if input is empty (default behaviour)', function () {
it('should show DropdownLayout if input is empty and down arrow pressed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee6() {
var _createDriver6, driver, dropdownLayoutDriver, _t9;
return _regenerator().w(function (_context6) {
while (1) switch (_context6.n) {
case 0:
_createDriver6 = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
showOptionsIfEmptyInput: true,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 91,
columnNumber: 13
}
})), driver = _createDriver6.driver, dropdownLayoutDriver = _createDriver6.dropdownLayoutDriver;
_context6.n = 1;
return driver.pressKey('ArrowDown');
case 1:
_t9 = expect;
_context6.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t9(_context6.v).toBe(true);
case 3:
return _context6.a(2);
}
}, _callee6);
})));
});
describe('do not show options if input is empty', function () {
it('should not show DropdownLayout if input is empty and focused', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee7() {
var _createDriver7, driver, dropdownLayoutDriver, _t0;
return _regenerator().w(function (_context7) {
while (1) switch (_context7.n) {
case 0:
_createDriver7 = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
showOptionsIfEmptyInput: false,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 105,
columnNumber: 13
}
})), driver = _createDriver7.driver, dropdownLayoutDriver = _createDriver7.dropdownLayoutDriver;
_context7.n = 1;
return driver.pressKey('ArrowDown');
case 1:
_t0 = expect;
_context7.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t0(_context7.v).toBe(false);
case 3:
return _context7.a(2);
}
}, _callee7);
})));
it('should show DropdownLayout if initial value passed and input focused', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee8() {
var _createDriver8, driver, dropdownLayoutDriver, _t1, _t10;
return _regenerator().w(function (_context8) {
while (1) switch (_context8.n) {
case 0:
_createDriver8 = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
showOptionsIfEmptyInput: false,
value: options[0].value,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 117,
columnNumber: 13
}
})), driver = _createDriver8.driver, dropdownLayoutDriver = _createDriver8.dropdownLayoutDriver;
_t1 = expect;
_context8.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t1(_context8.v).toBe(false);
_context8.n = 2;
return driver.pressKey('ArrowDown');
case 2:
_t10 = expect;
_context8.n = 3;
return dropdownLayoutDriver.isShown();
case 3:
_t10(_context8.v).toBe(true);
case 4:
return _context8.a(2);
}
}, _callee8);
})));
it('should show DropdownLayout if text was entered', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee9() {
var driver, _t11, _t12, _t13;
return _regenerator().w(function (_context9) {
while (1) switch (_context9.n) {
case 0:
driver = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
showOptionsIfEmptyInput: false,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 131,
columnNumber: 13
}
}));
_t11 = expect;
_context9.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t11(_context9.v).toBe(false);
_context9.n = 2;
return driver.inputDriver.focus();
case 2:
_t12 = expect;
_context9.n = 3;
return driver.dropdownLayoutDriver.isShown();
case 3:
_t12(_context9.v).toBe(false);
_context9.n = 4;
return driver.inputDriver.enterText('some value');
case 4:
_t13 = expect;
_context9.n = 5;
return driver.dropdownLayoutDriver.isShown();
case 5:
_t13(_context9.v).toBe(true);
case 6:
return _context9.a(2);
}
}, _callee9);
})));
it('should not show DropdownLayout if input was emptied', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee1() {
var driver;
return _regenerator().w(function (_context1) {
while (1) switch (_context1.n) {
case 0:
driver = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
showOptionsIfEmptyInput: false,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 146,
columnNumber: 13
}
}));
_context1.n = 1;
return driver.inputDriver.enterText('some value');
case 1:
_context1.n = 2;
return driver.inputDriver.clearText();
case 2:
_context1.n = 3;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee0() {
var _t14;
return _regenerator().w(function (_context0) {
while (1) switch (_context0.n) {
case 0:
_t14 = expect;
_context0.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t14(_context0.v).toBe(false);
case 2:
return _context0.a(2);
}
}, _callee0);
})));
case 3:
return _context1.a(2);
}
}, _callee1);
})));
it('should clear value in controlled mode and close dropdown', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee12() {
var defaultValue, ControlledInputWithOptions, _render, driver, _t17, _t18, _t19;
return _regenerator().w(function (_context12) {
while (1) switch (_context12.n) {
case 0:
defaultValue = 'value';
ControlledInputWithOptions = function ControlledInputWithOptions() {
var _React$useState = _react["default"].useState(defaultValue),
_React$useState2 = (0, _slicedToArray2["default"])(_React$useState, 2),
value = _React$useState2[0],
setValue = _React$useState2[1];
return /*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
updateControlledOnClear: true,
showOptionsIfEmptyInput: false,
options: options,
value: value,
onClear: function onClear() {
return setValue('');
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 165,
columnNumber: 15
}
});
};
_render = render(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 175,
columnNumber: 37
}
})), driver = _render.driver;
_t17 = expect;
_context12.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t17(_context12.v).toBe(false);
_t18 = expect;
_context12.n = 2;
return driver.inputDriver.getText();
case 2:
_t18(_context12.v).toBe(defaultValue);
_context12.n = 3;
return driver.inputDriver.enterText('o');
case 3:
_context12.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee10() {
var _t15;
return _regenerator().w(function (_context10) {
while (1) switch (_context10.n) {
case 0:
_t15 = expect;
_context10.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t15(_context10.v).toBe(true);
case 2:
return _context10.a(2);
}
}, _callee10);
})));
case 4:
_context12.n = 5;
return driver.inputDriver.clickClear();
case 5:
_t19 = expect;
_context12.n = 6;
return driver.inputDriver.getText();
case 6:
_t19(_context12.v).toBe('');
_context12.n = 7;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee11() {
var _t16;
return _regenerator().w(function (_context11) {
while (1) switch (_context11.n) {
case 0:
_t16 = expect;
_context11.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t16(_context11.v).toBe(false);
case 2:
return _context11.a(2);
}
}, _callee11);
})));
case 7:
return _context12.a(2);
}
}, _callee12);
})));
it('should not show DropdownLayout if input is empty and no char was produced by keypress', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee13() {
var driver, _t20;
return _regenerator().w(function (_context13) {
while (1) switch (_context13.n) {
case 0:
driver = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
showOptionsIfEmptyInput: false,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 192,
columnNumber: 13
}
}));
_context13.n = 1;
return driver.inputDriver.trigger('keyDown', {
key: 37 // <Left Arrow> key code
});
case 1:
_t20 = expect;
_context13.n = 2;
return driver.dropdownLayoutDriver.isShown();
case 2:
_t20(_context13.v).toBe(false);
case 3:
return _context13.a(2);
}
}, _callee13);
})));
it('should hide options on option select', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee15() {
var driver;
return _regenerator().w(function (_context15) {
while (1) switch (_context15.n) {
case 0:
driver = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
value: "some value",
showOptionsIfEmptyInput: false,
options: options,
closeOnSelect: true,
onSelect: function onSelect(option) {
this.setState({
value: option.value
});
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 206,
columnNumber: 13
}
}));
_context15.n = 1;
return driver.inputDriver.focus();
case 1:
_context15.n = 2;
return driver.dropdownLayoutDriver.clickAtOption(0);
case 2:
_context15.n = 3;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee14() {
var _t21;
return _regenerator().w(function (_context14) {
while (1) switch (_context14.n) {
case 0:
_t21 = expect;
_context14.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t21(_context14.v).toBe(false);
case 2:
return _context14.a(2);
}
}, _callee14);
})));
case 3:
return _context15.a(2);
}
}, _callee15);
})));
it('should not hide options on option select if closeOnSelect is set to false', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee16() {
var driver, _t22;
return _regenerator().w(function (_context16) {
while (1) switch (_context16.n) {
case 0:
driver = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
value: "some value",
showOptionsIfEmptyInput: false,
options: options,
closeOnSelect: false,
onSelect: function onSelect(option) {
this.setState({
value: option.value
});
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 226,
columnNumber: 13
}
}));
_context16.n = 1;
return driver.inputDriver.focus();
case 1:
_context16.n = 2;
return driver.dropdownLayoutDriver.clickAtOption(0);
case 2:
_t22 = expect;
_context16.n = 3;
return driver.dropdownLayoutDriver.isShown();
case 3:
_t22(_context16.v).toBe(true);
case 4:
return _context16.a(2);
}
}, _callee16);
})));
});
});
it('should call onChange when onChange is provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee17() {
var onChange, driver, _t23;
return _regenerator().w(function (_context17) {
while (1) switch (_context17.n) {
case 0:
onChange = vi.fn();
driver = createDriver(/*#__PURE__*/_react["default"].createElement(ControlledInputWithOptions, {
options: options,
onChange: onChange,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 247,
columnNumber: 9
}
}));
_context17.n = 1;
return driver.inputDriver.focus();
case 1:
_context17.n = 2;
return driver.inputDriver.enterText('test');
case 2:
expect(onChange).toHaveBeenCalled();
_t23 = expect;
_context17.n = 3;
return driver.inputDriver.getText();
case 3:
_t23(_context17.v).toBe('test');
case 4:
return _context17.a(2);
}
}, _callee17);
})));
it('should not show DropdownLayout when a non whitelisted key is pressed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee18() {
var _createDriver9, driver, dropdownLayoutDriver, _t24;
return _regenerator().w(function (_context18) {
while (1) switch (_context18.n) {
case 0:
_createDriver9 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 259,
columnNumber: 9
}
})), driver = _createDriver9.driver, dropdownLayoutDriver = _createDriver9.dropdownLayoutDriver;
_context18.n = 1;
return driver.pressKey('Any');
case 1:
_t24 = expect;
_context18.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t24(_context18.v).toBe(false);
case 3:
return _context18.a(2);
}
}, _callee18);
})));
it('should show DropdownLayout on down key', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee19() {
var _createDriver0, driver, dropdownLayoutDriver, _t25;
return _regenerator().w(function (_context19) {
while (1) switch (_context19.n) {
case 0:
_createDriver0 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 267,
columnNumber: 9
}
})), driver = _createDriver0.driver, dropdownLayoutDriver = _createDriver0.dropdownLayoutDriver;
_context19.n = 1;
return driver.pressKey('ArrowDown');
case 1:
_t25 = expect;
_context19.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t25(_context19.v).toBe(true);
case 3:
return _context19.a(2);
}
}, _callee19);
})));
it('should not show DropdownLayout on modifier keys', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee20() {
var _createDriver1, driver, dropdownLayoutDriver, _t26, _t27, _t28;
return _regenerator().w(function (_context20) {
while (1) switch (_context20.n) {
case 0:
_createDriver1 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 275,
columnNumber: 9
}
})), driver = _createDriver1.driver, dropdownLayoutDriver = _createDriver1.dropdownLayoutDriver;
_context20.n = 1;
return driver.pressKey('Shift');
case 1:
_t26 = expect;
_context20.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t26(_context20.v).toBe(false);
_context20.n = 3;
return driver.pressKey('Alt');
case 3:
_t27 = expect;
_context20.n = 4;
return dropdownLayoutDriver.isShown();
case 4:
_t27(_context20.v).toBe(false);
_context20.n = 5;
return driver.pressKey('Control');
case 5:
_t28 = expect;
_context20.n = 6;
return dropdownLayoutDriver.isShown();
case 6:
_t28(_context20.v).toBe(false);
case 7:
return _context20.a(2);
}
}, _callee20);
})));
it('should hide DropdownLayout on enter and esc key press', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee23() {
var _createDriver10, driver, dropdownLayoutDriver, _t31;
return _regenerator().w(function (_context23) {
while (1) switch (_context23.n) {
case 0:
_createDriver10 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 287,
columnNumber: 9
}
})), driver = _createDriver10.driver, dropdownLayoutDriver = _createDriver10.dropdownLayoutDriver;
_context23.n = 1;
return driver.pressKey('ArrowDown');
case 1:
_context23.n = 2;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee21() {
var _t29;
return _regenerator().w(function (_context21) {
while (1) switch (_context21.n) {
case 0:
_t29 = expect;
_context21.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t29(_context21.v).toBe(true);
case 2:
return _context21.a(2);
}
}, _callee21);
})));
case 2:
_context23.n = 3;
return driver.pressKey('Enter');
case 3:
_context23.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee22() {
var _t30;
return _regenerator().w(function (_context22) {
while (1) switch (_context22.n) {
case 0:
_t30 = expect;
_context22.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t30(_context22.v).toBe(false);
case 2:
return _context22.a(2);
}
}, _callee22);
})));
case 4:
_context23.n = 5;
return driver.pressKey('Escape');
case 5:
_t31 = expect;
_context23.n = 6;
return dropdownLayoutDriver.isShown();
case 6:
_t31(_context23.v).toBe(false);
case 7:
return _context23.a(2);
}
}, _callee23);
})));
it('should start keyboard navigation from last selected option when re-opening the dropdown layout', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee24() {
var _createDriver11, driver, inputDriver, dropdownLayoutDriver, _t32, _t33;
return _regenerator().w(function (_context24) {
while (1) switch (_context24.n) {
case 0:
_createDriver11 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
selectedId: 1,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 303,
columnNumber: 9
}
})), driver = _createDriver11.driver, inputDriver = _createDriver11.inputDriver, dropdownLayoutDriver = _createDriver11.dropdownLayoutDriver;
_context24.n = 1;
return inputDriver.click();
case 1:
_context24.n = 2;
return dropdownLayoutDriver.clickAtOption(1);
case 2:
_context24.n = 3;
return driver.outsideClick();
case 3:
_context24.n = 4;
return driver.focus();
case 4:
_context24.n = 5;
return driver.pressKey('ArrowDown');
case 5:
_t32 = expect;
_context24.n = 6;
return dropdownLayoutDriver.isOptionSelected(1);
case 6:
_t32(_context24.v).toBe(true);
_context24.n = 7;
return driver.pressKey('ArrowDown');
case 7:
_t33 = expect;
_context24.n = 8;
return dropdownLayoutDriver.isOptionHovered(3);
case 8:
_t33(_context24.v).toBe(true);
case 9:
return _context24.a(2);
}
}, _callee24);
})));
it('should call onManuallyInput on enter key press with a trimmed value', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee25() {
var onManuallyInput, _createDriver12, driver, inputDriver;
return _regenerator().w(function (_context25) {
while (1) switch (_context25.n) {
case 0:
onManuallyInput = vi.fn();
_createDriver12 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onManuallyInput: onManuallyInput,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 320,
columnNumber: 9
}
})), driver = _createDriver12.driver, inputDriver = _createDriver12.inputDriver;
_context25.n = 1;
return inputDriver.enterText('my text ');
case 1:
_context25.n = 2;
return driver.pressKey('Enter');
case 2:
expect(onManuallyInput).toHaveBeenCalledWith('my text', undefined);
case 3:
return _context25.a(2);
}
}, _callee25);
})));
it('should call onManuallyInput on enter key press', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee26() {
var onManuallyInput, _createDriver13, driver, inputDriver;
return _regenerator().w(function (_context26) {
while (1) switch (_context26.n) {
case 0:
onManuallyInput = vi.fn();
_createDriver13 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onManuallyInput: onManuallyInput,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 333,
columnNumber: 9
}
})), driver = _createDriver13.driver, inputDriver = _createDriver13.inputDriver;
_context26.n = 1;
return inputDriver.enterText('my text');
case 1:
_context26.n = 2;
return driver.pressKey('Enter');
case 2:
expect(onManuallyInput).toHaveBeenCalledWith('my text', undefined);
case 3:
return _context26.a(2);
}
}, _callee26);
})));
it('should call onManuallyInput on tab key press', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee27() {
var onManuallyInput, _createDriver14, driver, inputDriver;
return _regenerator().w(function (_context27) {
while (1) switch (_context27.n) {
case 0:
onManuallyInput = vi.fn();
_createDriver14 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onManuallyInput: onManuallyInput,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 346,
columnNumber: 9
}
})), driver = _createDriver14.driver, inputDriver = _createDriver14.inputDriver;
_context27.n = 1;
return inputDriver.enterText('my text');
case 1:
_context27.n = 2;
return driver.pressKey('Tab');
case 2:
expect(onManuallyInput).toHaveBeenCalledWith('my text', undefined);
case 3:
return _context27.a(2);
}
}, _callee27);
})));
it('should select and close dropdown on press tab key', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee30() {
var onManuallyInput, _createDriver15, driver, inputDriver, dropdownLayoutDriver, _t36;
return _regenerator().w(function (_context30) {
while (1) switch (_context30.n) {
case 0:
onManuallyInput = vi.fn();
_createDriver15 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onManuallyInput: onManuallyInput,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 359,
columnNumber: 9
}
})), driver = _createDriver15.driver, inputDriver = _createDriver15.inputDriver, dropdownLayoutDriver = _createDriver15.dropdownLayoutDriver;
_context30.n = 1;
return inputDriver.focus();
case 1:
_context30.n = 2;
return driver.pressKey('ArrowDown');
case 2:
_t36 = expect;
_context30.n = 3;
return inputDriver.isFocus();
case 3:
_t36(_context30.v).toBe(true);
_context30.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee28() {
var _t34;
return _regenerator().w(function (_context28) {
while (1) switch (_context28.n) {
case 0:
_t34 = expect;
_context28.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t34(_context28.v).toBe(true);
case 2:
return _context28.a(2);
}
}, _callee28);
})));
case 4:
_context30.n = 5;
return driver.pressKey('Tab');
case 5:
_context30.n = 6;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee29() {
var _t35;
return _regenerator().w(function (_context29) {
while (1) switch (_context29.n) {
case 0:
_t35 = expect;
_context29.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t35(_context29.v).toBe(false);
case 2:
return _context29.a(2);
}
}, _callee29);
})));
case 6:
return _context30.a(2);
}
}, _callee30);
})));
it('should focus out of the component and close dropdown for an empty input when pressing tab key', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee33() {
var _createDriver16, driver, inputDriver, dropdownLayoutDriver, _t38;
return _regenerator().w(function (_context33) {
while (1) switch (_context33.n) {
case 0:
_createDriver16 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
closeOnSelect: false,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 380,
columnNumber: 9
}
})), driver = _createDriver16.driver, inputDriver = _createDriver16.inputDriver, dropdownLayoutDriver = _createDriver16.dropdownLayoutDriver;
_context33.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee31() {
return _regenerator().w(function (_context31) {
while (1) switch (_context31.n) {
case 0:
_context31.n = 1;
return inputDriver.click();
case 1:
return _context31.a(2);
}
}, _callee31);
})));
case 1:
_t38 = expect;
_context33.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t38(_context33.v).toBe(true);
_context33.n = 3;
return driver.pressKey('Tab');
case 3:
_context33.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee32() {
var _t37;
return _regenerator().w(function (_context32) {
while (1) switch (_context32.n) {
case 0:
_t37 = expect;
_context32.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t37(_context32.v).toBe(false);
case 2:
return _context32.a(2);
}
}, _callee32);
})));
case 4:
return _context33.a(2);
}
}, _callee33);
})));
it('should open options when clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee35() {
var _createDriver17, inputDriver, dropdownLayoutDriver, _t40;
return _regenerator().w(function (_context35) {
while (1) switch (_context35.n) {
case 0:
_createDriver17 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 395,
columnNumber: 9
}
})), inputDriver = _createDriver17.inputDriver, dropdownLayoutDriver = _createDriver17.dropdownLayoutDriver;
_t40 = expect;
_context35.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t40(_context35.v).toBe(false);
_context35.n = 2;
return inputDriver.click();
case 2:
_context35.n = 3;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee34() {
var _t39;
return _regenerator().w(function (_context34) {
while (1) switch (_context34.n) {
case 0:
_t39 = expect;
_context34.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t39(_context34.v).toBe(true);
case 2:
return _context34.a(2);
}
}, _callee34);
})));
case 3:
return _context35.a(2);
}
}, _callee35);
})));
it('should not open options when clicked on read only input', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee36() {
var _createDriver18, inputDriver, dropdownLayoutDriver, _t41, _t42;
return _regenerator().w(function (_context36) {
while (1) switch (_context36.n) {
case 0:
_createDriver18 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
readOnly: true,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 406,
columnNumber: 9
}
})), inputDriver = _createDriver18.inputDriver, dropdownLayoutDriver = _createDriver18.dropdownLayoutDriver;
_t41 = expect;
_context36.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t41(_context36.v).toBe(false);
_context36.n = 2;
return inputDriver.click();
case 2:
_t42 = expect;
_context36.n = 3;
return dropdownLayoutDriver.isShown();
case 3:
_t42(_context36.v).toBe(false);
case 4:
return _context36.a(2);
}
}, _callee36);
})));
it('should not open options on key down when component is read only', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee37() {
var _createDriver19, dropdownLayoutDriver, inputDriver, _t43, _t44;
return _regenerator().w(function (_context37) {
while (1) switch (_context37.n) {
case 0:
_createDriver19 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
readOnly: true,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 415,
columnNumber: 9
}
})), dropdownLayoutDriver = _createDriver19.dropdownLayoutDriver, inputDriver = _createDriver19.inputDriver;
_t43 = expect;
_context37.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t43(_context37.v).toEqual(false);
_context37.n = 2;
return inputDriver.trigger('keyDown', {
key: 'ArrowDown'
});
case 2:
_t44 = expect;
_context37.n = 3;
return dropdownLayoutDriver.isShown();
case 3:
_t44(_context37.v).toEqual(false);
case 4:
return _context37.a(2);
}
}, _callee37);
})));
it('should show custom dropdown content when it is provided', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee39() {
var _createDriver20, inputDriver;
return _regenerator().w(function (_context39) {
while (1) switch (_context39.n) {
case 0:
_createDriver20 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
customDropdownContent: /*#__PURE__*/_react["default"].createElement("div", {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 426,
columnNumber: 34
}
}, "custom dropdown content"),
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 424,
columnNumber: 9
}
})), inputDriver = _createDriver20.inputDriver;
_context39.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee38() {
return _regenerator().w(function (_context38) {
while (1) switch (_context38.n) {
case 0:
_context38.n = 1;
return inputDriver.click();
case 1:
return _context38.a(2);
}
}, _callee38);
})));
case 1:
expect(_react2.screen.getByText('custom dropdown content')).toBeTruthy();
case 2:
return _context39.a(2);
}
}, _callee39);
})));
it('should NOT close options when input clicked before 2 seconds passed from last opening', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee41() {
var _createDriver21, inputDriver, dropdownLayoutDriver, originalNow, _t45, _t46;
return _regenerator().w(function (_context41) {
while (1) switch (_context41.n) {
case 0:
_createDriver21 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 439,
columnNumber: 9
}
})), inputDriver = _createDriver21.inputDriver, dropdownLayoutDriver = _createDriver21.dropdownLayoutDriver;
originalNow = Date.now;
Date.now = function () {
return 0;
};
_context41.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee40() {
return _regenerator().w(function (_context40) {
while (1) switch (_context40.n) {
case 0:
_context40.n = 1;
return inputDriver.click();
case 1:
return _context40.a(2);
}
}, _callee40);
})));
case 1:
_t45 = expect;
_context41.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t45(_context41.v).toBe(true);
Date.now = function () {
return 1500;
};
_context41.n = 3;
return inputDriver.click();
case 3:
_t46 = expect;
_context41.n = 4;
return dropdownLayoutDriver.isShown();
case 4:
_t46(_context41.v).toBe(true);
Date.now = originalNow;
case 5:
return _context41.a(2);
}
}, _callee41);
})));
it('should close options when input clicked after 2 seconds from last opening', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee44() {
var _createDriver22, inputDriver, dropdownLayoutDriver, originalNow;
return _regenerator().w(function (_context44) {
while (1) switch (_context44.n) {
case 0:
_createDriver22 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 458,
columnNumber: 9
}
})), inputDriver = _createDriver22.inputDriver, dropdownLayoutDriver = _createDriver22.dropdownLayoutDriver;
originalNow = Date.now;
Date.now = function () {
return 0;
};
_context44.n = 1;
return inputDriver.click();
case 1:
_context44.n = 2;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee42() {
var _t47;
return _regenerator().w(function (_context42) {
while (1) switch (_context42.n) {
case 0:
_t47 = expect;
_context42.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t47(_context42.v).toBe(true);
case 2:
return _context42.a(2);
}
}, _callee42);
})));
case 2:
Date.now = function () {
return 2500;
};
_context44.n = 3;
return inputDriver.click();
case 3:
_context44.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee43() {
var _t48;
return _regenerator().w(function (_context43) {
while (1) switch (_context43.n) {
case 0:
_t48 = expect;
_context43.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t48(_context43.v).toBe(false);
case 2:
return _context43.a(2);
}
}, _callee43);
})));
case 4:
Date.now = originalNow;
case 5:
return _context44.a(2);
}
}, _callee44);
})));
it('should stay focused on tab key press with closeOnSelect=false', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee45() {
var onManuallyInput, _createDriver23, driver, inputDriver, dropdownLayoutDriver, _t49, _t50, _t51;
return _regenerator().w(function (_context45) {
while (1) switch (_context45.n) {
case 0:
onManuallyInput = vi.fn();
_createDriver23 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onManuallyInput: onManuallyInput,
closeOnSelect: false,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 480,
columnNumber: 9
}
})), driver = _createDriver23.driver, inputDriver = _createDriver23.inputDriver, dropdownLayoutDriver = _createDriver23.dropdownLayoutDriver;
_context45.n = 1;
return inputDriver.focus();
case 1:
_context45.n = 2;
return inputDriver.enterText('Option 1');
case 2:
_context45.n = 3;
return driver.pressKey('ArrowDown');
case 3:
_t49 = expect;
_context45.n = 4;
return inputDriver.isFocus();
case 4:
_t49(_context45.v).toBe(true);
_context45.n = 5;
return driver.pressKey('Tab');
case 5:
_t50 = expect;
_context45.n = 6;
return inputDriver.isFocus();
case 6:
_t50(_context45.v).toBe(true);
_t51 = expect;
_context45.n = 7;
return dropdownLayoutDriver.isShown();
case 7:
_t51(_context45.v).toBe(true);
case 8:
return _context45.a(2);
}
}, _callee45);
})));
it('should suggest an option when calling onManuallyInput', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee46() {
var onManuallyInput, _createDriver24, driver, inputDriver;
return _regenerator().w(function (_context46) {
while (1) switch (_context46.n) {
case 0:
onManuallyInput = vi.fn();
_createDriver24 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onManuallyInput: onManuallyInput,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 498,
columnNumber: 9
}
})), driver = _createDriver24.driver, inputDriver = _createDriver24.inputDriver;
_context46.n = 1;
return inputDriver.enterText('Option 2');
case 1:
_context46.n = 2;
return driver.pressKey('Enter');
case 2:
expect(onManuallyInput).toHaveBeenCalledWith('Option 2', {
id: 1,
value: 'Option 2'
});
case 3:
return _context46.a(2);
}
}, _callee46);
})));
it('should hide options on selection by default', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee48() {
var _createDriver25, driver, dropdownLayoutDriver;
return _regenerator().w(function (_context48) {
while (1) switch (_context48.n) {
case 0:
_createDriver25 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 513,
columnNumber: 9
}
})), driver = _createDriver25.driver, dropdownLayoutDriver = _createDriver25.dropdownLayoutDriver;
_context48.n = 1;
return driver.focus();
case 1:
_context48.n = 2;
return dropdownLayoutDriver.clickAtOption(0);
case 2:
_context48.n = 3;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee47() {
var _t52;
return _regenerator().w(function (_context47) {
while (1) switch (_context47.n) {
case 0:
_t52 = expect;
_context47.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t52(_context47.v).toBe(false);
case 2:
return _context47.a(2);
}
}, _callee47);
})));
case 3:
return _context48.a(2);
}
}, _callee48);
})));
describe('click outside', function () {
it('should hide options on outside click', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee51() {
var onClickOutsideFn, _createDriver26, driver, dropdownLayoutDriver, _t55;
return _regenerator().w(function (_context51) {
while (1) switch (_context51.n) {
case 0:
onClickOutsideFn = vi.fn();
_createDriver26 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onClickOutside: onClickOutsideFn,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 526,
columnNumber: 11
}
})), driver = _createDriver26.driver, dropdownLayoutDriver = _createDriver26.dropdownLayoutDriver; // Click outside when dropdown is closed
_context51.n = 1;
return driver.outsideClick();
case 1:
expect(onClickOutsideFn).toHaveBeenCalledTimes(0);
_t55 = expect;
_context51.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t55(_context51.v).toBe(false);
_context51.n = 3;
return driver.pressKey('ArrowDown');
case 3:
_context51.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee49() {
var _t53;
return _regenerator().w(function (_context49) {
while (1) switch (_context49.n) {
case 0:
_t53 = expect;
_context49.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t53(_context49.v).toBe(true);
case 2:
return _context49.a(2);
}
}, _callee49);
})));
case 4:
_context51.n = 5;
return driver.outsideClick();
case 5:
expect(onClickOutsideFn).toHaveBeenCalledTimes(1);
_context51.n = 6;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee50() {
var _t54;
return _regenerator().w(function (_context50) {
while (1) switch (_context50.n) {
case 0:
_t54 = expect;
_context50.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t54(_context50.v).toBe(false);
case 2:
return _context50.a(2);
}
}, _callee50);
})));
case 6:
return _context51.a(2);
}
}, _callee51);
})));
it('should close when clicked outside', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee54() {
var _createDriver27, driver, inputDriver, dropdownLayoutDriver, _t57, _t58;
return _regenerator().w(function (_context54) {
while (1) switch (_context54.n) {
case 0:
_createDriver27 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 553,
columnNumber: 11
}
})), driver = _createDriver27.driver, inputDriver = _createDriver27.inputDriver, dropdownLayoutDriver = _createDriver27.dropdownLayoutDriver;
_t57 = expect;
_context54.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t57(_context54.v).toBe(false);
_context54.n = 2;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee52() {
return _regenerator().w(function (_context52) {
while (1) switch (_context52.n) {
case 0:
_context52.n = 1;
return inputDriver.click();
case 1:
return _context52.a(2);
}
}, _callee52);
})));
case 2:
_t58 = expect;
_context54.n = 3;
return dropdownLayoutDriver.isShown();
case 3:
_t58(_context54.v).toBe(true);
_context54.n = 4;
return inputDriver.enterText('foo');
case 4:
_context54.n = 5;
return driver.outsideClick();
case 5:
_context54.n = 6;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee53() {
var _t56;
return _regenerator().w(function (_context53) {
while (1) switch (_context53.n) {
case 0:
_t56 = expect;
_context53.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t56(_context53.v).toBe(false);
case 2:
return _context53.a(2);
}
}, _callee53);
})));
case 6:
return _context54.a(2);
}
}, _callee54);
})));
});
it('should not hide options on selection', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee55() {
var _createDriver28, driver, dropdownLayoutDriver, _t59;
return _regenerator().w(function (_context55) {
while (1) switch (_context55.n) {
case 0:
_createDriver28 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
closeOnSelect: false,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 570,
columnNumber: 9
}
})), driver = _createDriver28.driver, dropdownLayoutDriver = _createDriver28.dropdownLayoutDriver;
_context55.n = 1;
return driver.focus();
case 1:
_context55.n = 2;
return dropdownLayoutDriver.clickAtOption(0);
case 2:
_t59 = expect;
_context55.n = 3;
return dropdownLayoutDriver.isShown();
case 3:
_t59(_context55.v).toBe(true);
case 4:
return _context55.a(2);
}
}, _callee55);
})));
it('should call onSelect when an option is pressed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee56() {
var onSelect, _createDriver29, driver, dropdownLayoutDriver;
return _regenerator().w(function (_context56) {
while (1) switch (_context56.n) {
case 0:
onSelect = vi.fn();
_createDriver29 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onSelect: onSelect,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 580,
columnNumber: 9
}
})), driver = _createDriver29.driver, dropdownLayoutDriver = _createDriver29.dropdownLayoutDriver;
_context56.n = 1;
return driver.focus();
case 1:
_context56.n = 2;
return dropdownLayoutDriver.clickAtOption(0);
case 2:
expect(onSelect).toHaveBeenCalledWith(options[0]);
case 3:
return _context56.a(2);
}
}, _callee56);
})));
it('should call onSelect when a selected option is pressed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee57() {
var onSelect, _createDriver30, driver, dropdownLayoutDriver;
return _regenerator().w(function (_context57) {
while (1) switch (_context57.n) {
case 0:
onSelect = vi.fn();
_createDriver30 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onSelect: onSelect,
selectedId: options[0].id,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 590,
columnNumber: 9
}
})), driver = _createDriver30.driver, dropdownLayoutDriver = _createDriver30.dropdownLayoutDriver;
_context57.n = 1;
return driver.focus();
case 1:
_context57.n = 2;
return dropdownLayoutDriver.clickAtOption(0);
case 2:
expect(onSelect).toHaveBeenCalled();
case 3:
return _context57.a(2);
}
}, _callee57);
})));
it('should call onKeyDown', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee58() {
var someKey, onKeyDown, _createDriver31, driver;
return _regenerator().w(function (_context58) {
while (1) switch (_context58.n) {
case 0:
someKey = 'Backspace';
onKeyDown = vi.fn(function (e) {
return e.persist();
});
_createDriver31 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onKeyDown: onKeyDown,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 605,
columnNumber: 9
}
})), driver = _createDriver31.driver;
_context58.n = 1;
return driver.pressKey(someKey);
case 1:
expect(onKeyDown).toHaveBeenCalledWith(expect.objectContaining({
key: someKey
}));
case 2:
return _context58.a(2);
}
}, _callee58);
})));
it('should call onFocus', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee59() {
var onFocus, _createDriver32, driver;
return _regenerator().w(function (_context59) {
while (1) switch (_context59.n) {
case 0:
onFocus = vi.fn();
_createDriver32 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onFocus: onFocus,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 616,
columnNumber: 9
}
})), driver = _createDriver32.driver;
_context59.n = 1;
return driver.focus();
case 1:
expect(onFocus).toHaveBeenCalled();
case 2:
return _context59.a(2);
}
}, _callee59);
})));
it('should call onBlur if clicked outside and input is focused', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee60() {
var onBlur, _createDriver33, driver, inputDriver;
return _regenerator().w(function (_context60) {
while (1) switch (_context60.n) {
case 0:
onBlur = vi.fn();
_createDriver33 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onBlur: onBlur,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 625,
columnNumber: 9
}
})), driver = _createDriver33.driver, inputDriver = _createDriver33.inputDriver;
_context60.n = 1;
return driver.outsideClick();
case 1:
expect(onBlur).not.toHaveBeenCalled();
_context60.n = 2;
return driver.focus();
case 2:
_context60.n = 3;
return driver.outsideClick();
case 3:
_context60.n = 4;
return inputDriver.blur();
case 4:
// apparently, jsdom does not fire onBlur after input.blur() is called
expect(onBlur).toHaveBeenCalled();
case 5:
return _context60.a(2);
}
}, _callee60);
})));
it('should not call onBlur if selected an option', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee62() {
var onBlur, OPTION_INDEX, _createDriver34, dropdownLayoutDriver, inputDriver, _t60, _t61;
return _regenerator().w(function (_context62) {
while (1) switch (_context62.n) {
case 0:
onBlur = vi.fn();
OPTION_INDEX = 0;
_createDriver34 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onBlur: onBlur,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 639,
columnNumber: 9
}
})), dropdownLayoutDriver = _createDriver34.dropdownLayoutDriver, inputDriver = _createDriver34.inputDriver;
_context62.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee61() {
return _regenerator().w(function (_context61) {
while (1) switch (_context61.n) {
case 0:
_context61.n = 1;
return inputDriver.click();
case 1:
return _context61.a(2);
}
}, _callee61);
})));
case 1:
_t60 = expect;
_context62.n = 2;
return inputDriver.isFocusedStyle();
case 2:
_t60(_context62.v).toBe(true);
_context62.n = 3;
return dropdownLayoutDriver.clickAtOption(OPTION_INDEX);
case 3:
expect(onBlur).not.toHaveBeenCalled();
_t61 = expect;
_context62.n = 4;
return inputDriver.isFocusedStyle();
case 4:
_t61(_context62.v).toBe(true);
case 5:
return _context62.a(2);
}
}, _callee62);
})));
it('should not call onFocus when selecting an option', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee64() {
var onFocus, OPTION_INDEX, _createDriver35, dropdownLayoutDriver, inputDriver, _t62, _t63;
return _regenerator().w(function (_context64) {
while (1) switch (_context64.n) {
case 0:
onFocus = vi.fn();
OPTION_INDEX = 0;
_createDriver35 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
onFocus: onFocus,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 657,
columnNumber: 9
}
})), dropdownLayoutDriver = _createDriver35.dropdownLayoutDriver, inputDriver = _createDriver35.inputDriver;
_context64.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee63() {
return _regenerator().w(function (_context63) {
while (1) switch (_context63.n) {
case 0:
_context63.n = 1;
return inputDriver.click();
case 1:
return _context63.a(2);
}
}, _callee63);
})));
case 1:
_t62 = expect;
_context64.n = 2;
return inputDriver.isFocusedStyle();
case 2:
_t62(_context64.v).toBe(true);
// Reset focus call counter
onFocus.mockClear();
_context64.n = 3;
return dropdownLayoutDriver.clickAtOption(OPTION_INDEX);
case 3:
expect(onFocus).not.toHaveBeenCalled();
_t63 = expect;
_context64.n = 4;
return inputDriver.isFocusedStyle();
case 4:
_t63(_context64.v).toBe(true);
_context64.n = 5;
return inputDriver.blur();
case 5:
_context64.n = 6;
return inputDriver.focus();
case 6:
// After blurring, onFocus should be triggered when clicking on the input
expect(onFocus).toHaveBeenCalledTimes(1);
case 7:
return _context64.a(2);
}
}, _callee64);
})));
it('should not call onManuallyInput when composing text via external means', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee65() {
var onManualInput, _createDriver36, driver, inputDriver;
return _regenerator().w(function (_context65) {
while (1) switch (_context65.n) {
case 0:
onManualInput = vi.fn();
_createDriver36 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onManuallyInput: onManualInput,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 680,
columnNumber: 9
}
})), driver = _createDriver36.driver, inputDriver = _createDriver36.inputDriver;
_context65.n = 1;
return inputDriver.startComposing();
case 1:
_context65.n = 2;
return driver.pressKey('Enter');
case 2:
expect(onManualInput).not.toHaveBeenCalled();
_context65.n = 3;
return inputDriver.endComposing();
case 3:
_context65.n = 4;
return driver.pressKey('Enter');
case 4:
expect(onManualInput).toHaveBeenCalled();
case 5:
return _context65.a(2);
}
}, _callee65);
})));
it('should provide highlighting context to options', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee66() {
var getHighlightText, HighlightContextOption, highlight, value, options, _createDriver37, dropdownLayoutDriver, _t64;
return _regenerator().w(function (_context66) {
while (1) switch (_context66.n) {
case 0:
getHighlightText = function getHighlightText(highlight, match) {
return "highlight: ".concat(highlight, ", match: ").concat(match);
};
HighlightContextOption = function HighlightContextOption() {
var _useContext = (0, _react.useContext)(_HighlightContext.HighlightContext),
highlight = _useContext.highlight,
match = _useContext.match;
return getHighlightText(highlight, match);
};
highlight = true;
value = 'hello';
options = [{
id: 0,
value: function value() {
return /*#__PURE__*/_react["default"].createElement(HighlightContextOption, {
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 701,
columnNumber: 46
}
});
}
}];
_createDriver37 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
highlight: highlight,
value: value,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 704,
columnNumber: 9
}
})), dropdownLayoutDriver = _createDriver37.dropdownLayoutDriver;
_t64 = expect;
_context66.n = 1;
return dropdownLayoutDriver.optionContentAt(0);
case 1:
_t64(_context66.v).toBe(getHighlightText(highlight, value));
case 2:
return _context66.a(2);
}
}, _callee66);
})));
it('should call onSelect when an option is pressed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee68() {
var onSelect, driver, OPTION_INDEX;
return _regenerator().w(function (_context68) {
while (1) switch (_context68.n) {
case 0:
onSelect = vi.fn();
driver = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onSelect: onSelect,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 719,
columnNumber: 9
}
}));
_context68.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee67() {
return _regenerator().w(function (_context67) {
while (1) switch (_context67.n) {
case 0:
_context67.n = 1;
return driver.inputDriver.click();
case 1:
return _context67.a(2);
}
}, _callee67);
})));
case 1:
OPTION_INDEX = 0;
_context68.n = 2;
return driver.dropdownLayoutDriver.clickAtOption(OPTION_INDEX);
case 2:
expect(onSelect).toHaveBeenCalledWith(options[OPTION_INDEX]);
case 3:
return _context68.a(2);
}
}, _callee68);
})));
it('should support autocomplete prop', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee69() {
var _createDriver38, inputDriver, _t65;
return _regenerator().w(function (_context69) {
while (1) switch (_context69.n) {
case 0:
_createDriver38 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
autocomplete: "off",
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 733,
columnNumber: 9
}
})), inputDriver = _createDriver38.inputDriver;
_t65 = expect;
_context69.n = 1;
return inputDriver.getAutocomplete();
case 1:
_t65(_context69.v).toBe('off');
case 2:
return _context69.a(2);
}
}, _callee69);
})));
it('should support tabIndex prop', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee70() {
var _createDriver39, dropdownLayoutDriver, _t66;
return _regenerator().w(function (_context70) {
while (1) switch (_context70.n) {
case 0:
_createDriver39 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
tabIndex: -1,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 740,
columnNumber: 9
}
})), dropdownLayoutDriver = _createDriver39.dropdownLayoutDriver;
_t66 = expect;
_context70.n = 1;
return dropdownLayoutDriver.tabIndex();
case 1:
_t66(_context70.v).toBe(-1);
case 2:
return _context70.a(2);
}
}, _callee70);
})));
it('should support required prop', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee71() {
var _createDriver40, inputDriver, _t67;
return _regenerator().w(function (_context71) {
while (1) switch (_context71.n) {
case 0:
_createDriver40 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
required: true,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 746,
columnNumber: 44
}
})), inputDriver = _createDriver40.inputDriver;
_t67 = expect;
_context71.n = 1;
return inputDriver.getRequired();
case 1:
_t67(_context71.v).toBe(true);
case 2:
return _context71.a(2);
}
}, _callee71);
})));
it('should support a divider option', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee72() {
var _createDriver41, dropdownLayoutDriver, _t68;
return _regenerator().w(function (_context72) {
while (1) switch (_context72.n) {
case 0:
_createDriver41 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 752,
columnNumber: 9
}
})), dropdownLayoutDriver = _createDriver41.dropdownLayoutDriver;
_t68 = expect;
_context72.n = 1;
return dropdownLayoutDriver.isOptionADivider(4);
case 1:
_t68(_context72.v).toBe(true);
case 2:
return _context72.a(2);
}
}, _callee72);
})));
describe('onKeyArrowDown', function () {
it('should behave normal when external onKeyArrowDown passed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee74() {
var _createDriver42, driver, dropdownLayoutDriver, _t70, _t71;
return _regenerator().w(function (_context74) {
while (1) switch (_context74.n) {
case 0:
_createDriver42 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onKeyArrowDown: function onKeyArrowDown() {
return null;
},
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 760,
columnNumber: 11
}
})), driver = _createDriver42.driver, dropdownLayoutDriver = _createDriver42.dropdownLayoutDriver;
_context74.n = 1;
return driver.pressKey('ArrowDown');
case 1:
_t70 = expect;
_context74.n = 2;
return dropdownLayoutDriver.isShown();
case 2:
_t70(_context74.v).toBe(true);
_context74.n = 3;
return driver.pressKey('Enter');
case 3:
_context74.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee73() {
var _t69;
return _regenerator().w(function (_context73) {
while (1) switch (_context73.n) {
case 0:
_t69 = expect;
_context73.n = 1;
return dropdownLayoutDriver.isShown();
case 1:
_t69(_context73.v).toBe(false);
case 2:
return _context73.a(2);
}
}, _callee73);
})));
case 4:
_context74.n = 5;
return driver.pressKey('Escape');
case 5:
_t71 = expect;
_context74.n = 6;
return dropdownLayoutDriver.isShown();
case 6:
_t71(_context74.v).toBe(false);
case 7:
return _context74.a(2);
}
}, _callee74);
})));
});
describe('onKeyArrowUp', function () {
it("should NOT move Input's text cursor", /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee76() {
var filteringText, _createDriver43, driver, inputDriver;
return _regenerator().w(function (_context76) {
while (1) switch (_context76.n) {
case 0:
filteringText = 'Opt';
_createDriver43 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 777,
columnNumber: 11
}
})), driver = _createDriver43.driver, inputDriver = _createDriver43.inputDriver;
_context76.n = 1;
return inputDriver.enterText(filteringText);
case 1:
_context76.n = 2;
return driver.pressKey('ArrowDown');
case 2:
_context76.n = 3;
return driver.pressKey('ArrowDown');
case 3:
_context76.n = 4;
return driver.pressKey('ArrowUp');
case 4:
_context76.n = 5;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee75() {
var _t72;
return _regenerator().w(function (_context75) {
while (1) switch (_context75.n) {
case 0:
_t72 = expect;
_context75.n = 1;
return inputDriver.getCursorLocation();
case 1:
_t72(_context75.v).toEqual(filteringText.length);
case 2:
return _context75.a(2);
}
}, _callee75);
})));
case 5:
return _context76.a(2);
}
}, _callee76);
})));
});
describe('onSelect', function () {
it('should call onSelect on enter key press', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee77() {
var onSelect, _createDriver44, driver;
return _regenerator().w(function (_context77) {
while (1) switch (_context77.n) {
case 0:
onSelect = vi.fn();
_createDriver44 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onSelect: onSelect,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 798,
columnNumber: 11
}
})), driver = _createDriver44.driver;
_context77.n = 1;
return driver.pressKey('ArrowDown');
case 1:
_context77.n = 2;
return driver.pressKey('ArrowDown');
case 2:
_context77.n = 3;
return driver.pressKey('Enter');
case 3:
expect(onSelect).toHaveBeenCalledWith(options[0]);
case 4:
return _context77.a(2);
}
}, _callee77);
})));
it('should call onSelect on tab key press', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee78() {
var onSelect, _createDriver45, driver;
return _regenerator().w(function (_context78) {
while (1) switch (_context78.n) {
case 0:
onSelect = vi.fn();
_createDriver45 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onSelect: onSelect,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 809,
columnNumber: 11
}
})), driver = _createDriver45.driver;
_context78.n = 1;
return driver.pressKey('ArrowDown');
case 1:
_context78.n = 2;
return driver.pressKey('ArrowDown');
case 2:
_context78.n = 3;
return driver.pressKey('Tab');
case 3:
expect(onSelect).toHaveBeenCalledWith(options[0]);
case 4:
return _context78.a(2);
}
}, _callee78);
})));
it('should not call onSelect on space key press', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee79() {
var onSelect, _createDriver46, driver;
return _regenerator().w(function (_context79) {
while (1) switch (_context79.n) {
case 0:
onSelect = vi.fn();
_createDriver46 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onSelect: onSelect,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 820,
columnNumber: 11
}
})), driver = _createDriver46.driver;
_context79.n = 1;
return driver.focus();
case 1:
_context79.n = 2;
return driver.pressKey('ArrowDown');
case 2:
_context79.n = 3;
return driver.pressKey(' ');
case 3:
expect(onSelect).not.toHaveBeenCalled();
case 4:
return _context79.a(2);
}
}, _callee79);
})));
});
describe('onClose', function () {
it('should call onClose when click on option element', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee80() {
var onClose, _createDriver47, driver, dropdownLayoutDriver;
return _regenerator().w(function (_context80) {
while (1) switch (_context80.n) {
case 0:
onClose = vi.fn();
_createDriver47 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onClose: onClose,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 833,
columnNumber: 11
}
})), driver = _createDriver47.driver, dropdownLayoutDriver = _createDriver47.dropdownLayoutDriver;
_context80.n = 1;
return driver.focus();
case 1:
expect(onClose).not.toHaveBeenCalled();
_context80.n = 2;
return dropdownLayoutDriver.clickAtOption(0);
case 2:
expect(onClose).toHaveBeenCalled();
case 3:
return _context80.a(2);
}
}, _callee80);
})));
it('should call onClose when press escape button', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee81() {
var onClose, _createDriver48, driver;
return _regenerator().w(function (_context81) {
while (1) switch (_context81.n) {
case 0:
onClose = vi.fn();
_createDriver48 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onClose: onClose,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 845,
columnNumber: 11
}
})), driver = _createDriver48.driver;
_context81.n = 1;
return driver.focus();
case 1:
_context81.n = 2;
return driver.pressKey('ArrowDown');
case 2:
expect(onClose).not.toHaveBeenCalled();
_context81.n = 3;
return driver.pressKey('Escape');
case 3:
expect(onClose).toHaveBeenCalled();
case 4:
return _context81.a(2);
}
}, _callee81);
})));
});
describe('onOptionsHide', function () {
it('should call onOptionsHide when click on option element', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee82() {
var onOptionsHide, _createDriver49, driver, dropdownLayoutDriver;
return _regenerator().w(function (_context82) {
while (1) switch (_context82.n) {
case 0:
onOptionsHide = vi.fn();
_createDriver49 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionsHide: onOptionsHide,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 860,
columnNumber: 11
}
})), driver = _createDriver49.driver, dropdownLayoutDriver = _createDriver49.dropdownLayoutDriver;
_context82.n = 1;
return driver.focus();
case 1:
_context82.n = 2;
return dropdownLayoutDriver.clickAtOption(0);
case 2:
expect(onOptionsHide).toHaveBeenCalled();
case 3:
return _context82.a(2);
}
}, _callee82);
})));
it('should call on onOptionsHide key after options hide when select element by enter', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee83() {
var onOptionsHide, _createDriver50, driver;
return _regenerator().w(function (_context83) {
while (1) switch (_context83.n) {
case 0:
onOptionsHide = vi.fn();
_createDriver50 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionsHide: onOptionsHide,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 871,
columnNumber: 11
}
})), driver = _createDriver50.driver;
_context83.n = 1;
return driver.focus();
case 1:
_context83.n = 2;
return driver.pressKey('ArrowDown');
case 2:
_context83.n = 3;
return driver.pressKey('Enter');
case 3:
expect(onOptionsHide).toHaveBeenCalled();
case 4:
return _context83.a(2);
}
}, _callee83);
})));
it('should not call onOptionsHide when closeOnSelect is false and when click by element', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee84() {
var onOptionsHide, _createDriver51, inputDriver, dropdownLayoutDriver;
return _regenerator().w(function (_context84) {
while (1) switch (_context84.n) {
case 0:
onOptionsHide = vi.fn();
_createDriver51 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionsHide: onOptionsHide,
closeOnSelect: false,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 884,
columnNumber: 11
}
})), inputDriver = _createDriver51.inputDriver, dropdownLayoutDriver = _createDriver51.dropdownLayoutDriver;
_context84.n = 1;
return inputDriver.focus();
case 1:
_context84.n = 2;
return dropdownLayoutDriver.clickAtOption(0);
case 2:
expect(onOptionsHide).not.toHaveBeenCalled();
case 3:
return _context84.a(2);
}
}, _callee84);
})));
});
describe('onOptionsShow', function () {
it('should call onOptionsShow when focusing an element with arrow down', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee85() {
var onOptionsShow, _createDriver52, driver;
return _regenerator().w(function (_context85) {
while (1) switch (_context85.n) {
case 0:
onOptionsShow = vi.fn();
_createDriver52 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionsShow: onOptionsShow,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 901,
columnNumber: 11
}
})), driver = _createDriver52.driver;
_context85.n = 1;
return driver.pressKey('ArrowDown');
case 1:
expect(onOptionsShow).toHaveBeenCalled();
case 2:
return _context85.a(2);
}
}, _callee85);
})));
it('should call onOptionsShow after enter text', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee86() {
var onOptionsShow, _createDriver53, inputDriver;
return _regenerator().w(function (_context86) {
while (1) switch (_context86.n) {
case 0:
onOptionsShow = vi.fn();
_createDriver53 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionsShow: onOptionsShow,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 912,
columnNumber: 11
}
})), inputDriver = _createDriver53.inputDriver;
expect(onOptionsShow).not.toHaveBeenCalled();
_context86.n = 1;
return inputDriver.focus();
case 1:
expect(onOptionsShow).not.toHaveBeenCalled();
_context86.n = 2;
return inputDriver.enterText('some value');
case 2:
expect(onOptionsShow).toHaveBeenCalled();
case 3:
return _context86.a(2);
}
}, _callee86);
})));
});
describe('Public methods', function () {
describe('InputWithOptions.focus', function () {
it('should focus input', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee88() {
var ref, _render2, driver, _t73;
return _regenerator().w(function (_context88) {
while (1) switch (_context88.n) {
case 0:
ref = /*#__PURE__*/_react["default"].createRef();
_render2 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
ref: ref,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 927,
columnNumber: 37
}
})), driver = _render2.driver;
_context88.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee87() {
return _regenerator().w(function (_context87) {
while (1) switch (_context87.n) {
case 0:
ref.current.focus();
case 1:
return _context87.a(2);
}
}, _callee87);
})));
case 1:
_t73 = expect;
_context88.n = 2;
return driver.inputDriver.isFocus();
case 2:
_t73(_context88.v).toBe(true);
case 3:
return _context88.a(2);
}
}, _callee88);
})));
});
describe('InputWithOptions.blur', function () {
it('should blur input', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee91() {
var ref, _render3, driver, _t74, _t75;
return _regenerator().w(function (_context91) {
while (1) switch (_context91.n) {
case 0:
ref = /*#__PURE__*/_react["default"].createRef();
_render3 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
ref: ref,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 940,
columnNumber: 37
}
})), driver = _render3.driver;
_context91.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee89() {
return _regenerator().w(function (_context89) {
while (1) switch (_context89.n) {
case 0:
ref.current.focus();
case 1:
return _context89.a(2);
}
}, _callee89);
})));
case 1:
_t74 = expect;
_context91.n = 2;
return driver.inputDriver.isFocus();
case 2:
_t74(_context91.v).toBe(true);
_context91.n = 3;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee90() {
return _regenerator().w(function (_context90) {
while (1) switch (_context90.n) {
case 0:
ref.current.blur();
case 1:
return _context90.a(2);
}
}, _callee90);
})));
case 3:
_t75 = expect;
_context91.n = 4;
return driver.inputDriver.isFocus();
case 4:
_t75(_context91.v).toBe(false);
case 5:
return _context91.a(2);
}
}, _callee91);
})));
});
describe('InputWithOptions.select', function () {
it('should select input', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee93() {
var value, ref, _render4, getByRole, inputElement;
return _regenerator().w(function (_context93) {
while (1) switch (_context93.n) {
case 0:
value = 'hello';
ref = /*#__PURE__*/_react["default"].createRef();
_render4 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
value: value,
ref: ref,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 962,
columnNumber: 13
}
})), getByRole = _render4.getByRole;
inputElement = getByRole('textbox');
_context93.n = 1;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee92() {
return _regenerator().w(function (_context92) {
while (1) switch (_context92.n) {
case 0:
ref.current.select();
case 1:
return _context92.a(2);
}
}, _callee92);
})));
case 1:
expect(inputElement.selectionStart).toBe(0);
expect(inputElement.selectionEnd).toBe(inputElement.value.length);
case 2:
return _context93.a(2);
}
}, _callee93);
})));
});
describe('InputWithOptions.showOptions', function () {
it('should show options', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee95() {
var ref, _render5, driver, _t76, _t77;
return _regenerator().w(function (_context95) {
while (1) switch (_context95.n) {
case 0:
ref = /*#__PURE__*/_react["default"].createRef();
_render5 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
ref: ref,
showOptionsIfEmptyInput: true,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 981,
columnNumber: 13
}
})), driver = _render5.driver;
_t76 = expect;
_context95.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t76(_context95.v).toBe(false);
_context95.n = 2;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee94() {
return _regenerator().w(function (_context94) {
while (1) switch (_context94.n) {
case 0:
ref.current.showOptions();
case 1:
return _context94.a(2);
}
}, _callee94);
})));
case 2:
_t77 = expect;
_context95.n = 3;
return driver.dropdownLayoutDriver.isShown();
case 3:
_t77(_context95.v).toBe(true);
case 4:
return _context95.a(2);
}
}, _callee95);
})));
it('should show options when reading the menu exit duration throws', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee97() {
var ref, originalGetComputedStyle, spy, _render6, driver, _t78;
return _regenerator().w(function (_context97) {
while (1) switch (_context97.p = _context97.n) {
case 0:
ref = /*#__PURE__*/_react["default"].createRef();
originalGetComputedStyle = window.getComputedStyle;
spy = vi.spyOn(window, 'getComputedStyle').mockImplementation(function (node) {
if (node && node.hasAttribute && node.hasAttribute('data-input-parent')) {
throw new TypeError("The provided value is not of type 'Element'.");
}
for (var _len = arguments.length, rest = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
rest[_key - 1] = arguments[_key];
}
return originalGetComputedStyle.call.apply(originalGetComputedStyle, [window, node].concat(rest));
});
_context97.p = 1;
_render6 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
ref: ref,
showOptionsIfEmptyInput: true,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1015,
columnNumber: 15
}
})), driver = _render6.driver;
_context97.n = 2;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee96() {
return _regenerator().w(function (_context96) {
while (1) switch (_context96.n) {
case 0:
ref.current.showOptions();
case 1:
return _context96.a(2);
}
}, _callee96);
})));
case 2:
_t78 = expect;
_context97.n = 3;
return driver.dropdownLayoutDriver.isShown();
case 3:
_t78(_context97.v).toBe(true);
case 4:
_context97.p = 4;
spy.mockRestore();
return _context97.f(4);
case 5:
return _context97.a(2);
}
}, _callee97, null, [[1,, 4, 5]]);
})));
});
describe('InputWithOptions.hideOptions', function () {
it('should hide options', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee101() {
var ref, _render7, driver;
return _regenerator().w(function (_context101) {
while (1) switch (_context101.n) {
case 0:
ref = /*#__PURE__*/_react["default"].createRef();
_render7 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
ref: ref,
showOptionsIfEmptyInput: true,
options: options,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1038,
columnNumber: 13
}
})), driver = _render7.driver;
_context101.n = 1;
return driver.driver.pressKey('ArrowDown');
case 1:
_context101.n = 2;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee98() {
var _t79;
return _regenerator().w(function (_context98) {
while (1) switch (_context98.n) {
case 0:
_t79 = expect;
_context98.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t79(_context98.v).toBe(true);
case 2:
return _context98.a(2);
}
}, _callee98);
})));
case 2:
_context101.n = 3;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee99() {
return _regenerator().w(function (_context99) {
while (1) switch (_context99.n) {
case 0:
ref.current.hideOptions();
case 1:
return _context99.a(2);
}
}, _callee99);
})));
case 3:
_context101.n = 4;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee100() {
var _t80;
return _regenerator().w(function (_context100) {
while (1) switch (_context100.n) {
case 0:
_t80 = expect;
_context100.n = 1;
return driver.dropdownLayoutDriver.isShown();
case 1:
_t80(_context100.v).toBe(false);
case 2:
return _context100.a(2);
}
}, _callee100);
})));
case 4:
return _context101.a(2);
}
}, _callee101);
})));
});
describe('InputWithOptions.clear', function () {
it('should clear input', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee103() {
var ref, _render8, driver, _t81, _t82;
return _regenerator().w(function (_context103) {
while (1) switch (_context103.n) {
case 0:
ref = /*#__PURE__*/_react["default"].createRef();
_render8 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
ref: ref,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1064,
columnNumber: 37
}
})), driver = _render8.driver;
_context103.n = 1;
return driver.inputDriver.enterText('some value');
case 1:
_t81 = expect;
_context103.n = 2;
return driver.inputDriver.getValue();
case 2:
_t81(_context103.v).toBe('some value');
_context103.n = 3;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee102() {
return _regenerator().w(function (_context102) {
while (1) switch (_context102.n) {
case 0:
ref.current.clear();
case 1:
return _context102.a(2);
}
}, _callee102);
})));
case 3:
_t82 = expect;
_context103.n = 4;
return driver.inputDriver.getValue();
case 4:
_t82(_context103.v).toBe('');
case 5:
return _context103.a(2);
}
}, _callee103);
})));
});
describe('onOptionMarked', function () {
it('should call onOptionMarked when option is hovered', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee104() {
var onOptionMarked, _createDriver54, dropdownLayoutDriver;
return _regenerator().w(function (_context104) {
while (1) switch (_context104.n) {
case 0:
onOptionMarked = vi.fn();
_createDriver54 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionMarked: onOptionMarked,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1082,
columnNumber: 13
}
})), dropdownLayoutDriver = _createDriver54.dropdownLayoutDriver;
_context104.n = 1;
return dropdownLayoutDriver.mouseEnterAtOption(1);
case 1:
expect(onOptionMarked).toHaveBeenCalledWith(options[1], 'dropdown-item-1');
case 2:
return _context104.a(2);
}
}, _callee104);
})));
it('should call onOptionMarked with null when mouse leaves a hovered option', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee105() {
var onOptionMarked, _createDriver55, dropdownLayoutDriver;
return _regenerator().w(function (_context105) {
while (1) switch (_context105.n) {
case 0:
onOptionMarked = vi.fn();
_createDriver55 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionMarked: onOptionMarked,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1098,
columnNumber: 13
}
})), dropdownLayoutDriver = _createDriver55.dropdownLayoutDriver;
_context105.n = 1;
return dropdownLayoutDriver.mouseEnterAtOption(1);
case 1:
_context105.n = 2;
return dropdownLayoutDriver.mouseLeaveAtOption(1);
case 2:
expect(onOptionMarked).toHaveBeenCalledWith(null, undefined);
expect(onOptionMarked).toHaveBeenCalledTimes(2);
case 3:
return _context105.a(2);
}
}, _callee105);
})));
it('should call onOptionMarked when down key is pressed and list type is select', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee106() {
var onOptionMarked, _createDriver56, dropdownLayoutDriver;
return _regenerator().w(function (_context106) {
while (1) switch (_context106.n) {
case 0:
onOptionMarked = vi.fn();
_createDriver56 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionMarked: onOptionMarked,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1112,
columnNumber: 13
}
})), dropdownLayoutDriver = _createDriver56.dropdownLayoutDriver;
_context106.n = 1;
return dropdownLayoutDriver.pressDownKey();
case 1:
_context106.n = 2;
return dropdownLayoutDriver.pressDownKey();
case 2:
expect(onOptionMarked).toHaveBeenCalledTimes(2);
expect(onOptionMarked.mock.calls[0]).toEqual([options[0], 'dropdown-item-0']);
expect(onOptionMarked.mock.calls[1]).toEqual([options[1], 'dropdown-item-1']);
case 3:
return _context106.a(2);
}
}, _callee106);
})));
it('should not call onOptionMarked when an option is clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee107() {
var onOptionMarked, _createDriver57, dropdownLayoutDriver;
return _regenerator().w(function (_context107) {
while (1) switch (_context107.n) {
case 0:
onOptionMarked = vi.fn();
_createDriver57 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionMarked: onOptionMarked,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1133,
columnNumber: 13
}
})), dropdownLayoutDriver = _createDriver57.dropdownLayoutDriver;
_context107.n = 1;
return dropdownLayoutDriver.clickAtOption(1);
case 1:
// expecting to be called once, because clickAtOption hovers and then clicks
expect(onOptionMarked).toHaveBeenCalledTimes(1);
case 2:
return _context107.a(2);
}
}, _callee107);
})));
it('should call onOptionMarked with undefined when options change and the marked option is removed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee108() {
var onOptionMarked, _render9, rerender, dropdownLayoutDriver;
return _regenerator().w(function (_context108) {
while (1) switch (_context108.n) {
case 0:
onOptionMarked = vi.fn();
_render9 = render(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
onOptionMarked: onOptionMarked,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1149,
columnNumber: 13
}
})), rerender = _render9.rerender, dropdownLayoutDriver = _render9.driver.dropdownLayoutDriver;
_context108.n = 1;
return dropdownLayoutDriver.mouseEnterAtOption(1);
case 1:
expect(onOptionMarked.mock.calls[0]).toEqual([options[1], 'dropdown-item-1']);
rerender(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options.slice(2),
onOptionMarked: onOptionMarked,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1160,
columnNumber: 13
}
}));
expect(onOptionMarked.mock.calls[1]).toEqual([null, undefined]);
case 2:
return _context108.a(2);
}
}, _callee108);
})));
});
});
describe('mobile', function () {
it('should open Drawer when input is clicked in mobile mode', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee111() {
var rendered, driver, inputDriver, _t83;
return _regenerator().w(function (_context111) {
while (1) switch (_context111.n) {
case 0:
rendered = render(/*#__PURE__*/_react["default"].createElement(_WixDesignSystemProvider.WixDesignSystemProvider, {
mobile: true,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1173,
columnNumber: 11
}
}, /*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
showOptionsIfEmptyInput: true,
__self: _this2,
__source: {
fileName: _jsxFileName,
lineNumber: 1174,
columnNumber: 13
}
})));
driver = rendered.driver;
inputDriver = driver.inputDriver;
_t83 = expect;
_context111.n = 1;
return inputDriver.exists();
case 1:
_t83(_context111.v).toBe(true);
_context111.n = 2;
return (0, _react2.act)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee109() {
return _regenerator().w(function (_context109) {
while (1) switch (_context109.n) {
case 0:
_context109.n = 1;
return inputDriver.click();
case 1:
return _context109.a(2);
}
}, _callee109);
})));
case 2:
_context111.n = 3;
return (0, _react2.waitFor)(/*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee110() {
var drawerContent;
return _regenerator().w(function (_context110) {
while (1) switch (_context110.n) {
case 0:
drawerContent = document.body.querySelector('[data-hook="drawer-content"]');
expect(drawerContent).toBeTruthy();
case 1:
return _context110.a(2);
}
}, _callee110);
})));
case 3:
return _context111.a(2);
}
}, _callee111);
})));
});
}
describe('[async] only', function () {
var render = (0, _react2.createRendererWithUniDriver)(_InputWithOptionsPrivateUni.inputWithOptionsUniDriverFactory);
var createDriver = function createDriver(jsx) {
return render(jsx).driver;
};
describe('native', function () {
it('should invoke onSelect when an option is clicked', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee112() {
var sampleOptions, selectedId, onSelect, _createDriver58, driver;
return _regenerator().w(function (_context112) {
while (1) switch (_context112.n) {
case 0:
sampleOptions = [{
id: 50,
value: 'Option 1'
}, {
id: 30,
value: 'Option 2'
}, {
id: 20,
value: 'Option 3'
}];
selectedId = 30;
onSelect = vi.fn();
_createDriver58 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: sampleOptions,
onSelect: onSelect,
"native": true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 1211,
columnNumber: 11
}
})), driver = _createDriver58.driver;
_context112.n = 1;
return driver.selectOptionById(selectedId);
case 1:
expect(onSelect).toHaveBeenCalledWith(sampleOptions[1]);
expect(onSelect).toHaveBeenCalledTimes(1);
case 2:
return _context112.a(2);
}
}, _callee112);
})));
it('should not invoke onSelect when an option is clicked and disabled prop is passed', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee113() {
var render, createDriver, sampleOptions, onSelect, _createDriver59, driver;
return _regenerator().w(function (_context113) {
while (1) switch (_context113.n) {
case 0:
render = (0, _react2.createRendererWithUniDriver)(_InputWithOptionsPrivateUni.inputWithOptionsUniDriverFactory);
createDriver = function createDriver(jsx) {
return render(jsx).driver;
};
sampleOptions = [{
id: 1,
value: 'Option 1'
}, {
id: 2,
value: 'Option 2'
}];
onSelect = vi.fn();
_createDriver59 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: sampleOptions,
onSelect: onSelect,
"native": true,
disabled: true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 1238,
columnNumber: 11
}
})), driver = _createDriver59.driver;
_context113.n = 1;
return driver.selectOptionById(2);
case 1:
expect(onSelect).toHaveBeenCalledTimes(0);
case 2:
return _context113.a(2);
}
}, _callee113);
})));
it('should invoke onChange when an option is pressed in native dropdown', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee114() {
var sampleOptions, selectedId, onChange, _createDriver60, driver;
return _regenerator().w(function (_context114) {
while (1) switch (_context114.n) {
case 0:
sampleOptions = [{
id: 50,
value: 'Option 1'
}, {
id: 30,
value: 'Option 2'
}, {
id: 20,
value: 'Option 3'
}];
selectedId = 30;
onChange = vi.fn();
_createDriver60 = createDriver(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: sampleOptions,
value: "some value",
onChange: onChange,
"native": true,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 1260,
columnNumber: 11
}
})), driver = _createDriver60.driver;
_context114.n = 1;
return driver.selectOptionById(selectedId);
case 1:
expect(onChange).toHaveBeenCalledTimes(1);
expect(onChange.mock.calls[0][0].target.selectedIndex).toBe('1');
case 2:
return _context114.a(2);
}
}, _callee114);
})));
});
});
describe('semantic classes', function () {
afterEach(_react3.cleanup);
it('should render the root block with the size variant and consumer className', function () {
var _rtlRender = (0, _react3.render)(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
className: "consumer-class",
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 1281,
columnNumber: 9
}
})),
container = _rtlRender.container;
var root = container.querySelector('.wds-input-with-options');
expect(root).not.toBeNull();
expect(root.className).toContain('wds-input-with-options--size-medium');
expect(root.className).toContain('consumer-class');
expect(container.querySelector('.wds-input-with-options__input-container')).not.toBeNull();
});
it('should render the menu container and dropdown layout classes when open', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee115() {
var _rtlRender2, container;
return _regenerator().w(function (_context115) {
while (1) switch (_context115.n) {
case 0:
_rtlRender2 = (0, _react3.render)(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: options,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 1294,
columnNumber: 39
}
})), container = _rtlRender2.container;
_react3.fireEvent.keyDown(container.querySelector('input'), {
key: 'ArrowDown'
});
_context115.n = 1;
return (0, _react3.waitFor)(function () {
return expect(document.querySelector('.wds-input-with-options__menu-container')).not.toBeNull();
});
case 1:
expect(document.querySelector('.wds-input-with-options__dropdown-layout')).not.toBeNull();
expect(document.querySelector('.wds-input-with-options__menu-container--empty')).toBeNull();
case 2:
return _context115.a(2);
}
}, _callee115);
})));
it('should mark the menu container as empty when there is no dropdown content', /*#__PURE__*/(0, _asyncToGenerator2["default"])(/*#__PURE__*/_regenerator().m(function _callee116() {
var _rtlRender3, container;
return _regenerator().w(function (_context116) {
while (1) switch (_context116.n) {
case 0:
_rtlRender3 = (0, _react3.render)(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
options: [],
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 1316,
columnNumber: 39
}
})), container = _rtlRender3.container;
_react3.fireEvent.keyDown(container.querySelector('input'), {
key: 'ArrowDown'
});
_context116.n = 1;
return (0, _react3.waitFor)(function () {
return expect(document.querySelector('.wds-input-with-options__menu-container--empty')).not.toBeNull();
});
case 1:
return _context116.a(2);
}
}, _callee116);
})));
it('should render the native select classes in native mode', function () {
var _rtlRender4 = (0, _react3.render)(/*#__PURE__*/_react["default"].createElement(_InputWithOptions.InputWithOptions, {
"native": true,
options: options,
__self: _this,
__source: {
fileName: _jsxFileName,
lineNumber: 1333,
columnNumber: 9
}
})),
container = _rtlRender4.container;
expect(container.querySelector('.wds-input-with-options__native-select-wrapper')).not.toBeNull();
expect(container.querySelector('.wds-input-with-options__native-select')).not.toBeNull();
});
});
});