app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
608 lines (473 loc) • 24.4 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/helpers/browser-detect', '../../src/helpers/delay', '../../src/helpers/string', 'sinon'], function (_export, _context) {
"use strict";
var _storage, _Register, _elementToFunc, bootstrapPolyfills, isFirefox, 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 (_srcHelpersBrowserDetect) {
isFirefox = _srcHelpersBrowserDetect.isFirefox;
}, function (_srcHelpersDelay) {
delay = _srcHelpersDelay.delay;
}, function (_srcHelpersString) {}, 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('@on decorator', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var _ref2, component, view, on, storage;
return regeneratorRuntime.wrap(function _callee3$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
_context4.next = 2;
return bootstrapPolyfills;
case 2:
_context4.next = 4;
return System.import('app-decorators');
case 4:
_ref2 = _context4.sent;
component = _ref2.component;
view = _ref2.view;
on = _ref2.on;
storage = _ref2.storage;
describe('@on 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 RightOrderOn, createdCallback, attachedCallback, detachedCallback, spy_rightOrder_created, spy_rightOrder_attached, spy_rightOrder_detached, rightOrderOn;
return regeneratorRuntime.wrap(function _callee$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
RightOrderOn = (_dec = component({
name: 'right-order-on'
}), _dec2 = on('click .foo'), _dec(_class = (_class2 = (_temp = _class3 = function (_elementToFunc2) {
_inherits(RightOrderOn, _elementToFunc2);
function RightOrderOn() {
_classCallCheck(this, RightOrderOn);
return _possibleConstructorReturn(this, (RightOrderOn.__proto__ || Object.getPrototypeOf(RightOrderOn)).apply(this, arguments));
}
_createClass(RightOrderOn, [{
key: 'onClickFoo',
value: function onClickFoo() {}
}]);
return RightOrderOn;
}(_elementToFunc(HTMLDivElement)), _class3.$$componentName = 'RightOrderOn', _temp), (_applyDecoratedDescriptor(_class2.prototype, 'onClickFoo', [_dec2], Object.getOwnPropertyDescriptor(_class2.prototype, 'onClickFoo'), _class2.prototype)), _class2)) || _class);
/**
* Setup
*/
_Register.Register.customElement(RightOrderOn, _storage.storage.get(RightOrderOn).get('@component'));
$('body').append('<div class="test-right-on"></div>');
createdCallback = storage.get(RightOrderOn).get('@callbacks').get('created');
attachedCallback = storage.get(RightOrderOn).get('@callbacks').get('attached');
detachedCallback = storage.get(RightOrderOn).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);
rightOrderOn = RightOrderOn.create();
$('.test-right-on').append(rightOrderOn);
$('.test-right-on right-order-on').remove();
$('.test-right-on').append(rightOrderOn);
_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-on').remove();
case 22:
case 'end':
return _context2.stop();
}
}
}, _callee, _this2);
})));
});
describe('Snack storage.get(Snack) events', function () {
var _this5 = this;
it('should contain registered events over @on', function () {
var _dec3, _dec4, _dec5, _dec6, _desc2, _value2, _class4;
var Snack = (_dec3 = on('click .a'), _dec4 = on('click .b'), _dec5 = on('resize', window), _dec6 = on('wheel', window), (_class4 = function () {
function Snack() {
_classCallCheck(this, Snack);
}
_createClass(Snack, [{
key: 'onClick_a',
value: function onClick_a() {}
}, {
key: 'onClick_b',
value: function onClick_b() {}
// custom scope (window)
}, {
key: 'onResize',
value: function onResize() {}
}, {
key: 'onWheel',
value: function onWheel() {}
}]);
return Snack;
}(), (_applyDecoratedDescriptor(_class4.prototype, 'onClick_a', [_dec3], Object.getOwnPropertyDescriptor(_class4.prototype, 'onClick_a'), _class4.prototype), _applyDecoratedDescriptor(_class4.prototype, 'onClick_b', [_dec4], Object.getOwnPropertyDescriptor(_class4.prototype, 'onClick_b'), _class4.prototype), _applyDecoratedDescriptor(_class4.prototype, 'onResize', [_dec5], Object.getOwnPropertyDescriptor(_class4.prototype, 'onResize'), _class4.prototype), _applyDecoratedDescriptor(_class4.prototype, 'onWheel', [_dec6], Object.getOwnPropertyDescriptor(_class4.prototype, 'onWheel'), _class4.prototype)), _class4));
var prototype = Snack.prototype;
var localEvents = storage.get(Snack).get('@on').get('events').get('local');
var contextEvents = storage.get(Snack).get('@on').get('events').get('context');
localEvents.should.have.propertyByPath(0, 1).equal(prototype.onClick_a);
localEvents.should.have.propertyByPath(1, 1).equal(prototype.onClick_b);
contextEvents.should.have.propertyByPath(0, 1, 0).equal(prototype.onResize);
contextEvents.should.have.propertyByPath(0, 1, 1).equal(window);
contextEvents.should.have.propertyByPath(1, 1, 0).eql(prototype.onWheel);
contextEvents.should.have.propertyByPath(1, 1, 1).eql(window);
localEvents.should.have.length(2);
contextEvents.should.have.length(2);
});
it('should trigger correct method if clicked', function () {
var _dec7, _dec8, _dec9, _dec10, _class5, _desc3, _value3, _class6, _class7, _temp2;
var Milkey = (_dec7 = view('\n\t\t\t\t<div class="a"> A </div>\n\t\t\t\t<div class="b"> B </div>\n\t\t\t'), _dec8 = component(), _dec9 = on('click .a'), _dec10 = on('click .b'), _dec7(_class5 = _dec8(_class5 = (_class6 = (_temp2 = _class7 = function (_elementToFunc3) {
_inherits(Milkey, _elementToFunc3);
function Milkey() {
_classCallCheck(this, Milkey);
return _possibleConstructorReturn(this, (Milkey.__proto__ || Object.getPrototypeOf(Milkey)).apply(this, arguments));
}
_createClass(Milkey, [{
key: 'onFoo_a',
value: function onFoo_a() {}
}, {
key: 'onBar_b',
value: function onBar_b() {}
}]);
return Milkey;
}(_elementToFunc(HTMLDivElement)), _class7.$$componentName = 'Milkey', _temp2), (_applyDecoratedDescriptor(_class6.prototype, 'onFoo_a', [_dec9], Object.getOwnPropertyDescriptor(_class6.prototype, 'onFoo_a'), _class6.prototype), _applyDecoratedDescriptor(_class6.prototype, 'onBar_b', [_dec10], Object.getOwnPropertyDescriptor(_class6.prototype, 'onBar_b'), _class6.prototype)), _class6)) || _class5) || _class5);
// create instane
_Register.Register.customElement(Milkey, _storage.storage.get(Milkey).get('@component'));
var milkey_1 = Milkey.create({ cid: 1 });
// spy for milkey_1
var milkey_1_clickCallbacks = milkey_1.$eventHandler.local.getHandlers('click');
var milkey_1_a_function_spy = sinon.spy(milkey_1_clickCallbacks[0], ".a");
var milkey_1_b_function_spy = sinon.spy(milkey_1_clickCallbacks[1], ".b");
// test 1
milkey_1.querySelector('.a').click();
milkey_1_a_function_spy.callCount.should.eql(1);
milkey_1_b_function_spy.callCount.should.eql(0);
// test 2
milkey_1.querySelector('.b').click();
milkey_1_a_function_spy.callCount.should.eql(1);
milkey_1_b_function_spy.callCount.should.eql(1);
// test 3
milkey_1.querySelector('.a').click();
milkey_1.querySelector('.b').click();
milkey_1_a_function_spy.callCount.should.eql(2);
milkey_1_b_function_spy.callCount.should.eql(2);
// cleanup
milkey_1_a_function_spy.restore();
milkey_1_b_function_spy.restore();
});
it('should test click when created and reinit (detached/attached) again', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var _dec11, _dec12, _dec13, _class8, _desc4, _value4, _class9, _class10, _temp3;
var clickCount, testDiv, Burger, burger;
return regeneratorRuntime.wrap(function _callee2$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
clickCount = 0;
testDiv = document.createElement('div');
testDiv.id = 'test-div';
document.body.appendChild(testDiv);
Burger = (_dec11 = view('\n\t\t\t\t<div class="a"> A </div>\n\t\t\t\t<div class="b"> B </div>\n\t\t\t'), _dec12 = component(), _dec13 = on('click .a'), _dec11(_class8 = _dec12(_class8 = (_class9 = (_temp3 = _class10 = function (_elementToFunc4) {
_inherits(Burger, _elementToFunc4);
function Burger() {
_classCallCheck(this, Burger);
return _possibleConstructorReturn(this, (Burger.__proto__ || Object.getPrototypeOf(Burger)).apply(this, arguments));
}
_createClass(Burger, [{
key: 'onFoo_a',
value: function onFoo_a() {
clickCount++;
}
}]);
return Burger;
}(_elementToFunc(HTMLDivElement)), _class10.$$componentName = 'Burger', _temp3), (_applyDecoratedDescriptor(_class9.prototype, 'onFoo_a', [_dec13], Object.getOwnPropertyDescriptor(_class9.prototype, 'onFoo_a'), _class9.prototype)), _class9)) || _class8) || _class8);
// create instane
_Register.Register.customElement(Burger, _storage.storage.get(Burger).get('@component'));
burger = Burger.create();
testDiv.appendChild(burger);
// test 1
burger.querySelector('.a').click();
should(clickCount).be.eql(1);
// remove and test clicking
$('com-burger').remove();
_context3.next = 13;
return delay(10);
case 13:
burger.querySelector('.a').click();
should(clickCount).be.eql(1);
// append again
testDiv.appendChild(burger);
_context3.next = 18;
return delay(10);
case 18:
burger.querySelector('.a').click();
should(clickCount).be.eql(2);
case 20:
case 'end':
return _context3.stop();
}
}
}, _callee2, _this5);
})));
it('should ensure that eventhandler has right context', function () {
var _dec14, _dec15, _dec16, _class11, _desc5, _value5, _class12, _class13, _temp5;
var Hanuta = (_dec14 = view('<div class="a"> A </div>', { renderedFlag: false }), _dec15 = component(), _dec16 = on('click .a'), _dec14(_class11 = _dec15(_class11 = (_class12 = (_temp5 = _class13 = function (_elementToFunc5) {
_inherits(Hanuta, _elementToFunc5);
function Hanuta() {
var _ref5;
var _temp4, _this6, _ret;
_classCallCheck(this, Hanuta);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp4 = (_this6 = _possibleConstructorReturn(this, (_ref5 = Hanuta.__proto__ || Object.getPrototypeOf(Hanuta)).call.apply(_ref5, [this].concat(args))), _this6), _this6.cid = null, _temp4), _possibleConstructorReturn(_this6, _ret);
}
_createClass(Hanuta, [{
key: 'created',
value: function created(_ref6) {
var cid = _ref6.cid;
this.cid = cid;
}
}, {
key: 'onFoo_a',
value: function onFoo_a() {
this.setAttribute('cid', this.cid);
}
}]);
return Hanuta;
}(_elementToFunc(HTMLDivElement)), _class13.$$componentName = 'Hanuta', _temp5), (_applyDecoratedDescriptor(_class12.prototype, 'onFoo_a', [_dec16], Object.getOwnPropertyDescriptor(_class12.prototype, 'onFoo_a'), _class12.prototype)), _class12)) || _class11) || _class11);
//create instances
_Register.Register.customElement(Hanuta, _storage.storage.get(Hanuta).get('@component'));
var hanuta_1 = Hanuta.create({ cid: 1 });
var hanuta_2 = Hanuta.create({ cid: 2 });
// test 1
hanuta_2.querySelector('.a').click();
hanuta_2.outerHTML.should.be.equal('<com-hanuta cid="2"><div class="a"> A </div></com-hanuta>');
hanuta_1.outerHTML.should.be.equal('<com-hanuta><div class="a"> A </div></com-hanuta>');
// test 2
hanuta_1.querySelector('.a').click();
hanuta_1.outerHTML.should.be.equal('<com-hanuta cid="1"><div class="a"> A </div></com-hanuta>');
hanuta_2.outerHTML.should.be.equal('<com-hanuta cid="2"><div class="a"> A </div></com-hanuta>');
});
it('should ensure that @on methods connected with base methods', function () {
var _dec17, _dec18, _dec19, _class14, _desc6, _value6, _class15, _class16, _temp6;
var Ritter = (_dec17 = view('<div class="a"> A </div>'), _dec18 = component(), _dec19 = on('click .a'), _dec17(_class14 = _dec18(_class14 = (_class15 = (_temp6 = _class16 = function (_elementToFunc6) {
_inherits(Ritter, _elementToFunc6);
function Ritter() {
_classCallCheck(this, Ritter);
return _possibleConstructorReturn(this, (Ritter.__proto__ || Object.getPrototypeOf(Ritter)).apply(this, arguments));
}
_createClass(Ritter, [{
key: 'baseMethod',
value: function baseMethod() {}
}, {
key: 'onFoo_a',
value: function onFoo_a() {
this.baseMethod();
}
}]);
return Ritter;
}(_elementToFunc(HTMLDivElement)), _class16.$$componentName = 'Ritter', _temp6), (_applyDecoratedDescriptor(_class15.prototype, 'onFoo_a', [_dec19], Object.getOwnPropertyDescriptor(_class15.prototype, 'onFoo_a'), _class15.prototype)), _class15)) || _class14) || _class14);
// create instane
_Register.Register.customElement(Ritter, _storage.storage.get(Ritter).get('@component'));
var ritter = Ritter.create();
// spy for Ritter onFoo_a
var ritter_clickCallbacks = ritter.$eventHandler.local.getHandlers('click');
var ritter_function_spy = sinon.spy(ritter_clickCallbacks[0], ".a");
// spy for Ritter baseMethod
var ritter_baseMethod_spy = sinon.spy(Ritter.prototype, "baseMethod");
//test
ritter.querySelector('.a').click();
ritter_function_spy.callCount.should.eql(1);
ritter_baseMethod_spy.callCount.should.eql(1);
// cleanup
ritter_function_spy.restore();
ritter_baseMethod_spy.restore();
});
it('should trigger window events but is instanec of Context and Element', function () {
var _dec20, _dec21, _dec22, _dec23, _class17, _desc7, _value7, _class18, _class19, _temp7;
var Context = (_dec20 = view('<div class="foo"></div>'), _dec21 = component(), _dec22 = on('resize', window), _dec23 = on('click .foo'), _dec20(_class17 = _dec21(_class17 = (_class18 = (_temp7 = _class19 = function (_elementToFunc7) {
_inherits(Context, _elementToFunc7);
function Context() {
_classCallCheck(this, Context);
return _possibleConstructorReturn(this, (Context.__proto__ || Object.getPrototypeOf(Context)).apply(this, arguments));
}
_createClass(Context, [{
key: 'onResize',
value: function onResize(event) {
this.callFoo();
return this;
}
}, {
key: 'callFoo',
value: function callFoo() {
return this;
}
}, {
key: 'onClick',
value: function onClick(event) {
this.callFoo();
}
}]);
return Context;
}(_elementToFunc(HTMLDivElement)), _class19.$$componentName = 'Context', _temp7), (_applyDecoratedDescriptor(_class18.prototype, 'onResize', [_dec22], Object.getOwnPropertyDescriptor(_class18.prototype, 'onResize'), _class18.prototype), _applyDecoratedDescriptor(_class18.prototype, 'onClick', [_dec23], Object.getOwnPropertyDescriptor(_class18.prototype, 'onClick'), _class18.prototype)), _class18)) || _class17) || _class17);
_Register.Register.customElement(Context, _storage.storage.get(Context).get('@component'));
var context = Context.create();
var context_resize_Callbacks = context.$eventHandler['resize_window_onResize'].getHandlers('resize');
var onResize = context_resize_Callbacks[0][null];
document.body.appendChild(context);
// test instanceof Context
should(onResize() instanceof Context).be.true();
should(context.callFoo() instanceof Context).be.true();
// test instance Element
should(onResize() instanceof Element).be.true();
should(context.callFoo() instanceof Element).be.true();
// spy for context resize
var context_function_spy = sinon.spy(context_resize_Callbacks[0], null);
var callFoo_function_spy = sinon.spy(Context.prototype, 'callFoo');
// trigger resize
var resizeEvent = new Event('resize');
window.dispatchEvent(resizeEvent);
// test
context_function_spy.callCount.should.equal(1);
callFoo_function_spy.callCount.should.equal(1);
// test passed resize event object
context_function_spy.args[0][0].type.should.equal('resize');
should(context_function_spy.args[0][0] instanceof Event).be.true();
if (!isFirefox) {
should(context_function_spy.args[0][0].currentTarget === window).be.true();
}
// test click event
var context_clickCallbacks = context.$eventHandler.local.getHandlers('click');
var context_click_function_spy = sinon.spy(context_clickCallbacks[0], ".foo");
context.querySelector('.foo').click();
context_click_function_spy.callCount.should.equal(1);
callFoo_function_spy.callCount.should.equal(2);
// test that have different instances and are not in context of window
var context2 = Context.create();
should(context2.onResize() === context2.callFoo()).be.true();
should(context.onResize() === context2.onResize()).be.false();
should(context.callFoo() === context2.callFoo()).be.false();
// cleanup
context_function_spy.restore();
callFoo_function_spy.restore();
context_click_function_spy.restore();
});
});
case 11:
case 'end':
return _context4.stop();
}
}
}, _callee3, _this2);
})));
}
};
});
//# sourceMappingURL=on.spec.js.map