Add ComponentTextView tests

test/specs/dom_components/main.js

@@ -3,11 +3,15 @@ var modulePath = './../../../test/specs/dom_components';
 define([
 				'DomComponents',
 				 modulePath + '/model/Component',
-				 modulePath + '/view/ComponentView'
+				 modulePath + '/view/ComponentView',
+				 modulePath + '/view/ComponentsView',
+				 modulePath + '/view/ComponentTextView'
 				 ],
 	function(DomComponents,
 					ComponentModels,
-					ComponentView
+					ComponentView,
+					ComponentsView,
+					ComponentTextView
 					) {
 
 		describe('DOM Components', function() {
@@ -61,6 +65,8 @@ define([
 
 			ComponentModels.run();
 			ComponentView.run();
+			ComponentsView.run();
+			ComponentTextView.run();
 
 		});
 });

test/specs/dom_components/view/ComponentTextView.js

@@ -0,0 +1,59 @@
+var path = 'DomComponents/view/';
+define([path + 'ComponentTextView', 'DomComponents/model/Component'],
+  function(ComponentTextView, Component) {
+
+    return {
+      run : function(){
+
+          describe('ComponentTextView', function() {
+
+            var $fixtures;
+            var $fixture;
+            var model;
+            var view;
+            var hClass = 'hc-state';
+
+            before(function () {
+              $fixtures = $("#fixtures");
+              $fixture = $('<div class="components-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              model = new Component();
+              view = new ComponentTextView({
+                model: model
+              });
+              $fixture.empty().appendTo($fixtures);
+              $fixture.html(view.render().el);
+            });
+
+            afterEach(function () {
+              view.remove();
+            });
+
+            after(function () {
+              $fixture.remove();
+            });
+
+            it('Component empty', function() {
+              $fixture.html().should.equal('<div></div>');
+            });
+
+            it('Input content is stored in model', function() {
+              view.enableEditing();
+              view.el.innerHTML = 'test';
+              view.disableEditing();
+              model.get('content').should.equal('test');
+            });
+
+            it('Init with content', function() {
+              model = new Component({ content: 'test' });
+              view = new ComponentTextView({ model: model });
+              view.render().el.innerHTML.should.equal('test');
+            });
+
+        });
+      }
+    };
+
+});

test/specs/dom_components/view/ComponentsView.js

@@ -0,0 +1,55 @@
+var path = 'DomComponents/view/';
+define([path + 'ComponentsView', 'DomComponents/model/Components'],
+  function(ComponentsView, Components) {
+
+    return {
+      run : function(){
+          describe('ComponentsView', function() {
+
+            var $fixtures;
+            var $fixture;
+            var model;
+            var view;
+
+            before(function () {
+              $fixtures = $("#fixtures");
+              $fixture = $('<div class="components-fixture"></div>');
+            });
+
+            beforeEach(function () {
+              model = new Components([]);
+              view = new ComponentsView({
+                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 component", function (){
+              sinon.stub(view, "addToCollection");
+              view.collection.add({});
+              view.addToCollection.calledOnce.should.equal(true);
+            });
+
+            it("Render new component", function (){
+              view.collection.add({});
+              view.$el.html().should.not.be.empty;
+            });
+
+        });
+      }
+    };
+
+});

test/specs/dom_components/view/componentView.js

@@ -14,8 +14,8 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
             var hClass = 'hc-state';
 
             before(function () {
-              $fixtures  = $("#fixtures");
+              $fixtures = $("#fixtures");
-              $fixture   = $('<div class="components-fixture"></div>');
+              $fixture = $('<div class="components-fixture"></div>');
             });
 
             beforeEach(function () {
@@ -36,28 +36,28 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
             });
 
             it('Component empty', function() {
-              $fixture.html().should.be.equal('<div></div>');
+              $fixture.html().should.equal('<div></div>');
             });
 
             it('Add helper class on update of state', function() {
               model.set('state', 'test');
-              $fixture.html().should.be.equal('<div class="' + hClass + '"></div>');
+              $fixture.html().should.equal('<div class="' + hClass + '"></div>');
             });
 
             it('Clean form helper state', function() {
               model.set('state', 'test');
               model.set('state', '');
-              $fixture.html().should.be.equal('<div class=""></div>');
+              $fixture.html().should.equal('<div class=""></div>');
             });
 
             it('Add helper class on status update', function() {
               model.set('status', 'selected');
-              $fixture.html().should.be.equal('<div class="selected"></div>');
+              $fixture.html().should.equal('<div class="selected"></div>');
             });
 
             it('Get string of classes', function() {
               model.set('attributes', { class: ['test', 'test2']});
-              view.getClasses().should.be.equal('test test2');
+              view.getClasses().should.equal('test test2');
             });
 
             it('Update attributes', function() {
@@ -65,8 +65,8 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
                 title: 'value',
                 'data-test': 'value2',
               });
-              view.el.getAttribute('title').should.be.equal('value');
+              view.el.getAttribute('title').should.equal('value');
-              view.el.getAttribute('data-test').should.be.equal('value2');
+              view.el.getAttribute('data-test').should.equal('value2');
             });
 
             it('Update style', function() {
@@ -74,13 +74,13 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
                 color: 'red',
                 float: 'left'
               });
-              view.el.getAttribute('style').should.be.equal('color:red;float:left;');
+              view.el.getAttribute('style').should.equal('color:red;float:left;');
             });
 
             it('Clean style', function() {
               model.set('style', { color: 'red'});
               model.set('style', {});
-              view.el.getAttribute('style').should.be.equal('');
+              view.el.getAttribute('style').should.equal('');
             });
 
             it('Get style string', function() {
@@ -88,30 +88,30 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
                 color: 'red',
                 float: 'left'
               });
-              view.getStyleString().should.be.equal('color:red;float:left;');
+              view.getStyleString().should.equal('color:red;float:left;');
             });
 
             it('Add class', function() {
               model.get('classes').add({name: 'test'});
-               view.el.getAttribute('class').should.be.equal('test');
+               view.el.getAttribute('class').should.equal('test');
             });
 
             it('Add classes', function() {
               model.get('classes').add([{name: 'test'}, {name: 'test2'}]);
-              view.el.getAttribute('class').should.be.equal('test test2');
+              view.el.getAttribute('class').should.equal('test test2');
             });
 
             it('Update on remove of some class', function() {
               var cls1 = model.get('classes').add({name: 'test'});
               var cls12 = model.get('classes').add({name: 'test2'});
               model.get('classes').remove(cls1);
-              view.el.getAttribute('class').should.be.equal('test2');
+              view.el.getAttribute('class').should.equal('test2');
             });
 
             it('Init with different tag', function() {
               model = new Component({ tagName: 'span' });
               view = new ComponentView({ model: model });
-              view.render().el.tagName.should.be.equal('SPAN');
+              view.render().el.tagName.should.equal('SPAN');
             });
 
             it('Init with nested components', function() {
@@ -124,7 +124,7 @@ define([path + 'ComponentView', 'DomComponents/model/Component'],
               view = new ComponentView({
                 model: model
               });
-              view.render().$el.html().should.be.equal('<span></span><div title="test"></div>');
+              view.render().$el.html().should.equal('<span></span><div title="test"></div>');
             });
 
         });