如何断言使用茉莉花点击事件调用间谍?

How to assert a spy is invoked with event on click using jasmine?(如何断言使用茉莉花点击事件调用间谍?)
本文介绍了如何断言使用茉莉花点击事件调用间谍?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我正在编写一个简单的点击处理程序,需要传入事件(像这样)

I'm writing a simple click handler and need the event passed in (like so)

Thing = function($){

    var MyObject = function(opts){
        this.opts = opts;
    };

    MyObject.prototype.createSomething = function(){
        var that = this;
        $('#some_dom_element').live('click', function(e) {
            that.doStuff(e);
        });
    };

    MyObject.prototype.doStuff = function(e) {
        //do some javascript stuff ...
        e.preventDefault();
    };

    return MyObject;

}(jQuery);

目前在我的 jasmine 规范中,我有一些东西可以监视我期望被调用的函数(但是因为它是用 e 调用的——不是没有 args——我的断言失败了)

Currently in my jasmine spec I've got something to spy on the function I expect gets invoked (but since it's called with e -not without args- my assertion is failing)

    it ("live click handler added to the dom element", function(){
        var doSpy = spyOn(sut, 'doStuff');
        sut.createSomething();
        $("#some_dom_element").trigger('click');
        expect(doSpy).toHaveBeenCalledWith();
    });

如何更正此toHaveBeenCalledWith"以按预期工作?

How can I correct this "toHaveBeenCalledWith" to work as I expect?

更新

我无法按原样获得公认的答案,但我可以稍微改变它,以下是我的 100% 工作示例

I couldn't get the accepted answer to work as is but I was able to alter it just a little and the below is my 100% working example

    it ("should prevent default on click", function(){
        var event = {
            type: 'click',
            preventDefault: function () {}
        };
        var preventDefaultSpy = spyOn(event, 'preventDefault');
        sut.createSomething();
        $("#some_dom_element").trigger(event);
        expect(preventDefaultSpy).toHaveBeenCalledWith();
    });

推荐答案

你必须触发你自己的事件,为 stopPropagation 方法传递一个间谍,因为你想测试事件是否被停止.

You have to trigger your own event passing a spy for the stopPropagation method, cause you wanna test if the event was stopped.

var event = {
    type: 'click',
    stopPropagation: function(){}
}
var spy = spyOn(event, 'stopPropagation');
$('#some_dom_element').trigger(event);
expect(spy).toHaveBeenCalled();

注意:当您监视要测试的对象时,会产生代码异味,因为您开始测试类的内部行为.把你的功能想象成一个黑盒子,只测试你放入和取出的东西.在您的情况下,重命名函数会破坏测试,而代码仍然有效.

Note: there is code smell when you spy on the object you want to test, because you start to test the inner behavior of your class. Think about your function as a black box and test only the things you put in and get out. In your case, renaming the function in will break the test, while the code is still valid.

这篇关于如何断言使用茉莉花点击事件调用间谍?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持编程学习网!

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

相关文档推荐

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进行密码验证)