Add tests Class Manager

src/class_manager/template/classTag.html

@@ -1,3 +1,3 @@
 <span id="<%= pfx %>checkbox" class="fa"></span>
- <span id="<%= pfx %>tag-label"> <%= label %> </span>
+ <span id="<%= pfx %>tag-label"><%= label %></span>
 <span id="<%= pfx %>close">&Cross;</span>

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);
     },
 
     /**

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