app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
740 lines (570 loc) • 45.8 kB
JavaScript
System.register(['app-decorators/src/libs/random-storage', 'app-decorators/src/libs/customelement', 'app-decorators/src/libs/element-to-function', '../../src/bootstrap', '../../src/libs/random-storage', '../../src/helpers/delay', 'jquery', '../../src/helpers/jquery.click-and-wait', '../../src/helpers/history.back-forward-and-wait', 'sinon'], function (_export, _context) {
"use strict";
var _storage, _Register, _elementToFunc, bootstrapPolyfills, storage, delay, $, sinon, _this2, _createClass;
function _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
function _possibleConstructorReturn(self, call) {
if (!self) {
throw new ReferenceError("this hasn't been initialised - super() hasn't been called");
}
return call && (typeof call === "object" || typeof call === "function") ? call : self;
}
function _inherits(subClass, superClass) {
if (typeof superClass !== "function" && superClass !== null) {
throw new TypeError("Super expression must either be null or a function, not " + typeof superClass);
}
subClass.prototype = Object.create(superClass && superClass.prototype, {
constructor: {
value: subClass,
enumerable: false,
writable: true,
configurable: true
}
});
if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass;
}
function _applyDecoratedDescriptor(target, property, decorators, descriptor, context) {
var desc = {};
Object['ke' + 'ys'](descriptor).forEach(function (key) {
desc[key] = descriptor[key];
});
desc.enumerable = !!desc.enumerable;
desc.configurable = !!desc.configurable;
if ('value' in desc || desc.initializer) {
desc.writable = true;
}
desc = decorators.slice().reverse().reduce(function (desc, decorator) {
return decorator(target, property, desc) || desc;
}, desc);
if (context && desc.initializer !== void 0) {
desc.value = desc.initializer ? desc.initializer.call(context) : void 0;
desc.initializer = undefined;
}
if (desc.initializer === void 0) {
Object['define' + 'Property'](target, property, desc);
desc = null;
}
return desc;
}
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");
});
};
}
return {
setters: [function (_appDecoratorsSrcLibsRandomStorage) {
_storage = _appDecoratorsSrcLibsRandomStorage;
}, function (_appDecoratorsSrcLibsCustomelement) {
_Register = _appDecoratorsSrcLibsCustomelement;
}, function (_appDecoratorsSrcLibsElementToFunction) {
_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
}, function (_srcBootstrap) {
bootstrapPolyfills = _srcBootstrap.bootstrapPolyfills;
}, function (_srcLibsRandomStorage) {
storage = _srcLibsRandomStorage.storage;
}, function (_srcHelpersDelay) {
delay = _srcHelpersDelay.delay;
}, function (_jquery) {
$ = _jquery.default;
}, function (_srcHelpersJqueryClickAndWait) {}, function (_srcHelpersHistoryBackForwardAndWait) {}, function (_sinon) {
sinon = _sinon.default;
}],
execute: function () {
_this2 = this;
_createClass = function () {
function defineProperties(target, props) {
for (var i = 0; i < props.length; i++) {
var descriptor = props[i];
descriptor.enumerable = descriptor.enumerable || false;
descriptor.configurable = true;
if ("value" in descriptor) descriptor.writable = true;
Object.defineProperty(target, descriptor.key, descriptor);
}
}
return function (Constructor, protoProps, staticProps) {
if (protoProps) defineProperties(Constructor.prototype, protoProps);
if (staticProps) defineProperties(Constructor, staticProps);
return Constructor;
};
}();
describe('@action decorator', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
var _ref2, action, component, view, Router;
return regeneratorRuntime.wrap(function _callee7$(_context8) {
while (1) {
switch (_context8.prev = _context8.next) {
case 0:
_context8.next = 2;
return bootstrapPolyfills;
case 2:
_context8.next = 4;
return System.import('app-decorators');
case 4:
_ref2 = _context8.sent;
action = _ref2.action;
component = _ref2.component;
view = _ref2.view;
Router = _ref2.Router;
describe('@action decorator', function () {
it('should call customElements hooks in right order', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var _dec, _dec2, _class, _desc, _value, _class2, _class3, _temp;
var RightOrderAction, createdCallback, attachedCallback, detachedCallback, spy_rightOrder_created, spy_rightOrder_attached, spy_rightOrder_detached, rightOrderCom;
return regeneratorRuntime.wrap(function _callee$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
RightOrderAction = (_dec = component({
name: 'right-order-action'
}), _dec2 = action('/some/path.html'), _dec(_class = (_class2 = (_temp = _class3 = function (_elementToFunc2) {
_inherits(RightOrderAction, _elementToFunc2);
function RightOrderAction() {
_classCallCheck(this, RightOrderAction);
return _possibleConstructorReturn(this, (RightOrderAction.__proto__ || Object.getPrototypeOf(RightOrderAction)).apply(this, arguments));
}
_createClass(RightOrderAction, [{
key: 'onPath',
value: function onPath() {}
}]);
return RightOrderAction;
}(_elementToFunc(HTMLDivElement)), _class3.$$componentName = 'RightOrderAction', _temp), (_applyDecoratedDescriptor(_class2.prototype, 'onPath', [_dec2], Object.getOwnPropertyDescriptor(_class2.prototype, 'onPath'), _class2.prototype)), _class2)) || _class);
/**
* Setup
*/
_Register.Register.customElement(RightOrderAction, _storage.storage.get(RightOrderAction).get('@component'));
$('body').append('<div class="test-right-order"></div>');
createdCallback = storage.get(RightOrderAction).get('@callbacks').get('created');
attachedCallback = storage.get(RightOrderAction).get('@callbacks').get('attached');
detachedCallback = storage.get(RightOrderAction).get('@callbacks').get('detached');
spy_rightOrder_created = sinon.spy(createdCallback, 0);
spy_rightOrder_attached = sinon.spy(attachedCallback, 0);
spy_rightOrder_detached = sinon.spy(detachedCallback, 0);
rightOrderCom = RightOrderAction.create();
$('.test-right-order').append(rightOrderCom);
$('.test-right-order right-order-action').remove();
$('.test-right-order').append(rightOrderCom);
_context2.next = 15;
return delay(1);
case 15:
/**
* Test
*/
spy_rightOrder_created.callCount.should.be.equal(1);
spy_rightOrder_attached.callCount.should.be.equal(2);
spy_rightOrder_detached.callCount.should.be.equal(1);
// cleanup
createdCallback[0].restore();
attachedCallback[0].restore();
detachedCallback[0].restore();
$('.test-right-order').remove();
case 22:
case 'end':
return _context2.stop();
}
}
}, _callee, _this2);
})));
it('should add router instance to domNode.$router', function () {
var _dec3, _dec4, _class4, _desc2, _value2, _class5, _class6, _temp2;
var Page1 = (_dec3 = component(), _dec4 = action('/some/path.html'), _dec3(_class4 = (_class5 = (_temp2 = _class6 = function (_elementToFunc3) {
_inherits(Page1, _elementToFunc3);
function Page1() {
_classCallCheck(this, Page1);
return _possibleConstructorReturn(this, (Page1.__proto__ || Object.getPrototypeOf(Page1)).apply(this, arguments));
}
_createClass(Page1, [{
key: 'actionName',
value: function actionName() {}
}]);
return Page1;
}(_elementToFunc(HTMLDivElement)), _class6.$$componentName = 'Page1', _temp2), (_applyDecoratedDescriptor(_class5.prototype, 'actionName', [_dec4], Object.getOwnPropertyDescriptor(_class5.prototype, 'actionName'), _class5.prototype)), _class5)) || _class4);
_Register.Register.customElement(Page1, _storage.storage.get(Page1).get('@component'));
var page = Page1.create();
page.$router.should.be.instanceof(Router);
});
it('should bind Component Page instance to action decorator methods', function () {
var _dec5, _dec6, _class7, _desc3, _value3, _class8, _class9, _temp3;
var Page2 = (_dec5 = component(), _dec6 = action('/some/path1.html'), _dec5(_class7 = (_class8 = (_temp3 = _class9 = function (_elementToFunc4) {
_inherits(Page2, _elementToFunc4);
function Page2() {
_classCallCheck(this, Page2);
return _possibleConstructorReturn(this, (Page2.__proto__ || Object.getPrototypeOf(Page2)).apply(this, arguments));
}
_createClass(Page2, [{
key: 'actionName',
value: function actionName() {
this.method();
return this;
}
}, {
key: 'method',
value: function method() {
return this;
}
}]);
return Page2;
}(_elementToFunc(HTMLDivElement)), _class9.$$componentName = 'Page2', _temp3), (_applyDecoratedDescriptor(_class8.prototype, 'actionName', [_dec6], Object.getOwnPropertyDescriptor(_class8.prototype, 'actionName'), _class8.prototype)), _class8)) || _class7);
_Register.Register.customElement(Page2, _storage.storage.get(Page2).get('@component'));
var page = Page2.create();
var actionName = page.actionName();
should(actionName).be.instanceof(Page2);
should(actionName).be.instanceof(Element);
var method = page.method();
should(method).be.instanceof(Page2);
should(method).be.instanceof(Element);
var page_method_spy = sinon.spy(page, 'method');
var page_actionName_spy = sinon.spy(page.$router.scope.getHandlers('actionName')[0], null);
// by trigger
page.$router.trigger('actionName');
page_method_spy.callCount.should.equal(1);
page_actionName_spy.callCount.should.equal(1);
// by direct call
page.actionName();
page_method_spy.callCount.should.equal(2);
// cleanup
page_method_spy.restore();
page_actionName_spy.restore();
});
describe('dom test', function () {
var _dec7, _dec8, _dec9, _dec10, _class10, _desc4, _value4, _class11, _class12, _temp4;
var fixtureElement = null;
beforeEach(function () {
fixtureElement = document.createElement('div');
fixtureElement.id = 'test-page-container';
document.body.appendChild(fixtureElement);
});
afterEach(function () {
return $('#test-page-container').remove();
});
var Page3 = (_dec7 = view('\n <a class="path-1" href="/some/path1.html">Path 1</a>\n <a class="path-2" href="/some/path2/2334.html?a=b&c=d#jumpTo=223">Path 2</a>\n <a class="path-3" href="/not/registerd.html">Path 3</a>\n '), _dec8 = component(), _dec9 = action('/some/path1.html'), _dec10 = action('/some/path2/{{id}}.html'), _dec7(_class10 = _dec8(_class10 = (_class11 = (_temp4 = _class12 = function (_elementToFunc5) {
_inherits(Page3, _elementToFunc5);
function Page3() {
_classCallCheck(this, Page3);
return _possibleConstructorReturn(this, (Page3.__proto__ || Object.getPrototypeOf(Page3)).apply(this, arguments));
}
_createClass(Page3, [{
key: 'actionName1',
value: function actionName1() {}
}, {
key: 'actionName2',
value: function actionName2(_ref4) {
var params = _ref4.params,
search = _ref4.search,
hash = _ref4.hash;
var id = params.id;
}
}]);
return Page3;
}(_elementToFunc(HTMLDivElement)), _class12.$$componentName = 'Page3', _temp4), (_applyDecoratedDescriptor(_class11.prototype, 'actionName1', [_dec9], Object.getOwnPropertyDescriptor(_class11.prototype, 'actionName1'), _class11.prototype), _applyDecoratedDescriptor(_class11.prototype, 'actionName2', [_dec10], Object.getOwnPropertyDescriptor(_class11.prototype, 'actionName2'), _class11.prototype)), _class11)) || _class10) || _class10);
_Register.Register.customElement(Page3, _storage.storage.get(Page3).get('@component'));
it('should reinit router after removing and appending', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var page, page_actionName1_spy, page_actionName2_spy, page_actionName1_1_spy, page_actionName2_1_spy;
return regeneratorRuntime.wrap(function _callee2$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
page = Page3.create();
fixtureElement.appendChild(page);
page_actionName1_spy = sinon.spy(page.$router.scope.getHandlers('actionName1')[0], null);
page_actionName2_spy = sinon.spy(page.$router.scope.getHandlers('actionName2')[0], null);
_context3.next = 6;
return $('.path-1', page).clickAndWait(10);
case 6:
_context3.next = 8;
return $('.path-2', page).clickAndWait(10);
case 8:
_context3.next = 10;
return $('.path-1', page).clickAndWait(10);
case 10:
_context3.next = 12;
return $('.path-2', page).clickAndWait(10);
case 12:
_context3.next = 14;
return $('.path-3', page).clickAndWait(10);
case 14:
// call counts
page_actionName1_spy.callCount.should.equal(2);
page_actionName2_spy.callCount.should.equal(2);
// cleanup
$('#test-page-container com-page3').remove();
$('a', page).on('click', function (e) {
return e.preventDefault();
});
_context3.next = 20;
return delay(10);
case 20:
_context3.next = 22;
return $('.path-1', page).clickAndWait(10);
case 22:
_context3.next = 24;
return $('.path-2', page).clickAndWait(10);
case 24:
_context3.next = 26;
return $('.path-3', page).clickAndWait(10);
case 26:
// call counts
page_actionName1_spy.callCount.should.equal(2);
page_actionName2_spy.callCount.should.equal(2);
page_actionName1_spy.restore();
page_actionName2_spy.restore();
$('a', page).off('click', function (e) {
return e.preventDefault();
});
$('#test-page-container').append(page);
_context3.next = 34;
return delay(10);
case 34:
page_actionName1_1_spy = sinon.spy(page.$router.scope.getHandlers('actionName1')[0], null);
page_actionName2_1_spy = sinon.spy(page.$router.scope.getHandlers('actionName2')[0], null);
_context3.next = 38;
return $('.path-1', page).clickAndWait(10);
case 38:
_context3.next = 40;
return $('.path-2', page).clickAndWait(10);
case 40:
_context3.next = 42;
return $('.path-3', page).clickAndWait(10);
case 42:
// call counts
page_actionName1_1_spy.callCount.should.equal(1);
page_actionName2_1_spy.callCount.should.equal(1);
// cleanup
page_actionName1_1_spy.restore();
page_actionName2_1_spy.restore();
case 46:
case 'end':
return _context3.stop();
}
}
}, _callee2, _this2);
})));
it('should pass correct args after clicking route', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var page, page_actionName1_spy, page_actionName2_spy, record1, record2;
return regeneratorRuntime.wrap(function _callee3$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
page = Page3.create();
fixtureElement.appendChild(page);
page_actionName1_spy = sinon.spy(page.$router.scope.getHandlers('actionName1')[0], null);
page_actionName2_spy = sinon.spy(page.$router.scope.getHandlers('actionName2')[0], null);
_context4.next = 6;
return $('.path-1', page).clickAndWait(10);
case 6:
_context4.next = 8;
return $('.path-2', page).clickAndWait(10);
case 8:
_context4.next = 10;
return $('.path-3', page).clickAndWait(10);
case 10:
// call counts
page_actionName1_spy.callCount.should.equal(1);
page_actionName2_spy.callCount.should.equal(1);
// records (passed args to handler)
record1 = page_actionName1_spy.args[0][0];
should(record1).be.instanceof(CustomEvent);
record1.type.should.be.equal('actionName1');
record1.detail.name.should.be.equal('actionName1');
record1.detail.urlpart.should.be.equal('pathname');
record2 = page_actionName2_spy.args[0][0];
should(record2).be.instanceof(CustomEvent);
record2.type.should.be.equal('actionName2');
record2.detail.name.should.be.equal('actionName2');
record2.detail.urlpart.should.be.equal('pathname');
record2.detail.params.id.should.be.equal(2334);
// cleanup
page_actionName1_spy.restore();
page_actionName2_spy.restore();
case 25:
case 'end':
return _context4.stop();
}
}
}, _callee3, _this2);
})));
it('should call destroy method of router if component element detached', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
var page, $router_destroy_spy, page_actionName1_spy;
return regeneratorRuntime.wrap(function _callee4$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
page = Page3.create();
fixtureElement.appendChild(page);
$router_destroy_spy = sinon.spy(page.$router, 'destroy');
page_actionName1_spy = sinon.spy(page.$router.scope.getHandlers('actionName1')[0], null);
$(fixtureElement).find('com-page3').remove();
$(fixtureElement).append(page);
$(fixtureElement).find('com-page3').remove();
_context5.next = 9;
return delay(5);
case 9:
page.$router.trigger('actionName1');
_context5.next = 12;
return delay(5);
case 12:
$router_destroy_spy.callCount.should.equal(2);
page_actionName1_spy.callCount.should.equal(0);
$router_destroy_spy.restore();
page_actionName1_spy.restore();
case 16:
case 'end':
return _context5.stop();
}
}
}, _callee4, _this2);
})));
it('should call correct methods if router detached and attached', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
var page, $router_destroy_spy, $router_init_spy, page_actionName1_spy, page_actionName1_spy_b;
return regeneratorRuntime.wrap(function _callee5$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
// prepare test data
page = Page3.create();
fixtureElement.appendChild(page);
$router_destroy_spy = sinon.spy(page.$router, 'destroy');
$router_init_spy = sinon.spy(page.$router, 'init');
page_actionName1_spy = sinon.spy(page.$router.scope.getHandlers('actionName1')[0], null);
// start tests
$(fixtureElement).find('com-page3').remove();
_context6.next = 8;
return delay(5);
case 8:
page.$router.trigger('actionName1');
_context6.next = 11;
return delay(5);
case 11:
$router_destroy_spy.callCount.should.equal(1);
$router_init_spy.callCount.should.equal(0);
page_actionName1_spy.callCount.should.equal(0);
page_actionName1_spy.restore();
$(fixtureElement).append(page);
_context6.next = 18;
return delay(5);
case 18:
page_actionName1_spy_b = null;
page_actionName1_spy_b = sinon.spy(page.$router.scope.getHandlers('actionName1')[0], null);
$(page).find('.path-1').get(0).click();
_context6.next = 23;
return delay(5);
case 23:
$router_destroy_spy.callCount.should.equal(1);
$router_init_spy.callCount.should.equal(1);
page_actionName1_spy_b.callCount.should.equal(1);
$router_destroy_spy.restore();
$router_init_spy.restore();
page_actionName1_spy_b.restore();
case 29:
case 'end':
return _context6.stop();
}
}
}, _callee5, _this2);
})));
it('should differ between different route instance on history back/forward', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
var page1, page_actionName1_spy, page2, page_actionName2_spy;
return regeneratorRuntime.wrap(function _callee6$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
page1 = Page3.create();
page_actionName1_spy = sinon.spy(page1.$router.scope.getHandlers('actionName1')[0], null);
fixtureElement.appendChild(page1);
page2 = Page3.create();
page_actionName2_spy = sinon.spy(page2.$router.scope.getHandlers('actionName1')[0], null);
fixtureElement.appendChild(page2);
// Page1
_context7.next = 8;
return $('.path-1', page1).clickAndWait(50);
case 8:
_context7.next = 10;
return $('.path-3', page1).clickAndWait(50);
case 10:
_context7.next = 12;
return $('.path-1', page1).clickAndWait(50);
case 12:
_context7.next = 14;
return $('.path-3', page1).clickAndWait(50);
case 14:
_context7.next = 16;
return history.backAndWait(50);
case 16:
_context7.next = 18;
return history.backAndWait(50);
case 18:
_context7.next = 20;
return history.backAndWait(50);
case 20:
page_actionName1_spy.callCount.should.be.aboveOrEqual(3);
page_actionName2_spy.callCount.should.equal(0);
// Page2
_context7.next = 24;
return $('.path-1', page2).clickAndWait(50);
case 24:
_context7.next = 26;
return $('.path-3', page2).clickAndWait(50);
case 26:
_context7.next = 28;
return $('.path-1', page2).clickAndWait(50);
case 28:
_context7.next = 30;
return $('.path-3', page2).clickAndWait(50);
case 30:
_context7.next = 32;
return history.backAndWait(50);
case 32:
_context7.next = 34;
return history.backAndWait(50);
case 34:
_context7.next = 36;
return history.backAndWait(50);
case 36:
page_actionName1_spy.callCount.should.be.aboveOrEqual(3);
page_actionName2_spy.callCount.should.be.aboveOrEqual(3);
//console.log('route different instance: ', page_actionName1_spy.callCount);
//console.log('route different instance: ', page_actionName2_spy.callCount);
// cleanup
page_actionName1_spy.restore();
page_actionName2_spy.restore();
case 40:
case 'end':
return _context7.stop();
}
}
}, _callee6, _this2);
})));
});
});
case 10:
case 'end':
return _context8.stop();
}
}
}, _callee7, _this2);
})));
}
};
});
//# sourceMappingURL=action.spec.js.map