Add PropertyRadioView tests

src/style_manager/view/PropertyRadioView.js

@@ -9,18 +9,10 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyRadio.html'],
 
 		initialize: function(options) {
 			PropertyView.prototype.initialize.apply(this, arguments);
-			this.list = this.model.get('list');
+			this.list = this.model.get('list') || [];
 			this.className = this.className + ' '+ this.pfx +'list';
 		},
 
-		/**
-		 * Fired when the input value is updated
-		 */
-		valueUpdated: function(){
-			if(this.$input)
-				this.model.set('value', this.$el.find('input:checked').val());
-		},
-
 		/** @inheritdoc */
 		renderInput: function() {
 			var pfx	= this.pfx;
@@ -28,30 +20,40 @@ define(['backbone','./PropertyView', 'text!./../templates/propertyRadio.html'],
 				if(this.list && this.list.length){
 					this.input = '';
 					_.each(this.list,function(el){
-						var cl 			= el.className ? el.className+' '+ pfx + 'icon' : '',
+						var cl = el.className ? el.className + ' ' + pfx + 'icon' : '',
-							title 		= el.title ? el.title : '',
+							id = this.property + '-' + el.value,
-							id			= this.property+'-'+el.value;
+							labelTxt = el.name ? el.name : el.value;
+							titleAttr = el.title ? 'title="' + el.title + '"': '';
 						this.input 		+= '<div class="' + pfx + 'el">'+
 							'<input class="'+pfx+'radio" type="radio" id="'+ id +'" name="'+this.property+'" value="'+el.value+'" />'+
-							'<label class="'+cl+'" title="'+title+'" for="'+ id +'">' + (cl ? '' : el.value) + '</label></div>';
+							'<label class="'+cl+'" ' + titleAttr + ' for="'+ id +'">' + (cl ? '' : labelTxt) + '</label></div>';
 					},this);
-					this.$input 		= $(this.input);
+					this.$inputEl = $(this.input);
-					this.$el.find('#'+ pfx +'input-holder').html(this.$input);
+					this.$el.find('#'+ pfx +'input-holder').html(this.$inputEl);
-					this.$inputRadio 	= this.$input.find('input[name="'+this.property+'"]');
+					this.$input = this.$inputEl.find('input[name="'+this.property+'"]');
 				}
 			}
 			this.setValue(this.componentValue);
 		},
 
+		/**
+		 * Returns value from input
+		 * @return {string}
+		 */
+		getInputValue: function(){
+			return this.$input ? this.$el.find('input:checked').val() : '';
+		},
+
 		/** @inheritdoc */
 		setValue: function(value){
-			var v 	= this.model.get('value') || this.defaultValue;
+			var v = this.model.get('value') || this.defaultValue;
-			if(value){
+
+			if(value)
 				v	= value;
-			}
+
-			if(this.$inputRadio){
+			if(this.$input)
-				this.$inputRadio.filter('[value="'+v+'"]').prop('checked', true);
+				this.$input.filter('[value="'+v+'"]').prop('checked', true);
-			}
+
 			this.model.set({value: v},{silent: true});
 		},
 

src/style_manager/view/PropertyView.js

