Fix tests

src/commands/view/CommandAbstract.js

@@ -21,9 +21,9 @@ define(['backbone'],
 				this.plhClass			= this.pfx + 'placeholder';
 				this.freezClass		= this.ppfx + 'freezed';
 
-				this.canvas = this.editorModel.get('Canvas');
+				this.canvas = this.em.get && this.em.get('Canvas');
 
-				if(this.editorModel.get)
+				if(this.em.get)
 					this.setElement(this.getCanvas());
 
 				if(this.canvas){

src/css_composer/main.js

@@ -55,7 +55,7 @@ define(function(require) {
           if(ppfx)
             c.stylePrefix = ppfx + c.stylePrefix;
 
-          var elStyle = c.em.config.style || '';
+          var elStyle = (c.em && c.em.config.style) || '';
           c.defaults = elStyle || c.defaults;
 
           c.sm = c.em; // TODO Refactor

src/dom_components/config/config.js

@@ -17,9 +17,7 @@ define(function () {
 		// Could be used for default components
 		components: [],
 
-		rte					: {},
+		rte: {},
-
-		em					: {},
 
 		// Class for new image component
 		imageCompClass	: 'fa fa-picture-o',

src/dom_components/main.js

@@ -6,31 +6,27 @@
  * - [clear](#clear)
  * - [render](#render)
  *
- * With this module is possible to manage all the HTML structure inside the canvas
+ * With this module is possible to manage components inside the canvas.
- * You can init the editor with initial components via configuration
- *
- * ```js
- * var editor = grapesjs.init({
- * 	...
- *  domComponents: {...} // Check below for the possible properties
- * 	...
- * });
- * ```
- *
- *
  * Before using methods you should get first the module from the editor instance, in this way:
  *
  * ```js
- * var ComponentsService = editor.DomComponents;
+ * var domComponents = editor.DomComponents;
  * ```
  *
- * @module Components
+ * @module DomComponents
  * @param {Object} config Configurations
- * @param {string|Array<Object>} [config.defaults=[]] HTML string or an array of possible components
+ * @param {string|Array<Object>} [config.components=[]] HTML string or an array of possible components
  * @example
  * ...
  * domComponents: {
- *  	defaults: '<div>Hello world!</div>',
+ *  	components: '<div>Hello world!</div>',
+ * }
+ * // Or
+ * domComponents: {
+ *    components: [
+ *      { tagName: 'span', style: {color: 'red'}, content: 'Hello'},
+ *      { style: {width: '100px', content: 'world!'}}
+ *    ],
  * }
  * ...
  */
@@ -46,7 +42,6 @@ define(function(require) {
 			ComponentImageView = require('./view/ComponentImageView'),
 			ComponentTextView	= require('./view/ComponentTextView');
 		var component, componentView;
-		this.c = c;
 
 	  return {
 
@@ -64,7 +59,7 @@ define(function(require) {
        */
       storageKey: function(){
       	var keys = [];
-      	var smc = c.stm.getConfig() || {};
+      	var smc = (c.stm && c.stm.getConfig()) || {};
         if(smc.storeHtml)
           keys.push('html');
         if(smc.storeComponents)
@@ -73,12 +68,15 @@ define(function(require) {
       },
 
       /**
-       * Initialize module. Automatically called with a new instance of the editor
+       * Initialize module. Called on a new instance of the editor with configurations passed
+       * inside 'domComponents' field
        * @param {Object} config Configurations
+       * @private
        */
       init: function(config) {
         c = config || {};
-        c.components = c.em.config.components || c.components;
+        if(c.em)
+          c.components = c.em.config.components || c.components;
 
         for (var name in defaults) {
           if (!(name in c))
@@ -90,9 +88,11 @@ define(function(require) {
           c.stylePrefix = ppfx + c.stylePrefix;
 
         // Load dependencies
-        c.rte = c.em.get('rte') || '';
+        if(c.em){
-				c.modal = c.em.get('Modal') || '';
+          c.rte = c.em.get('rte') || '';
-				c.am = c.em.get('AssetManager') || '';
+  				c.modal = c.em.get('Modal') || '';
+  				c.am = c.em.get('AssetManager') || '';
+        }
 
         component = new Component(c.wrapper, { sm: c.em, config: c });
 				component.set({ attributes: {id: 'wrapper'}});
@@ -119,48 +119,48 @@ define(function(require) {
       },
 
       /**
-         * Load data from the passed object, if the object is empty will try to fetch them
+       * Load data from the passed object, if the object is empty will try to fetch them
-         * autonomously from the storage manager.
+       * autonomously from the storage manager.
-         * The fetched data will be added to the collection
+       * The fetched data will be added to the collection
-         * @param {Object} data Object of data to load
+       * @param {Object} data Object of data to load
-         * @return {Object} Loaded data
+       * @return {Object} Loaded data
-         */
+       */
-        load: function(data){
+      load: function(data){
-          var d = data || '';
+        var d = data || '';
-          if(!d && c.stm)
+        if(!d && c.stm)
-            d = c.em.getCacheLoad();
+          d = c.em.getCacheLoad();
-          var obj = '';
+        var obj = '';
-          if(d.components){
+        if(d.components){
-            try{
+          try{
-              obj =  JSON.parse(d.components);
+            obj =  JSON.parse(d.components);
-            }catch(err){}
+          }catch(err){}
-          }else if(d.html)
+        }else if(d.html)
-            obj = d.html;
+          obj = d.html;
 
-          this.getComponents().reset(obj);
+        this.getComponents().reset(obj);
-          return obj;
+        return obj;
-        },
+      },
 
-        /**
+      /**
-         * Store data to the selected storage
+       * Store data to the selected storage
-         * @param {Boolean} noStore If true, won't store
+       * @param {Boolean} noStore If true, won't store
-         * @return {Object} Data to store
+       * @return {Object} Data to store
-         * @example
+       * @example
-         * var rules = cssComposer.store();
+       * var components = domComponents.store();
-         */
+       */
-        store: function(noStore){
+      store: function(noStore){
-          if(!c.stm)
+        if(!c.stm)
-            return;
+          return;
-          var obj = {};
+        var obj = {};
-          var keys = this.storageKey();
+        var keys = this.storageKey();
-          if(keys.indexOf('html') >= 0)
+        if(keys.indexOf('html') >= 0)
-            obj.html = c.em.getHtml();
+          obj.html = c.em.getHtml();
-          if(keys.indexOf('components') >= 0)
+        if(keys.indexOf('components') >= 0)
-            obj.components = JSON.stringify(c.em.getComponents());
+          obj.components = JSON.stringify(c.em.getComponents());
-          if(!noStore)
+        if(!noStore)
-            c.stm.store(obj);
+          c.stm.store(obj);
-          return obj;
+        return obj;
-        },
+      },
 
 			/**
 			 * Returns privately the main wrapper
@@ -177,7 +177,7 @@ define(function(require) {
 			 * @return {Component} Root Component
 			 * @example
 			 * // Change background of the wrapper and set some attribute
-			 * var wrapper = ComponentsService.getWrapper();
+			 * var wrapper = domComponents.getWrapper();
 			 * wrapper.set('style', {'background-color': 'red'});
 			 * wrapper.set('attributes', {'title': 'Hello!'});
 			 */
@@ -192,7 +192,7 @@ define(function(require) {
 			 * @return {Components} Collection of components
 			 * @example
 			 * // Let's add some component
-			 * var wrapperChildren = ComponentsService.getComponents();
+			 * var wrapperChildren = domComponents.getComponents();
 			 * var comp1 = wrapperChildren.add({
 			 * 	style: { 'background-color': 'red'}
 			 * });
@@ -218,7 +218,7 @@ define(function(require) {
 
 			/**
 			 * Add new components to the wrapper's children. It's the same
-			 * as 'ComponentsService.getComponents().add(...)'
+			 * as 'domComponents.getComponents().add(...)'
 			 * @param {Object|Component|Array<Object>} component Component/s to add
 			 * @param {string} [component.tagName='div'] Tag name
 			 * @param {string} [component.type=''] Type of the component. Available: ''(default), 'text', 'image'
@@ -234,7 +234,7 @@ define(function(require) {
 			 * @return {Component|Array<Component>} Component/s added
 			 * @example
 			 * // Example of a new component with some extra property
-			 * var comp1 = ComponentsService.addComponent({
+			 * var comp1 = domComponents.addComponent({
 			 * 	tagName: 'div',
 			 * 	removable: true, // Can't remove it
 			 * 	draggable: true, // Can't move it

src/editor/main.js

@@ -66,6 +66,7 @@ define(function (require){
 				if (!(name in c))
 					c[name] = defaults[name];
 			}
+			c.pStylePrefix = c.stylePrefix;
 
 			var em = new EditorModel(c);
 

src/editor/model/Editor.js

@@ -1,7 +1,11 @@
-var dep = ['Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager',
+var deps = ['Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager', 'ModalDialog', 'CodeManager', 'Panels',
-					'ModalDialog', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer',
+				'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents', 'Canvas', 'Commands', 'BlockManager'];
-					'DomComponents', 'Canvas', 'Commands', 'BlockManager'];
+
-define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
+// r.js do not see deps if I pass them as a variable
+// http://stackoverflow.com/questions/27545412/optimization-fails-when-passing-a-variable-with-a-list-of-dependencies-to-define
+define(['backbone', 'backboneUndo', 'keymaster', 'Utils', 'StorageManager', 'DeviceManager', 'Parser', 'SelectorManager',
+'ModalDialog', 'CodeManager', 'Panels', 'RichTextEditor', 'StyleManager', 'AssetManager', 'CssComposer', 'DomComponents',
+'Canvas', 'Commands', 'BlockManager'], function(){
 		return Backbone.Model.extend({
 
 			defaults: {
@@ -21,9 +25,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
 					this.config.components = c.el.innerHTML;
 
 				// Load modules
-				dep.forEach(function(name){
+				deps.forEach(function(name){
-					if(['backbone','backboneUndo','keymaster'].indexOf(name) >= 0)
-						return;
 					this.loadModule(name);
 				}, this);
 
@@ -42,7 +44,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
 				var M = new require(moduleName)();
 				var name = M.name.charAt(0).toLowerCase() + M.name.slice(1);
 				var cfg = c[name] || c[M.name] || {};
-				cfg.pStylePrefix = c.stylePrefix || '';
+				cfg.pStylePrefix = c.pStylePrefix || '';
 
 				// Check if module is storable
 				var sm = this.get('StorageManager');
@@ -53,7 +55,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
 					this.set('storables', storables);
 				}
 				cfg.em = this;
-				M.init(cfg);
+				M.init(Object.create(cfg));
 
 				// Bind the module to the editor model if public
 				if(!M.private)
@@ -285,7 +287,7 @@ define(['backbone', 'backboneUndo', 'keymaster'].concat(dep), function(){
 			 * @private
 			 */
 			setComponents: function(components){
-				return this.Components.setComponents(components);
+				return this.get('DomComponents').setComponents(components);
 			},
 
 			/**

test/specs/code_manager/model/CodeModels.js

@@ -56,6 +56,9 @@ define([path + 'HtmlGenerator',
         });
 
         describe('CssGenerator', function() {
+          var newCssComp = function(){
+            return new CssComposer().init();
+          };
           beforeEach(function () {
               this.obj  = new CssGenerator();
             });
@@ -92,7 +95,7 @@ define([path + 'HtmlGenerator',
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
 
-              var cssc = new CssComposer();
+              var cssc = newCssComp();
               var rule = cssc.newRule(cls1);
               rule.set('style',{'prop1':'value1', 'prop2':'value2'});
               cssc.addRule(rule);
@@ -105,7 +108,7 @@ define([path + 'HtmlGenerator',
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
 
-              var cssc = new CssComposer();
+              var cssc = newCssComp();
               var rule = cssc.newRule(cls1);
               rule.set('style',{'prop1':'value1', 'prop2':'value2'});
               rule.set('state', 'hover');
@@ -121,7 +124,7 @@ define([path + 'HtmlGenerator',
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
 
-              var cssc = new CssComposer();
+              var cssc = newCssComp();
               var rule = cssc.newRule([cls1, cls2]);
               rule.set('style',{'prop1':'value1', 'prop2':'value2'});
               cssc.addRule(rule);
@@ -136,7 +139,7 @@ define([path + 'HtmlGenerator',
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
 
-              var cssc = new CssComposer();
+              var cssc = newCssComp();
               var rule = cssc.newRule([cls1, cls2]);
               rule.set('style',{'prop1':'value1'});
               cssc.addRule(rule);
@@ -153,7 +156,7 @@ define([path + 'HtmlGenerator',
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
 
-              var cssc = new CssComposer();
+              var cssc = newCssComp();
               var rule = cssc.newRule([cls1, cls2]);
               rule.set('style',{'prop1':'value1'});
               rule.set('maxWidth', '999px');
@@ -168,7 +171,7 @@ define([path + 'HtmlGenerator',
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
 
-              var cssc = new CssComposer();
+              var cssc = newCssComp();
 
               var rule = cssc.newRule([cls1, cls2]);
               rule.set('style',{'prop1':'value1'});
@@ -198,7 +201,7 @@ define([path + 'HtmlGenerator',
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
 
-              var cssc = new CssComposer();
+              var cssc = newCssComp();
               var rule = cssc.newRule(cls1);
               rule.set('style',{'prop1':'value1', 'prop2':'value2'});
               cssc.addRule(rule);

test/specs/commands/main.js

@@ -16,7 +16,7 @@ define([
         var obj;
 
         beforeEach(function () {
-          obj = new Commands();
+          obj = new Commands().init();
         });
 
         afterEach(function () {

test/specs/css_composer/e2e/CssComposer.js

@@ -20,7 +20,7 @@ define(['GrapesJS'],function(Grapes) {
               });
               this.cssc = this.gjs.editor.get('CssComposer');
               this.clsm = this.gjs.editor.get('SelectorManager');
-              this.domc = this.gjs.editor.Components;
+              this.domc = this.gjs.editor.get('DomComponents');
               this.$fixture.empty().appendTo(this.$fixtures);
               this.gjs.render();
               this.rulesSet = [

test/specs/css_composer/main.js

@@ -20,7 +20,7 @@ define([
 			describe('Main', function() {
 
 				beforeEach(function () {
-					this.obj 	= new CssComposer();
+					this.obj 	= new CssComposer().init();
 				});
 
 				afterEach(function () {

test/specs/dom_components/main.js

@@ -6,14 +6,16 @@ define([
 				 modulePath + '/view/ComponentV',
 				 modulePath + '/view/ComponentsView',
 				 modulePath + '/view/ComponentTextView',
-				 modulePath + '/view/ComponentImageView'
+				 modulePath + '/view/ComponentImageView',
+				 './../test_utils.js'
 				 ],
 	function(DomComponents,
 					ComponentModels,
 					ComponentView,
 					ComponentsView,
 					ComponentTextView,
-					ComponentImageView
+					ComponentImageView,
+					utils
 					) {
 
 		describe('DOM Components', function() {
@@ -21,9 +23,33 @@ define([
 			describe('Main', function() {
 
 				var obj;
+				var config;
+				var storagMock = utils.storageMock();
+				var editorModel = {
+					getHtml: function(){return 'testHtml';},
+					getComponents: function(){return {test: 1};},
+					getCacheLoad: function(){
+						return storagMock.load();
+					}
+				};
+				// Methods
+				var setSmConfig = function(){
+					config.stm = storagMock;
+					config.stm.getConfig =  function(){
+						return {
+							storeHtml: 1,
+							storeComponents: 1,
+						}
+					};
+				};
+				var setEm = function(){
+					config.em = editorModel;
+				}
+
 
 				beforeEach(function () {
-					obj = new DomComponents();
+					config = {};
+					obj = new DomComponents().init(config);
 				});
 
 				afterEach(function () {
@@ -34,6 +60,40 @@ define([
 					DomComponents.should.be.exist;
 				});
 
+				it('storageKey returns array', function() {
+					obj.storageKey().should.be.instanceOf(Array);
+				});
+
+				it('storageKey returns correct composition', function() {
+					config.stm = {
+						getConfig: function(){
+							return {
+								storeHtml: 1,
+								storeComponents: 1,
+							}
+						}
+					};
+					obj.storageKey().should.eql(['html', 'components']);
+				});
+
+				it('Store data', function() {
+					setSmConfig();
+					setEm();
+					var expected = {
+						html: 'testHtml',
+						components: '{"test":1}',
+					};
+					obj.store(1).should.deep.equal(expected);
+				});
+
+				it('Store and load data', function() {
+					setSmConfig();
+					setEm();
+					obj.store();
+					// Load object between html and components
+					obj.load().should.deep.equal({test: 1});
+				});
+
 				it('Wrapper exists', function() {
 					obj.getWrapper().should.not.be.empty;
 				});
@@ -57,7 +117,7 @@ define([
 				});
 
 				it('Add components at init', function() {
-					obj = new DomComponents({
+					obj = new DomComponents().init({
 						components : [{}, {}, {}]
 					});
 					obj.getComponents().length.should.equal(3);

test/specs/grapesjs/main.js

@@ -45,6 +45,7 @@ define(['GrapesJS', 'PluginManager', 'chai'],
       });
 
       afterEach(function () {
+        config = {};
         delete obj;
         delete config;
         fixture.remove();

test/specs/selector_manager/e2e/ClassManager.js

@@ -54,7 +54,7 @@ define(['GrapesJS', 'SelectorManager/model/Selectors', 'SelectorManager/view/Cla
             describe('Interaction with Components', function() {
 
               beforeEach(function () {
-                this.wrapper = this.gjs.editor.get('Components').getWrapper().get('components');
+                this.wrapper = this.gjs.editor.get('DomComponents').getWrapper().get('components');
                 this.$clm = instClassTagViewer(this);
               });
 

test/specs/test_utils.js

@@ -0,0 +1,21 @@
+define(function () {
+  return {
+
+    storageMock: function() {
+      var db = {};
+      return {
+        id: 'testStorage',
+        store: function(data){
+          db = data;
+        },
+        load: function(keys){
+          return db;
+        },
+        getDb: function(){
+          return db;
+        },
+      };
+    },
+
+  };
+});