wix-style-react
Version:
wix-style-react
362 lines (304 loc) • 12.5 kB
JavaScript
'use strict';
Object.defineProperty(exports, "__esModule", {
value: true
});
exports.runFocusTests = runFocusTests;
var _protractor = require('wix-ui-test-utils/protractor');
var _privateDrivers = require('../../../test/utils/private-drivers');
var _AutoExampleDriver = require('wix-storybook-utils/AutoExampleDriver');
var _AutoExampleDriver2 = _interopRequireDefault(_AutoExampleDriver);
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"); }); }; }
/**
* IMPORTANT !!!
* It is the responsibility of the caller to reset the tested component's state beforeEach test.
* Reseting the state should include reseting the document's activeElement in such a way so that when pressing TAB one time,
* then the tested component would be focusable.
*
* Adds a `describe` block.
*/
function runFocusTests(driver, storyUrl) {
runFocusTestsImpl((0, _privateDrivers.flattenInternalDriver)(driver), storyUrl);
}
// TODO: add tests for error mode and disabled mode
function runFocusTestsImpl(driver, storyUrl) {
var _this = this;
describe('Focusable', function () {
var pressTab = function pressTab() {
return browser.actions().sendKeys(protractor.Key.TAB).perform();
};
var pressShiftTab = function pressShiftTab() {
return browser.actions().sendKeys(protractor.Key.chord(protractor.Key.SHIFT, protractor.Key.TAB)).perform();
};
var pressSpace = function pressSpace() {
return browser.actions().sendKeys(protractor.Key.SPACE).perform();
};
var expectKeyboardFocused = function () {
var _ref = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee(_driver, msg) {
var prefix;
return regeneratorRuntime.wrap(function _callee$(_context) {
while (1) {
switch (_context.prev = _context.next) {
case 0:
prefix = msg ? msg + ' - ' : '';
_context.t0 = expect;
_context.next = 4;
return _driver.hasFocusState();
case 4:
_context.t1 = _context.sent;
_context.t2 = prefix + 'hasFocusState';
(0, _context.t0)(_context.t1).toBe(true, _context.t2);
_context.t3 = expect;
_context.next = 10;
return _driver.hasFocusVisibleState();
case 10:
_context.t4 = _context.sent;
_context.t5 = prefix + 'hasFocusVisibleState';
(0, _context.t3)(_context.t4).toBe(true, _context.t5);
case 13:
case 'end':
return _context.stop();
}
}
}, _callee, _this);
}));
return function expectKeyboardFocused(_x, _x2) {
return _ref.apply(this, arguments);
};
}();
var expectNotFocused = function () {
var _ref2 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2(_driver, msg) {
var prefix;
return regeneratorRuntime.wrap(function _callee2$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
prefix = msg ? msg + ' - ' : '';
_context2.t0 = expect;
_context2.next = 4;
return _driver.hasFocusState();
case 4:
_context2.t1 = _context2.sent;
_context2.t2 = prefix + 'hasFocusState';
(0, _context2.t0)(_context2.t1).toBe(false, _context2.t2);
_context2.t3 = expect;
_context2.next = 10;
return _driver.hasFocusVisibleState();
case 10:
_context2.t4 = _context2.sent;
_context2.t5 = prefix + 'hasFocusVisibleState';
(0, _context2.t3)(_context2.t4).toBe(false, _context2.t5);
case 13:
case 'end':
return _context2.stop();
}
}
}, _callee2, _this);
}));
return function expectNotFocused(_x3, _x4) {
return _ref2.apply(this, arguments);
};
}();
var expectMouseFocused = function () {
var _ref3 = _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3(_driver, msg) {
var prefix;
return regeneratorRuntime.wrap(function _callee3$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
prefix = msg ? msg + ' - ' : '';
_context3.t0 = expect;
_context3.next = 4;
return _driver.hasFocusState();
case 4:
_context3.t1 = _context3.sent;
_context3.t2 = prefix + 'hasFocusState';
(0, _context3.t0)(_context3.t1).toBe(true, _context3.t2);
_context3.t3 = expect;
_context3.next = 10;
return _driver.hasFocusVisibleState();
case 10:
_context3.t4 = _context3.sent;
_context3.t5 = prefix + 'hasFocusVisibleState';
(0, _context3.t3)(_context3.t4).toBe(false, _context3.t5);
case 13:
case 'end':
return _context3.stop();
}
}
}, _callee3, _this);
}));
return function expectMouseFocused(_x5, _x6) {
return _ref3.apply(this, arguments);
};
}();
beforeAll(_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 browser.get(storyUrl);
case 2:
_context4.next = 4;
return (0, _protractor.waitForVisibilityOf)(driver.element(), 'Cannot find element');
case 4:
case 'end':
return _context4.stop();
}
}
}, _callee4, _this);
})));
beforeEach(function () {
return _AutoExampleDriver2.default.remount();
});
it('should not be focused [given] initial default', _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 expectNotFocused(driver);
case 2:
case 'end':
return _context5.stop();
}
}
}, _callee5, _this);
})));
// TODO: The next 2 tests are skipped on purpose, I did not yet implement
// a driver method for programatically doing focus and blur.
// This is not in priority to support it.
xit('should have focus and focus-visible [when] focused programatically', _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 driver.focus();
case 2:
_context6.next = 4;
return expectKeyboardFocused(driver, 'default is keyboard');
case 4:
case 'end':
return _context6.stop();
}
}
}, _callee6, _this);
})));
xit('should not be focused [when] blured programatically [given] focused programatically', _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 driver.focus();
case 2:
_context7.next = 4;
return expectKeyboardFocused(driver, 'after focus');
case 4:
_context7.next = 6;
return driver.blur();
case 6:
_context7.next = 8;
return expectNotFocused(driver, 'after focus');
case 8:
case 'end':
return _context7.stop();
}
}
}, _callee7, _this);
})));
it('should have focus but not focus-visible [when] root element is clicked by mouse', _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 driver.clickRoot();
case 2:
_context8.next = 4;
return expectMouseFocused(driver);
case 4:
case 'end':
return _context8.stop();
}
}
}, _callee8, _this);
})));
driver.clickableElements.forEach(function (element, index) {
it('should not have focus-visible [when] clicked by mouse on clickable #' + index, _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 element.click();
case 2:
_context9.next = 4;
return expectMouseFocused(driver);
case 4:
case 'end':
return _context9.stop();
}
}
}, _callee9, _this);
})));
});
it('should have focus and focus-visible [when] focused by keyboard [given] clicked by mouse and blured', _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 expectNotFocused(driver, 'initial');
case 2:
_context10.next = 4;
return driver.clickRoot();
case 4:
_context10.next = 6;
return expectMouseFocused(driver, 'after click');
case 6:
_context10.next = 8;
return pressTab();
case 8:
_context10.next = 10;
return expectNotFocused(driver, 'after tab');
case 10:
_context10.next = 12;
return pressShiftTab();
case 12:
_context10.next = 14;
return expectKeyboardFocused(driver, 'after shift-tab');
case 14:
case 'end':
return _context10.stop();
}
}
}, _callee10, _this);
})));
it('should have focus and focus-visible [when] any keyboard key pressed [given] focused by mouse', _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 driver.clickRoot();
case 2:
_context11.next = 4;
return expectMouseFocused(driver);
case 4:
_context11.next = 6;
return pressSpace();
case 6:
_context11.next = 8;
return expectKeyboardFocused(driver);
case 8:
case 'end':
return _context11.stop();
}
}
}, _callee11, _this);
})));
});
}