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);
+ });
+ });
+
});
}
};