wix-style-react
Version:
wix-style-react
251 lines (203 loc) • 9.86 kB
JavaScript
var _this = this;
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; };
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; }
import React from 'react';
import IconWithOptions from '.';
import IconWithOptionsDriverFactory from './IconWithOptions.driver';
import { createDriverFactory } from 'wix-ui-test-utils/driver-factory';
import { iconWithOptionsTestkitFactory } from '../../testkit';
import { iconWithOptionsTestkitFactory as enzymeIconWithOptionsTestkitFactory } from '../../testkit/enzyme';
import { mount } from 'enzyme';
import ReactTestUtils from 'react-dom/test-utils';
describe('IconWithOptions', function () {
var createDriver = createDriverFactory(IconWithOptionsDriverFactory);
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: React.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 React.createElement(
IconWithOptions.Option,
_extends({ key: option.id }, props),
value
);
});
};
var iconWithOptions = function iconWithOptions(props) {
return React.createElement(
IconWithOptions,
props,
React.createElement(IconWithOptions.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, _this);
})));
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, _this);
})));
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;
ReactTestUtils.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();
ReactTestUtils.Simulate.mouseLeave(driver.iconWrapper());
expect(driver.isIconBlue()).toBe(true);
ReactTestUtils.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(ReactTestUtils.renderIntoDocument(React.createElement(
'div',
null,
React.createElement(
IconWithOptions,
{ dataHook: dataHook },
React.createElement(IconWithOptions.Icon, null),
optionsToArray(options)
)
)));
var iconWithOptionsTestkit = 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 = mount(React.createElement(
IconWithOptions,
{ dataHook: dataHook },
React.createElement(IconWithOptions.Icon, null),
optionsToArray(options)
));
var iconWithOptionsTestkit = enzymeIconWithOptionsTestkitFactory({
wrapper: wrapper,
dataHook: dataHook
});
expect(iconWithOptionsTestkit.driver.exists()).toBeTruthy();
expect(iconWithOptionsTestkit.dropdownLayoutDriver.exists()).toBeTruthy();
});
});
});