app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
906 lines (721 loc) • 39.5 kB
JavaScript
System.register(['app-decorators/src/libs/random-storage', 'app-decorators/src/libs/customelement', 'app-decorators/src/libs/element-to-function', 'jquery', '../../src/bootstrap', '../../src/libs/view', '../../src/helpers/delay', '../../src/libs/random-storage', 'sinon'], function (_export, _context) {
"use strict";
var _storage, _Register, _elementToFunc, $, bootstrapPolyfills, EVENT_VIEW_RENDER, delay, storage, sinon, _slicedToArray, _this2, _createClass, _typeof;
function _initDefineProp(target, property, descriptor, context) {
if (!descriptor) return;
Object.defineProperty(target, property, {
enumerable: descriptor.enumerable,
configurable: descriptor.configurable,
writable: descriptor.writable,
value: descriptor.initializer ? descriptor.initializer.call(context) : void 0
});
}
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 _initializerWarningHelper(descriptor, context) {
throw new Error('Decorating class property failed. Please ensure that transform-class-properties is enabled.');
}
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 (_jquery) {
$ = _jquery.default;
}, function (_srcBootstrap) {
bootstrapPolyfills = _srcBootstrap.bootstrapPolyfills;
}, function (_srcLibsView) {
EVENT_VIEW_RENDER = _srcLibsView.EVENT_VIEW_RENDER;
}, function (_srcHelpersDelay) {
delay = _srcHelpersDelay.delay;
}, function (_srcLibsRandomStorage) {
storage = _srcLibsRandomStorage.storage;
}, function (_sinon) {
sinon = _sinon.default;
}],
execute: function () {
_slicedToArray = function () {
function sliceIterator(arr, i) {
var _arr = [];
var _n = true;
var _d = false;
var _e = undefined;
try {
for (var _i = arr[Symbol.iterator](), _s; !(_n = (_s = _i.next()).done); _n = true) {
_arr.push(_s.value);
if (i && _arr.length === i) break;
}
} catch (err) {
_d = true;
_e = err;
} finally {
try {
if (!_n && _i["return"]) _i["return"]();
} finally {
if (_d) throw _e;
}
}
return _arr;
}
return function (arr, i) {
if (Array.isArray(arr)) {
return arr;
} else if (Symbol.iterator in Object(arr)) {
return sliceIterator(arr, i);
} else {
throw new TypeError("Invalid attempt to destructure non-iterable instance");
}
};
}();
_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;
};
}();
_typeof = typeof Symbol === "function" && typeof Symbol.iterator === "symbol" ? function (obj) {
return typeof obj;
} : function (obj) {
return obj && typeof Symbol === "function" && obj.constructor === Symbol && obj !== Symbol.prototype ? "symbol" : typeof obj;
};
// init special innerHTML for test
String.prototype.removeGutter = function () {
return this.replace(/[\t\n\r]/gm, '');
};
describe('@view decorator', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee8() {
var _ref2, component, view, on;
return regeneratorRuntime.wrap(function _callee8$(_context9) {
while (1) {
switch (_context9.prev = _context9.next) {
case 0:
_context9.next = 2;
return bootstrapPolyfills;
case 2:
_context9.next = 4;
return System.import('app-decorators');
case 4:
_ref2 = _context9.sent;
component = _ref2.component;
view = _ref2.view;
on = _ref2.on;
describe('in usage with @ (integration-test)', function () {
var _dec, _dec2, _dec3, _dec4, _class, _desc, _value, _class2, _descriptor, _descriptor2, _class3, _temp2, _dec7, _dec8, _dec9, _dec10, _dec11, _class6, _desc2, _value2, _class7, _descriptor3, _descriptor4, _descriptor5, _class8, _temp5;
beforeEach(function () {
return $('body').append('<div id="view-decorator"></div>');
});
afterEach(function () {
return $('#view-decorator').remove();
});
// decorate
var serkan = (_dec = view({
"compiler": [7, ">= 4.0.0"],
"main": function main(container, depth0, helpers, partials, data) {
var helper,
alias1 = depth0 != null ? depth0 : container.nullContext || {},
alias2 = helpers.helperMissing,
alias3 = "function",
alias4 = container.escapeExpression;
return "\n <span>" + alias4((helper = (helper = helpers.n || (depth0 != null ? depth0.n : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "n",
"hash": {},
"data": data
}) : helper)) + "</span><p>" + alias4((helper = (helper = helpers.p || (depth0 != null ? depth0.p : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "p",
"hash": {},
"data": data
}) : helper)) + "</p>\n ";
},
"useData": true
}), _dec2 = component(), _dec3 = view.bind, _dec4 = view.bind, _dec(_class = _dec2(_class = (_class2 = (_temp2 = _class3 = function (_elementToFunc2) {
_inherits(serkan, _elementToFunc2);
function serkan() {
var _ref3;
var _temp, _this, _ret;
_classCallCheck(this, serkan);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref3 = serkan.__proto__ || Object.getPrototypeOf(serkan)).call.apply(_ref3, [this].concat(args))), _this), _initDefineProp(_this, 'n', _descriptor, _this), _initDefineProp(_this, 'p', _descriptor2, _this), _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(serkan, [{
key: 'created',
value: function created() {}
}]);
return serkan;
}(_elementToFunc(HTMLDivElement)), _class3.$$componentName = 'serkan', _temp2), (_descriptor = _applyDecoratedDescriptor(_class2.prototype, 'n', [_dec3], {
enumerable: true,
initializer: function initializer() {
return 'Hello';
}
}), _descriptor2 = _applyDecoratedDescriptor(_class2.prototype, 'p', [_dec4], {
enumerable: true,
initializer: function initializer() {
return 'World';
}
})), _class2)) || _class) || _class);
_Register.Register.customElement(serkan, _storage.storage.get(serkan).get('@component'));
it('should call customElements hooks in right order', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var createdCallback, attachedCallback, detachedCallback, spy_serkan_created, spy_serkan_attached, spy_serkan_detached, serkanOrderCom;
return regeneratorRuntime.wrap(function _callee$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
/**
* Setup
*/
createdCallback = storage.get(serkan).get('@callbacks').get('created');
attachedCallback = storage.get(serkan).get('@callbacks').get('attached');
detachedCallback = storage.get(serkan).get('@callbacks').get('detached');
spy_serkan_created = sinon.spy(createdCallback, 0);
spy_serkan_attached = sinon.spy(attachedCallback, 0);
spy_serkan_detached = sinon.spy(detachedCallback, 0);
serkanOrderCom = serkan.create();
$('#view-decorator').append(serkanOrderCom);
$('#view-decorator com-serkan').remove();
$('#view-decorator').append(serkanOrderCom);
_context2.next = 12;
return delay(1);
case 12:
/**
* Test
*/
spy_serkan_created.callCount.should.be.equal(1);
spy_serkan_attached.callCount.should.be.equal(2);
spy_serkan_detached.callCount.should.be.equal(1);
// cleanup
createdCallback[0].restore();
attachedCallback[0].restore();
detachedCallback[0].restore();
case 18:
case 'end':
return _context2.stop();
}
}
}, _callee, _this2);
})));
it('should reinit view after removing and appending', function (done) {
done();
});
it('should also create a element if element created from out of dom', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var $vc, $serkan1, $serkan2;
return regeneratorRuntime.wrap(function _callee2$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
// First test
$vc = $('#view-decorator');
$vc.append('\n\t\t\t\t<com-serkan id="serkan-1"></com-serkan>\n\t\t\t\t<com-serkan id="serkan-2"></com-serkan>\n\t\t\t');
$serkan1 = $vc.find('com-serkan#serkan-1');
$serkan2 = $vc.find('com-serkan#serkan-2');
_context3.next = 6;
return delay(10);
case 6:
// Test-1: check if rendered
$serkan1.attr('rendered').should.be.equal('true');
$serkan1.html().removeGutter().should.be.equal('<span>Hello</span><p>World</p>');
// Test-2: check if rendered
$serkan2.attr('rendered').should.be.equal('true');
$serkan2.html().removeGutter().should.be.equal('<span>Hello</span><p>World</p>');
// Test-3: check if rendered on write view.bind attri
$serkan1.get(0).p = 'Mars';
$serkan2.get(0).p = 'Pluto';
$serkan1.html().removeGutter().should.be.equal('<span>Hello</span><p>Mars</p>');
$serkan2.html().removeGutter().should.be.equal('<span>Hello</span><p>Pluto</p>');
case 14:
case 'end':
return _context3.stop();
}
}
}, _callee2, _this2);
})));
it('should also create a element if element with view vars although created from out of dom', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee3() {
var _dec5, _dec6, _class4, _class5, _temp3;
var Fire, $vc, $fire1, $fire2;
return regeneratorRuntime.wrap(function _callee3$(_context4) {
while (1) {
switch (_context4.prev = _context4.next) {
case 0:
Fire = (_dec5 = view({
"compiler": [7, ">= 4.0.0"],
"main": function main(container, depth0, helpers, partials, data) {
var helper,
alias1 = depth0 != null ? depth0 : container.nullContext || {},
alias2 = helpers.helperMissing,
alias3 = "function",
alias4 = container.escapeExpression;
return "<span>" + alias4((helper = (helper = helpers.id || (depth0 != null ? depth0.id : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "id",
"hash": {},
"data": data
}) : helper)) + ".)<b>" + alias4((helper = (helper = helpers["class"] || (depth0 != null ? depth0["class"] : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "class",
"hash": {},
"data": data
}) : helper)) + "</b>" + alias4((helper = (helper = helpers.b || (depth0 != null ? depth0.b : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "b",
"hash": {},
"data": data
}) : helper)) + "</span><p>" + alias4((helper = (helper = helpers.c || (depth0 != null ? depth0.c : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "c",
"hash": {},
"data": data
}) : helper)) + "</p>";
},
"useData": true
}), _dec6 = component(), _dec5(_class4 = _dec6(_class4 = (_temp3 = _class5 = function (_elementToFunc3) {
_inherits(Fire, _elementToFunc3);
function Fire() {
_classCallCheck(this, Fire);
return _possibleConstructorReturn(this, (Fire.__proto__ || Object.getPrototypeOf(Fire)).apply(this, arguments));
}
return Fire;
}(_elementToFunc(HTMLDivElement)), _class5.$$componentName = 'Fire', _temp3)) || _class4) || _class4);
_Register.Register.customElement(Fire, _storage.storage.get(Fire).get('@component'));
$vc = $('#view-decorator');
$vc.append('\n\t\t\t\t<com-fire id="id-1" class="First" @view.bind.b="Thats" @view.bind.c="awesome!"></com-fire>\n\t\t\t\t<com-fire id="id-2" class="Second" @view.bind.b="Whats" @view.bind.c="up!"></com-fire>\n\t\t\t');
$fire1 = $vc.find('com-fire#id-1');
$fire2 = $vc.find('com-fire#id-2');
_context4.next = 8;
return delay(10);
case 8:
$fire1.attr('rendered').should.equal('true');
$fire1.html().should.equal('<span>id-1.)<b>First</b>Thats</span><p>awesome!</p>');
$fire2.attr('rendered').should.equal('true');
$fire2.html().should.equal('<span>id-2.)<b>Second</b>Whats</span><p>up!</p>');
$fire1.get(0).c = 'on!';
$fire2.get(0).c = 'waw!';
$fire1.html().should.equal('<span>id-1.)<b>First</b>Thats</span><p>on!</p>');
$fire2.html().should.equal('<span>id-2.)<b>Second</b>Whats</span><p>waw!</p>');
case 16:
case 'end':
return _context4.stop();
}
}
}, _callee3, _this2);
})));
it('should render template if call domNode.render directly or over domNode.$.view.render', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee4() {
var $vc;
return regeneratorRuntime.wrap(function _callee4$(_context5) {
while (1) {
switch (_context5.prev = _context5.next) {
case 0:
$vc = $('#view-decorator');
$vc.append('<com-serkan></com-serkan>');
_context5.next = 4;
return delay(10);
case 4:
$vc.find('com-serkan').get(0).render({ n: 'Cool', p: 'man!' }, { force: true });
$vc.find('com-serkan').get(0).outerHTML.removeGutter().should.equal('<com-serkan rendered="true"><span>Cool</span><p>man!</p></com-serkan>');
$vc.find('com-serkan').get(0).$view.render({ n: 'Hey', p: 'there!' }, { force: true });
$vc.find('com-serkan').get(0).outerHTML.removeGutter().should.equal('<com-serkan rendered="true"><span>Hey</span><p>there!</p></com-serkan>');
case 8:
case 'end':
return _context5.stop();
}
}
}, _callee4, _this2);
})));
var Orange = (_dec7 = view({
"compiler": [7, ">= 4.0.0"],
"main": function main(container, depth0, helpers, partials, data) {
var helper,
alias1 = depth0 != null ? depth0 : container.nullContext || {},
alias2 = helpers.helperMissing,
alias3 = "function",
alias4 = container.escapeExpression;
return "<div>" + alias4((helper = (helper = helpers.name || (depth0 != null ? depth0.name : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "name",
"hash": {},
"data": data
}) : helper)) + "</div><div>" + alias4((helper = (helper = helpers.city || (depth0 != null ? depth0.city : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "city",
"hash": {},
"data": data
}) : helper)) + "</div><div>" + alias4((helper = (helper = helpers.country || (depth0 != null ? depth0.country : depth0)) != null ? helper : alias2, (typeof helper === 'undefined' ? 'undefined' : _typeof(helper)) === alias3 ? helper.call(alias1, {
"name": "country",
"hash": {},
"data": data
}) : helper)) + "</div>";
},
"useData": true
}), _dec8 = component(), _dec9 = view.bind, _dec10 = view.bind, _dec11 = view.bind, _dec7(_class6 = _dec8(_class6 = (_class7 = (_temp5 = _class8 = function (_elementToFunc4) {
_inherits(Orange, _elementToFunc4);
function Orange() {
var _ref8;
var _temp4, _this4, _ret2;
_classCallCheck(this, Orange);
for (var _len2 = arguments.length, args = Array(_len2), _key2 = 0; _key2 < _len2; _key2++) {
args[_key2] = arguments[_key2];
}
return _ret2 = (_temp4 = (_this4 = _possibleConstructorReturn(this, (_ref8 = Orange.__proto__ || Object.getPrototypeOf(Orange)).call.apply(_ref8, [this].concat(args))), _this4), _initDefineProp(_this4, 'name', _descriptor3, _this4), _initDefineProp(_this4, 'city', _descriptor4, _this4), _initDefineProp(_this4, 'country', _descriptor5, _this4), _temp4), _possibleConstructorReturn(_this4, _ret2);
}
_createClass(Orange, [{
key: 'created',
value: function created(create_vars) {
this.x = 1;
this.y = 2;
this.z = 3;
this.phone = 12345;
Object.assign(this, create_vars);
}
}]);
return Orange;
}(_elementToFunc(HTMLDivElement)), _class8.$$componentName = 'Orange', _temp5), (_descriptor3 = _applyDecoratedDescriptor(_class7.prototype, 'name', [_dec9], {
enumerable: true,
initializer: function initializer() {
return 'A-Df';
}
}), _descriptor4 = _applyDecoratedDescriptor(_class7.prototype, 'city', [_dec10], {
enumerable: true,
initializer: function initializer() {
return 'B-Df';
}
}), _descriptor5 = _applyDecoratedDescriptor(_class7.prototype, 'country', [_dec11], {
enumerable: true,
initializer: function initializer() {
return 'C-Df';
}
})), _class7)) || _class6) || _class6);
_Register.Register.customElement(Orange, _storage.storage.get(Orange).get('@component'));
it('should render the right template on using @view and @view.bind', function () {
// should create template with default vars (see above @view.bind inside Orange)
var orange_0 = Orange.create();
// should override @view.bind default vars inside Oragen
var orange_1 = Orange.create({ city: 'New York', xyz: 7777 });
var orange_2 = Orange.create({ name: 'A-1', city: 'B-1', country: 'C-1' });
var orange_3 = Orange.create({ name: 'A-2', city: 'B-2', country: 'C-2', phone: 9999 });
var equal_3 = '<com-orange rendered="true"><div>A-2</div><div>B-2</div><div>C-2</div></com-orange>';
orange_3.outerHTML.should.equal(equal_3);
orange_3.phone.should.equal(9999);
var equal_2 = '<com-orange rendered="true"><div>A-1</div><div>B-1</div><div>C-1</div></com-orange>';
orange_2.outerHTML.should.equal(equal_2);
var equal_0 = '<com-orange rendered="true"><div>A-Df</div><div>B-Df</div><div>C-Df</div></com-orange>';
orange_0.outerHTML.should.equal(equal_0);
orange_0.phone.should.equal(12345);
var equal_1 = '<com-orange rendered="true"><div>A-Df</div><div>New York</div><div>C-Df</div></com-orange>';
orange_1.outerHTML.should.equal(equal_1);
orange_1.xyz.should.equal(7777);
// dom testing
$([orange_1, orange_3, orange_0, orange_2]).appendTo('#view-decorator');
$('#view-decorator').html().should.equal(equal_1 + equal_3 + equal_0 + equal_2);
orange_3.city = '[update]';
$('#view-decorator').html().should.equal(equal_1 + '<com-orange rendered="true"><div>A-2</div><div>[update]</div><div>C-2</div></com-orange>' + equal_0 + equal_2);
orange_0.x.should.equal(1);
orange_0.y.should.equal(2);
orange_0.z.should.equal(3);
});
it('should get default view properties', function () {
var orange = Orange.create();
orange.name.should.equal('A-Df');
orange.city.should.equal('B-Df');
orange.country.should.equal('C-Df');
});
it('should get passed view properties', function () {
var orange = Orange.create({ name: 'A-2', city: 'B-2' });
orange.name.should.equal('A-2');
orange.city.should.equal('B-2');
orange.country.should.equal('C-Df');
});
it.skip('should not render phone because is not part of @view.bind', function () {
var orange_0 = Orange.create();
orange_0.$view.compile('<div>{{name}}</div><div>{{city}}</div><div>{{country}}</div>{{phone}}', 'test-tpl');
orange_0.$view.render({}, 'test-tpl');
orange_0.outerHTML.should.equal('<com-orange rendered="true"><div>A-Df</div><div>B-Df</div><div>C-Df</div></com-orange>');
});
});
it.skip('should render from src', function () {
/*
@view({
src: 'path/to/my/template.tpl'
})
@component({
name: 'my-view-src-template'
})
class MySourceTemplateRender {}
$('body').append(`
<my-shouldnotrender rendered="true">
<div>
<span>Im already rendered</span>
</div>
</my-shouldnotrender>
`.removeGutter());
*/
});
it('should not render because rendered flag is set', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee5() {
var _dec12, _dec13, _class9, _class10, _temp6;
var MyShouldnotrender;
return regeneratorRuntime.wrap(function _callee5$(_context6) {
while (1) {
switch (_context6.prev = _context6.next) {
case 0:
MyShouldnotrender = (_dec12 = view('\n\t\t\t<div>Should render if flag is not set</div>\n\t\t'), _dec13 = component({
name: 'my-shouldnotrender'
}), _dec12(_class9 = _dec13(_class9 = (_temp6 = _class10 = function (_elementToFunc5) {
_inherits(MyShouldnotrender, _elementToFunc5);
function MyShouldnotrender() {
_classCallCheck(this, MyShouldnotrender);
return _possibleConstructorReturn(this, (MyShouldnotrender.__proto__ || Object.getPrototypeOf(MyShouldnotrender)).apply(this, arguments));
}
return MyShouldnotrender;
}(_elementToFunc(HTMLDivElement)), _class10.$$componentName = 'MyShouldnotrender', _temp6)) || _class9) || _class9);
_Register.Register.customElement(MyShouldnotrender, _storage.storage.get(MyShouldnotrender).get('@component'));
$('body').append('\n\t\t\t<my-shouldnotrender rendered="true">\n\t\t\t\t<div>\n\t\t\t\t\t<span>Im already rendered</span>\n\t\t\t\t</div>\n\t\t\t</my-shouldnotrender>\n\t\t'.removeGutter());
_context6.next = 5;
return delay(10);
case 5:
$('my-shouldnotrender').get(0).outerHTML.removeGutter().should.equal('\n\t\t\t<my-shouldnotrender rendered="true">\n\t\t\t\t<div>\n\t\t\t\t\t<span>Im already rendered</span>\n\t\t\t\t</div>\n\t\t\t</my-shouldnotrender>\n\t\t'.removeGutter());
// cleanup
$('my-shouldnotrender').remove();
case 7:
case 'end':
return _context6.stop();
}
}
}, _callee5, _this2);
})));
it('render slot component', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee6() {
var _dec14, _dec15, _class11, _class12, _temp7;
var MyInnerComponent;
return regeneratorRuntime.wrap(function _callee6$(_context7) {
while (1) {
switch (_context7.prev = _context7.next) {
case 0:
MyInnerComponent = (_dec14 = view('\n\t\t\t<div class="a"></div>\n\t\t\t<div class="b"></div>\n\t\t\t<div class="c">\n\t\t\t\t<span><slot></slot></span>\n\t\t\t</div>\n\t\t'), _dec15 = component({
name: 'my-innercomponent'
}), _dec14(_class11 = _dec15(_class11 = (_temp7 = _class12 = function (_elementToFunc6) {
_inherits(MyInnerComponent, _elementToFunc6);
function MyInnerComponent() {
_classCallCheck(this, MyInnerComponent);
return _possibleConstructorReturn(this, (MyInnerComponent.__proto__ || Object.getPrototypeOf(MyInnerComponent)).apply(this, arguments));
}
return MyInnerComponent;
}(_elementToFunc(HTMLDivElement)), _class12.$$componentName = 'MyInnerComponent', _temp7)) || _class11) || _class11);
_Register.Register.customElement(MyInnerComponent, _storage.storage.get(MyInnerComponent).get('@component'));
$('body').append('<my-innercomponent>Im inner of MyInnerComponent</my-innercomponent>');
_context7.next = 5;
return delay(10);
case 5:
$('my-innercomponent').get(0).outerHTML.removeGutter().should.equal('\n\t\t\t<my-innercomponent rendered="true">\n\t\t\t\t<div class="a"></div>\n\t\t\t\t<div class="b"></div>\n\t\t\t\t<div class="c">\n\t\t\t\t\t<span><slot>Im inner of MyInnerComponent</slot></span>\n\t\t\t\t</div>\n\t\t\t</my-innercomponent>\n\t\t'.removeGutter());
// cleanup
$('my-innercomponent').remove();
case 7:
case 'end':
return _context7.stop();
}
}
}, _callee6, _this2);
})));
it('render compontents only once on nested component', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee7() {
var _dec16, _dec17, _dec18, _class13, _desc3, _value3, _class14, _class15, _temp8, _dec19, _dec20, _dec21, _class16, _desc4, _value4, _class17, _class18, _temp9, _dec22, _dec23, _dec24, _class19, _desc5, _value5, _class20, _class21, _temp10;
var MyQuxust, MySpecialCom, MyAwesomeCom, _storage$get$get$get$, _storage$get$get$get$2, MyQuxust_events, _storage$get$get$get$3, _storage$get$get$get$4, MySpecialCom_events, _storage$get$get$get$5, _storage$get$get$get$6, MyAwesomeCom_events, spy_myQuxust, spy_mySpecialCom, spy_myAwesomeCom, spy_myQuxust_created, spy_mySpecialCom_created, spy_myAwesomeCom_created, markup, myQuxstNode;
return regeneratorRuntime.wrap(function _callee7$(_context8) {
while (1) {
switch (_context8.prev = _context8.next) {
case 0:
MyQuxust = (_dec16 = view('\n\t\t\t<div class="x"></div>\n\t\t\t<div class="y"></div>\n\t\t\t<div class="z">\n\t\t\t\t<span><slot></slot></span>\n\t\t\t</div>\n\t\t'), _dec17 = component({
name: 'my-quxust'
}), _dec18 = on(EVENT_VIEW_RENDER), _dec16(_class13 = _dec17(_class13 = (_class14 = (_temp8 = _class15 = function (_elementToFunc7) {
_inherits(MyQuxust, _elementToFunc7);
function MyQuxust() {
_classCallCheck(this, MyQuxust);
return _possibleConstructorReturn(this, (MyQuxust.__proto__ || Object.getPrototypeOf(MyQuxust)).apply(this, arguments));
}
_createClass(MyQuxust, [{
key: 'created',
value: function created() {}
}, {
key: 'viewRendered',
value: function viewRendered() {}
}]);
return MyQuxust;
}(_elementToFunc(HTMLDivElement)), _class15.$$componentName = 'MyQuxust', _temp8), (_applyDecoratedDescriptor(_class14.prototype, 'viewRendered', [_dec18], Object.getOwnPropertyDescriptor(_class14.prototype, 'viewRendered'), _class14.prototype)), _class14)) || _class13) || _class13);
_Register.Register.customElement(MyQuxust, _storage.storage.get(MyQuxust).get('@component'));
MySpecialCom = (_dec19 = view('\n\t\t\t<ul>\n\t\t\t\t<li> One </li>\n\t\t\t\t<li> Two </li>\n\t\t\t\t<li>\n\t\t\t\t\t<slot></slot>\n\t\t\t\t</li>\n\t\t\t</ul>\n\t\t'), _dec20 = component({
name: 'my-specical-com'
}), _dec21 = on(EVENT_VIEW_RENDER), _dec19(_class16 = _dec20(_class16 = (_class17 = (_temp9 = _class18 = function (_elementToFunc8) {
_inherits(MySpecialCom, _elementToFunc8);
function MySpecialCom() {
_classCallCheck(this, MySpecialCom);
return _possibleConstructorReturn(this, (MySpecialCom.__proto__ || Object.getPrototypeOf(MySpecialCom)).apply(this, arguments));
}
_createClass(MySpecialCom, [{
key: 'created',
value: function created() {}
}, {
key: 'viewRendered',
value: function viewRendered() {}
}]);
return MySpecialCom;
}(_elementToFunc(HTMLDivElement)), _class18.$$componentName = 'MySpecialCom', _temp9), (_applyDecoratedDescriptor(_class17.prototype, 'viewRendered', [_dec21], Object.getOwnPropertyDescriptor(_class17.prototype, 'viewRendered'), _class17.prototype)), _class17)) || _class16) || _class16);
_Register.Register.customElement(MySpecialCom, _storage.storage.get(MySpecialCom).get('@component'));
MyAwesomeCom = (_dec22 = view('<p>im template, im appened</p>'), _dec23 = component({
name: 'my-awesome-com'
}), _dec24 = on(EVENT_VIEW_RENDER), _dec22(_class19 = _dec23(_class19 = (_class20 = (_temp10 = _class21 = function (_elementToFunc9) {
_inherits(MyAwesomeCom, _elementToFunc9);
function MyAwesomeCom() {
_classCallCheck(this, MyAwesomeCom);
return _possibleConstructorReturn(this, (MyAwesomeCom.__proto__ || Object.getPrototypeOf(MyAwesomeCom)).apply(this, arguments));
}
_createClass(MyAwesomeCom, [{
key: 'created',
value: function created() {}
}, {
key: 'viewRendered',
value: function viewRendered() {}
}]);
return MyAwesomeCom;
}(_elementToFunc(HTMLDivElement)), _class21.$$componentName = 'MyAwesomeCom', _temp10), (_applyDecoratedDescriptor(_class20.prototype, 'viewRendered', [_dec24], Object.getOwnPropertyDescriptor(_class20.prototype, 'viewRendered'), _class20.prototype)), _class20)) || _class19) || _class19);
/**************************
********* Setup **********
**************************/
// spy events
_Register.Register.customElement(MyAwesomeCom, _storage.storage.get(MyAwesomeCom).get('@component'));
_storage$get$get$get$ = storage.get(MyQuxust).get('@on').get('events').get('local'), _storage$get$get$get$2 = _slicedToArray(_storage$get$get$get$, 1), MyQuxust_events = _storage$get$get$get$2[0];
_storage$get$get$get$3 = storage.get(MySpecialCom).get('@on').get('events').get('local'), _storage$get$get$get$4 = _slicedToArray(_storage$get$get$get$3, 1), MySpecialCom_events = _storage$get$get$get$4[0];
_storage$get$get$get$5 = storage.get(MyAwesomeCom).get('@on').get('events').get('local'), _storage$get$get$get$6 = _slicedToArray(_storage$get$get$get$5, 1), MyAwesomeCom_events = _storage$get$get$get$6[0];
spy_myQuxust = sinon.spy(MyQuxust_events, 1);
spy_mySpecialCom = sinon.spy(MySpecialCom_events, 1);
spy_myAwesomeCom = sinon.spy(MyAwesomeCom_events, 1);
// spy created
spy_myQuxust_created = sinon.spy(MyQuxust.prototype, "created");
spy_mySpecialCom_created = sinon.spy(MySpecialCom.prototype, "created");
spy_myAwesomeCom_created = sinon.spy(MyAwesomeCom.prototype, "created");
$('body').append('\n\t\t\t<my-quxust>\n\t\t\t\t<my-specical-com>\n\t\t\t\t\t<my-awesome-com>\n\t\t\t\t\t\t<span>i have not slot</span>\n\t\t\t\t\t</my-awesome-com>\n\t\t\t\t</my-specical-com>\n\t\t\t</my-quxust>\n\t\t');
_context8.next = 18;
return delay(10);
case 18:
markup = '\n\t\t\t<my-quxust rendered="true">\n\t\t\t\t<div class="x"></div>\n\t\t\t\t<div class="y"></div>\n\t\t\t\t<div class="z">\n\t\t\t\t\t<span>\n\t\t\t\t\t\t<slot>\n\t\t\t\t\t\t\t<my-specical-com rendered="true">\n\t\t\t\t\t\t\t\t<ul>\n\t\t\t\t\t\t\t\t\t<li> One </li>\n\t\t\t\t\t\t\t\t\t<li> Two </li>\n\t\t\t\t\t\t\t\t\t<li>\n\t\t\t\t\t\t\t\t\t\t<slot>\n\t\t\t\t\t\t\t\t\t\t\t<my-awesome-com rendered="true">\n\t\t\t\t\t\t\t\t\t\t\t\t<span>i have not slot</span>\n\t\t\t\t\t\t\t\t\t\t\t\t<p>im template, im appened</p>\n\t\t\t\t\t\t\t\t\t\t\t</my-awesome-com>\n\t\t\t\t\t\t\t\t\t\t</slot>\n\t\t\t\t\t\t\t\t\t</li>\n\t\t\t\t\t\t\t\t</ul>\n\t\t\t\t\t\t\t</my-specical-com>\n\t\t\t\t\t\t</slot>\n\t\t\t\t\t</span>\n\t\t\t\t</div>\n\t\t\t</my-quxust>\n\t\t'.removeGutter();
// should render expected template
myQuxstNode = $('my-quxust').get(0);
myQuxstNode.outerHTML.removeGutter().should.equal(markup);
// should call rendered callback only once
spy_myQuxust.callCount.should.be.equal(1);
spy_mySpecialCom.callCount.should.be.equal(1);
spy_myAwesomeCom.callCount.should.be.equal(1);
// should call created callback only once
spy_myQuxust_created.callCount.should.be.equal(1);
spy_mySpecialCom_created.callCount.should.be.equal(1);
spy_myAwesomeCom_created.callCount.should.be.equal(1);
$('my-quxust').remove();
$('body').append(myQuxstNode);
_context8.next = 31;
return delay(10);
case 31:
// should call rendered callback only once
spy_myQuxust.callCount.should.be.equal(1);
spy_mySpecialCom.callCount.should.be.equal(1);
spy_myAwesomeCom.callCount.should.be.equal(1);
// should call created callback only once
spy_myQuxust_created.callCount.should.be.equal(1);
spy_mySpecialCom_created.callCount.should.be.equal(1);
spy_myAwesomeCom_created.callCount.should.be.equal(1);
// Cleanup
MyQuxust_events[1].restore();
MySpecialCom_events[1].restore();
MyAwesomeCom_events[1].restore();
MyQuxust.prototype.created.restore();
MySpecialCom.prototype.created.restore();
MyAwesomeCom.prototype.created.restore();
case 43:
case 'end':
return _context8.stop();
}
}
}, _callee7, _this2);
})));
case 13:
case 'end':
return _context9.stop();
}
}
}, _callee8, _this2);
})));
}
};
});
//# sourceMappingURL=view.spec.js.map