From 661c9b9ff9ee772edfb8cfb79a2f56a16f8ca094 Mon Sep 17 00:00:00 2001 From: Artur Arseniev Date: Wed, 27 Apr 2016 23:18:52 +0200 Subject: [PATCH] Add ComponentView tests --- src/dom_components/view/ComponentView.js | 40 +++---- .../dom_components/view/componentView.js | 102 ++++++++++++++---- 2 files changed, 100 insertions(+), 42 deletions(-) diff --git a/src/dom_components/view/ComponentView.js b/src/dom_components/view/ComponentView.js index 78847dca9..8e278e581 100644 --- a/src/dom_components/view/ComponentView.js +++ b/src/dom_components/view/ComponentView.js @@ -3,20 +3,20 @@ define(['backbone', './ComponentsView'], return Backbone.View.extend({ - className : function(){ //load classes from model + className : function(){ return this.getClasses(); }, - tagName: function(){ //load tagName from model + tagName: function(){ return this.model.get('tagName'); }, initialize: function(opt){ - this.config = opt.config || {}; - this.pfx = this.config.stylePrefix; + this.config = opt.config || {}; + this.pfx = this.config.stylePrefix || ''; this.components = this.model.get('components'); - this.attr = this.model.get("attributes"); - this.classe = this.attr.class || []; + this.attr = this.model.get("attributes"); + this.classe = this.attr.class || []; this.listenTo(this.model, 'destroy remove', this.remove); this.listenTo(this.model, 'change:style', this.updateStyle); this.listenTo(this.model, 'change:attributes', this.updateAttributes); @@ -66,8 +66,8 @@ define(['backbone', './ComponentsView'], * @private * */ updateStatus: function(e){ - var s = this.model.get('status'), - pfx = this.pfx; + var s = this.model.get('status'), + pfx = this.pfx; switch(s) { case 'selected': this.$el.addClass(pfx + 'selected'); @@ -87,7 +87,7 @@ define(['backbone', './ComponentsView'], * @private * */ getClasses: function(){ - var attr = this.model.get("attributes"), + var attr = this.model.get("attributes"), classes = attr['class'] || []; if(classes.length){ return classes.join(" "); @@ -97,13 +97,11 @@ define(['backbone', './ComponentsView'], /** * Update attributes - * - * @return void * @private * */ updateAttributes: function(){ - var attributes = {}, - attr = this.model.get("attributes"); + var attributes = {}, + attr = this.model.get("attributes"); for(var key in attr) { if(attr.hasOwnProperty(key)) attributes[key] = attr[key]; @@ -112,15 +110,16 @@ define(['backbone', './ComponentsView'], if(this.model.get("src")) attributes.src = this.model.get("src"); - attributes.style = this.getStyleString(); + var styleStr = this.getStyleString(); + + if(styleStr) + attributes.style = styleStr; this.$el.attr(attributes); }, /** * Update style attribute - * - * @return void * @private * */ updateStyle: function(){ @@ -129,13 +128,12 @@ define(['backbone', './ComponentsView'], /** * Return style string - * - * @return {String} + * @return {string} * @private * */ getStyleString: function(){ var style = ''; - this.style = this.model.get('style'); + this.style = this.model.get('style'); for(var key in this.style) { if(this.style.hasOwnProperty(key)) style += key + ':' + this.style[key] + ';'; @@ -154,8 +152,10 @@ define(['backbone', './ComponentsView'], this.model.get('classes').each(function(model){ str += model.get('name') + ' '; }); + str = str.trim(); - this.$el.attr('class',str.trim()); + if(str) + this.$el.attr('class',str); // Regenerate status class this.updateStatus(); diff --git a/test/specs/dom_components/view/componentView.js b/test/specs/dom_components/view/componentView.js index 439bd2cbf..3ed59b58b 100644 --- a/test/specs/dom_components/view/componentView.js +++ b/test/specs/dom_components/view/componentView.js @@ -11,7 +11,7 @@ define([path + 'ComponentView', 'DomComponents/model/Component'], var $fixture; var model; var view; - var btnClass = 'btn'; + var hClass = 'hc-state'; before(function () { $fixtures = $("#fixtures"); @@ -36,39 +36,97 @@ define([path + 'ComponentView', 'DomComponents/model/Component'], }); it('Component empty', function() { - $fixture.html().should.be.equal('
'); + $fixture.html().should.be.equal('
'); }); -/* - it('Update class', function() { - model.set('className','test'); - view.el.getAttribute('class').should.be.equal(btnClass + ' test'); + + it('Add helper class on update of state', function() { + model.set('state', 'test'); + $fixture.html().should.be.equal('
'); + }); + + it('Clean form helper state', function() { + model.set('state', 'test'); + model.set('state', ''); + $fixture.html().should.be.equal('
'); + }); + + it('Add helper class on status update', function() { + model.set('status', 'selected'); + $fixture.html().should.be.equal('
'); + }); + + it('Get string of classes', function() { + model.set('attributes', { class: ['test', 'test2']}); + view.getClasses().should.be.equal('test test2'); }); it('Update attributes', function() { - model.set('attributes',{ - 'data-test': 'test-value' + model.set('attributes', { + title: 'value', + 'data-test': 'value2', + }); + view.el.getAttribute('title').should.be.equal('value'); + view.el.getAttribute('data-test').should.be.equal('value2'); + }); + + it('Update style', function() { + model.set('style', { + color: 'red', + float: 'left' + }); + view.el.getAttribute('style').should.be.equal('color:red;float:left;'); + }); + + it('Clean style', function() { + model.set('style', { color: 'red'}); + model.set('style', {}); + view.el.getAttribute('style').should.be.equal(''); + }); + + it('Get style string', function() { + model.set('style', { + color: 'red', + float: 'left' }); - view.el.getAttribute('data-test').should.be.equal('test-value'); + view.getStyleString().should.be.equal('color:red;float:left;'); + }); + + it('Add class', function() { + model.get('classes').add({name: 'test'}); + view.el.getAttribute('class').should.be.equal('test'); + }); + + it('Add classes', function() { + model.get('classes').add([{name: 'test'}, {name: 'test2'}]); + view.el.getAttribute('class').should.be.equal('test test2'); }); - it('Check enable active', function() { - model.set('active', true, {silent: true}); - view.checkActive(); - view.el.getAttribute('class').should.be.equal(btnClass + ' active'); + it('Update on remove of some class', function() { + var cls1 = model.get('classes').add({name: 'test'}); + var cls12 = model.get('classes').add({name: 'test2'}); + model.get('classes').remove(cls1); + view.el.getAttribute('class').should.be.equal('test2'); }); - it('Check disable active', function() { - model.set('active', true, {silent: true}); - view.checkActive(); - model.set('active', false, {silent: true}); - view.checkActive(); - view.el.getAttribute('class').should.be.equal(btnClass); + it('Init with different tag', function() { + model = new Component({ tagName: 'span' }); + view = new ComponentView({ model: model }); + view.render().el.tagName.should.be.equal('SPAN'); }); - it('Renders correctly', function() { - view.render().should.be.ok; + it('Init with nested components', function() { + model = new Component({ + components: [ + { tagName: 'span'}, + { attributes: { title: 'test'}} + ] + }); + view = new ComponentView({ + model: model + }); + view.render().$el.html().should.be.equal('
'); }); -*/ + }); } };