wix-style-react
Version:
wix-style-react
416 lines (336 loc) • 13.8 kB
JavaScript
'use strict';
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 _AutoExampleDriver = require('wix-storybook-utils/AutoExampleDriver');
var _AutoExampleDriver2 = _interopRequireDefault(_AutoExampleDriver);
var _eyesIt = require('../../test/utils/eyes-it');
var _protractor = require('../../testkit/protractor');
var _protractor2 = require('wix-ui-test-utils/protractor');
var _storybookHelpers = require('../../test/utils/storybook-helpers');
var _storySettings = require('../../stories/Popover/storySettings');
var _Popover = require('./Popover');
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"); }); }; }
describe('Popover', function () {
var eyes = (0, _eyesIt.eyesItInstance)({
enableSnapshotAtBrowserGet: false
});
var storyUrl = (0, _protractor2.createStoryUrl)({
kind: _storySettings.storySettings.kind,
story: _storySettings.storySettings.storyName
});
var testStoryUrl = function testStoryUrl(testName) {
return (0, _storybookHelpers.createTestStoryUrl)(_extends({}, _storySettings.storySettings, { testName: testName }));
};
var createDriver = function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var dataHook = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : _storySettings.storySettings.dataHook;
var driver;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
driver = (0, _protractor.popoverTestkitFactory)({ dataHook: dataHook });
_context.next = 3;
return (0, _protractor2.waitForVisibilityOf)(driver.element(), 'Cannot find Popover component ' + dataHook);
case 3:
_context.next = 5;
return (0, _protractor2.scrollToElement)(driver.element());
case 5:
return _context.abrupt('return', driver);
case 6:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
}));
return function createDriver() {
return _ref.apply(this, arguments);
};
}();
describe('examples', function () {
beforeAll(_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
_context2.next = 2;
return browser.get(storyUrl);
case 2:
case 'end':
return _context2.stop();
}
}
}, _callee2, undefined);
})));
beforeEach(_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return _AutoExampleDriver2.default.reset();
case 2:
case 'end':
return _context3.stop();
}
}
}, _callee3, undefined);
})));
eyes.it('should render', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_context4.next = 2;
return _AutoExampleDriver2.default.setProps({ shown: true });
case 2:
_context4.next = 4;
return createDriver();
case 4:
case 'end':
return _context4.stop();
}
}
}, _callee4, undefined);
})));
eyes.it('should render with dark theme', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
_context5.next = 2;
return _AutoExampleDriver2.default.setProps({ shown: true, theme: 'dark' });
case 2:
_context5.next = 4;
return createDriver();
case 4:
case 'end':
return _context5.stop();
}
}
}, _callee5, undefined);
})));
eyes.it('AppendTo prop example', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
return regeneratorRuntime.wrap(function _callee6$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
_context6.next = 2;
return createDriver('story-popover-append-to');
case 2:
case 'end':
return _context6.stop();
}
}
}, _callee6, undefined);
})));
eyes.it('positioning example', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
var examplePlacements, _iteratorNormalCompletion, _didIteratorError, _iteratorError, _iterator, _step, placement, driver;
return regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
examplePlacements = _Popover.placements.filter(function (p) {
return !p.includes('auto');
});
// Scroll and focus on the example container
_context7.next = 3;
return createDriver('story-popover-positioning');
case 3:
_iteratorNormalCompletion = true;
_didIteratorError = false;
_iteratorError = undefined;
_context7.prev = 6;
_iterator = examplePlacements[Symbol.iterator]();
case 8:
if (_iteratorNormalCompletion = (_step = _iterator.next()).done) {
_context7.next = 17;
break;
}
placement = _step.value;
driver = (0, _protractor.popoverTestkitFactory)({
dataHook: 'story-popover-positioning-' + placement
});
_context7.next = 13;
return driver.mouseEnter();
case 13:
eyes.checkWindow(_Popover.placements + ' position');
case 14:
_iteratorNormalCompletion = true;
_context7.next = 8;
break;
case 17:
_context7.next = 23;
break;
case 19:
_context7.prev = 19;
_context7.t0 = _context7['catch'](6);
_didIteratorError = true;
_iteratorError = _context7.t0;
case 23:
_context7.prev = 23;
_context7.prev = 24;
if (!_iteratorNormalCompletion && _iterator.return) {
_iterator.return();
}
case 26:
_context7.prev = 26;
if (!_didIteratorError) {
_context7.next = 29;
break;
}
throw _iteratorError;
case 29:
return _context7.finish(26);
case 30:
return _context7.finish(23);
case 31:
case 'end':
return _context7.stop();
}
}
}, _callee7, undefined, [[6, 19, 23, 31], [24,, 26, 30]]);
})));
eyes.it('Flip behaviour example', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
return regeneratorRuntime.wrap(function _callee8$(_context8) {
while (1) {
switch (_context8.prev = _context8.next) {
case 0:
_context8.next = 2;
return createDriver('story-popover-flip-behaviour');
case 2:
case 'end':
return _context8.stop();
}
}
}, _callee8, undefined);
})));
eyes.it('Fixed behaviour example', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
var dataHooks, _iteratorNormalCompletion2, _didIteratorError2, _iteratorError2, _iterator2, _step2, dataHook;
return regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
dataHooks = ['story-popover-fixed-enabled', 'story-popover-fixed-disabled', 'story-popover-fixed-disabled-flip-disabled'];
_iteratorNormalCompletion2 = true;
_didIteratorError2 = false;
_iteratorError2 = undefined;
_context9.prev = 4;
_iterator2 = dataHooks[Symbol.iterator]();
case 6:
if (_iteratorNormalCompletion2 = (_step2 = _iterator2.next()).done) {
_context9.next = 16;
break;
}
dataHook = _step2.value;
_context9.next = 10;
return createDriver(dataHook);
case 10:
_context9.next = 12;
return browser.executeScript('document.querySelector(\'[data-hook="' + dataHook + '"]\').scrollTop = 50');
case 12:
eyes.checkWindow(dataHook + ' scrolled down');
case 13:
_iteratorNormalCompletion2 = true;
_context9.next = 6;
break;
case 16:
_context9.next = 22;
break;
case 18:
_context9.prev = 18;
_context9.t0 = _context9['catch'](4);
_didIteratorError2 = true;
_iteratorError2 = _context9.t0;
case 22:
_context9.prev = 22;
_context9.prev = 23;
if (!_iteratorNormalCompletion2 && _iterator2.return) {
_iterator2.return();
}
case 25:
_context9.prev = 25;
if (!_didIteratorError2) {
_context9.next = 28;
break;
}
throw _iteratorError2;
case 28:
return _context9.finish(25);
case 29:
return _context9.finish(22);
case 30:
case 'end':
return _context9.stop();
}
}
}, _callee9, undefined, [[4, 18, 22, 30], [23,, 25, 29]]);
})));
});
describe('test stories', function () {
var checkTestStory = function () {
var _ref10 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10(testName) {
return regeneratorRuntime.wrap(function _callee10$(_context10) {
while (1) {
switch (_context10.prev = _context10.next) {
case 0:
_context10.next = 2;
return browser.get(testStoryUrl(testName));
case 2:
eyes.checkWindow(testName);
case 3:
case 'end':
return _context10.stop();
}
}
}, _callee10, undefined);
}));
return function checkTestStory(_x2) {
return _ref10.apply(this, arguments);
};
}();
eyes.it('check auto positioning', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee11() {
return regeneratorRuntime.wrap(function _callee11$(_context11) {
while (1) {
switch (_context11.prev = _context11.next) {
case 0:
_context11.next = 2;
return checkTestStory(_storySettings.testStories.AUTO_POSITIONING);
case 2:
case 'end':
return _context11.stop();
}
}
}, _callee11, undefined);
})));
eyes.it('check arrow adjusting', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
return regeneratorRuntime.wrap(function _callee12$(_context12) {
while (1) {
switch (_context12.prev = _context12.next) {
case 0:
_context12.next = 2;
return checkTestStory(_storySettings.testStories.ARROW_ADJUSTING);
case 2:
case 'end':
return _context12.stop();
}
}
}, _callee12, undefined);
})));
eyes.it('check arrow edge adjusting', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
return regeneratorRuntime.wrap(function _callee13$(_context13) {
while (1) {
switch (_context13.prev = _context13.next) {
case 0:
_context13.next = 2;
return checkTestStory(_storySettings.testStories.ARROW_EDGE_ADJUSTING);
case 2:
case 'end':
return _context13.stop();
}
}
}, _callee13, undefined);
})));
});
});