diff --git a/test/specs/dom_components/main.js b/test/specs/dom_components/main.js index 97b1369f6..4744b89ae 100644 --- a/test/specs/dom_components/main.js +++ b/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(); }); }); \ No newline at end of file diff --git a/test/specs/dom_components/view/ComponentTextView.js b/test/specs/dom_components/view/ComponentTextView.js new file mode 100644 index 000000000..7a0ee9ead --- /dev/null +++ b/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 = $('
'); + }); + + 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('
'); + }); + + 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'); + }); + + }); + } + }; + +}); \ No newline at end of file diff --git a/test/specs/dom_components/view/ComponentsView.js b/test/specs/dom_components/view/ComponentsView.js new file mode 100644 index 000000000..3d5ec2ab4 --- /dev/null +++ b/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 = $('
'); + }); + + 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; + }); + + }); + } + }; + +}); \ No newline at end of file diff --git a/test/specs/dom_components/view/componentView.js b/test/specs/dom_components/view/componentView.js index 3ed59b58b..be95ade98 100644 --- a/test/specs/dom_components/view/componentView.js +++ b/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"); - $fixture = $('
'); + $fixtures = $("#fixtures"); + $fixture = $('
'); }); beforeEach(function () { @@ -36,28 +36,28 @@ define([path + 'ComponentView', 'DomComponents/model/Component'], }); it('Component empty', function() { - $fixture.html().should.be.equal('
'); + $fixture.html().should.equal('
'); }); it('Add helper class on update of state', function() { model.set('state', 'test'); - $fixture.html().should.be.equal('
'); + $fixture.html().should.equal('
'); }); it('Clean form helper state', function() { model.set('state', 'test'); model.set('state', ''); - $fixture.html().should.be.equal('
'); + $fixture.html().should.equal('
'); }); it('Add helper class on status update', function() { model.set('status', 'selected'); - $fixture.html().should.be.equal('
'); + $fixture.html().should.equal('
'); }); 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('data-test').should.be.equal('value2'); + view.el.getAttribute('title').should.equal('value'); + 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('
'); + view.render().$el.html().should.equal('
'); }); });