Add SectorsView tests

src/style_manager/view/SectorView.js

@@ -10,13 +10,13 @@ define(['backbone', './PropertiesView', 'text!./../templates/sector.html'],
 		events:{},
 
 		initialize: function(o) {
-			this.config 	= o.config || {};
-			this.pfx 			= this.config.stylePrefix || '';
-			this.target		= o.target || {};
+			this.config = o.config || {};
+			this.pfx = this.config.stylePrefix || '';
+			this.target = o.target || {};
 			this.propTarget = o.propTarget || {};
-			this.open 		= this.model.get('open');
-			this.caretR		= 'fa-caret-right';
-			this.caretD		= 'fa-caret-down';
+			this.open = this.model.get('open');
+			this.caretR = 'fa-caret-right';
+			this.caretD = 'fa-caret-down';
 			this.listenTo( this.model ,'change:open', this.updateOpen);
 			this.events['click .' + this.pfx + 'title']	= 'toggle';
 			this.delegateEvents();
@@ -58,15 +58,15 @@ define(['backbone', './PropertiesView', 'text!./../templates/sector.html'],
 		 * */
 		toggle: function()
 		{
-			var v 	= this.model.get('open') ? 0 : 1;
+			var v = this.model.get('open') ? 0 : 1;
 			this.model.set('open', v);
 		},
 
 		render : function()
 		{
 			this.$el.html(this.template({
-				pfx		: this.pfx,
-				label	: this.model.get('name'),
+				pfx: this.pfx,
+				label: this.model.get('name'),
 			}));
 			this.$caret	= this.$el.find('#' + this.pfx + 'caret');
 			this.renderProperties();
@@ -81,10 +81,10 @@ define(['backbone', './PropertiesView', 'text!./../templates/sector.html'],
 
 			if(objs){
 				var view = new PropertiesView({
-					collection	: objs,
-					target			: this.target,
-					propTarget  : this.propTarget,
-					config			: this.config,
+					collection: objs,
+					target: this.target,
+					propTarget: this.propTarget,
+					config: this.config,
 				});
 				this.$el.append(view.render().el);
 			}

src/style_manager/view/SectorsView.js

@@ -1,21 +1,33 @@
-define(['backbone','./SectorView'],
+define(['backbone', './SectorView'],
 	function (Backbone, SectorView) {
 
 	return Backbone.View.extend({
 
 		initialize: function(o) {
-			this.config 	= o.config;
-			this.pfx 		= this.config.stylePrefix;
-			this.target		= o.target || {};
+			this.config = o.config || {};
+			this.pfx = this.config.stylePrefix || '';
+			this.target = o.target || {};
 
 			// The taget that will emit events for properties
 			this.propTarget	 = {};
 			_.extend(this.propTarget, Backbone.Events);
+			this.listenTo( this.collection, 'add', this.addTo);
+			this.listenTo( this.collection, 'reset', this.render);
 			this.listenTo( this.target, 'change:selectedComponent targetClassAdded targetClassRemoved targetClassUpdated ' +
 				'targetStateUpdated', this.targetUpdated);
 
 		},
 
+		/**
+		 * Add to collection
+		 * @param {Object} model Model
+		 * @return {Object}
+		 * @private
+		 * */
+		addTo: function(model){
+			this.addToCollection(model);
+		},
+
 		/**
 		 * Fired when target is updated
 		 * @private
@@ -66,7 +78,6 @@ define(['backbone','./SectorView'],
 					}
 					helperRule.set('style', iContainer.get('style'));
 					pt.helper = helperRule;
-					console.log(helperRule);
 				}
 
 				pt.model = iContainer;
@@ -78,20 +89,44 @@ define(['backbone','./SectorView'],
 			pt.trigger('update');
 		},
 
+
+		/**
+		 * Add new object to collection
+		 * @param {Object} model Model
+		 * @param	{Object} fragmentEl collection
+		 * @return {Object} Object created
+		 * @private
+		 * */
+		addToCollection: function(model, fragmentEl){
+			var fragment = fragmentEl || null;
+			var viewObject = SectorView;
+
+			var view = new viewObject({
+				model: model,
+				id: this.pfx + model.get('name').replace(' ','_').toLowerCase(),
+				name: model.get('name'),
+				properties: model.get('properties'),
+				target: this.target,
+				propTarget: this.propTarget,
+				config: this.config,
+			});
+			var rendered = view.render().el;
+
+			if(fragment){
+				fragment.appendChild(rendered);
+			}else{
+				this.$el.append(rendered);
+			}
+
+			return rendered;
+		},
+
 		render: function() {
 			var fragment = document.createDocumentFragment();
+			this.$el.empty();
 
-			this.collection.each(function(obj){
-				var view = new SectorView({
-					model				: obj,
-					id					: this.pfx + obj.get('name').replace(' ','_').toLowerCase(),
-					name				: obj.get('name'),
-					properties	: obj.get('properties'),
-					target			: this.target,
-					propTarget	: this.propTarget,
-					config			: this.config,
-				});
-				fragment.appendChild(view.render().el);
+			this.collection.each(function(model){
+				this.addToCollection(model, fragment);
 			}, this);
 
 			this.$el.attr('id', this.pfx + 'sectors');

test/specs/style_manager/main.js

@@ -4,11 +4,13 @@ define([
         'StyleManager',
         modulePath + '/model/Models',
         modulePath + '/view/SectorView',
+        modulePath + '/view/SectorsView',
          ],
   function(
           StyleManager,
           Models,
-          SectorView
+          SectorView,
+          SectorsView
           ) {
 
     describe('StyleManager', function() {
@@ -176,6 +178,7 @@ define([
 
         Models.run();
         SectorView.run();
+        SectorsView.run();
 
       });
 

test/specs/style_manager/view/SectorView.js

@@ -64,6 +64,7 @@ define([path + 'SectorView', 'StyleManager/model/Sector'],
             });
 
             describe('Init with options', function() {
+
               beforeEach(function () {
                 model = new Sector({
                   open: false,

test/specs/style_manager/view/SectorsView.js

@@ -0,0 +1,50 @@
+var path = 'StyleManager/view/';
+define([path + 'SectorsView', 'StyleManager/model/Sectors'],
+  function(SectorsView, Sectors) {
+
+    return {
+      run : function(){
+
+          describe('SectorsView', function() {
+
+            var $fixtures;
+            var $fixture;
+            var model;
+            var view;
+
+            before(function () {
+              $fixtures  = $("#fixtures");
+              $fixture   = $('<div class="cssrules-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              model = new Sectors([]);
+              view = new SectorsView({
+                collection: model
+              });
+              $fixture.empty().appendTo($fixtures);
+              $fixture.html(view.render().el);
+            });
+
+            afterEach(function () {
+              view.collection.reset();
+            });
+
+            after(function () {
+              $fixture.remove();
+            });
+
+            it("Collection is empty", function (){
+              view.$el.html().should.be.empty;
+            });
+
+            it("Add new sectors", function (){
+              view.collection.add([{}, {}]);
+              view.el.children.length.should.equal(2);
+            });
+
+        });
+      }
+    };
+
+});