Add ComponentView tests

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();

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('<div style="" class=""></div>');
+              $fixture.html().should.be.equal('<div></div>');
             });
-/*
-            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('<div class="' + hClass + '"></div>');
+            });
+
+            it('Clean form helper state', function() {
+              model.set('state', 'test');
+              model.set('state', '');
+              $fixture.html().should.be.equal('<div class=""></div>');
+            });
+
+            it('Add helper class on status update', function() {
+              model.set('status', 'selected');
+              $fixture.html().should.be.equal('<div class="selected"></div>');
+            });
+
+            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('<span></span><div title="test"></div>');
             });
-*/
+
         });
       }
     };