Add tests Css Composer

src/css_composer/view/CssRuleView.js

@@ -10,7 +10,6 @@ define(['backbone'],
     initialize: function(o) {
       this.config = o.config || {};
       this.listenTo(this.model, 'change:style', this.render);
-
     },
 
     /**
@@ -41,10 +40,15 @@ define(['backbone'],
     },
 
     render : function(){
+      var block = '',
+          o = '';
       if(!this.selStr)
         this.selStr = this.renderSelectors();
       var prpStr = this.renderProperties();
-      this.$el.html(this.selStr + '{' + prpStr + '}');
+      if(this.selStr)
+        block = prpStr !== '' ? '{' + prpStr + '}' : '';
+      o = this.selStr && block ? this.selStr + block : '';
+      this.$el.html(o);
       return this;
     },
 

test/specs/css_composer/main.js

@@ -2,12 +2,13 @@ var modulePath = './../../../test/specs/css_composer';
 
 define([
 				'CssComposer',
-				modulePath + '/model/CssModels'
+				modulePath + '/model/CssModels',
+				modulePath + '/view/CssRuleView'
 				 ],
 	function(
 					CssComposer,
 					Models,
-					Selectors
+					CssRuleView
 					) {
 
 		describe('Css Composer', function() {
@@ -130,6 +131,7 @@ define([
 			});
 
 			Models.run();
+			CssRuleView.run();
 
 		});
 });

test/specs/css_composer/view/CssRuleView.js

@@ -0,0 +1,101 @@
+var path = 'CssComposer/view/';
+define([path + 'CssRuleView', 'CssComposer/model/CssRule'],
+  function(CssRuleView, CssRule) {
+
+    return {
+      run : function(){
+          describe('CssRuleView', function() {
+
+            before(function () {
+              this.$fixtures  = $("#fixtures");
+              this.$fixture   = $('<div class="cssrule-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              var m = new CssRule();
+              this.view = new CssRuleView({
+                model: m
+              });
+              this.$fixture.empty().appendTo(this.$fixtures);
+              this.$fixture.html(this.view.render().el);
+            });
+
+            afterEach(function () {
+              this.view.model.destroy();
+            });
+
+            after(function () {
+              this.$fixture.remove();
+            });
+
+            it('Object exists', function() {
+              CssRuleView.should.be.exist;
+            });
+
+            it('Correct behaviour of renderSelectors with single selector', function() {
+              this.view.model.get('selectors').add({name: 'test'});
+              this.view.renderSelectors().should.equal('.test');
+            });
+
+            it('Correct behaviour of renderSelectors with multiple selectors', function() {
+              this.view.model.get('selectors').add([{name: 'test2'}, {name: 'test1'}]);
+              this.view.renderSelectors().should.equal('.test2.test1');
+            });
+
+            it('Correct behaviour of renderProperties with single property', function() {
+              this.view.model.set('style', {'prop': 'value'});
+              this.view.renderProperties().should.equal('prop:value;');
+            });
+
+            it('Correct behaviour of renderProperties with multiple properties', function() {
+              this.view.model.set('style', {'prop2': 'value2', 'prop3': 'value3'});
+              this.view.renderProperties().should.equal('prop2:value2;prop3:value3;');
+            });
+
+            it('Empty style inside', function() {
+              this.$fixture.html().should.equal('<style></style>');
+            });
+
+            it('On update of style always empty as there is no selectors', function() {
+              this.view.model.set('style', {'prop':'value'});
+              this.$fixture.html().should.equal('<style></style>');
+            });
+
+            describe('CssRuleView with selectors', function() {
+
+              beforeEach(function () {
+                var m = new CssRule({
+                  selectors: [{name:'test1'}, {name:'test2'}]
+                });
+                this.regView = new CssRuleView({
+                  model: m
+                });
+                this.regView.render();
+              });
+
+              afterEach(function () {
+                this.regView.model.destroy();
+              });
+
+              it('Empty with no style', function() {
+                this.regView.$el.html().should.equal('');
+              });
+
+              it('Not empty on update of style', function() {
+                this.regView.model.set('style', {'prop':'value'});
+                this.regView.$el.html().should.equal('.test1.test2{prop:value;}');
+              });
+
+              it('Empty on clear', function() {
+                this.regView.model.set('style', {'prop':'value'});
+                this.regView.model.set('style', {});
+                this.regView.$el.html().should.equal('');
+              });
+
+            });
+
+        });
+      }
+    };
+
+});

test/specs/panel/model/panelModel.js

@@ -1,25 +0,0 @@
-
-define(['panelModel','appDir/panel_commands/buttons/main'],
-		function(panelModel, commandsButtonsProvider) {
-			describe('Panel', function() {
-				
-				it('Contiene valori di default', function() {	//Has default values
-					var model = new panelModel({});
-					model.should.be.ok;
-					model.get('name').should.equal("");
-					model.get('visible').should.equal(true);
-					model.get('buttons').should.equal.undefined;
-				});
-				it('Imposta valori passati', function() {		//Sets passed attributes
-					var model = new panelModel({ 
-						name:'command',
-						visible: false,
-						buttons: commandsButtonsProvider.createButtons(),
-					});
-					model.should.be.ok;
-					model.get('name').should.equal("command");
-					model.get('visible').should.equal(false);
-					model.get('buttons').should.have.length(5);
-				});
-			});
-	});

test/specs/panel/view/panelView.js

@@ -1,49 +0,0 @@
-
-define(['panelModel', 'panelView', 'Buttons', 'appDir/panel_commands/buttons/main'],
-		function(panelModel,panelView, Buttons, commandsButtonsProvider) {
-			describe('PanelView', function() {
-				before(function () {
-					this.testPanelName = 'commands';
-					this.$fixture = $("<div id='panel-fixture'></div>");
-				});
-				
-				beforeEach(function () {
-					this.view = new panelView({
-						model: new panelModel({
-							name : this.testPanelName,
-							buttons: commandsButtonsProvider.createButtons(),
-						}),
-						eventsQ : {
-							commands: {createComponent : {}}
-						},
-					});
-					this.$fixture.empty().appendTo($("#fixtures"));
-					this.$fixture.html(this.view.render().el);
-				});
-				afterEach(function () {
-					//this.view.model.destroy();
-				});
-	
-				after(function () {
-					//this.$fixture.remove();
-				});
-				describe("Inizializzazione", function () {
-					it('Render pannello', function() {	//Has default values
-						this.view.should.be.ok;
-						this.view.$el.attr('id').should.equal(this.testPanelName);
-					});
-					it('Non deve essere vuoto', function() {
-						this.view.$el.find('.c a').should.have.length.above(0);
-					});
-					it('Nessun elemento deve essere attivo', function() {
-						this.view.$el.find('.c a.active').should.have.length(0);
-					});
-				});
-				describe("Interazione", function(){
-					it('Elemento attivo alla richiesta', function(){
-						this.view.model.buttons.models[0].toggle();
-						this.view.$el.find('.c a.active').should.have.length(1);
-					});
-				});
-			});
-	});