view - SpyOn un método de vista de columna vertebral utilizando jazmín

backbone.js jasmine

Question

Tengo una vista de red troncal y quiero crear una prueba para confirmar que un evento de clic en algún elemento llamará a la función vinculada a ese elemento. Mi punto de vista es:

PromptView = Backbone.View.extend({
        id:"promptPage",
        attributes:{
            "data-role":"page",
            "data-theme":"a"
        },
        events:{
            "click #btnYes":    "answerYes",
            "tap #btnYes":      "answerYes"
        },
        render: function(){
            $(this.el).html(_.template($(''#promptPage-template'').html(), this.model.toJSON()));

            return this;
        },
        answerYes: function(){
            alert(''yes'');
        }
    });

Mi especificación es:

beforeEach(function() {
            model = new PromptModel;
            view = new PromptView({model:model});
            loadFixtures(''promptPage.tmpl'');
        });

 it("should be able to answer a question with yes", function() {
                var button = $("#btnYes", view.render().el);
                expect(button.length).toBe(1);

                spyOn(view, ''answerYes'');

                button.click();
                expect(view.answerYes).toHaveBeenCalled();

            });

Sin embargo, la definición de vista anterior crea el método answerYes en el prototipo de prototipo, pero el espía crea una función en la instancia real en la vista, por lo que termino con una vista.answerYes () que es el espía y la vista .__ proto __. AnswerYes, que es el que realmente quiero espiar.

¿Cómo puedo crear un espía para que anule el método de respuesta Sí de la definición de vista?

Answer 1

En general, me gusta suponer que el código del marco ya hace lo que debería y solo prueba mi uso, por lo que me parece aceptable tener una prueba que verifique el hash de eventos. Si me encuentro duplicando la funcionalidad de la red troncal para probar mis cosas (como delegar eventos), entonces tal vez esté un paso más cerca de las pruebas de integración de lo que realmente necesito. También hago un uso intensivo del prototipo para ser una dama súper-aislada en mis pruebas de unidad. Por supuesto, todavía es importante tener una capa de integración que haga todo ese ejercicio, pero me parece que el circuito de retroalimentación es demasiado largo para la fase de prueba de manejo.

Answer 2

Esto crea un espía en el método answerYes del PromptView :

spyOn(PromtView.prototype, ''answerYes'');

Answer 3

Hola tuve hoy el mismo problema. Y acabo de encontrar la solución, después de crear el método espiado (respuestas Sí), debe actualizar los eventos de la vista para llamar a ese nuevo método espiado;):

[...] spyOn(view, ''answerYes''); view.delegateEvents(); button.click(); expect(view.answerYes).toHaveBeenCalled(); [...]

Más información sobre eventos delegados.

¡Que te diviertas!

Answer 4

Si tiene problemas para usar SpyOn, podría considerar crear un espía. Así que algo como:

var eventSpy;
eventSpy = jasmine.createSpy(''eventSpy'');
view.$el.on(''myCustom:event'', eventSpy);

Answer 5

TL; DR: Espía en el método de instancia, no en el prototipo.

Creo que necesitas configurar tu prueba de manera diferente. Hay demasiadas preocupaciones y demasiadas expectativas en el bloque it , y también está contaminando el espacio de nombres global, lo que puede causar problemas con las pruebas.

beforeEach(function() {
  loadFixtures(''promptPage.tmpl'');

  var model = new PromptModel();
  this.view = new PromptView({model:model});
  this.view.render();

  this.button = this.view.$("#btnYes");
});

it("should render the button", function(){
  expect(this.button.length).toBe(1);
});

it("should be able to answer a question with yes", function() {
  spyOn(this.view, ''answerYes'');

  this.button.click();
  expect(this.view.answerYes).toHaveBeenCalled();
});

No necesita estrictamente la expectativa sobre la longitud del botón. Si el botón no tiene longitud (no se encuentra), obtendrá otras fallas. Pero es posible que desee que esté allí para que sea más fácil descubrir que la vista no se procesó correctamente.

También deberías estar espiando en la instancia de view , como lo has estado haciendo. La definición de PromptView agrega un método de respuesta Sí al prototipo, sí, pero el que desea espiar es la instancia de vista, no el prototipo.

Si espías en el método del prototipo, entonces, cada vez que intentes utilizar esta vista en tus pruebas, el método de answerYes sí será el espía, no el método real. Esto puede sonar bien, pero causará problemas ya que no tendrá acceso a datos de espía válidos cuando llame a este método varias veces. Simplemente acumulará todas las llamadas en ese espía. Si intentas espiar el método del prototipo dos veces, puedes terminar con un espía de un espía, lo que sería una cosa extraña y podría causar problemas.