app-decorators
Version:
Collection of useful ES7 Decorators, writtin in ES6, that can be used for building webapps
453 lines (345 loc) • 13.5 kB
JavaScript
System.register(['app-decorators/src/libs/element-to-function', '../../src/libs/view', '../../node_modules/handlebars/dist/handlebars'], function (_export, _context) {
"use strict";
var _elementToFunc, View, VARS, NO_VARS, PRE_COMPILED, Handlebars;
return {
setters: [function (_appDecoratorsSrcLibsElementToFunction) {
_elementToFunc = _appDecoratorsSrcLibsElementToFunction.default;
}, function (_srcLibsView) {
View = _srcLibsView.View;
VARS = _srcLibsView.VARS;
NO_VARS = _srcLibsView.NO_VARS;
PRE_COMPILED = _srcLibsView.PRE_COMPILED;
}, function (_node_modulesHandlebarsDistHandlebars) {
Handlebars = _node_modulesHandlebarsDistHandlebars.default;
}],
execute: function () {
describe('class View', function () {
describe('new View()', function () {
it('should throw error if initialized without options', function () {
(function () {
return new View();
}).should.throw('\n\t\t\t\tRequired: rootNode.\n\t\t\t\tOptional: use prerenderer when template/s are precompiled.\n\t\t\t\tOptional: use precompiler when render raw template string.\n\t\t\t');
});
it('should not throw error if minimum options passed', function () {
(function () {
new View({
rootNode: document.createElement('p')
});
}).should.not.throw();
(function () {
new View({
rootNode: document.createElement('p'),
precompiler: Handlebars.precompile
});
}).should.not.throw();
(function () {
new View({
rootNode: document.createElement('p'),
prerenderer: Handlebars.template
});
}).should.not.throw();
});
});
describe('method set/get', function () {
it('should accept args as string and objects', function () {
var view = new View({
rootNode: document.createElement('div')
});
view.set('foo', 1);
view.set('bar', 2);
view.set('baz', 3);
// test
view.get('foo').should.eql(1);
view.get('bar').should.eql(2);
view.get('baz').should.eql(3);
// override bar
view.set('bar', 999);
// test again
view.get('foo').should.eql(1);
view.get('bar').should.eql(999);
view.get('baz').should.eql(3);
// test length of vars
Object.keys(view.getVars()).should.length(3);
view.set({
foo: 11,
baz: 33,
bazinga: {
what: { the: { f: '!' } }
}
});
view.get('foo').should.eql(11);
view.get('bar').should.eql(999);
view.get('baz').should.eql(33);
view.get('bazinga').should.have.propertyByPath('what', 'the', 'f').eql('!');
// test length of vars
Object.keys(view.getVars()).should.length(4);
});
it('should render passed args with right setup', function () {
var view = new View({
rootNode: document.createElement('p'),
template: '<div>{{foo}}</div><span>{{bar}}</span>',
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template
});
view.set({
foo: 'Hello',
bar: 'Mars'
});
// tests
view.render(null, { renderedFlag: false });
view.renderedTemplate.should.equal('<div>Hello</div><span>Mars</span>');
view.el.outerHTML.should.equal('<p><div>Hello</div><span>Mars</span></p>');
});
});
describe('method _getTemplateType', function () {
it('should determine template type', function () {
var view = new View({
rootNode: document.createElement('div')
});
view._getTemplateType("Hello World").should.be.equal(NO_VARS);
view._getTemplateType("Hello {{foo}}").should.be.equal(VARS);
view._getTemplateType({}).should.be.equal(PRE_COMPILED);
});
});
describe('method compile', function () {
var view = null;
beforeEach(function () {
view = new View({
rootNode: document.createElement('p'),
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template
});
});
afterEach(function () {
view = null;
});
it('should compile given NO_VARS template', function () {
var template = view.compile(NO_VARS, 'Hello World {{ignore}}');
template({ ignore: 'foo' }).should.be.equal('Hello World {{ignore}}');
});
it('should compile given VARS template', function () {
var template = view.compile(VARS, '{{foo}} {{bar}}');
template({ foo: 'hello', bar: 'world' }).should.be.equal('hello world');
});
it('should compile given PRE_COMPILED template', function () {
var precompiled = view._precompile('{{foo}} {{bar}}');
var template = view.compile(PRE_COMPILED, precompiled);
template({ foo: 'hello', bar: 'world' }).should.be.equal('hello world');
});
});
describe('method setTemplate', function () {
var view = null;
var spy_compile = null;
beforeEach(function () {
spy_compile = sinon.spy(View.prototype, "compile");
view = new View({
rootNode: document.createElement('p'),
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template
});
});
afterEach(function () {
view = null;
spy_compile.restore();
});
it('should call compile with with "NO_VARS" arg', function () {
view.setTemplate('<div>Hello</div><span>World</span>');
spy_compile.args[0][0].should.be.equal('NO_VARS');
spy_compile.args[0][2].should.be.equal('base');
});
it('should call compile with with "VARS" arg', function () {
view.setTemplate('<div>{{foo}}</div><span>{{bar}}</span>');
spy_compile.args[0][0].should.be.equal('VARS');
spy_compile.args[0][2].should.be.equal('base');
});
it('should call compile with with "PRE_COMPILED" arg', function () {
var precompiled = view._precompile('{{foo}} {{bar}}');
view.setTemplate(precompiled);
spy_compile.args[0][0].should.be.equal('PRE_COMPILED');
spy_compile.args[0][2].should.be.equal('base');
});
it('should throw error when not set template', function () {
var expectedErrorMessage = /setTemplate: an error occurred: unknown template type/;
(function () {
return view.setTemplate();
}).should.throw(expectedErrorMessage);
(function () {
return view.setTemplate(function () {});
}).should.throw(expectedErrorMessage);
(function () {
return view.setTemplate(function () {});
}).should.throw(expectedErrorMessage);
(function () {
return view.setTemplate(null);
}).should.throw(expectedErrorMessage);
(function () {
return view.setTemplate(undefined);
}).should.throw(expectedErrorMessage);
(function () {
return view.setTemplate(true);
}).should.throw(expectedErrorMessage);
(function () {
return view.setTemplate([]);
}).should.throw(expectedErrorMessage);
});
});
describe('initialized method', function () {
it('should initialize view', function () {
var view = new View({
rootNode: document.createElement('p'),
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template
});
view.initialized().should.be.true();
});
});
describe('delete method', function () {
it('should delete initialized view', function () {
var view = new View({
rootNode: document.createElement('p'),
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template
});
view.destroy();
view.initialized().should.be.false();
});
});
describe('reinit method', function () {
it('should reinit view after deleting', function () {
var options = {
rootNode: document.createElement('p'),
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template
};
var view = new View(options);
view.destroy();
view.reinit(options);
view.initialized().should.be.true();
});
});
describe('reinit method"', function () {
it('should throw error if reinit called without options parameter', function () {
var view = new View({
rootNode: document.createElement('p'),
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template
});
view.destroy();
(function () {
return view.reinit();
}).should.throw('\n\t\t\t\tRequired: rootNode.\n\t\t\t\tOptional: use prerenderer when template/s are precompiled.\n\t\t\t\tOptional: use precompiler when render raw template string.\n\t\t\t');
});
});
describe('method "render" logic', function () {});
describe('method "create"', function () {
it('should render expected template', function () {
var view = new View({
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template,
rootNode: document.createElement('p'),
vars: {
foo: 'Hello',
bar: 'World!'
},
template: '<div class="foo">{{foo}}</div><div class="bar">{{bar}}</div>'
});
view.render();
view.renderedTemplate.should.equal('<div class="foo">Hello</div><div class="bar">World!</div>');
view.el.outerHTML.should.equal('<p rendered="true"><div class="foo">Hello</div><div class="bar">World!</div></p>');
});
});
describe('innerHTML + slot', function () {
it('should append innerHTML nodes to "slot" node', function () {
var rootNode = document.createElement('p');
rootNode.innerHTML = '<ul><li> nok nok </li></ul>';
var view = new View({
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template,
rootNode: rootNode,
vars: {
foo: 'Thats',
bar: 'nice'
},
template: '<div class="foo">{{foo}}</div><slot></slot><div class="bar">{{bar}}</div>'
});
view.render(null, { renderedFlag: false });
view.el.outerHTML.should.equal('<p><div class="foo">Thats</div><slot><ul><li> nok nok </li></ul></slot><div class="bar">nice</div></p>');
});
});
describe('innerHTML + hole', function () {
it.skip('should replace himself with given selector', function () {
var rootNode = document.createElement('p');
rootNode.innerHTML = '<span>Hello World</div>';
var view = new View({
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template,
rootNode: rootNode,
vars: {
foo: 'Thats',
bar: 'nice'
},
template: '<div class="foo">{{foo}}</div><slot type="blackhole"></slot><div class="bar">{{bar}}</div>'
});
view.render(null, { renderedFlag: false });
view.replaceSelf('black-hole');
view.el.outerHTML.should.equal('<div boundary="" class="foo">Thats</div><p rendered="true"><span>Hello World</div></p><div class="bar">nice</div>');
});
});
describe('render() method', function () {
it('should not render because rendered attribute flag is set or only when explicitly wanted', function () {
var rootNode = document.createElement('my-element');
rootNode.setAttribute('rendered', true);
rootNode.innerHTML = 'Should not rendered';
var view = new View({
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template,
rootNode: rootNode,
vars: {
foo: 'Gokcen'
},
template: '<div class="foo">{{foo}}</div>'
});
// should not render because rendered flag is set
view.render();
view.getRootNode().outerHTML.should.equal('<my-element rendered="true">Should not rendered</my-element>');
// explicitly wanted to render because force = true is set
view.render(null, { force: true });
view.el.outerHTML.should.equal('<my-element rendered="true"><div class="foo">Gokcen</div></my-element>');
});
it('should render only once if called many times or render force true', function () {
var spy_setAttribute = sinon.spy(View.prototype, "setAttribute");
var spy_getAttribute = sinon.spy(View.prototype, "getAttribute");
var view = new View({
precompiler: Handlebars.precompile,
prerenderer: Handlebars.template,
rootNode: document.createElement('my-element'),
vars: {
foo: 'Liya'
},
template: '<div class="foo">{{foo}}</div>'
});
// first render call should render
view.render();
view.el.outerHTML.should.equal('<my-element rendered="true"><div class="foo">Liya</div></my-element>');
spy_getAttribute.callCount.should.equal(1);
spy_getAttribute.args[0][1].should.equal('rendered');
spy_setAttribute.callCount.should.equal(1);
spy_setAttribute.args[0][1].should.equal('rendered');
// second render call should not render
view.render();
spy_getAttribute.callCount.should.equal(2);
spy_setAttribute.callCount.should.equal(1);
// third render call should render due "force:true"
view.render(null, { force: true });
spy_getAttribute.callCount.should.equal(3);
spy_setAttribute.callCount.should.equal(2);
//cleanup spy
View.prototype.getAttribute.restore();
View.prototype.setAttribute.restore();
});
});
});
}
};
});
//# sourceMappingURL=view.spec.js.map