javascript 如何使用 sinon.js 模拟/存根回调函数?

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/18242034/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-10-27 11:10:33  来源:igfitidea点击:

How to mock/stub callback function with sinon.js?

javascriptqunitsinon

提问by boli

I want to write unit tests with QUnit and Sinon.Js. I have an application, where the user can click on a button and a modal dialog appers to handle downloading some files. The user can close the dialog and it triggers a method to run to reset some variables. My test code:

我想用 QUnit 和 Sinon.Js 编写单元测试。我有一个应用程序,用户可以在其中单击一个按钮和一个模态对话框来处理下载一些文件。用户可以关闭对话框并触发一个方法运行以重置一些变量。我的测试代码:

$(function() {
    $.fn.copy_button = function(){};

    ln_download_view = new DownloadModalView();
    ln_download_view.modal = {'modal': function() {}};
    var download_modal_dialog = $('.download-modal');
    download_modal_dialog.modal = function(param){};
    var modal_mock = sinon.mock(ln_download_view.modal);
    var download_modal_dialog_mock = sinon.mock(download_modal_dialog);

    //Should be inserted, because ln_download_view.modal is mocked
    //The close button even handler
    $('#btn_close_modal').click(function(){
        download_modal_dialog.modal('hide');
    });

    //Dirty stuff to do after the window closes
    //Basicly the click triggers this event handler
    $('.download-modal').on('hide',function() {
        window.clearInterval(window.periodicalTimer);
    });

    $('div .option-container').click(function() {
        if(!$(this).hasClass("selected-option"))
        {
            $('div #option-presenting').toggleClass("selected-option");
            $('div #option-editing-and-presenting').toggleClass("selected-option");

            $('.image').toggle();
        }
    });

    module("views");
    test("Download modal dialog is displayed", function(){
        var modal_triggered = modal_mock.expects("modal").once();
        ln_download_view.handleDownloadClick();
        ok(modal_triggered.verify());
    });

    test("Download modal dialog is closed",function(){
        var modal_triggered = download_modal_dialog_mock.expects("modal");
        $('#btn_close_modal').trigger('click');
        ok(modal_triggered.verify());
    });
});

What I do not understand is, how can I test/mock/stub this piece of code:

我不明白的是,我如何测试/模拟/存根这段代码:

$('.download-modal').on('hide',function() {
    window.clearInterval(window.periodicalTimer);
});

I do not have the deep understanding yet.

我还没有深入的了解。

回答by Eugene Naydenov

You can't mock/stub an anonymous function. But you can make a refactoring and stub/mock the named callback.

您不能模拟/存根匿名函数。但是您可以进行重构并存根/模拟命名回调。

$('.download-modal').on('hide', onHide);

var onHide = function() {
    window.clearInterval(window.periodicalTimer);
};

// ...

sinon.stub(onHide);

回答by alukaiser

Here's my method for this:

这是我的方法:

In your before each, make a function that doesn't do anything:

在每个之前,创建一个不做任何事情的函数:

var doNothing = function(){};

Then in your test, spy on that:

然后在您的测试中,监视:

var spy = sinon.spy(this, 'doNothing');

Then call your method, passing in a callback that fires the doNothing method:

然后调用您的方法,传入触发 doNothing 方法的回调:

  var self = this;
  whatever.doSomethingAwesome(
  {
    finished: function(){
      self.doNothing();
    }
  });
  expect(spy.callCount).toEqual(1);