wix-style-react
Version:
wix-style-react
669 lines (550 loc) • 23.1 kB
JavaScript
'use strict';
var _eyes = require('eyes.it');
var _eyes2 = _interopRequireDefault(_eyes);
var _protractor = require('../../testkit/protractor');
var _protractor2 = require('wix-ui-test-utils/protractor');
var _storybookHelpers = require('../../test/utils/storybook-helpers');
var _RichTextArea = require('../../stories/RichTextArea/RichTextArea.story');
var _AutoExampleDriver = require('wix-storybook-utils/AutoExampleDriver');
var _AutoExampleDriver2 = _interopRequireDefault(_AutoExampleDriver);
var _RichTextAreaProtractor = require('./RichTextArea.protractor.driver');
var _privateDrivers = require('../../test/utils/private-drivers');
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"); }); }; }
var EDITOR_TAB_ORDINAL = 7;
describe('RichTextArea', function () {
var storyUrl = (0, _storybookHelpers.getStoryUrl)(_RichTextArea.settings.category, _RichTextArea.settings.storyName);
var richTextAreaTestkit = (0, _protractor.richTextAreaTestkitFactory)({
dataHook: _RichTextArea.settings.dataHook
});
var pressTab = function pressTab(times) {
return browser.actions().sendKeys(Array(times).fill().map(function () {
return protractor.Key.TAB;
})).perform();
};
var focusEditor = function focusEditor() {
return pressTab(EDITOR_TAB_ORDINAL);
};
// TODO: We can change this to beforeAll (to make the test go faster),
// after we have a way to reset the focus before Each test.
beforeEach(function () {
browser.get(storyUrl);
});
beforeEach(_asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
_context.next = 2;
return (0, _protractor2.waitForVisibilityOf)(richTextAreaTestkit.element());
case 2:
case 'end':
return _context.stop();
}
}
}, _callee, undefined);
})));
_eyes2.default.it('should render default props', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var index;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
expect(richTextAreaTestkit.isEditorFocused()).toBe(false, 'isEditorFocused');
// TODO: replace with forEachAsync
for (index = 0; index < _RichTextAreaProtractor.BUTTON_TYPES.length; index++) {
expect(richTextAreaTestkit.isButtonFocused(index)).toBe(false, 'isButtonFocused');
}
case 2:
case 'end':
return _context2.stop();
}
}
}, _callee2, undefined);
})));
describe('Focus', function () {
_eyes2.default.it('should show focus styles for editor', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.t0 = expect;
_context3.next = 3;
return richTextAreaTestkit.isEditorFocused();
case 3:
_context3.t1 = _context3.sent;
(0, _context3.t0)(_context3.t1).toBe(false);
_context3.next = 7;
return focusEditor();
case 7:
_context3.t2 = expect;
_context3.next = 10;
return richTextAreaTestkit.isEditorFocused();
case 10:
_context3.t3 = _context3.sent;
(0, _context3.t2)(_context3.t3).toBe(true);
case 12:
case 'end':
return _context3.stop();
}
}
}, _callee3, undefined);
})));
_eyes2.default.it('should show focus styles when navigated by keyboard', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
var index, type, buttonDriver;
return regeneratorRuntime.wrap(function _callee4$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
index = 0;
case 1:
if (!(index < _RichTextAreaProtractor.BUTTON_TYPES.length)) {
_context4.next = 47;
break;
}
type = _RichTextAreaProtractor.BUTTON_TYPES[index];
buttonDriver = (0, _privateDrivers.flattenInternalDriver)(richTextAreaTestkit.getToolbarButtonDriver(index));
_context4.t0 = expect;
_context4.next = 7;
return buttonDriver.isFocused();
case 7:
_context4.t1 = _context4.sent;
_context4.t2 = type + ' - before - focused';
(0, _context4.t0)(_context4.t1).toBe(false, _context4.t2);
_context4.t3 = expect;
_context4.next = 13;
return buttonDriver.hasFocusState();
case 13:
_context4.t4 = _context4.sent;
_context4.t5 = type + ' - before - hasFocusState';
(0, _context4.t3)(_context4.t4).toBe(false, _context4.t5);
_context4.t6 = expect;
_context4.next = 19;
return buttonDriver.hasFocusVisibleState();
case 19:
_context4.t7 = _context4.sent;
_context4.t8 = type + ' - before - hasFocusVisibleState';
(0, _context4.t6)(_context4.t7).toBe(false, _context4.t8);
_context4.next = 24;
return pressTab(1);
case 24:
_context4.t9 = expect;
_context4.next = 27;
return buttonDriver.isFocused();
case 27:
_context4.t10 = _context4.sent;
_context4.t11 = type + ' - after - focused';
(0, _context4.t9)(_context4.t10).toBe(true, _context4.t11);
_context4.t12 = expect;
_context4.next = 33;
return buttonDriver.hasFocusState();
case 33:
_context4.t13 = _context4.sent;
_context4.t14 = type + ' - after - hasFocusState';
(0, _context4.t12)(_context4.t13).toBe(true, _context4.t14);
_context4.t15 = expect;
_context4.next = 39;
return buttonDriver.hasFocusVisibleState();
case 39:
_context4.t16 = _context4.sent;
_context4.t17 = type + ' - after - hasFocusVisibleState';
(0, _context4.t15)(_context4.t16).toBe(true, _context4.t17);
_context4.next = 44;
return _eyes2.default.checkWindow(type + ' button with focus-visible');
case 44:
index++;
_context4.next = 1;
break;
case 47:
case 'end':
return _context4.stop();
}
}
}, _callee4, undefined);
})));
it('should NOT show focus styles when clicking buttons by mouse', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
var index, type, buttonDriver;
return regeneratorRuntime.wrap(function _callee5$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
index = 0;
case 1:
if (!(index < _RichTextAreaProtractor.BUTTON_TYPES.length)) {
_context5.next = 45;
break;
}
type = _RichTextAreaProtractor.BUTTON_TYPES[index];
buttonDriver = (0, _privateDrivers.flattenInternalDriver)(richTextAreaTestkit.getToolbarButtonDriver(index));
_context5.t0 = expect;
_context5.next = 7;
return buttonDriver.isFocused();
case 7:
_context5.t1 = _context5.sent;
_context5.t2 = type + ' - before - focused';
(0, _context5.t0)(_context5.t1).toBe(false, _context5.t2);
_context5.t3 = expect;
_context5.next = 13;
return buttonDriver.hasFocusState();
case 13:
_context5.t4 = _context5.sent;
_context5.t5 = type + ' - before - hasFocusState';
(0, _context5.t3)(_context5.t4).toBe(false, _context5.t5);
_context5.t6 = expect;
_context5.next = 19;
return buttonDriver.hasFocusVisibleState();
case 19:
_context5.t7 = _context5.sent;
_context5.t8 = type + ' - before - hasFocusVisibleState';
(0, _context5.t6)(_context5.t7).toBe(false, _context5.t8);
_context5.next = 24;
return buttonDriver.clickRoot();
case 24:
_context5.t9 = expect;
_context5.next = 27;
return buttonDriver.isFocused();
case 27:
_context5.t10 = _context5.sent;
_context5.t11 = type + ' - after - focused';
(0, _context5.t9)(_context5.t10).toBe(false, _context5.t11);
_context5.t12 = expect;
_context5.next = 33;
return buttonDriver.hasFocusState();
case 33:
_context5.t13 = _context5.sent;
_context5.t14 = type + ' - after - hasFocusState';
(0, _context5.t12)(_context5.t13).toBe(false, _context5.t14);
_context5.t15 = expect;
_context5.next = 39;
return buttonDriver.hasFocusVisibleState();
case 39:
_context5.t16 = _context5.sent;
_context5.t17 = type + ' - after - hasFocusVisibleState';
(0, _context5.t15)(_context5.t16).toBe(false, _context5.t17);
case 42:
index++;
_context5.next = 1;
break;
case 45:
case 'end':
return _context5.stop();
}
}
}, _callee5, undefined);
})));
});
describe('Link', function () {
it('should insert link to empty RTE', _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 focusEditor();
case 2:
_context6.next = 4;
return richTextAreaTestkit.clickButtonByType('link');
case 4:
_context6.next = 6;
return richTextAreaTestkit.isLinkDialogVisible();
case 6:
_context6.next = 8;
return richTextAreaTestkit.enterLinkUrl('http://www.wix.com');
case 8:
_context6.next = 10;
return richTextAreaTestkit.enterLinkText('WixSite');
case 10:
_context6.next = 12;
return richTextAreaTestkit.insertLink();
case 12:
_context6.t0 = expect;
_context6.next = 15;
return richTextAreaTestkit.getText();
case 15:
_context6.t1 = _context6.sent;
(0, _context6.t0)(_context6.t1).toBe('WixSite');
_context6.t2 = expect;
_context6.next = 20;
return richTextAreaTestkit.isLinkAdded('http://www.wix.com');
case 20:
_context6.t3 = _context6.sent;
(0, _context6.t2)(_context6.t3).toBeTruthy();
case 22:
case 'end':
return _context6.stop();
}
}
}, _callee6, undefined);
})));
it('should insert link after the word in RTE', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
return regeneratorRuntime.wrap(function _callee7$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
_context7.next = 2;
return focusEditor();
case 2:
_context7.next = 4;
return richTextAreaTestkit.enterText('sometext ');
case 4:
_context7.next = 6;
return richTextAreaTestkit.clickButtonByType('link');
case 6:
_context7.next = 8;
return richTextAreaTestkit.isLinkDialogVisible();
case 8:
_context7.next = 10;
return richTextAreaTestkit.enterLinkUrl('http://www.wix.com');
case 10:
_context7.next = 12;
return richTextAreaTestkit.enterLinkText('WixSite');
case 12:
_context7.next = 14;
return richTextAreaTestkit.insertLink();
case 14:
_context7.t0 = expect;
_context7.next = 17;
return richTextAreaTestkit.getText();
case 17:
_context7.t1 = _context7.sent;
(0, _context7.t0)(_context7.t1).toBe('sometext WixSite');
_context7.t2 = expect;
_context7.next = 22;
return richTextAreaTestkit.isLinkAdded('http://www.wix.com');
case 22:
_context7.t3 = _context7.sent;
(0, _context7.t2)(_context7.t3).toBeTruthy();
case 24:
case 'end':
return _context7.stop();
}
}
}, _callee7, undefined);
})));
it('should create a link from selected text', _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 focusEditor();
case 2:
_context8.next = 4;
return richTextAreaTestkit.enterText('sometext and wix');
case 4:
_context8.next = 6;
return richTextAreaTestkit.selectLastWord();
case 6:
_context8.next = 8;
return richTextAreaTestkit.clickButtonByType('link');
case 8:
_context8.next = 10;
return richTextAreaTestkit.isLinkDialogVisible({ withText: false });
case 10:
_context8.next = 12;
return richTextAreaTestkit.enterLinkUrl('http://www.wix.com');
case 12:
_context8.next = 14;
return richTextAreaTestkit.insertLink();
case 14:
_context8.t0 = expect;
_context8.next = 17;
return richTextAreaTestkit.getText();
case 17:
_context8.t1 = _context8.sent;
(0, _context8.t0)(_context8.t1).toBe('sometext and wix');
_context8.t2 = expect;
_context8.next = 22;
return richTextAreaTestkit.isLinkAdded('http://www.wix.com');
case 22:
_context8.t3 = _context8.sent;
(0, _context8.t2)(_context8.t3).toBeTruthy();
case 24:
case 'end':
return _context8.stop();
}
}
}, _callee8, undefined);
})));
it('should insert link and it should become absolute if absoluteLinks props true', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee9() {
return regeneratorRuntime.wrap(function _callee9$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
_context9.next = 2;
return _AutoExampleDriver2.default.setProps({ absoluteLinks: true });
case 2:
_context9.next = 4;
return focusEditor();
case 4:
_context9.next = 6;
return richTextAreaTestkit.clickButtonByType('link');
case 6:
_context9.next = 8;
return richTextAreaTestkit.isLinkDialogVisible();
case 8:
_context9.next = 10;
return richTextAreaTestkit.enterLinkUrl('www.wix.com');
case 10:
_context9.next = 12;
return richTextAreaTestkit.enterLinkText('WixSite');
case 12:
_context9.next = 14;
return richTextAreaTestkit.insertLink();
case 14:
_context9.t0 = expect;
_context9.next = 17;
return richTextAreaTestkit.getText();
case 17:
_context9.t1 = _context9.sent;
(0, _context9.t0)(_context9.t1).toBe('WixSite');
_context9.t2 = expect;
_context9.next = 22;
return richTextAreaTestkit.isLinkAdded('//www.wix.com');
case 22:
_context9.t3 = _context9.sent;
(0, _context9.t2)(_context9.t3).toBeTruthy();
case 24:
case 'end':
return _context9.stop();
}
}
}, _callee9, undefined);
})));
it('should insert link and it should not become absolute if absoluteLinks props false', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee10() {
return regeneratorRuntime.wrap(function _callee10$(_context10) {
while (1) {
switch (_context10.prev = _context10.next) {
case 0:
_context10.next = 2;
return _AutoExampleDriver2.default.setProps({ absoluteLinks: false });
case 2:
_context10.next = 4;
return focusEditor();
case 4:
_context10.next = 6;
return richTextAreaTestkit.clickButtonByType('link');
case 6:
_context10.next = 8;
return richTextAreaTestkit.isLinkDialogVisible();
case 8:
_context10.next = 10;
return richTextAreaTestkit.enterLinkUrl('www.wix.com');
case 10:
_context10.next = 12;
return richTextAreaTestkit.enterLinkText('WixSite');
case 12:
_context10.next = 14;
return richTextAreaTestkit.insertLink();
case 14:
_context10.t0 = expect;
_context10.next = 17;
return richTextAreaTestkit.getText();
case 17:
_context10.t1 = _context10.sent;
(0, _context10.t0)(_context10.t1).toBe('WixSite');
_context10.t2 = expect;
_context10.next = 22;
return richTextAreaTestkit.isLinkAdded('//www.wix.com');
case 22:
_context10.t3 = _context10.sent;
(0, _context10.t2)(_context10.t3).toBeFalsy();
_context10.t4 = expect;
_context10.next = 27;
return richTextAreaTestkit.isLinkAdded('www.wix.com');
case 27:
_context10.t5 = _context10.sent;
(0, _context10.t4)(_context10.t5).toBeTruthy();
case 29:
case 'end':
return _context10.stop();
}
}
}, _callee10, undefined);
})));
});
describe('Focus+Error', function () {
beforeEach(_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 _AutoExampleDriver2.default.setProps({ error: true });
case 2:
case 'end':
return _context11.stop();
}
}
}, _callee11, undefined);
})));
_eyes2.default.it('should show focus styles for editor', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee12() {
return regeneratorRuntime.wrap(function _callee12$(_context12) {
while (1) {
switch (_context12.prev = _context12.next) {
case 0:
_context12.t0 = expect;
_context12.next = 3;
return richTextAreaTestkit.isEditorFocused();
case 3:
_context12.t1 = _context12.sent;
(0, _context12.t0)(_context12.t1).toBe(false);
_context12.next = 7;
return focusEditor();
case 7:
_context12.t2 = expect;
_context12.next = 10;
return richTextAreaTestkit.isEditorFocused();
case 10:
_context12.t3 = _context12.sent;
(0, _context12.t2)(_context12.t3).toBe(true);
case 12:
case 'end':
return _context12.stop();
}
}
}, _callee12, undefined);
})));
_eyes2.default.it('should show focus styles for each button', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee13() {
var index, type;
return regeneratorRuntime.wrap(function _callee13$(_context13) {
while (1) {
switch (_context13.prev = _context13.next) {
case 0:
index = 0;
case 1:
if (!(index < _RichTextAreaProtractor.BUTTON_TYPES.length)) {
_context13.next = 20;
break;
}
type = _RichTextAreaProtractor.BUTTON_TYPES[index];
_context13.t0 = expect;
_context13.next = 6;
return richTextAreaTestkit.isButtonFocused(index);
case 6:
_context13.t1 = _context13.sent;
(0, _context13.t0)(_context13.t1).toBe(false);
_context13.next = 10;
return pressTab(1);
case 10:
_context13.t2 = expect;
_context13.next = 13;
return richTextAreaTestkit.isButtonFocused(index);
case 13:
_context13.t3 = _context13.sent;
(0, _context13.t2)(_context13.t3).toBe(true);
_context13.next = 17;
return _eyes2.default.checkWindow('Button ' + type);
case 17:
index++;
_context13.next = 1;
break;
case 20:
case 'end':
return _context13.stop();
}
}
}, _callee13, undefined);
})));
});
});