Update Css Composer and more tests

src/class_manager/view/ClassTagsView.js

@@ -91,8 +91,14 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'],
         var model = cm.addClass(name);
 
         if(this.compTarget){
-          this.compTarget.get('classes').add(model);
+          var targetCls = this.compTarget.get('classes');
+          var lenB = targetCls.length;
+          targetCls.add(model);
+          var lenA = targetCls.length;
           this.collection.add(model);
+
+          if(lenA > lenB)
+            this.target.trigger('targetClassAdded');
         }
       }
       this.endNewTag();

src/css_composer/model/CssRule.js

@@ -22,14 +22,14 @@ define(['backbone', './Selectors'],
                 this.config   = c || {};
                 this.sm = opt ? opt.sm || {} : {};
                 this.slct = this.config.selectors || [];
+
                 if(this.sm.get){
                     var slct = [];
                     for(var i = 0; i < this.slct.length; i++)
                         slct.push(this.sm.get('ClassManager').addClass(this.slct[i].name));
-                    //console.log(this.sm.get('ClassManager').getClasses());
-                    console.log(slct);
                     this.slct = slct;
                 }
+
                 this.set('selectors', new Selectors(this.slct));
             },
 

src/editor/model/Editor.js

@@ -70,7 +70,10 @@ define([
 						df = this.loadRules();
 						pfx	= cfg.stylePrefix || 'css-';
 				cfg.stylePrefix	= this.config.stylePrefix + pfx;
-				cfg.defaults = df;
+
+				if(df)
+					cfg.defaults = df;
+
 				cfg.sm = this;
 				this.cssc = new CssComposer(cfg);
 				this.set('CssComposer', this.cssc);
@@ -86,6 +89,9 @@ define([
 			listenRules: function(collection) {
 				this.stopListening(collection, 'add remove', this.listenRule);
 				this.listenTo(collection, 'add remove', this.listenRule);
+				collection.each(function(model){
+					this.listenRule(model);
+				}, this);
 			},
 
 			/**
@@ -400,7 +406,7 @@ define([
 			 * @return	{Array}
 			 * */
 			loadRules: function(){
-				var result = [];
+				var result;
 				try{
 					var r = this.stm.load(this.rulesName);
 					if(r)
@@ -416,11 +422,9 @@ define([
 			 * */
 			storeRules: function() {
 				var rules	= this.cssc.getRules();
-				if(rules){
-					console.log('Store rules');
-					console.log(rules);
+
+				if(rules)
 					this.stm.store(this.rulesName, JSON.stringify(rules));
-				}
 			},
 
 			/**

src/style_manager/view/SectorsView.js

@@ -13,7 +13,7 @@ define(['backbone','./SectorView'],
 			// The taget that will emit events for properties
 			this.propTarget	 = {};
 			_.extend(this.propTarget, Backbone.Events);
-			this.listenTo( this.target, 'change:selectedComponent', this.targetUpdated);
+			this.listenTo( this.target, 'change:selectedComponent targetClassAdded', this.targetUpdated);
 
 		},
 
@@ -36,7 +36,6 @@ define(['backbone','./SectorView'],
 				});
 				var iContainer = cssC.getRule(valid, '', '');
 				if(!iContainer){
-					console.log('Create new one');
 					iContainer = cssC.newRule(valid, '', '');
 					// Hydrate styles from component element
 					iContainer.set('style', el.get('style'));

test/specs/css_composer/e2e/CssComposer.js

@@ -0,0 +1,82 @@
+
+define(function(require) {
+
+    return {
+      run : function(){
+          describe('E2E tests', function() {
+
+            before(function () {
+              this.$fixtures  = $("#fixtures");
+              this.$fixture   = $('<div id="csscomposer-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              this.Grapes = require('editor/main');
+              this.gjs = new this.Grapes({
+                stylePrefix: '',
+                storageType: 'none',
+                storageManager: { storageType: 'none', },
+                assetManager: { storageType: 'none', },
+                container: 'csscomposer-fixture',
+              });
+              this.cssc = this.gjs.editor.get('CssComposer');
+              this.clsm = this.gjs.editor.get('ClassManager');
+              this.$fixture.empty().appendTo(this.$fixtures);
+              this.gjs.render();
+              this.rulesSet = [
+                { selectors: [{name: 'test1'}, {name: 'test2'}] },
+                { selectors: [{name: 'test2'}, {name: 'test3'}] },
+                { selectors: [{name: 'test3'}] }
+              ];
+            });
+
+            afterEach(function () {
+              delete this.Grapes;
+              delete this.gjs;
+              delete this.cssc;
+              delete this.clsm;
+            });
+
+            after(function () {
+              this.$fixture.remove();
+            });
+
+            it('Rules are correctly imported from default property', function() {
+              var gj = new this.Grapes({
+                stylePrefix: '',
+                storageType: 'none',
+                storageManager: { storageType: 'none', },
+                assetManager: { storageType: 'none', },
+                cssComposer: { defaults: this.rulesSet},
+                container: 'csscomposer-fixture',
+              });
+              var cssc = gj.editor.get('CssComposer');
+              cssc.getRules().length.should.equal(this.rulesSet.length);
+              var cls = gj.editor.get('ClassManager').getClasses();
+              cls.length.should.equal(3);
+            });
+
+
+            it('New rule adds correctly the class inside classe manager', function() {
+              var rules = this.cssc.getRules();
+              rules.add({ selectors: [{name: 'test1'}] });
+              this.clsm.getClasses().at(0).get('name').should.equal('test1');
+            });
+
+            it('New rules are correctly imported inside classe manager', function() {
+              var rules = this.cssc.getRules();
+              this.rulesSet.forEach(function(item){
+                rules.add(item);
+              });
+              var cls = this.clsm.getClasses();
+              cls.length.should.equal(3);
+              cls.at(0).get('name').should.equal('test1');
+              cls.at(1).get('name').should.equal('test2');
+              cls.at(2).get('name').should.equal('test3');
+            });
+
+        });
+      }
+    };
+
+});

test/specs/css_composer/main.js

@@ -4,13 +4,15 @@ define([
 				'CssComposer',
 				modulePath + '/model/CssModels',
 				modulePath + '/view/CssRuleView',
-				modulePath + '/view/CssRulesView'
+				modulePath + '/view/CssRulesView',
+				modulePath + '/e2e/CssComposer'
 				 ],
 	function(
 					CssComposer,
 					Models,
 					CssRuleView,
-					CssRulesView
+					CssRulesView,
+					e2e
 					) {
 
 		describe('Css Composer', function() {
@@ -135,6 +137,7 @@ define([
 			Models.run();
 			CssRuleView.run();
 			CssRulesView.run();
+			e2e.run();
 
 		});
 });