用茉莉花测试backbone.js应用程序-如何测试视图上

Testing backbone.js application with jasmine - how to test model bindings on a view?(用茉莉花测试backbone.js应用程序-如何测试视图上的模型绑定?)
本文介绍了用茉莉花测试backbone.js应用程序-如何测试视图上的模型绑定?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

在尝试测试视图是否正确绑定到事件时,我遇到了一些有趣的困难.在主干中,我们通常在初始化方法中绑定到事件,使用类似于以下内容的内容:something.bind("change", this.render);.在我的测试中,我想确保设置了这个绑定,所以我做了以下事情:

I had some interesting tribulations in trying to test whether views were correctly bound to events.  In backbone, we typically bind to events in the initialize method, using something along the lines of: something.bind("change", this.render);.  In my test, I want to make sure that this binding is set up, so I did the following: 

this.myView = new MyView();
spyOn(this.myView, "render");;
this.legendView.groupData.trigger("change");
expect(this.legendView.render).toHaveBeenCalled();

但是,这行不通.因为绑定发生在 MyView 的初始化函数中,所以事件在那个时间绑定到了 myView 的渲染函数.因此,当您添加间谍时,它会包装渲染函数并将其设置回 myView.render 中的位置.但是第一次绑定创建的闭包仍然存在,我们完全被骗了.那么我们能做些什么呢?我所做的是将绑定调用移至单独的函数,例如:

But, that won't work.  Because the bind occurs in MyView's initialize function, the event get's bound to myView's render function AT THAT TIME.  So, when you add your spy, it wraps the render function and sets it back into place at myView.render.  But the closure created by the first bind still exists, and we are totally hozed.  So what can we do about it?  What I did, is move my bind call's to a seperate function, something like: 

myView = Backbone.View.extend({
initialize: function(){
    _.bindAll(this, "render");
    this.initialize_model_bindings();
},
initialize_model_bindings: function(){
    something.bind("change", this.render);
},
render: function(){ //... }
});

然后我的测试看起来像:

and my test then looks like:

this.myView = new MyView();
spyOn(this.myView, "render");
this.myView.initialize_model_bindings();
this.legendView.groupData.trigger("change");
expect(this.legendView.render).toHaveBeenCalled();

这可行,但我正在寻找更好的解决方案.谢谢

This works, but I'm looking for a better solution. Thanks

推荐答案

与其监视回调,不如尝试监视 something.bind.然后测试是否使用适当的参数调用了绑定.到目前为止,这对我有用.我正在使用 sinon.js 而不是 jasmine 的内置间谍.sinon.js 使测试传递给相同方法调用堆栈中的方法调用的参数变得更容易一些(例如,在视图初始化中绑定的一堆调用).所以我没有单独用茉莉花测试过这个想法,但相信它应该是可能的.

Instead of spying on the callback you might try spying on something.bind. Then test that bind was called w/ the appropriate arguments. This is working for me so far. I'm using sinon.js instead of jasmine's built-in spies. sinon.js makes it a bit easier to test for args passed to a method call in a stack of same method calls (eg a bunch of calls to bind in a view init). So I haven't tested this idea w/ jasmine alone but believe it should be possible.

spyOn(this.legendView.groupData, 'bind');
this.myView = new MyView();
expect(this.legendView.groupData.mostRecentCall.args).toEqual('change', this.myView.render); // example!! only works if testing a single call to bind or the last call in a series (ie mostRecentCall)

还有带有 sinon.js 的

And w/ sinon.js

sinon.spy(this.legendView.groupData, 'bind');
this.myView = new MyView();
expect(this.legendView.groupData.bind.calledWith('change', this.myView.render); // works w/ any number of calls to bind

这篇关于用茉莉花测试backbone.js应用程序-如何测试视图上的模型绑定?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除!

相关文档推荐

Update another component when Formik form changes(当Formik表单更改时更新另一个组件)
Formik validation isSubmitting / isValidating not getting set to true(Formik验证正在提交/isValiating未设置为True)
React Validation Max Range Using Formik(使用Formik的Reaction验证最大范围)
Validation using Yup to check string or number length(使用YUP检查字符串或数字长度的验证)
Updating initialValues prop on Formik Form does not update input value(更新Formik表单上的初始值属性不会更新输入值)
password validation with yup and formik(使用YUP和Formick进行密码验证)