@@ -37,7 +37,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 		 */
 		valueUpdated: function(){
 			if(this.$input)
-				this.model.set('value', this.$input.val());
+				this.model.set('value', this.getInputValue());
 		},
 
 		/**
@@ -115,6 +115,14 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 			return this.model.get('value');
 		},
 
+		/**
+		 * Returns value from input
+		 * @return {string}
+		 */
+		getInputValue: function(){
+			return this.$input ? this.$input.val() : '';
+		},
+
 		/**
 		 * Property was changed, so I need to update the component too
 		 * @param 	{Object}	e	Events
@@ -122,11 +130,11 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 		 * @param		{Object}	opt	Options
 		 * */
 		valueChanged: function(e, val, opt){
-			//var v			= e && e.currentTarget ? this.$input.val() : this.model.get('value');
 			var mVal = this.model.get('value');
 
 			if(this.$input)
-				this.$input.val(mVal);
+				this.setValue(mVal);
+				//this.$input.val(mVal);
 
 			if(!this.selectedComponent)
 				return;
@@ -135,17 +143,11 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 			if(!this.isTargetStylable())
 				return;
 
-			var v			= e && e.currentTarget ? this.$input.val() : this.model.get('value'),
+			var v = e && e.currentTarget ? this.getInputValue() : this.model.get('value'),
-					u 		= this.$unit ? this.$unit.val() : '',
+					u = this.$unit ? this.$unit.val() : '',
 					value	= v + u,
 					avSt	= opt ? opt.avoidStore : 0;
 
-			//The easiest way to deal with radio inputs
-			if(this.model.get('type') == 'radio')
-				value = this.$el.find('input:checked').val();
-
-			//if(this.$input)
-				//this.$input.val(v);
 			this.model.set({ value : v, unit: u }, { silent : true });
 
 			if(this.func)

test/specs/style_manager/main.js

@@ -7,6 +7,7 @@ define([
         modulePath + '/view/SectorsView',
         modulePath + '/view/PropertyView',
         modulePath + '/view/PropertySelectView',
+        modulePath + '/view/PropertyRadioView',
          ],
   function(
           StyleManager,
@@ -14,7 +15,8 @@ define([
           SectorView,
           SectorsView,
           PropertyView,
-          PropertySelectView
+          PropertySelectView,
+          PropertyRadioView
           ) {
 
     describe('StyleManager', function() {
@@ -185,6 +187,7 @@ define([
         SectorsView.run();
         PropertyView.run();
         PropertySelectView.run();
+        PropertyRadioView.run();
 
       });
 

test/specs/style_manager/view/PropertyRadioView.js

@@ -0,0 +1,175 @@
+var path = 'StyleManager/view/';
+define([path + 'PropertyRadioView', 'StyleManager/model/Property', 'DomComponents/model/Component'],
+  function(PropertyRadioView, Property, Component) {
+
+    return {
+      run : function(){
+
+          describe('PropertyRadioView', function() {
+
+            var component;
+            var $fixtures;
+            var $fixture;
+            var target;
+            var model;
+            var view;
+            var propName = 'testprop';
+            var propValue = 'test1value';
+            var defValue = 'test2value';
+            var options = [
+                  { value: 'test1value', 'title': 'testtitle'},
+                  { name: 'test2', value: 'test2value'}
+                ];
+
+            before(function () {
+              $fixtures  = $("#fixtures");
+              $fixture   = $('<div class="sm-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              target = new Component();
+              component = new Component();
+              model = new Property({
+                type: 'radio',
+                list: options,
+                property: propName
+              });
+              view = new PropertyRadioView({
+                model: model
+              });
+              $fixture.empty().appendTo($fixtures);
+              $fixture.html(view.render().el);
+            });
+
+            afterEach(function () {
+              //view.remove(); // strange errors ???
+            });
+
+            after(function () {
+              $fixture.remove();
+              delete component;
+            });
+
+            it('Rendered correctly', function() {
+              var prop = view.el;
+              $fixture.get(0).querySelector('.property').should.be.ok;
+              prop.querySelector('.label').should.be.ok;
+              prop.querySelector('.field').should.be.ok;
+            });
+
+            it('Radio rendered', function() {
+              var prop = view.el;
+              prop.querySelector('input[type=radio]').should.be.ok;
+            });
+
+            it('Options rendered', function() {
+              var input = view.el.querySelector('#input-holder');
+              input.children.length.should.equal(options.length);
+            });
+
+            it('Options rendered correctly', function() {
+              var children = view.el.querySelector('#input-holder').children;
+              children[0].querySelector('label').textContent.should.equal('test1value');
+              children[1].querySelector('label').textContent.should.equal('test2');
+              children[0].querySelector('input').value.should.equal(options[0].value);
+              children[1].querySelector('input').value.should.equal(options[1].value);
+              children[0].querySelector('label').getAttribute('title').should.equal(options[0].title);
+              (children[1].querySelector('label').getAttribute('title') == null)
+                .should.equal(true);
+            });
+
+            it('Input should exist', function() {
+              view.$input.should.be.ok;
+            });
+
+            it('Input value is empty', function() {
+              view.model.get('value').should.be.empty;
+            });
+
+            it('Update model on input change', function() {
+              view.setValue(propValue);
+              view.model.get('value').should.equal(propValue);
+              view.getInputValue().should.equal(propValue);
+            });
+
+            it('Update input on value change', function() {
+              view.model.set('value', propValue);
+              view.getInputValue().should.equal(propValue);
+            });
+
+            it('Update target on value change', function() {
+              view.selectedComponent = component;
+              view.model.set('value', propValue);
+              var compStyle = view.selectedComponent.get('style');
+              var assertStyle = {};
+              assertStyle[propName] = propValue;
+              compStyle.should.deep.equal(assertStyle);
+            });
+
+            describe('With target setted', function() {
+
+              beforeEach(function () {
+                target.model = component;
+                view = new PropertyRadioView({
+                  model: model,
+                  propTarget: target
+                });
+                $fixture.empty().appendTo($fixtures);
+                $fixture.html(view.render().el);
+              });
+
+              it('Update value and input on target swap', function() {
+                var style = {};
+                style[propName] = propValue;
+                component.set('style', style);
+                view.propTarget.trigger('update');
+                view.model.get('value').should.equal(propValue);
+                view.getInputValue().should.equal(propValue);
+              });
+
+              it('Update value after multiple swaps', function() {
+                var style = {};
+                style[propName] = propValue;
+                component.set('style', style);
+                view.propTarget.trigger('update');
+                style[propName] = 'test2value';
+                component.set('style', style);
+                view.propTarget.trigger('update');
+                view.model.get('value').should.equal('test2value');
+                view.getInputValue().should.equal('test2value');
+              });
+
+            })
+
+            describe('Init property', function() {
+
+              beforeEach(function () {
+                component = new Component();
+                model = new Property({
+                  type: 'select',
+                  list: options,
+                  defaults: defValue,
+                  property: propName
+                });
+                view = new PropertyRadioView({
+                  model: model
+                });
+                $fixture.empty().appendTo($fixtures);
+                $fixture.html(view.render().el);
+              });
+
+              it('Value as default', function() {
+                view.model.get('value').should.equal(defValue);
+              });
+
+              it('Input value is as default', function() {
+                view.getInputValue().should.equal(defValue);
+              });
+
+            });
+
+        });
+      }
+    };
+
+});

test/specs/style_manager/view/PropertySelectView.js

@@ -84,7 +84,6 @@ define([path + 'PropertySelectView', 'StyleManager/model/Property', 'DomComponen
 
             it('Input value is empty', function() {
               view.model.get('value').should.be.empty;
-              (view.$input.val() === null).should.equal(true);
             });
 
             it('Update model on input change', function() {