Add ProprtyColorView tests

src/style_manager/view/PropertyColorView.js

@@ -1,14 +1,14 @@
-define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyColor.html'], 
+define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyColor.html'],
 	function (Backbone, PropertyView, Spectrum, propertyTemplate) {
-	/** 
+	/**
 	 * @class PropertyColorView
 	 * */
 	return PropertyView.extend({
-		
+
 		template: _.template(propertyTemplate),
-		
-		/** 
-		 * @inheritdoc 
+
+		/**
+		 * @inheritdoc
 		 * */
 		valueChanged: function(){
 			PropertyView.prototype.valueChanged.apply(this, arguments);
@@ -17,7 +17,7 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo
 				this.$colorPicker.spectrum("set", v).css('background-color', v);
 			}
 		},
-		
+
 		/** @inheritdoc */
 		renderInput: function() {
 			if(!this.$input){
@@ -33,25 +33,25 @@ define(['backbone','./PropertyView', 'Spectrum', 'text!./../templates/propertyCo
 					cancelText: '⨯',
 					move: function(color) {
 						var c	= color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
-						that.$colorPicker.css('background-color', c); 
+						that.$colorPicker.get(0).style.backgroundColor = c;
 					},
 					change: function(color) {
 						var c	= color.getAlpha() == 1 ? color.toHexString() : color.toRgbString();
 						c = c.replace(/ /g,'');
-						that.$colorPicker.css('background-color', c);
+						that.$colorPicker.get(0).style.backgroundColor = c;
 						that.model.set('value', c);
 					}
 				});
 				this.$el.find('#' + this.pfx + 'input-holder').append(this.$colorPicker);
 			}
-			this.setValue(this.componentValue,0);
+			this.setValue(this.componentValue, 0);
 		},
-		
+
 		/** @inheritdoc */
 		setValue: function(value, f){
 			PropertyView.prototype.setValue.apply(this, arguments);
-			var v 	= this.model.get('value') || this.defaultValue;
-			v		= value || v;
+			var v = this.model.get('value') || this.defaultValue;
+			v = value || v;
 			if(this.$colorPicker)
 				this.$colorPicker.spectrum("set", v).css('background-color',v);
 		},

test/specs/style_manager/main.js

@@ -9,6 +9,7 @@ define([
         modulePath + '/view/PropertySelectView',
         modulePath + '/view/PropertyRadioView',
         modulePath + '/view/PropertyIntegerView',
+        modulePath + '/view/PropertyColorView',
          ],
   function(
           StyleManager,
@@ -18,7 +19,8 @@ define([
           PropertyView,
           PropertySelectView,
           PropertyRadioView,
-          PropertyIntegerView
+          PropertyIntegerView,
+          PropertyColorView
           ) {
 
     describe('StyleManager', function() {
@@ -191,6 +193,7 @@ define([
         PropertySelectView.run();
         PropertyRadioView.run();
         PropertyIntegerView.run();
+        PropertyColorView.run();
 
       });
 

test/specs/style_manager/view/PropertyColorView.js

@@ -0,0 +1,163 @@
+var path = 'StyleManager/view/';
+define([path + 'PropertyColorView', 'StyleManager/model/Property', 'DomComponents/model/Component'],
+  function(PropertyColorView, Property, Component) {
+
+    return {
+      run : function(){
+
+          describe('PropertyColorView', function() {
+
+            var component;
+            var $fixtures;
+            var $fixture;
+            var target;
+            var model;
+            var view;
+            var propName = 'testprop';
+            var propValue = '#fff';
+            var defValue = 'test2value';
+
+            before(function () {
+              $fixtures  = $("#fixtures");
+              $fixture   = $('<div class="sm-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              target = new Component();
+              component = new Component();
+              model = new Property({
+                type: 'color',
+                property: propName
+              });
+              view = new PropertyColorView({
+                model: model
+              });
+              $fixture.empty().appendTo($fixtures);
+              $fixture.html(view.render().el);
+            });
+
+            afterEach(function () {
+              //view.remove(); // strange errors ???
+            });
+
+            after(function () {
+              $fixture.remove();
+              delete component;
+              delete view;
+              delete model;
+            });
+
+            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('Inputs rendered', function() {
+              var prop = view.el;
+              prop.querySelector('input[type=text]').should.be.ok;
+              prop.querySelector('.color-picker').should.be.ok;
+            });
+
+            it('Inputs should exist', function() {
+              view.$input.should.be.ok;
+              view.$colorPicker.should.be.ok;
+            });
+
+            it('Input value is empty', function() {
+              view.model.get('value').should.be.empty;
+              view.$input.val().should.be.empty;
+            });
+
+            it('Update model on setValue', function() {
+              view.setValue(propValue);
+              view.model.get('value').should.equal(propValue);
+              view.$input.val().should.equal(propValue);
+            });
+
+            it('Update model on input change', function() {
+              view.$input.val(propValue).trigger('change');
+              view.model.get('value').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 PropertyColorView({
+                  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] = '#123123';
+                component.set('style', style);
+                view.propTarget.trigger('update');
+                view.model.get('value').should.equal('#123123');
+                view.$input.val().should.equal('#123123');
+              });
+
+            })
+
+            describe('Init property', function() {
+
+              beforeEach(function () {
+                component = new Component();
+                model = new Property({
+                  type: 'color',
+                  property: propName,
+                  defaults: propValue,
+                });
+                view = new PropertyColorView({
+                  model: model
+                });
+                $fixture.empty().appendTo($fixtures);
+                $fixture.html(view.render().el);
+              });
+
+              it('Value as default', function() {
+                view.model.get('value').should.equal(propValue);
+              });
+
+              it('Input value is as default', function() {
+                view.$input.val().should.equal(propValue);
+              });
+
+            });
+
+        });
+      }
+    };
+
+});

test/specs/style_manager/view/PropertyIntegerView.js

@@ -156,7 +156,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
               });
 
             })
-/*
+
             describe('Init property', function() {
 
               beforeEach(function () {
@@ -200,7 +200,7 @@ define([path + 'PropertyIntegerView', 'StyleManager/model/Property', 'DomCompone
               });
 
             });
-*/
+
         });
       }
     };