app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
474 lines (368 loc) • 14.4 kB
JavaScript
System.register(['app-decorators/src/libs/element-to-function', '../../src/bootstrap', '../../src/helpers/delay', 'sinon'], function (_export, _context) {
"use strict";
var _elementToFunc, bootstrapPolyfills, delay, sinon, _this10, _createClass;
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 _classCallCheck(instance, Constructor) {
if (!(instance instanceof Constructor)) {
throw new TypeError("Cannot call a class as a function");
}
}
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 (_appDecoratorsSrcLibsElementToFunction) {
_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
}, function (_srcBootstrap) {
bootstrapPolyfills = _srcBootstrap.bootstrapPolyfills;
}, function (_srcHelpersDelay) {
delay = _srcHelpersDelay.delay;
}, function (_sinon) {
sinon = _sinon.default;
}],
execute: function () {
_this10 = 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('Register kjlkjhlkjhlkjhlkjh', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee2() {
var _ref2, Register;
return regeneratorRuntime.wrap(function _callee2$(_context3) {
while (1) {
switch (_context3.prev = _context3.next) {
case 0:
_context3.next = 2;
return bootstrapPolyfills;
case 2:
_context3.next = 4;
return System.import('src/libs/customelement');
case 4:
_ref2 = _context3.sent;
Register = _ref2.Register;
describe('_getClassName method', function () {
it('should return given class name', function () {
var Foo = function Foo() {
_classCallCheck(this, Foo);
};
Register._getClassName(Foo).should.be.equal('Foo');
});
});
describe('_createComponentName method', function () {
it('should create component name by given name and prefix', function () {
Register._createComponentName('Foo', 'com').should.be.equal('com-foo');
Register._createComponentName('Bar').should.be.equal('com-bar');
});
});
describe('_addExtends method', function () {
it('should add extends prop by _config', function () {
var Foo = function Foo() {
_classCallCheck(this, Foo);
};
Foo = Register._addExtends(Foo, { extends: 'img' });
Foo.should.have.propertyByPath('extends').equal('img');
});
it('should not add extends if not exists', function () {
var Foo = function Foo() {
_classCallCheck(this, Foo);
};
Foo = Register._addExtends(Foo);
Foo.should.not.have.propertyByPath('extends');
});
});
describe('_registerElement method', function () {
it('should add create factory by given Class', function () {
var MyLang = function (_HTMLDivElement) {
_inherits(MyLang, _HTMLDivElement);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
return MyLang;
}(HTMLDivElement);
MyLang = Register._registerElement(MyLang, 'rust-lang');
MyLang.should.have.propertyByPath('create');
});
it('should create instanceof HTMLElement', function () {
var MyLang = function (_HTMLDivElement2) {
_inherits(MyLang, _HTMLDivElement2);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
_createClass(MyLang, [{
key: 'createdCallback',
value: function createdCallback(_ref3) {
var text = _ref3.text;
this.innerHTML = text;
}
}]);
return MyLang;
}(HTMLDivElement);
MyLang = Register._registerElement(MyLang, 'go-lang');
MyLang.create({ text: 'Hello World' }).should.be.instanceOf(HTMLElement);
MyLang.create({ text: 'Hello World' }).outerHTML.should.be.equal('<go-lang>Hello World</go-lang>');
});
it('should create instanceof HTMLImageElement', function () {
var MyLang = function (_HTMLImageElement) {
_inherits(MyLang, _HTMLImageElement);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
_createClass(MyLang, [{
key: 'createdCallback',
value: function createdCallback(_ref4) {
var src = _ref4.src;
this.src = src;
}
}], [{
key: 'extends',
get: function get() {
return 'img';
}
}]);
return MyLang;
}(HTMLImageElement);
MyLang = Register._registerElement(MyLang, 'go-image');
MyLang.create({}).should.be.instanceOf(HTMLImageElement);
MyLang.create({ src: 'golang.png' }).src.should.match(/golang\.png/);
});
it('should not throw error not arguments passed', function () {
var MyLang = function (_HTMLDivElement3) {
_inherits(MyLang, _HTMLDivElement3);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
return MyLang;
}(HTMLDivElement);
MyLang = Register._registerElement(MyLang, 'c-lang');
(function () {
MyLang.create();
}).should.not.throw();
});
it('should throw error when more than one argument added', function () {
var MyLang = function (_HTMLDivElement4) {
_inherits(MyLang, _HTMLDivElement4);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
return MyLang;
}(HTMLDivElement);
MyLang = Register._registerElement(MyLang, 'java-lang');
(function () {
return MyLang.create({ text: 'Hello World' }, 'just-arg');
}).should.throw();
});
it('should throw error when not object or undefined passed as argument', function () {
var MyLang = function (_HTMLDivElement5) {
_inherits(MyLang, _HTMLDivElement5);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
return MyLang;
}(HTMLDivElement);
MyLang = Register._registerElement(MyLang, 'ruby-lang');
(function () {
return MyLang.create('hello world');
}).should.throw();
(function () {
return MyLang.create(true);
}).should.throw();
(function () {
return MyLang.create(1234);
}).should.throw();
});
});
describe('customElement method (integration test)', function () {
it('should create instance of image element', function () {
var MyImage = function (_HTMLImageElement2) {
_inherits(MyImage, _HTMLImageElement2);
function MyImage() {
_classCallCheck(this, MyImage);
return _possibleConstructorReturn(this, (MyImage.__proto__ || Object.getPrototypeOf(MyImage)).apply(this, arguments));
}
_createClass(MyImage, [{
key: 'createdCallback',
value: function createdCallback(_ref5) {
var src = _ref5.src;
this.src = src;
}
}]);
return MyImage;
}(HTMLImageElement);
Register.customElement(MyImage, {
extends: 'img',
name: 'coding-image'
});
var myImageElement = MyImage.create({ src: 'golang.png' });
myImageElement.should.be.instanceOf(HTMLImageElement);
myImageElement.src.should.match(/golang\.png/);
});
it('should call foo bar baz if created', function () {
var MyLang = function (_HTMLDivElement6) {
_inherits(MyLang, _HTMLDivElement6);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
_createClass(MyLang, [{
key: 'createdCallback',
value: function createdCallback(_ref6) {
var value = _ref6.value;
this.$value = value;
}
}, {
key: 'foo',
value: function foo() {
return this.bar();
}
}, {
key: 'bar',
value: function bar() {
return this.$value;
}
}]);
return MyLang;
}(HTMLDivElement);
Register.customElement(MyLang, {
name: 'python-lang'
});
var myLang = MyLang.create({ value: 1234 });
// setup tests (spying)
sinon.spy(myLang, "foo");
sinon.spy(myLang, "bar");
// start tests
myLang.foo().should.be.equal(1234);
myLang.foo.calledOnce.should.be.true();
myLang.bar.calledOnce.should.be.true();
// cleanup (tearDown)
myLang.foo.restore();
myLang.bar.restore();
});
it('should call foo bar baz if created by dom it self', _asyncToGenerator( /*#__PURE__*/regeneratorRuntime.mark(function _callee() {
var MyLang, spy_myLang_foo, spy_myLang_bar, div;
return regeneratorRuntime.wrap(function _callee$(_context2) {
while (1) {
switch (_context2.prev = _context2.next) {
case 0:
MyLang = function (_HTMLFormElement) {
_inherits(MyLang, _HTMLFormElement);
function MyLang() {
_classCallCheck(this, MyLang);
return _possibleConstructorReturn(this, (MyLang.__proto__ || Object.getPrototypeOf(MyLang)).apply(this, arguments));
}
_createClass(MyLang, [{
key: 'createdCallback',
value: function createdCallback() {
this.$value = 1234;
}
}, {
key: 'foo',
value: function foo() {
return this.bar();
}
}, {
key: 'bar',
value: function bar() {
return this.$value;
}
}]);
return MyLang;
}(HTMLFormElement);
Register.customElement(MyLang, {
name: 'coffee-lang',
extends: 'form'
});
spy_myLang_foo = sinon.spy(MyLang.prototype, "foo");
spy_myLang_bar = sinon.spy(MyLang.prototype, "bar");
div = document.createElement('div');
div.id = 'customelement-coffee';
document.body.appendChild(div);
div.innerHTML = '<form is="coffee-lang"></form>';
_context2.next = 10;
return delay(10);
case 10:
// start tests
document.querySelector('[is="coffee-lang"]').foo().should.be.equal(1234);
spy_myLang_foo.calledOnce.should.be.true();
spy_myLang_bar.calledOnce.should.be.true();
// cleanup (tearDown)
spy_myLang_foo.restore();
spy_myLang_bar.restore();
case 15:
case 'end':
return _context2.stop();
}
}
}, _callee, _this10);
})));
});
case 11:
case 'end':
return _context3.stop();
}
}
}, _callee2, _this10);
})));
}
};
});
//# sourceMappingURL=customelement.spec.js.map