wix-style-react
Version:
wix-style-react
268 lines (208 loc) • 10.2 kB
JavaScript
;
var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _ = require('.');
var _2 = _interopRequireDefault(_);
var _IconWithOptions = require('./IconWithOptions.driver');
var _IconWithOptions2 = _interopRequireDefault(_IconWithOptions);
var _driverFactory = require('wix-ui-test-utils/driver-factory');
var _testkit = require('../../testkit');
var _enzyme = require('../../testkit/enzyme');
var _enzyme2 = require('enzyme');
var _testUtils = require('react-dom/test-utils');
var _testUtils2 = _interopRequireDefault(_testUtils);
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { step("next", value); }, function (err) { step("throw", err); }); } } return step("next"); }); }; }
function _objectWithoutProperties(obj, keys) { var target = {}; for (var i in obj) { if (keys.indexOf(i) >= 0) continue; if (!Object.prototype.hasOwnProperty.call(obj, i)) continue; target[i] = obj[i]; } return target; }
describe('IconWithOptions', function () {
var createDriver = (0, _driverFactory.createDriverFactory)(_IconWithOptions2.default);
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: _react2.default.createElement(
'span',
{ style: { color: 'brown' } },
'Option 4'
) }];
var optionsToArray = function optionsToArray(_options) {
return _options.map(function (option) {
var value = option.value,
props = _objectWithoutProperties(option, ['value']);
return _react2.default.createElement(
_2.default.Option,
_extends({ key: option.id }, props),
value
);
});
};
var iconWithOptions = function iconWithOptions(props) {
return _react2.default.createElement(
_2.default,
props,
_react2.default.createElement(_2.default.Icon, null),
optionsToArray(options)
);
};
it('should have a Button and a hidden DropdownLayout by default', function () {
var _createDriver = createDriver(iconWithOptions()),
driver = _createDriver.driver,
dropdownLayoutDriver = _createDriver.dropdownLayoutDriver;
expect(driver.exists()).toBeTruthy();
expect(dropdownLayoutDriver.exists()).toBeTruthy();
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
});
it('should display dropdown only on mouse hover', function () {
var _createDriver2 = createDriver(iconWithOptions()),
driver = _createDriver2.driver,
dropdownLayoutDriver = _createDriver2.dropdownLayoutDriver;
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
driver.mouseEnter();
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
driver.mouseLeave();
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
});
it('should hide the dropdown when an option gets selected', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var _createDriver3, driver, dropdownLayoutDriver;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_createDriver3 = createDriver(iconWithOptions()), driver = _createDriver3.driver, dropdownLayoutDriver = _createDriver3.dropdownLayoutDriver;
driver.mouseEnter();
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
dropdownLayoutDriver.clickAtOption(0);
expect(dropdownLayoutDriver.isShown()).toBeFalsy();
case 5:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
})));
it('should not hide the dropdown when selecting an option which is already selected', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var _createDriver4, driver, dropdownLayoutDriver;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_createDriver4 = createDriver(iconWithOptions({ selectedId: 0 })), driver = _createDriver4.driver, dropdownLayoutDriver = _createDriver4.dropdownLayoutDriver;
driver.mouseEnter();
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
dropdownLayoutDriver.clickAtOption(0);
expect(dropdownLayoutDriver.isShown()).toBeTruthy();
case 5:
case 'end':
return _context2.stop();
}
}
}, _callee2, undefined);
})));
it('should call onSelect when an option is clicked', function () {
var onSelect = jest.fn();
var _createDriver5 = createDriver(iconWithOptions({ onSelect: onSelect })),
driver = _createDriver5.driver,
dropdownLayoutDriver = _createDriver5.dropdownLayoutDriver;
driver.mouseEnter();
dropdownLayoutDriver.clickAtOption(0);
expect(onSelect).toBeCalledWith(options[0]);
});
it('should not call onSelect when a selected option is pressed', function () {
var onSelect = jest.fn();
var _createDriver6 = createDriver(iconWithOptions({ onSelect: onSelect, selectedId: options[0].id })),
driver = _createDriver6.driver,
dropdownLayoutDriver = _createDriver6.dropdownLayoutDriver;
driver.mouseEnter();
dropdownLayoutDriver.clickAtOption(0);
expect(onSelect).not.toBeCalled();
});
it('should have arrow in the dropdown by default', function () {
var _createDriver7 = createDriver(iconWithOptions()),
driver = _createDriver7.driver,
dropdownLayoutDriver = _createDriver7.dropdownLayoutDriver;
driver.mouseEnter();
expect(dropdownLayoutDriver.hasTopArrow()).toBeTruthy();
});
it('should not have dropDirectin up by default', function () {
var _createDriver8 = createDriver(iconWithOptions()),
dropdownLayoutDriver = _createDriver8.dropdownLayoutDriver;
expect(dropdownLayoutDriver.isDropDirectionUp()).toBe(false);
});
it('should have dropDirectin up', function () {
var _createDriver9 = createDriver(iconWithOptions({ dropDirectionUp: true })),
dropdownLayoutDriver = _createDriver9.dropdownLayoutDriver;
expect(dropdownLayoutDriver.isDropDirectionUp()).toBe(true);
});
describe('icon', function () {
it('should not have blue hovered icon by default', function () {
var _createDriver10 = createDriver(iconWithOptions()),
driver = _createDriver10.driver;
expect(driver.isIconBlue()).toBe(false);
});
it('should not have blue hovered icon when hovering the outer wrapper', function () {
var _createDriver11 = createDriver(iconWithOptions()),
driver = _createDriver11.driver;
_testUtils2.default.Simulate.mouseEnter(driver.element());
expect(driver.isIconBlue()).toBe(false);
});
it('should have blue hovered icon when hovering over the icon', function () {
var _createDriver12 = createDriver(iconWithOptions()),
driver = _createDriver12.driver;
driver.mouseEnter();
expect(driver.isIconBlue()).toBe(true);
});
it('should have blue hovered icon when hovering over the icon, then moving the mouse to the outer wrapper', function () {
var _createDriver13 = createDriver(iconWithOptions()),
driver = _createDriver13.driver;
driver.mouseEnter();
_testUtils2.default.Simulate.mouseLeave(driver.iconWrapper());
expect(driver.isIconBlue()).toBe(true);
_testUtils2.default.Simulate.mouseEnter(driver.element());
expect(driver.isIconBlue()).toBe(true);
});
it('should not have blue hovered icon when hovering over the icon, then performing mouseLeave from the outer wrapper', function () {
var _createDriver14 = createDriver(iconWithOptions()),
driver = _createDriver14.driver;
driver.mouseEnter();
expect(driver.isIconBlue()).toBe(true);
driver.mouseLeave();
expect(driver.isIconBlue()).toBe(false);
});
});
describe('testkit', function () {
it('should exist', function () {
var div = document.createElement('div');
var dataHook = 'myDataHook';
var wrapper = div.appendChild(_testUtils2.default.renderIntoDocument(_react2.default.createElement(
'div',
null,
_react2.default.createElement(
_2.default,
{ dataHook: dataHook },
_react2.default.createElement(_2.default.Icon, null),
optionsToArray(options)
)
)));
var iconWithOptionsTestkit = (0, _testkit.iconWithOptionsTestkitFactory)({
wrapper: wrapper,
dataHook: dataHook
});
expect(iconWithOptionsTestkit.driver.exists()).toBeTruthy();
expect(iconWithOptionsTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
});
});
describe('enzyme testkit', function () {
it('should exist', function () {
var dataHook = 'myDataHook';
var wrapper = (0, _enzyme2.mount)(_react2.default.createElement(
_2.default,
{ dataHook: dataHook },
_react2.default.createElement(_2.default.Icon, null),
optionsToArray(options)
));
var iconWithOptionsTestkit = (0, _enzyme.iconWithOptionsTestkitFactory)({
wrapper: wrapper,
dataHook: dataHook
});
expect(iconWithOptionsTestkit.driver.exists()).toBeTruthy();
expect(iconWithOptionsTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
});
});
});