Tests for Components

Gruntfile.js

@@ -167,7 +167,7 @@ module.exports = function(grunt) {
     	test: {
     		files: ['test/specs/**/*.js'],
     		tasks: ['mocha'],
-    		options: { livereload: true }, //default port 35729
+    		//options: { livereload: true }, //default port 35729
     	}
     },
 

src/dom_components/main.js

@@ -16,7 +16,7 @@ define(function(require) {
 			ComponentImageView	= require('./view/ComponentImageView'),
 			ComponentTextView	= require('./view/ComponentTextView');
 
-	    // Set default options
+	  // Set default options
 		for (var name in defaults) {
 			if (!(name in c))
 				c[name] = defaults[name];
@@ -34,26 +34,56 @@ define(function(require) {
 
 		if(!c.wrapper.style)
 			c.wrapper.style 		= {};
+
 		c.wrapper.style.position	= 'relative';
 
 		this.component		= new Component(c.wrapper);
 		var obj				= {
-				model	: this.component,
+			model: this.component,
-		    	config	: c,
+			config: c,
 		};
 
-	    this.ComponentView 	= new ComponentView(obj);
+		this.c = c;
+	  this.ComponentView 	= new ComponentView(obj);
 	}
 
 	Components.prototype	= {
 
-			render		: function(){
+			/**
-				return this.ComponentView.render().$el;
+			 * Returns main wrapper which will contain all new components
-			},
+			 *
-
+			 * @return {Object}
+			 */
 			getComponent	: function(){
 				return this.component;
 			},
+
+			/**
+			 * Returns main wrapper which will contain all new components
+			 *
+			 * @return {Object}
+			 */
+			getWrapper: function(){
+				return this.getComponent();
+			},
+
+			/**
+			 * Returns children from the wrapper
+			 *
+			 * @return {Object}
+			 */
+			getComponents: function(){
+				return this.getWrapper().get('components');
+			},
+
+			/**
+			 * Render and returns wrapper
+			 *
+			 * @return {Object}
+			 */
+			render		: function(){
+				return this.ComponentView.render().el;
+			},
 	};
 
 	return Components;

src/dom_components/model/Component.js

@@ -7,7 +7,7 @@ define(['backbone','./Components'],
 
 			defaults: {
 				tagName			: 'div',
-				type			: '',
+				type				: '',
 				editable		: false,
 				removable		: true,
 				movable			: true,
@@ -18,12 +18,13 @@ define(['backbone','./Components'],
 				status			: '',
 				previousModel	: '',
 				content			: '',
-				style			: {},
+				style				: {},
-				attributes		: {},
+				attributes	: {},
 			},
 
-			initialize: function(options) {
+			initialize: function(o) {
-				this.defaultC = options.components || [];
+				this.config 	= o || {};
+				this.defaultC = this.config.components || [];
 				this.components	= new Components(this.defaultC);
 				this.set('components', this.components);
 			},
@@ -47,7 +48,7 @@ define(['backbone','./Components'],
 			/**
 			 * Get name of the component
 			 *
-			 * @return string
+			 * @return {String}
 			 * */
 			getName: function(){
 				if(!this.name){

test/runner/main.js

@@ -11,6 +11,7 @@ require(['../src/config/require-config.js', 'config/config.js'], function() {
 	         'specs/asset_manager/view/AssetView.js',
 	         'specs/asset_manager/view/AssetImageView.js',
 	         'specs/asset_manager/view/FileUploader.js',
+	         'specs/dom_components/main.js',
 	     ], function(chai)
 	     {
 				var should 	= chai.should(),

test/specs/components/model/componentModel.js

@@ -1,36 +0,0 @@
-define(['componentModel'],
-	function(componentModel) {
-		describe('Component', function() {
-			
-			it('Contiene valori di default', function() {//Has default values
-				var model = new componentModel({});
-				var modelComponents = model.components;
-				model.should.be.ok;
-				model.get('tagName').should.equal("div");
-				model.get('classes').should.be.empty;
-				model.get('css').should.be.empty;
-				model.get('attributes').should.be.empty;
-				modelComponents.models.should.be.empty;
-			});
-			it('Non ci sono altri componenti all\'interno ', function() {//No other components inside
-				var model = new componentModel({});
-				var modelComponents = model.components;
-				model.should.be.ok;
-				modelComponents.models.should.be.empty;
-			});
-			it('Imposta valori passati', function() {//Sets passed attributes
-				var model = new componentModel({
-					tagName : 		'span',
-					classes : 		['one','two','three'],
-					css : 			{ 'one':'vone', 'two':'vtwo', },
-					attributes : 	{ 'data-one':'vone', 'data-two':'vtwo', },
-				});
-				model.should.be.ok;
-				model.get('tagName').should.equal("span");
-				model.get('classes').should.have.length(3);
-				model.get('css').should.have.keys(["one", "two",]);
-				model.get('attributes').should.have.keys(["data-one", "data-two",]);
-			});
-			it('Possibilità di istanziare componenti annidati');		//Possibility to init nested components
-		});
-});

test/specs/components/model/components.js

@@ -1,58 +0,0 @@
-define(['Components'],
-		function(Components) {
-			describe('Components', function() {
-				before(function () {
-				    this.collection = new Components();
-				    this.collection.localStorage._clear();
-				});
-				after(function () {			
-					this.collection = null;
-				});
-				describe('Creazione', function() {
-					it('Contiene valori di default', function() {//Has default values
-						this.collection.should.be.ok;
-						this.collection.should.have.length(0);
-					});
-				});
-				describe('Modifica', function() {
-					beforeEach(function () {
-						this.collection.create({
-							tagName : 		'span',
-							classes : 		['one','two','three'],
-							css : 			{ 'one':'vone', 'two':'vtwo', },
-							attributes : 	{ 'data-one':'vone', 'data-two':'vtwo', },
-						});
-				    });
-				    afterEach(function () {
-				    	this.collection.localStorage._clear();
-				    	this.collection.reset();
-				    });
-					it('Contiene un singolo componente', function(done) {	//Has single object
-						var collection = this.collection, model;
-						
-						collection.once("reset", function () {
-							collection.should.have.length(1);
-							model = collection.at(0);
-							model.should.be.ok;
-							model.get('tagName').should.equal("span");
-							model.get('classes').should.have.length(3);
-							model.get('css').should.have.keys(["one", "two",]);
-							model.get('attributes').should.have.keys(["data-one", "data-two",]);
-							done();
-						});
-						collection.fetch({ reset: true });
-					});
-					
-					it("Componenete eliminabile", function (done) {			//Can delete a component
-						var collection = this.collection, model;
-						collection.should.have.length(1);
-						collection.once("remove", function () {
-							collection.should.have.length(0);
-					        done();
-					     });
-
-						model = collection.shift();
-					});
-				});
-			});
-	});

test/specs/dom_components/main.js

@@ -0,0 +1,46 @@
+var modulePath = './../../../test/specs/dom_components';
+
+define([
+				'DomComponents',
+				 modulePath + '/model/Component'
+				 ],
+	function(DomComponents,
+					ComponentModels
+					) {
+
+		describe('DOM Components', function() {
+
+			describe('Main', function() {
+
+				beforeEach(function () {
+					this.obj 	= new DomComponents();
+				});
+
+				afterEach(function () {
+					delete this.obj;
+				});
+
+				it('Object exists', function() {
+					DomComponents.should.be.exist;
+				});
+
+				it('Wrapper exists', function() {
+					this.obj.getWrapper().should.not.be.empty;
+				});
+
+				it('No components inside', function() {
+					this.obj.getComponents().length.should.equal(0);
+				});
+
+				it('Render wrapper', function() {
+					sinon.stub(this.obj.ComponentView, "render").returns({ el: '' });
+					this.obj.render();
+					this.obj.ComponentView.render.calledOnce.should.equal(true);
+				});
+
+			});
+
+			ComponentModels.run();
+
+		});
+});

test/specs/dom_components/model/Component.js

@@ -0,0 +1,109 @@
+define(['DomComponents/model/Component',
+        'DomComponents/model/ComponentImage',
+        'DomComponents/model/ComponentText',
+        'DomComponents/model/Components'],
+	function(Component, ComponentImage, ComponentText, Components) {
+
+    return {
+      run : function(){
+          describe('Component', function() {
+
+            beforeEach(function () {
+              this.obj  = new Component();
+            });
+
+            afterEach(function () {
+              delete this.obj;
+            });
+
+            it('Has no children', function() {
+              this.obj.get('components').length.should.equal(0);
+            });
+
+            it('Clones correctly', function() {
+              var sAttr = this.obj.attributes;
+              var cloned = this.obj.clone();
+              var eAttr = cloned.attributes;
+              sAttr.components = {};
+              eAttr.components = {};
+              sAttr.should.deep.equal(eAttr);
+            });
+
+            it('Has expected name', function() {
+              this.obj.cid = 'c999';
+              this.obj.getName().should.equal('Box999');
+            });
+
+            it('Has expected name 2', function() {
+              this.obj.cid = 'c999';
+              this.obj.set('type','testType');
+              this.obj.getName().should.equal('TestTypeBox999');
+            });
+
+        });
+
+        describe('Image Component', function() {
+
+            beforeEach(function () {
+              this.obj  = new ComponentImage();
+            });
+
+            afterEach(function () {
+              delete this.obj;
+            });
+
+            it('Has src property', function() {
+              this.obj.has('src').should.equal(true);
+            });
+
+            it('Not droppable', function() {
+              this.obj.get('droppable').should.equal(false);
+            });
+
+        });
+
+        describe('Text Component', function() {
+
+            beforeEach(function () {
+              this.obj  = new ComponentText();
+            });
+
+            afterEach(function () {
+              delete this.obj;
+            });
+
+            it('Has content property', function() {
+              this.obj.has('content').should.equal(true);
+            });
+
+            it('Not droppable', function() {
+              this.obj.get('droppable').should.equal(false);
+            });
+
+        });
+
+        describe('Components', function() {
+
+            it('Creates component correctly', function() {
+              var c = new Components();
+              var m = c.add({});
+              m.should.be.an.instanceOf(Component);
+            });
+
+            it('Creates image component correctly', function() {
+              var c = new Components();
+              var m = c.add({ type: 'image' });
+              m.should.be.an.instanceOf(ComponentImage);
+            });
+
+            it('Creates text component correctly', function() {
+              var c = new Components();
+              var m = c.add({ type: 'text' });
+              m.should.be.an.instanceOf(ComponentText);
+            });
+
+        });
+      }
+    };
+
+});