diff --git a/src/dom_components/main.js b/src/dom_components/main.js
index 0f1ea6600..2c60bd031 100644
--- a/src/dom_components/main.js
+++ b/src/dom_components/main.js
@@ -70,6 +70,8 @@ define(function(require) {
 
 	  return {
 
+			componentTypes: defaultTypes,
+
 	  	/**
        * Name of the module
        * @type {String}
diff --git a/test/specs/code_manager/model/CodeModels.js b/test/specs/code_manager/model/CodeModels.js
index c1dd10353..9ce02e874 100644
--- a/test/specs/code_manager/model/CodeModels.js
+++ b/test/specs/code_manager/model/CodeModels.js
@@ -1,15 +1,22 @@
 var path = 'CodeManager/model/';
 define([path + 'HtmlGenerator',
   path + 'CssGenerator',
+  'DomComponents',
   'DomComponents/model/Component',
   'CssComposer'],
-  function(HtmlGenerator, CssGenerator, Component, CssComposer) {
+  function(HtmlGenerator, CssGenerator, DomComponents, Component, CssComposer) {
 
     return {
       run : function(){
+          var comp;
+
           describe('HtmlGenerator', function() {
             beforeEach(function () {
-              this.obj  = new HtmlGenerator();
+              this.obj = new HtmlGenerator();
+              var dcomp = new DomComponents();
+              comp = new Component({}, {
+                defaultTypes: dcomp.componentTypes,
+              });
             });
 
             afterEach(function () {
@@ -17,18 +24,15 @@ define([path + 'HtmlGenerator',
             });
 
             it('Build correctly one component', function() {
-              var comp = new Component();
               this.obj.build(comp).should.equal('');
             });
 
             it('Build correctly empty component inside', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({});
               this.obj.build(comp).should.equal('<div></div>');
             });
 
             it('Build correctly not empty component inside', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({
                 tagName: 'article',
                 attributes: {
@@ -40,7 +44,6 @@ define([path + 'HtmlGenerator',
             });
 
             it('Build correctly component with classes', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({
                 tagName: 'article',
                 attributes: {
@@ -56,11 +59,15 @@ define([path + 'HtmlGenerator',
         });
 
         describe('CssGenerator', function() {
-          var newCssComp = function(){
-            return new CssComposer().init();
-          };
-          beforeEach(function () {
+            var newCssComp = function(){
+              return new CssComposer().init();
+            };
+            beforeEach(function () {
               this.obj  = new CssGenerator();
+              var dcomp = new DomComponents();
+              comp = new Component({}, {
+                defaultTypes: dcomp.componentTypes,
+              });
             });
 
             afterEach(function () {
@@ -68,18 +75,15 @@ define([path + 'HtmlGenerator',
             });
 
             it('Build correctly one component', function() {
-              var comp = new Component();
               this.obj.build(comp).should.equal('');
             });
 
             it('Build correctly empty component inside', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               this.obj.build(comp).should.equal('');
             });
 
             it('Build correctly component with style inside', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({
                 tagName: 'article',
                 style: {
@@ -91,7 +95,6 @@ define([path + 'HtmlGenerator',
             });
 
             it('Build correctly component with class styled', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
 
@@ -103,7 +106,6 @@ define([path + 'HtmlGenerator',
             });
 
             it('Build correctly component styled with class and state', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
 
@@ -117,7 +119,6 @@ define([path + 'HtmlGenerator',
 
 
             it('Build correctly with more classes', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
@@ -131,7 +132,6 @@ define([path + 'HtmlGenerator',
             });
 
             it('Build correctly with class styled out', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
@@ -146,7 +146,6 @@ define([path + 'HtmlGenerator',
             });
 
             it('Rule with media query', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
@@ -160,7 +159,6 @@ define([path + 'HtmlGenerator',
             });
 
             it('Rules mixed with media queries', function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
               var cls2 = m1.get('classes').add({name: 'class2'});
@@ -186,7 +184,6 @@ define([path + 'HtmlGenerator',
             });
 
             it("Avoid useless code", function() {
-              var comp = new Component();
               var m1 = comp.get('components').add({tagName: 'article'});
               var cls1 = m1.get('classes').add({name: 'class1'});
 
@@ -201,4 +198,4 @@ define([path + 'HtmlGenerator',
       }
     };
 
-});
\ No newline at end of file
+});
diff --git a/test/specs/dom_components/model/Component.js b/test/specs/dom_components/model/Component.js
index 22fee3bb4..0ab172687 100644
--- a/test/specs/dom_components/model/Component.js
+++ b/test/specs/dom_components/model/Component.js
@@ -1,17 +1,24 @@
-define(['DomComponents/model/Component',
+define(['DomComponents',
+        'DomComponents/model/Component',
         'DomComponents/model/ComponentImage',
         'DomComponents/model/ComponentText',
         'DomComponents/model/Components'],
-	function(Component, ComponentImage, ComponentText, Components) {
+	function(DomComponents, Component, ComponentImage, ComponentText, Components) {
 
     return {
       run : function(){
           var obj;
+          var dcomp;
+          var compOpts;
 
           describe('Component', function() {
 
             beforeEach(function () {
               obj = new Component();
+              dcomp = new DomComponents();
+              compOpts = {
+                defaultTypes: dcomp.componentTypes,
+              };
             });
 
             afterEach(function () {
@@ -79,13 +86,13 @@ define(['DomComponents/model/Component',
             });
 
             it('Component toHTML with children', function() {
-              obj = new Component({tagName: 'article'});
+              obj = new Component({tagName: 'article'}, compOpts);
               obj.get('components').add({tagName: 'span'});
               obj.toHTML().should.equal('<article><span></span></article>');
             });
 
             it('Component toHTML with more children', function() {
-              obj = new Component({tagName: 'article'});
+              obj = new Component({tagName: 'article'}, compOpts);
               obj.get('components').add([{tagName: 'span'}, {tagName: 'div'}]);
               obj.toHTML().should.equal('<article><span></span><div></div></article>');
             });
@@ -160,20 +167,27 @@ define(['DomComponents/model/Component',
 
         describe('Components', function() {
 
+            beforeEach(function () {
+              dcomp = new DomComponents();
+              compOpts = {
+                defaultTypes: dcomp.componentTypes,
+              }
+            });
+
             it('Creates component correctly', function() {
-              var c = new Components();
+              var c = new Components({}, compOpts);
               var m = c.add({});
               m.should.be.an.instanceOf(Component);
             });
 
             it('Creates image component correctly', function() {
-              var c = new Components();
+              var c = new Components({}, compOpts);
               var m = c.add({ type: 'image' });
               m.should.be.an.instanceOf(ComponentImage);
             });
 
             it('Creates text component correctly', function() {
-              var c = new Components();
+              var c = new Components({}, compOpts);
               var m = c.add({ type: 'text' });
               m.should.be.an.instanceOf(ComponentText);
             });
diff --git a/test/specs/dom_components/view/ComponentV.js b/test/specs/dom_components/view/ComponentV.js
index be95ade98..d6a4d9bef 100644
--- a/test/specs/dom_components/view/ComponentV.js
+++ b/test/specs/dom_components/view/ComponentV.js
@@ -1,6 +1,6 @@
 var path = 'DomComponents/view/';
-define([path + 'ComponentView', 'DomComponents/model/Component'],
-  function(ComponentView, Component) {
+define([path + 'ComponentView', 'DomComponents/model/Component', 'DomComponents'],
+  function(ComponentView, Component, DomComponents) {
 
     return {
       run : function(){
@@ -12,6 +12,8 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
             var model;
             var view;
             var hClass = 'hc-state';
+            var dcomp;
+            var compOpts;
 
             before(function () {
               $fixtures = $("#fixtures");
@@ -19,6 +21,10 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
             });
 
             beforeEach(function () {
+              dcomp = new DomComponents();
+              compOpts = {
+                defaultTypes: dcomp.componentTypes,
+              };
               model = new Component();
               view = new ComponentView({
                 model: model
@@ -120,9 +126,10 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
                   { tagName: 'span'},
                   { attributes: { title: 'test'}}
                 ]
-              });
+              }, compOpts);
               view = new ComponentView({
-                model: model
+                model: model,
+                defaultTypes: dcomp.componentTypes,
               });
               view.render().$el.html().should.equal('<span></span><div title="test"></div>');
             });
@@ -131,4 +138,4 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
       }
     };
 
-});
\ No newline at end of file
+});
diff --git a/test/specs/dom_components/view/ComponentsView.js b/test/specs/dom_components/view/ComponentsView.js
index 3d5ec2ab4..7146ae9d4 100644
--- a/test/specs/dom_components/view/ComponentsView.js
+++ b/test/specs/dom_components/view/ComponentsView.js
@@ -1,6 +1,6 @@
 var path = 'DomComponents/view/';
-define([path + 'ComponentsView', 'DomComponents/model/Components'],
-  function(ComponentsView, Components) {
+define(['DomComponents', path + 'ComponentsView', 'DomComponents/model/Components'],
+  function(DomComponents, ComponentsView, Components) {
 
     return {
       run : function(){
@@ -10,6 +10,8 @@ define([path + 'ComponentsView', 'DomComponents/model/Components'],
             var $fixture;
             var model;
             var view;
+            var dcomp;
+            var compOpts;
 
             before(function () {
               $fixtures = $("#fixtures");
@@ -17,9 +19,14 @@ define([path + 'ComponentsView', 'DomComponents/model/Components'],
             });
 
             beforeEach(function () {
-              model = new Components([]);
+              dcomp = new DomComponents();
+              compOpts = {
+                defaultTypes: dcomp.componentTypes,
+              };
+              model = new Components([], compOpts);
               view = new ComponentsView({
-                collection: model
+                collection: model,
+                defaultTypes: dcomp.componentTypes,
               });
               $fixture.empty().appendTo($fixtures);
               $fixture.html(view.render().el);
@@ -52,4 +59,4 @@ define([path + 'ComponentsView', 'DomComponents/model/Components'],
       }
     };
 
-});
\ No newline at end of file
+});