Fix style manager regressions

GrapesJS · Jul 18, 2017 · c30daed · c30daed
1 parent 5673e9f
commit c30daed
Show file tree

Hide file tree

Showing 7 changed files with 39 additions and 18 deletions.
diff --git a/src/style_manager/view/SectorsView.js b/src/style_manager/view/SectorsView.js
@@ -49,9 +49,13 @@ module.exports = Backbone.View.extend({
     var mediaText = device && !previewMode && widthMedia ?
       `(${config.mediaCondition}: ${widthMedia})` : '';
     var stateStr = state ? `:${state}` : null;
-    pt.computed = window.getComputedStyle(el.view.el, stateStr);
+    var view = el.view;
     pt.helper = null;
 
+    if (view) {
+      pt.computed = window.getComputedStyle(view.el, stateStr);
+    }
+
     if(classes.length){
       var cssC = em.get('CssComposer');
       var valid = _.filter(classes.models, item => item.get('active'));

diff --git a/test/specs/style_manager/model/Models.js b/test/specs/style_manager/model/Models.js
@@ -522,6 +522,7 @@ module.exports = {
         var res = {
           type: 'stack',
           preview: true,
+          defaults: "none",
           properties  : [{
                   property: 'text-shadow-h',
                   type:     'integer',

diff --git a/test/specs/style_manager/view/PropertyColorView.js b/test/specs/style_manager/view/PropertyColorView.js
@@ -13,6 +13,7 @@ module.exports = {
         var target;
         var model;
         var view;
+        var propTarget;
         var propName = 'testprop';
         var propValue = '#fff';
         var defValue = 'test2value';
@@ -30,8 +31,11 @@ module.exports = {
             type: 'color',
             property: propName
           });
+          propTarget = Object.assign({}, Backbone.Events);
+          propTarget.model = component;
           view = new PropertyColorView({
-            model
+            model,
+            propTarget
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);

diff --git a/test/specs/style_manager/view/PropertyIntegerView.js b/test/specs/style_manager/view/PropertyIntegerView.js
@@ -13,6 +13,7 @@ module.exports = {
         var target;
         var model;
         var view;
+        var propTarget;
         var propName = 'testprop';
         var intValue = '55';
         var unitValue = 'px';
@@ -36,8 +37,11 @@ module.exports = {
             units,
             property: propName
           });
+          propTarget = Object.assign({}, Backbone.Events);
+          propTarget.model = component;
           view = new PropertyIntegerView({
-            model
+            model,
+            propTarget
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);

diff --git a/test/specs/style_manager/view/PropertyRadioView.js b/test/specs/style_manager/view/PropertyRadioView.js
@@ -13,6 +13,7 @@ module.exports = {
         var target;
         var model;
         var view;
+        var propTarget;
         var propName = 'testprop';
         var propValue = 'test1value';
         var defValue = 'test2value';
@@ -34,8 +35,11 @@ module.exports = {
             list: options,
             property: propName
           });
+          propTarget = Object.assign({}, Backbone.Events);
+          propTarget.model = component;
           view = new PropertyRadioView({
-            model
+            model,
+            propTarget
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);

diff --git a/test/specs/style_manager/view/PropertySelectView.js b/test/specs/style_manager/view/PropertySelectView.js
@@ -13,6 +13,8 @@ module.exports = {
         var target;
         var model;
         var view;
+        var propTarget;
+        var options;
         var propName = 'testprop';
         var propValue = 'test1value';
         var defValue = 'test2value';
@@ -27,15 +29,18 @@ module.exports = {
         });
 
         beforeEach(() => {
+          propTarget = Object.assign({}, Backbone.Events);
           target = new Component();
           component = new Component();
           model = new Property({
             type: 'select',
             list: options,
             property: propName
           });
+          propTarget.model = component;
           view = new PropertySelectView({
-            model
+            model,
+            propTarget
           });
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);

diff --git a/test/specs/style_manager/view/PropertyView.js b/test/specs/style_manager/view/PropertyView.js
@@ -13,6 +13,8 @@ module.exports = {
         var target;
         var model;
         var view;
+        var propTarget;
+        var options;
         var propName = 'testprop';
         var propValue = 'testvalue';
         var defValue = 'testDefault';
@@ -23,12 +25,16 @@ module.exports = {
         });
 
         beforeEach(() => {
+          propTarget = Object.assign({}, Backbone.Events);
           target = new Component();
           component = new Component();
           model = new Property({property: propName});
-          view = new PropertyView({
-            model
-          });
+          propTarget.model = component;
+          options = {
+            model,
+            propTarget
+          };
+          view = new PropertyView(options);
           $fixture.empty().appendTo($fixtures);
           $fixture.html(view.render().el);
         });
@@ -82,34 +88,30 @@ module.exports = {
         });
 
         it('Update target on value change', () => {
-          view.selectedComponent = component;
           view.model.set('value', propValue);
-          var compStyle = view.selectedComponent.get('style');
+          var compStyle = view.getTargetModel().get('style');
           var assertStyle = {};
           assertStyle[propName] = propValue;
           expect(compStyle).toEqual(assertStyle);
         });
 
         it('Update target on value change with functionName', () => {
-          view.selectedComponent = component;
           view.model.set('functionName', 'testfunc');
           view.model.set('value', propValue);
-          var compStyle = view.selectedComponent.get('style');
+          var compStyle = view.getTargetModel().get('style');
           var assertStyle = {};
           assertStyle[propName] = 'testfunc(' + propValue + ')';
           expect(compStyle).toEqual(assertStyle);
         });
 
         it('Clean target from the property if its value is empty', () => {
-          view.selectedComponent = component;
           view.model.set('value', propValue);
           view.model.set('value', '');
-          var compStyle = view.selectedComponent.get('style');
+          var compStyle = view.getTargetModel().get('style');
           expect(compStyle).toEqual({});
         });
 
         it('Check stylable element', () => {
-          view.selectedComponent = component;
           expect(view.isTargetStylable()).toEqual(true);
           component.set('stylable', false);
           expect(view.isTargetStylable()).toEqual(false);
@@ -122,20 +124,17 @@ module.exports = {
         });
 
         it('Target style is empty without values', () => {
-          view.selectedComponent = component;
           expect(view.getComponentValue()).toNotExist();
         });
 
         it('Target style is correct', () => {
-          view.selectedComponent = component;
           var style = {};
           style[propName] = propValue;
           component.set('style', style);
           expect(view.getComponentValue()).toEqual(propValue);
         });
 
         it('Target style is empty with an other style', () => {
-          view.selectedComponent = component;
           var style = {};
           style[propName + '2'] = propValue;
           component.set('style', style);