diff --git a/src/class_manager/template/classTag.html b/src/class_manager/template/classTag.html index ba7844d0c..1a9156134 100644 --- a/src/class_manager/template/classTag.html +++ b/src/class_manager/template/classTag.html @@ -1,3 +1,3 @@ - <%= label %> + <%= label %> \ No newline at end of file diff --git a/src/class_manager/view/ClassTagsView.js b/src/class_manager/view/ClassTagsView.js index 9be82d303..dab8074cc 100644 --- a/src/class_manager/view/ClassTagsView.js +++ b/src/class_manager/view/ClassTagsView.js @@ -38,7 +38,7 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'], }, /** - * Start new tag event + * Start tag creation * @param {Object} e * */ @@ -48,7 +48,7 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'], }, /** - * Start new tag event + * End tag creation * @param {Object} e * */ @@ -57,16 +57,6 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'], this.$input.hide().val(''); }, - /** - * Triggered when component is changed - * @param {Object} e - */ - componentChanged: function(e){ - this.compTarget = this.target.get('selectedComponent'); - var models = this.compTarget ? this.compTarget.get('classes').models : []; - this.collection.reset(models); - }, - /** * Checks what to do on keyup event * @param {Object} e @@ -76,10 +66,16 @@ define(['backbone', 'text!./../template/classTags.html', './ClassTagView'], this.addNewTag(this.$input.val()); else if(e.keyCode === 27) this.endNewTag(); - else{ - //this.searchItem(); - //console.log('search'); - } + }, + + /** + * Triggered when component is changed + * @param {Object} e + */ + componentChanged: function(e){ + this.compTarget = this.target.get('selectedComponent'); + var models = this.compTarget ? this.compTarget.get('classes').models : []; + this.collection.reset(models); }, /** diff --git a/test/specs/class_manager/view/ClassTagsView.js b/test/specs/class_manager/view/ClassTagsView.js index 648f43f9b..deec76b63 100644 --- a/test/specs/class_manager/view/ClassTagsView.js +++ b/test/specs/class_manager/view/ClassTagsView.js @@ -12,12 +12,12 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'], }); beforeEach(function () { - var target = {}; + this.target = { get: function(){} }; this.coll = new ClassTags(); - _.extend(target, Backbone.Events); + _.extend(this.target, Backbone.Events); this.view = new ClassTagsView({ - config : { target: target }, + config : { target: this.target }, collection: this.coll }); @@ -25,6 +25,7 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'], this.$fixture.html(this.view.render().el); this.btnAdd = this.view.$el.find('#' + this.view.addBtnId); this.input = this.view.$el.find('input#' + this.view.newInputId); + this.$tags = this.$fixture.find('#tags-c'); }); afterEach(function () { @@ -39,6 +40,10 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'], ClassTagsView.should.be.exist; }); + it('Not tags inside', function() { + this.$tags.html().should.equal(''); + }); + it('Add new tag triggers correct method', function() { sinon.stub(this.view, "addToClasses"); this.coll.add({ name: 'test' }); @@ -60,7 +65,77 @@ define([path + 'ClassTagsView', 'ClassManager/model/ClassTags'], this.input.val().should.equal(''); }); - //this.$el.find('#' + this.addBtnId); + it('Check keyup of ESC on input', function() { + this.btnAdd.click(); + sinon.stub(this.view, "addNewTag"); + this.input.trigger({ + type: 'keyup', + keyCode: 13 + }); + this.view.addNewTag.calledOnce.should.equal(true); + }); + + it('Check keyup on ENTER on input', function() { + this.btnAdd.click(); + sinon.stub(this.view, "endNewTag"); + this.input.trigger({ + type: 'keyup', + keyCode: 27 + }); + this.view.endNewTag.calledOnce.should.equal(true); + }); + + it('Collection changes on update of target', function() { + this.coll.add({ name: 'test' }); + this.target.trigger('change:selectedComponent'); + this.coll.length.should.equal(0); + }); + + it('Collection reacts on reset', function() { + this.coll.add([{ name: 'test1' }, { name: 'test2' }]); + sinon.stub(this.view, "addToClasses"); + this.coll.trigger('reset'); + this.view.addToClasses.calledTwice.should.equal(true); + }); + + it("Don't accept empty tags", function() { + this.view.addNewTag(''); + this.$tags.html().should.equal(''); + }); + + it("Accept new tags", function() { + sinon.stub(this.target, "get").returns({ + addClass: function(v){ + return {name: v}; + } + }); + this.view.compTarget = { + get: function(){ + return { add: function(){} }; + } + }; + this.view.addNewTag('test'); + this.view.addNewTag('test2'); + this.$tags.children().length.should.equal(2); + }); + + it("New tag correctly added", function() { + this.coll.add({ label: 'test' }); + this.$tags.children().first().find('#tag-label').html().should.equal('test'); + }); + + describe('Should be rendered correctly', function() { + it('Has label', function() { + this.view.$el.find('#label').should.have.property(0); + }); + it('Has tags container', function() { + this.view.$el.find('#tags-c').should.have.property(0); + }); + it('Has add button', function() { + this.view.$el.find('#add-tag').should.have.property(0); + }); + }); + }); } };