Fix base StyleManager type

src/style_manager/model/Properties.js

@@ -71,7 +71,8 @@ module.exports = require('backbone').Collection.extend(TypeableCollection).exten
       model: Property,
       view: require('./../view/PropertyView'),
       isType(value) {
-        return 1;
+        value.type = 'base';
+        return value;
       }
     }
   ]

src/style_manager/model/PropertyStack.js

@@ -16,7 +16,7 @@ module.exports = Property.extend({
 
     const layers = this.get('layers');
     let val = layers.length ? layers.pluck('value').join(', ') : '';
-    return val;
+    return val.trim();
   },
 
 });

src/style_manager/view/PropertyCompositeView.js

@@ -73,8 +73,7 @@ module.exports = PropertyView.extend({
       propTarget: this.propTarget,
       // On any change made to children I need to update composite value
       onChange(el, view, opts) {
-        var result = model.getFullValue();
+        model.set('value', model.getFullValue(), opts);
-        model.set('value', result, opts);
       },
       // Each child property will receive a full composite string, eg. '0px 0px 10px 0px'
       // I need to extract from that string the corresponding one to that property.
@@ -99,7 +98,6 @@ module.exports = PropertyView.extend({
    * */
   valueOnIndex(index, view) {
     let value;
-    const model = view.model;
     const targetValue = this.getTargetValue({ignoreDefault: 1});
 
     // If the target value of the composite is not empty I'll fetch
@@ -107,7 +105,7 @@ module.exports = PropertyView.extend({
     // to get the value of the sub-property
     if (targetValue) {
       const values = targetValue.split(' ');
-      value = model.parseValue(values[index]);
+      value = view ? view.model.parseValue(values[index]) : values[index];
     } else {
       value = view.getTargetValue({ignoreCustomValue: 1});
     }

test/specs/style_manager/view/PropertyCompositeView.js

@@ -1,5 +1,6 @@
 const PropertyCompositeView = require('style_manager/view/PropertyCompositeView');
 const Property = require('style_manager/model/Property');
+const PropertyComposite = require('style_manager/model/PropertyComposite');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
@@ -16,15 +17,14 @@ module.exports = {
         var propName = 'testprop';
         var propValue = 'test1value';
         var defValue = 'test2value';
-        var properties = [
+        var properties = [{
-          {property: 'subprop1'},
+            property: 'subprop1'
-          {
+          },{
             type: 'integer',
             property: 'subprop2',
             defaults: 0,
             units: ['%', 'px']
-          },
+          },{
-          {
             type: 'select',
             property: 'subprop3',
             defaults: 'val2',
@@ -33,8 +33,7 @@ module.exports = {
               {value:'val2'},
               {value:'val3'},
             ]
-          },
+        }];
-        ];
 
         before(() => {
           $fixtures  = $("#fixtures");
@@ -45,7 +44,7 @@ module.exports = {
           target = new Component();
           component = new Component();
           target.model = component;
-          model = new Property({
+          model = new PropertyComposite({
             type: 'composite',
             property: propName,
             properties
@@ -93,7 +92,7 @@ module.exports = {
         });
 
         it('Input value is empty', () => {
-          expect(view.model.get('value')).toNotExist();
+          expect(model.getFullValue()).toEqual('0% val2');
         });
 
         it('Update input on value change', () => {
@@ -112,7 +111,7 @@ module.exports = {
           var $prop3;
 
           beforeEach(() => {
-            model = new Property({
+            model = new PropertyComposite({
               type: 'composite',
               property: propName,
               properties
@@ -123,9 +122,9 @@ module.exports = {
             });
             $fixture.empty().appendTo($fixtures);
             $fixture.html(view.render().el);
-            prop3Val = properties[2].list[2].value;
             prop2Val = properties[1].defaults;
             prop2Unit = properties[1].units[0];
+            prop3Val = properties[2].list[2].value;
             finalResult = propValue + ' ' + prop2Val + prop2Unit +' ' + prop3Val;
             $prop1 = view.$props.find('#' + properties[0].property + ' input');
             $prop2 = view.$props.find('#' + properties[1].property + ' input');
@@ -135,7 +134,7 @@ module.exports = {
           it('Update model on input change', () => {
             $prop1.val(propValue).trigger('change');
             $prop3.val(prop3Val).trigger('change');
-            expect(view.model.get('value')).toEqual(finalResult);
+            expect(model.getFullValue()).toEqual(finalResult);
           });
 
           it('Update value on models change', () => {
@@ -153,7 +152,7 @@ module.exports = {
           });
 
           it('Update target on detached value change', () => {
-            model = new Property({
+            model = new PropertyComposite({
               type: 'composite',
               property: propName,
               properties,
@@ -206,7 +205,7 @@ module.exports = {
           it('Build value from properties', () => {
             view.model.get('properties').at(0).set('value', propValue);
             view.model.get('properties').at(2).set('value', prop3Val);
-            expect(view.build()).toEqual(finalResult);
+            expect(model.getFullValue()).toEqual(finalResult);
           });
 
         })
@@ -214,7 +213,7 @@ module.exports = {
         describe('Init property', () => {
 
           beforeEach(() => {
-            model = new Property({
+            model = new PropertyComposite({
               type: 'composite',
               property: propName,
               properties,

test/specs/style_manager/view/PropertyIntegerView.js

@@ -121,7 +121,7 @@ module.exports = {
           view.model.set('value', intValue);
           var compStyle = view.selectedComponent.get('style');
           var assertStyle = {};
-          assertStyle[propName] = propValue;
+          assertStyle[propName] = parseInt(intValue);
           expect(compStyle).toEqual(assertStyle);
         });
 

test/specs/style_manager/view/PropertyStackView.js

@@ -1,5 +1,5 @@
 const PropertyStackView = require('style_manager/view/PropertyStackView');
-const Property = require('style_manager/model/Property');
+const Property = require('style_manager/model/PropertyStack');
 const Component = require('dom_components/model/Component');
 
 module.exports = {
@@ -178,7 +178,7 @@ module.exports = {
           it('Update model on input change', () => {
             $prop1.val(propValue).trigger('change');
             $prop3.val(prop3Val).trigger('change');
-            expect(view.model.get('value')).toEqual(finalResult);
+            expect(model.getFullValue()).toEqual(finalResult);
           });
 
           it('Update value on models change', () => {