Add tests

src/code_manager/model/CssGenerator.js

@@ -6,7 +6,7 @@ define(['backbone'],
 		return Backbone.Model.extend({
 
 			initialize: function(){
-				this.buff = [];
+				this.compCls = [];
 			},
 
 			/** @inheritdoc */
@@ -15,9 +15,11 @@ define(['backbone'],
 				return 'css';
 			},
 
-			/** @inheritdoc */
-			build: function(model, cssc)
-			{
+			/**
+			 * Get CSS from components
+			 * @return {String}
+			 */
+			buildFromComp: function(model){
 				var coll 	= model.get('components') || model,
 					code 	= '';
 
@@ -25,47 +27,63 @@ define(['backbone'],
 					var css = m.get('style'),
 						cls = m.get('classes'),
 						cln = m.get('components');
+					cls.each(function(m){
+						this.compCls.push(m.get('name'));
+					}, this);
 
-					// Get id-relative style
 					if(css && Object.keys(css).length !== 0){
 						code 	+= '#' + m.cid + '{';
-
-						for(var prop in css)
+						for(var prop in css){
 							if(css.hasOwnProperty(prop))
 								code += prop + ':' + css[prop] + ';';
-
-						code 	+= '}';
-					}
-
-					if(cssc && cls.length){
-						var rule = cssc.getRule(cls.models);
-						if(rule){
-							var selectors = rule.get('selectors');
-							var ruleStyle = rule.get('style');
-							var strSel = '';
-							selectors.each(function(selector){
-								strSel += '.' + selector.get('name');
-							});
-							if(this.buff.indexOf(strSel) < 0){
-								this.buff.push(strSel);
-								code += strSel + '{';
-								if(ruleStyle && Object.keys(ruleStyle).length !== 0){
-									for(var prop2 in ruleStyle)
-										if(ruleStyle.hasOwnProperty(prop2))
-											code += prop2 + ':' + ruleStyle[prop2] + ';';
-								}
-								code += '}';
-							}
 						}
+						code 	+= '}';
 					}
 
 					if(cln.length)
-						code 	+= this.build(cln, cssc);
+						code 	+= this.buildFromComp(cln);
 
 				}, this);
 
 				return code;
 			},
 
+			/** @inheritdoc */
+			build: function(model, cssc)
+			{
+				this.compCls = [];
+				var code 	= this.buildFromComp(model);
+				var compCls = this.compCls;
+
+				if(cssc){
+					var rules = cssc.getRules();
+					rules.each(function(rule){
+						var selectors = rule.get('selectors');
+						var ruleStyle = rule.get('style');
+						var strSel = '';
+						var found = 0;
+
+						selectors.each(function(selector){
+							strSel += '.' + selector.get('name');
+							if(compCls.indexOf(selector.get('name')) > -1)
+								found = 1;
+						});
+						if(strSel && found){
+							var strStyle = '';
+							if(ruleStyle && Object.keys(ruleStyle).length !== 0){
+								for(var prop2 in ruleStyle){
+									if(ruleStyle.hasOwnProperty(prop2))
+										strStyle += prop2 + ':' + ruleStyle[prop2] + ';';
+								}
+							}
+							if(strStyle)
+								code += strSel + '{' + strStyle + '}';
+						}
+					});
+
+				}
+				return code;
+			},
+
 		});
 });

src/commands/view/ExportTemplate.js

@@ -63,7 +63,6 @@ define(function() {
 				}
 
 				this.htmlEditor.setContent( this.cm.getCode(this.components, 'html') );
-				this.cm.getGenerator('css').buff = [];
 				this.cssEditor.setContent( this.cm.getCode(this.components, 'css', this.cssc));
 
 				if(this.sender)

test/specs/code_manager/model/CodeModels.js

@@ -99,6 +99,41 @@ define([path + 'HtmlGenerator',
 
               this.obj.build(comp, cssc).should.equal('.class1{prop1:value1;prop2:value2;}');
             });
+
+            it('Build correctly with more classes', function() {
+              var comp = new Component();
+              var m1 = comp.get('components').add({tagName: 'article'});
+              var cls1 = m1.get('classes').add({name: 'class1'});
+              var cls2 = m1.get('classes').add({name: 'class2'});
+
+              var cssc = new CssComposer();
+              var rule = cssc.newRule([cls1, cls2]);
+              rule.set('style',{'prop1':'value1', 'prop2':'value2'});
+              cssc.addRule(rule);
+
+              this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;prop2:value2;}');
+              this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;prop2:value2;}');
+            });
+
+            it('Build correctly with class styled out', function() {
+              var comp = new Component();
+              var m1 = comp.get('components').add({tagName: 'article'});
+              var cls1 = m1.get('classes').add({name: 'class1'});
+              var cls2 = m1.get('classes').add({name: 'class2'});
+
+              var cssc = new CssComposer();
+              var rule = cssc.newRule([cls1, cls2]);
+              rule.set('style',{'prop1':'value1'});
+              cssc.addRule(rule);
+              var rule2 = cssc.newRule(cls2);
+              rule2.set('style',{'prop2':'value2'});
+              cssc.addRule(rule2);
+
+              this.obj.build(comp, cssc).should.equal('.class1.class2{prop1:value1;}.class2{prop2:value2;}');
+            });
+            it.skip("Avoid useless code", function() {
+              //create comp with class then remove comp
+            });
         })
       }
     };