Add PanelView tests

src/panels/view/PanelView.js

@@ -1,20 +1,20 @@
 define(['backbone','./ButtonsView'],
 function(Backbone, ButtonsView) {
-	/** 
+	/**
 	 * @class PanelView
 	 * */
 	return Backbone.View.extend({
-		
+
 		initialize: function(o){
-			this.config 	= o.config;
+			this.config = o.config || {};
-			this.pfx 		= this.config.stylePrefix;
+			this.pfx = this.config.stylePrefix || '';
-			this.buttons	= this.model.get('buttons');
+			this.buttons = this.model.get('buttons');
-			this.className	= this.pfx + 'panel';
+			this.className = this.pfx + 'panel';
-			this.id			= this.pfx + this.model.get('id');
+			this.id = this.pfx + this.model.get('id');
 			this.listenTo(this.model, 'change:appendContent', this.appendContent);
 			this.listenTo(this.model, 'change:content', this.updateContent);
 		},
-		
+
 		/**
 		 * Append content of the panel
 		 * */
@@ -22,7 +22,7 @@ function(Backbone, ButtonsView) {
 		{
 			this.$el.append(this.model.get('appendContent'));
 		},
-		
+
 		/**
 		 * Update content
 		 * */
@@ -30,15 +30,18 @@ function(Backbone, ButtonsView) {
 		{
 			this.$el.html(this.model.get('content'));
 		},
-		
+
-		
+
 		render: function() {
 			this.$el.attr('class', _.result(this, 'className'));
-			this.$el.attr('id', this.id);
+
+			if(this.id)
+				this.$el.attr('id', this.id);
+
 			if(this.buttons.length){
 				var buttons	= new ButtonsView({
-					collection	: this.buttons,
+					collection: this.buttons,
-					config		: this.config,
+					config: this.config,
 				});
 				this.$el.append(buttons.render().el);
 			}

test/specs/panels/e2e/CssComposer.js

@@ -1,82 +0,0 @@
-
-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/panels/main.js

@@ -2,11 +2,13 @@ var modulePath = './../../../test/specs/panels';
 
 define([
 				'Panels',
-				modulePath + '/model/PanelModels'
+				modulePath + '/model/PanelModels',
+				modulePath + '/view/PanelView'
 				 ],
 	function(
 					Panels,
-					Models
+					Models,
+					PanelView
 					) {
 
 		describe('Panels', function() {
@@ -99,6 +101,7 @@ define([
 			});
 
 			Models.run();
+			PanelView.run();
 
 		});
 });

test/specs/panels/view/CssRuleView.js

@@ -1,114 +0,0 @@
-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('State correctly rendered', function() {
-                this.regView.model.set('style', {'prop':'value'});
-                this.regView.model.set('state', 'hover');
-                this.regView.$el.html().should.equal('.test1.test2:hover{prop:value;}');
-              });
-
-              it('State render changes on update', function() {
-                this.regView.model.set('style', {'prop':'value'});
-                this.regView.model.set('state', 'hover');
-                this.regView.model.set('state', '');
-                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/panels/view/CssRulesView.js

@@ -1,54 +0,0 @@
-var path = 'CssComposer/view/';
-define([path + 'CssRulesView', 'CssComposer/model/CssRules'],
-  function(CssRulesView, CssRules) {
-
-    return {
-      run : function(){
-          describe('CssRulesView', function() {
-
-            before(function () {
-              this.$fixtures  = $("#fixtures");
-              this.$fixture   = $('<div class="cssrules-fixture"></div>');
-            });
-
-            beforeEach(function () {
-              var col = new CssRules([]);
-              this.view = new CssRulesView({
-                collection: col
-              });
-              this.$fixture.empty().appendTo(this.$fixtures);
-              this.$fixture.html(this.view.render().el);
-            });
-
-            afterEach(function () {
-              this.view.collection.reset();
-            });
-
-            after(function () {
-              this.$fixture.remove();
-            });
-
-            it('Object exists', function() {
-              CssRulesView.should.be.exist;
-            });
-
-            it("Collection is empty", function (){
-              this.view.$el.html().should.be.empty;
-            });
-
-            it("Add new rule", function (){
-              sinon.stub(this.view, "addToCollection");
-              this.view.collection.add({});
-              this.view.addToCollection.calledOnce.should.equal(true);
-            });
-
-            it("Render new rule", function (){
-              this.view.collection.add({});
-              this.view.$el.html().should.not.be.empty;
-            });
-
-        });
-      }
-    };
-
-});

test/specs/panels/view/PanelView.js

@@ -0,0 +1,76 @@
+var path = 'Panels/view/';
+define([path + 'PanelView', 'Panels/model/Panel'],
+  function(PanelView, Panel) {
+
+    return {
+      run : function(){
+
+          describe('PanelView', function() {
+
+            var $fixtures;
+            var $fixture;
+            var model;
+            var view;
+
+            before(function () {
+              $fixtures  = $("#fixtures");
+              $fixture   = $('<div class="cssrule-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              model = new Panel();
+              view = new PanelView({
+                model: model
+              });
+              $fixture.empty().appendTo($fixtures);
+              $fixture.html(view.render().el);
+            });
+
+            afterEach(function () {
+              view.remove();
+            });
+
+            after(function () {
+              $fixture.remove();
+            });
+
+            it('Panel empty', function() {
+              $fixture.html().should.be.equal('<div class="panel"></div>');
+            });
+
+            it('Append content', function() {
+              model.set('appendContent','test');
+              model.set('appendContent','test2');
+              view.$el.html().should.be.equal('testtest2');
+            });
+
+            it('Update content', function() {
+              model.set('content','test');
+              model.set('content','test2');
+              view.$el.html().should.be.equal('test2');
+            });
+
+            describe('Init with options', function() {
+
+              beforeEach(function () {
+                model = new Panel({
+                  buttons: [{}]
+                });
+                view = new PanelView({
+                  model: model
+                });
+                $fixture.empty().appendTo($fixtures);
+                $fixture.html(view.render().el);
+              });
+
+              afterEach(function () {
+                view.remove();
+              });
+
+            });
+
+        });
+      }
+    };
+
+});