Backbone.js的单击事件的间谍是没有得到使用jasmine.js和sinon.js称为 [英] backbone.js click event spy is not getting called using jasmine.js and sinon.js

问题描述

我想测试一下Backbone.js的，jasmine.js和sinon.js点击一个按钮。但下面的试验情况下失败。我使用的是间谍跟踪它是否获取调用或没有。
你能帮帮我？

感谢。

新任务模板

 ＆LT;脚本ID ='new_task_template'类型='文本/模板'＆GT;
  ＆LT;输入类型='文本'ID ='new_task_name的名字='new_task_name'＆GT;＆LT; /输入＆GT;
  ＆LT;按钮式='按钮'ID ='add_new_task的名字='add_new_task'＆gt;添加任务＆LT; /按钮＆GT;
＆LT; / SCRIPT＆GT;
 

NewTaskView

  T.views.NewTaskView = Backbone.View.extend（{
  标签名：部分，
  ID：'new_task_section'，
  模板：_.template（$（＃new_task_template）HTML（）。）
  初始化：功能（）{
    _.bindAll（在此，呈现，addTask'）;
  }，
  事件：{
    点击#add_new_task：addTask
  }，
  渲染：功能（）{
    $（this.el）的.html（this.template（））;
    返回此;
  }，
  addTask：函数（事件）{
    的console.log（addTask）;
  }
}）;
 

茉莉花测试用例

 描述（NewTaskView功能（）{
  beforeEach（函数（）{
    this.view =新T.views.NewTaskView（）;
    this.view.render（）;
  }）;  它（应该#add_new_task被点击时，它应该引发addTask法，函数（）{
    变种clickSpy = sinon.spy（this.view，'addTask'）;
    $（＃add_new_task），点击（）;
    期待（clickSpy）.toHaveBeenCalled（）;
  }）;
}）;
 

茉莉花输出

  NewTaskView
  runEvents
    runshould #add_new_task被点击时，它应该引发addTask方法
      以被称为预定的功能。
 

解决方案

问题是你添加的间谍后，骨干已经直接绑定click事件到addTask功能（它的建筑观的过程中）。因此，你的间谍不会被调用。

尝试的前间谍附加到原型视图的你构建它。像这样的：

  this.addTaskSpy = sinon.spy（T.views.NewViewTask.prototype，'addTaskSpy'）;
this.view =新T.views.NewTaskView（）;
 

，然后记得将其删除：

  T.views.NewViewTask.prototype.addTaskSpy.restore（）
 

I am trying to test a button click using backbone.js, jasmine.js and sinon.js. But the following test case fails. I am using a spy to track whether it is getting called or not. Can you please help me with this?

Thanks.

New Task Template

<script id='new_task_template' type='text/template'>
  <input type='text' id='new_task_name' name='new_task_name'></input>
  <button type='button' id='add_new_task' name='add_new_task'>Add Task</button>
</script>

NewTaskView

T.views.NewTaskView = Backbone.View.extend({
  tagName: 'section',
  id: 'new_task_section',
  template : _.template ( $("#new_task_template").html() ),
  initialize: function(){
    _.bindAll( this, 'render', 'addTask');
  },
  events:{
    "click #add_new_task" : "addTask"
  },
  render: function(){
    $(this.el).html( this.template() );
    return this;
  },
  addTask: function(event){
    console.log("addTask");
  }
});

Jasmine Test Case

describe("NewTaskView", function(){
  beforeEach( function(){    
    this.view = new T.views.NewTaskView();
    this.view.render();
  });

  it("should #add_new_task is clicked, it should trigger the addTask method", function(){
    var clickSpy = sinon.spy( this.view, 'addTask');
    $("#add_new_task").click();
    expect( clickSpy ).toHaveBeenCalled();
  });
});

Jasmine Output

NewTaskView
  runEvents
    runshould #add_new_task is clicked, it should trigger the addTask method
      Expected Function to have been called.

解决方案

The problem is you add your spy after backbone has already bound the click event directly to the addTask function (it does that during construction of the View). Therefore your spy will not get called.

Try attaching the spy to a prototype of the View before you construct it. Like this:

this.addTaskSpy = sinon.spy(T.views.NewViewTask.prototype, 'addTaskSpy');
this.view = new T.views.NewTaskView();

and then remember to remove it:

T.views.NewViewTask.prototype.addTaskSpy.restore()

这篇关于Backbone.js的单击事件的间谍是没有得到使用jasmine.js和sinon.js称为的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！