Add tests for CssGenerator

src/dom_components/model/Component.js

@@ -209,8 +209,10 @@ module.exports = Backbone.Model.extend(Styleable).extend({
       const cc = this.em.get('CssComposer');
       this.rule = cc.setIdRule(this.getId(), prop, { ...opts, state });
     } else {
-      Styleable.setStyle.apply(this, arguments);
+      prop = Styleable.setStyle.apply(this, arguments);
     }
+
+    return prop;
   },
 
 

src/editor/model/Editor.js

@@ -47,7 +47,7 @@ module.exports = Backbone.Model.extend({
     device: '',
   },
 
-  initialize(c) {
+  initialize(c = {}) {
     this.config = c;
     this.set('Config', c);
     this.set('modules', []);

test/specs/code_manager/model/CodeModels.js

@@ -2,17 +2,21 @@ const CssGenerator = require('code_manager/model/CssGenerator');
 const HtmlGenerator = require('code_manager/model/HtmlGenerator');
 const DomComponents = require('dom_components');
 const Component = require('dom_components/model/Component');
+const Editor = require('editor/model/Editor');
 const CssComposer = require('css_composer');
 
 module.exports = {
   run() {
       let comp;
+      let dcomp;
       let obj;
+      let em;
+      let cc;
 
       describe('HtmlGenerator', () => {
         beforeEach(() => {
           obj = new HtmlGenerator();
-          var dcomp = new DomComponents();
+          dcomp = new DomComponents();
           comp = new Component({}, {
             componentTypes: dcomp.componentTypes,
           });
@@ -58,12 +62,15 @@ module.exports = {
         });
     });
 
-    describe('CssGenerator', () => {
+    describe.only('CssGenerator', () => {
         var newCssComp = () => new CssComposer().init();
         beforeEach(() => {
+          em = new Editor({});
+          cc = em.get('CssComposer');
           obj  = new CssGenerator();
-          var dcomp = new DomComponents();
+          dcomp = new DomComponents();
           comp = new Component({}, {
+            em,
             componentTypes: dcomp.componentTypes,
           });
         });
@@ -213,6 +220,38 @@ module.exports = {
           comp.get('components').remove(m1);
           expect(obj.build(comp, {cssc})).toEqual('');
         });
+
+        it('Render correctly a rule with avoidInlineStyle option and not', () => {
+          em.get('DomComponents').getConfig().avoidInlineStyle = 1;
+          comp.setStyle({color: 'red'});
+          const id = comp.getId();
+          const result = `#${id}{color:red;}`;
+          expect(obj.build(comp, {cssc: cc})).toEqual(result);
+          expect(obj.build(comp, {cssc: cc, em})).toEqual('');
+        });
+
+        it('Render correctly a rule with avoidInlineStyle and state', () => {
+          em.get('DomComponents').getConfig().avoidInlineStyle = 1;
+          const state = 'hover';
+          comp.config.avoidInlineStyle = 1;
+          comp.set('state', state);
+          comp.setStyle({color: 'red'});
+          const id = comp.getId();
+          const result = `#${id}:${state}{color:red;}`;
+          expect(obj.build(comp, {cssc: cc, em})).toEqual(result);
+        });
+
+        it('Render correctly a rule with avoidInlineStyle and w/o state', () => {
+          em.get('DomComponents').getConfig().avoidInlineStyle = 1;
+          const state = 'hover';
+          comp.config.avoidInlineStyle = 1;
+          comp.setStyle({color: 'blue'});
+          comp.set('state', state);
+          comp.setStyle({color: 'red'});
+          const id = comp.getId();
+          const result = `#${id}{color:blue;}#${id}:${state}{color:red;}`;
+          expect(obj.build(comp, {cssc: cc, em})).toEqual(result);
+        });
     })
   }
 };

test/specs/css_composer/index.js

@@ -8,7 +8,7 @@ const Editor = require('editor/model/Editor');
 
 describe('Css Composer', () => {
 
-  describe.only('Main', () => {
+  describe('Main', () => {
 
     var obj;
     var em;