Add PropertySelectView tests

src/style_manager/view/PropertySelectView.js

@@ -9,26 +9,27 @@ define(['backbone','./PropertyView', 'text!./../templates/propertySelect.html'],
 
 		initialize: function(options) {
 			PropertyView.prototype.initialize.apply(this, arguments);
-			this.list = this.model.get('list');
+			this.list = this.model.get('list') || [];
 		},
 
 		/** @inheritdoc */
 		renderInput: function() {
 			var pfx	= this.pfx;
 			if(!this.$input){
-				if(this.list && this.list.length){
+				this.input = '<select>';
-					this.input = '<select>';
 
+				if(this.list && this.list.length){
 					_.each(this.list,function(el){
 						var name = el.name ? el.name : el.value;
 						var style = el.style ? el.style.replace(/"/g,'&quot;') : '';
-						this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" style="'+style+'">'+name+'</option>';
+						var styleAttr = style ? 'style="' + style + '"' : '';
-					},this);
+						this.input += '<option value="'+el.value.replace(/"/g,'&quot;')+'" ' + styleAttr + '>'+name+'</option>';
-
+					}, this);
-					this.input 	+= '</select>';
-					this.$input = $(this.input);
-					this.$el.find('#'+ pfx +'input-holder').html(this.$input);
 				}
+
+				this.input 	+= '</select>';
+				this.$input = $(this.input);
+				this.$el.find('#'+ pfx +'input-holder').html(this.$input);
 			}
 			this.setValue(this.componentValue, 0);
 		},

src/style_manager/view/PropertyView.js

@@ -79,7 +79,7 @@ define(['backbone', 'text!./../templates/propertyLabel.html', 'text!./../templat
 				this.componentValue = this.defaultValue + (this.unit || ''); // todo model
 
 			// Check if wrap inside function is required
-			if(this.func){
+			if(this.model.get('functionName')){
 				var v = this.fetchFromFunction(this.componentValue);
 				if(v)
 					this.componentValue = v;

test/specs/style_manager/main.js

@@ -6,13 +6,15 @@ define([
         modulePath + '/view/SectorView',
         modulePath + '/view/SectorsView',
         modulePath + '/view/PropertyView',
+        modulePath + '/view/PropertySelectView',
          ],
   function(
           StyleManager,
           Models,
           SectorView,
           SectorsView,
-          PropertyView
+          PropertyView,
+          PropertySelectView
           ) {
 
     describe('StyleManager', function() {
@@ -182,6 +184,7 @@ define([
         SectorView.run();
         SectorsView.run();
         PropertyView.run();
+        PropertySelectView.run();
 
       });
 

test/specs/style_manager/view/PropertySelectView.js

@@ -0,0 +1,175 @@
+var path = 'StyleManager/view/';
+define([path + 'PropertySelectView', 'StyleManager/model/Property', 'DomComponents/model/Component'],
+  function(PropertySelectView, Property, Component) {
+
+    return {
+      run : function(){
+
+          describe('PropertySelectView', 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', style: 'test:style'},
+                  {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: 'select',
+                list: options,
+                property: propName
+              });
+              view = new PropertySelectView({
+                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('Select rendered', function() {
+              var prop = view.el;
+              prop.querySelector('select').should.be.ok;
+            });
+
+            it('Options rendered', function() {
+              var select = view.el.querySelector('select');
+              select.children.length.should.equal(options.length);
+            });
+
+            it('Options rendered correctly', function() {
+              var select = view.el.querySelector('select');
+              var children = select.children;
+              children[0].value.should.equal(options[0].value);
+              children[1].value.should.equal(options[1].value);
+              children[0].textContent.should.equal(options[0].value);
+              children[1].textContent.should.equal(options[1].name);
+              children[0].getAttribute('style').should.equal(options[0].style);
+              (children[1].getAttribute('style') == 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;
+              (view.$input.val() === null).should.equal(true);
+            });
+
+            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.$input.val().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 PropertySelectView({
+                  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.$input.val().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.$input.val().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 PropertySelectView({
+                  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.$input.val().should.equal(defValue);
+              });
+
+            });
+
+        });
+      }
+    };
+
+});

test/specs/style_manager/view/PropertyView.js

@@ -19,7 +19,7 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod
 
             before(function () {
               $fixtures  = $("#fixtures");
-              $fixture   = $('<div class="cssrule-fixture"></div>');
+              $fixture   = $('<div class="sm-fixture"></div>');
             });
 
             beforeEach(function () {
@@ -111,12 +111,34 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod
               view.isTargetStylable().should.equal(false);
             });
 
-            it.skip('Get target style', function() {
+            it('Target style is empty without values', function() {
-              //getComponentValue
+              view.selectedComponent = component;
+              view.getComponentValue().should.be.empty;
+            });
+
+            it('Target style is correct', function() {
+              view.selectedComponent = component;
+              var style = {};
+              style[propName] = propValue;
+              component.set('style', style);
+              view.getComponentValue().should.equal(propValue);
             });
 
-            it.skip('Fetch value from function', function() {
+            it('Target style is empty with an other style', function() {
-              //fetchFromFunction
+              view.selectedComponent = component;
+              var style = {};
+              style[propName + '2'] = propValue;
+              component.set('style', style);
+              view.getComponentValue().should.be.empty;
+            });
+
+            it('Fetch value from function', function() {
+              view.selectedComponent = component;
+              var style = {};
+              style[propName] = 'testfun(' + propValue + ')';
+              component.set('style', style);
+              view.model.set('functionName', 'testfun');
+              view.getComponentValue().should.equal(propValue);
             });
 
             describe('With target setted', function() {
@@ -131,12 +153,13 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod
                 $fixture.html(view.render().el);
               });
 
-              it('Update value on target swap', function() {
+              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.$input.val().should.equal(propValue);
               });
 
               it('Update value after multiple swaps', function() {
@@ -148,6 +171,7 @@ define([path + 'PropertyView', 'StyleManager/model/Property', 'DomComponents/mod
                 component.set('style', style);
                 view.propTarget.trigger('update');
                 view.model.get('value').should.equal(propValue + '2');
+                view.$input.val().should.equal(propValue + '2');
               });
 
             })

test/specs/style_manager/view/SectorView.js

@@ -14,7 +14,7 @@ define([path + 'SectorView', 'StyleManager/model/Sector'],
 
             before(function () {
               $fixtures  = $("#fixtures");
-              $fixture   = $('<div class="cssrule-fixture"></div>');
+              $fixture   = $('<div class="sector-fixture"></div>');
             });
 
             beforeEach(function () {

test/specs/style_manager/view/SectorsView.js

@@ -14,7 +14,7 @@ define([path + 'SectorsView', 'StyleManager/model/Sectors'],
 
             before(function () {
               $fixtures  = $("#fixtures");
-              $fixture   = $('<div class="cssrules-fixture"></div>');
+              $fixture   = $('<div class="sectors-fixture"></div>');
             });
 
             beforeEach(function () {