Add ButtonView tests

src/panels/view/ButtonView.js

@@ -11,26 +11,27 @@ function(Backbone, require) {
 
 		initialize: function(o){
 			_.bindAll(this, 'startTimer', 'stopTimer', 'showButtons', 'hideButtons','closeOnKeyPress');
-			this.config 	= o.config;
-			this.em			= this.config.em || {};
-			this.pfx 		= this.config.stylePrefix;
-			this.id			= this.pfx + this.model.get('id');
-			this.className	= this.pfx + 'btn ' + this.model.get('className');
-			this.activeCls	= this.pfx + 'active';
-			this.btnsVisCls	= this.pfx + 'visible';
-			this.parentM	= o.parentM || null;
+			var cls = this.model.get('className');
+			this.config = o.config || {};
+			this.em = this.config.em || {};
+			this.pfx = this.config.stylePrefix || '';
+			this.id = this.pfx + this.model.get('id');
+			this.activeCls = this.pfx + 'active';
+			this.btnsVisCls = this.pfx + 'visible';
+			this.parentM = o.parentM || null;
+			this.className = this.pfx + 'btn' + (cls ? ' ' + cls : '');
 			this.listenTo(this.model, 'change:active updateActive', this.updateActive);
 			this.listenTo(this.model, 'checkActive', this.checkActive);
-			this.listenTo(this.model, 'change:bntsVis',		this.updateBtnsVis);
-			this.listenTo(this.model, 'change:attributes', 	this.updateAttributes);
-			this.listenTo(this.model, 'change:className', 	this.updateClassName);
+			this.listenTo(this.model, 'change:bntsVis', this.updateBtnsVis);
+			this.listenTo(this.model, 'change:attributes', this.updateAttributes);
+			this.listenTo(this.model, 'change:className', this.updateClassName);
 
 			if(this.model.get('buttons').length){
 				this.$el.on('mousedown', this.startTimer);
 				this.$el.append($('<div>',{class: this.pfx + 'arrow-rd'}));
 			}
 
-			if(this.em)
+			if(this.em && this.em.get)
 				this.commands	= this.em.get('Commands');
 		},
 
@@ -41,7 +42,8 @@ function(Backbone, require) {
 		 * */
 		updateClassName: function()
 		{
-			this.$el.attr('class', this.pfx + 'btn ' + this.model.get('className'));
+			var cls = this.model.get('className');
+			this.$el.attr('class', this.pfx + 'btn' + (cls ? ' ' + cls : ''));
 		},
 
 		/**
@@ -105,6 +107,7 @@ function(Backbone, require) {
 			$(document).on('mousedown',	this.hideButtons);
 			$(document).on('keypress',	this.closeOnKeyPress);
 		},
+
 		/**
 		 * Hide children buttons
 		 *

test/specs/panels/main.js

@@ -4,13 +4,15 @@ define([
 				'Panels',
 				modulePath + '/model/PanelModels',
 				modulePath + '/view/PanelView',
-				modulePath + '/view/PanelsView'
+				modulePath + '/view/PanelsView',
+				modulePath + '/view/ButtonView'
 				 ],
 	function(
 					Panels,
 					Models,
 					PanelView,
-					PanelsView
+					PanelsView,
+					ButtonView
 					) {
 
 		describe('Panels', function() {
@@ -105,6 +107,7 @@ define([
 			Models.run();
 			PanelView.run();
 			PanelsView.run();
+			ButtonView.run();
 
 		});
 });

test/specs/panels/view/ButtonView.js

@@ -0,0 +1,76 @@
+var path = 'Panels/view/';
+define([path + 'ButtonView', 'Panels/model/Button'],
+  function(ButtonView, Button) {
+
+    return {
+      run : function(){
+
+          describe('ButtonView', function() {
+
+            var $fixtures;
+            var $fixture;
+            var model;
+            var view;
+            var btnClass = 'btn';
+
+            before(function () {
+              $fixtures  = $("#fixtures");
+              $fixture   = $('<div class="cssrule-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              model = new Button();
+              view = new ButtonView({
+                model: model
+              });
+              $fixture.empty().appendTo($fixtures);
+              $fixture.html(view.render().el);
+            });
+
+            afterEach(function () {
+              view.remove();
+            });
+
+            after(function () {
+              $fixture.remove();
+            });
+
+            it('Button empty', function() {
+              $fixture.html().should.be.equal('<span class="' + btnClass+ '"></span>');
+            });
+
+            it('Update class', function() {
+              model.set('className','test');
+              view.el.getAttribute('class').should.be.equal(btnClass + ' test');
+            });
+
+            it('Update attributes', function() {
+              model.set('attributes',{
+                'data-test': 'test-value'
+              });
+              view.el.getAttribute('data-test').should.be.equal('test-value');
+            });
+
+            it('Check enable active', function() {
+              model.set('active', true, {silent: true});
+              view.checkActive();
+              view.el.getAttribute('class').should.be.equal(btnClass + ' active');
+            });
+
+            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('Renders correctly', function() {
+              view.render().should.be.ok;
+            });
+
+        });
+      }
+    };
+
+});