backbone.js haga clic en el evento espía no se llama usando jasmine.js y sinon.js

Question

Estoy tratando de probar un clic del botón usando backbone.js, jasmine.js y sinon.js. Pero el siguiente caso de prueba falla. Estoy usando un espía para rastrear si se llama o no. ¿Puedes ayudarme con esto?

Gracias.

tarea nueva plantilla

<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 caso de prueba

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 salida

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

Answer 1

events:{ 
    "click" : "addTask" 
}, 

significa que va a enlazar el evento click a this.el - elemento raíz de la opinión de que en su caso tiene un ID new_task_section. Necesitas vincularlo al #add_new_task, que es el botón de "agregar tarea", supongo. ¡Esto debería arreglarlo!

events:{ 
    "click #add_new_task" : "addTask" 
}, 

Actualización:

$ ("# add_new_task") no va a encontrar el elemento que la vista no se añade a la estructura del documento DOM. use this.view.$('#add_new_task') y debería funcionar ya que buscará el elemento en el fragmento separado almacenado en la vista.

Answer 2

Hay algunos problemas con su enfoque. Primero espiar en su clase que desea probar, con no es la forma en que una prueba de unidad debería funcionar porque prueba la lógica interna de su clase y no su comportamiento. En segundo lugar, y esa es la razón por la cual su prueba falla, no ha adjuntado sus puntos de vista al DOM. Entonces, puede agregar su el al DOM o disparar el evento click directamente al el: $('#add_new_task', this.view.el).click().

Btw. La forma de backbones de crear elementos y unir eventos hace que sea difícil escribir buenas pruebas unitarias porque te obligan a trabajar con DOM y jquery. Una mejor forma de escribir código comprobable sería pasar siempre todas las dependencias al constructor y no crear nuevas instancias en el código porque es difícil probar estos objetos. Entonces, en su caso, sería mucho más fácil inyectar el objeto el en el constructor como un objeto jquery y en los eventos de forma manual. Haciéndolo de esta manera puedes probar tu clase sin ninguna dependencia al DOM o jquery.

Así que en su caso el constructor se vería así:

initialize: function(){ 
    this.el.click(_.bind(this, 'addTask')); 
} 

Y su prueba:

var el = {click: function(){}}; 
spyOn(el, 'click'); 
new T.views.NewTaskView({el: el}); 
expect(el.click).toHaveBeenCalled(); //test the click event was bind 
//call the function that was bind to the click event, 
//which is the same as trigger the event on a real DOM object 
el.click.mostRecentCall.args[0]() 

Después de todo lo que tiene que decidir qué enfoque se ajuste a sus necesidades. Código más simple con ayudantes de backbones o código mejor comprobable con menos dependencias para jquery, DOM y backbone.

Answer 3

El problema es que agrega su espía después de que la red troncal ya ha vinculado el evento click directamente a la función addTask (lo hace durante la construcción de la Vista). Por lo tanto, tu espía no será llamado.

Intente conectar el espía a un prototipo de la Vista antes de lo construye. De esta manera:

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

y luego recordar para eliminarlo:

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