首页
学习
活动
专区
圈层
工具
发布
社区首页 >问答首页 >Sinon.JS -如何从存根中获取参数?

Sinon.JS -如何从存根中获取参数?
EN

Stack Overflow用户
提问于 2017-02-23 04:35:03
回答 1查看 21.6K关注 0票数 27

我正在尝试使用Sinon来测试一个JS组件,它看起来有点像这样……

代码语言:javascript
复制
import Bootbox from "../helpers/bootbox";
import Guard from "../helpers/guard";
import UrlHelper from "../helpers/url-helper";

export default class DeleteButton {

    /**
     * Creates an instance of DeleteButton.
     * 
     * @param {object} element The DOM element to make into a delete button.
     * 
     * @memberOf DeleteButton
     */
    constructor(element) {
        Guard.throwIf(element, "element");

        this.deleteUri = element.getAttribute("data-delete-uri") || UrlHelper.current.url().split('?')[0];        
        this.title = element.getAttribute("data-title") || `Delete the item?`;
        this.cancelText = element.getAttribute("data-cancel") || `Cancel`;
        this.confirmText = element.getAttribute("data-confirm") || `Remove`;
        this.message = element.getAttribute("data-message") || `Do you want to delete the item? This cannot be undone.`;
        this.successUri = element.getAttribute("data-success-uri");
        this.errorMessage = element.getAttribute("data-error-message") || `Unable to complete operation.`;
    }

    /**
     * Shows failure of deletion.
     * 
     * @memberOf DeleteButton
     */
    showFailed() {
        Bootbox.alert({
            message: this.errorMessage,
            size: `small`,
            backdrop: true
        });
    }
}

测试看起来是这样的。

代码语言:javascript
复制
it("Can show a fail message", function() {
    $("body").append(`<a class="js-delete-button" data-id="123" data-delete-uri="/delete/123">Delete</a>`);
    let objUt = new DeleteButton($(".js-delete-button").get()[0]);
    let bootboxAlertStub = Sinon.stub(Bootbox, 'alert');
    objUt.showFailed();
    let args = bootboxAlertStub.args;
    expect(args.message).to.equal(objUt.errorMessage);
});

但是我不能通过let bootboxAlertStub = Sinon.stub(Bootbox, 'alert');行,因为我从Karma得到一个错误,说‘应该包装对象的属性’。我也尝试过使用this.stub将其包装在Sinon.test包装器中,但错误更加迟钝。

我已经浏览了Sinon.JS文档并在网上搜索,但我被卡住了。代码运行得很好。

我看过这篇文章,它和Stubbing a class method with Sinon.js很相似,但并不完全一样。

在查看实际的底层bootbox JavaScript文件时,我实际上正在尝试存根一个看起来有点像这样的方法(缩减)……

代码语言:javascript
复制
  exports.alert = function() {
    // do something
  };

然后,JS文件在末尾返回导出...

代码语言:javascript
复制
  return exports;

看看一些Github的帖子,似乎不可能存根这些特定的调用,因为底层调用是实用函数而不是对象函数。

我已经(以一种可怕的方式)通过更改Bootbox包装类来缓解这个问题,如下所示……

代码语言:javascript
复制
export default {

    /**
     * Generates an alert box.
     * 
     * @param {any} options
     */
    alert: function(options) {
        window.bootbox.alert(options);
    },

    /**
     * Generates a confirmation dialog.
     * 
     * @param {any} options
     */
    confirm: function(options) {
        window.bootbox.confirm(options);
    }
}

这解决了一个问题,同时又引入了另一个问题。虽然我现在可以存根Bootbox,但当存根时,我无法获得参数...

(来自测试)

代码语言:javascript
复制
let args = bootboxAlertStub.args;

这很令人沮丧--参数是作为一个复杂的参数传递的,所以'calledWith‘断言并不能解决这个问题。

有什么方法可以让我得到存根的参数吗?

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-02-23 05:01:35

感谢Matt Mokary (如果你想提交一个答案,我会给你这个答案的)

我编辑了我的测试如下...

代码语言:javascript
复制
it("Can show a fail message", Sinon.test(function() {        
    $("body").append(`<a class="js-delete-button" data-id="123" data-delete-uri="/delete/123">Delete</a>`);
    let objUt = new DeleteButton($(".js-delete-button").get()[0]);
    let bootboxAlertStub = this.stub(Bootbox, 'alert');
    objUt.showFailed();
    Sinon.assert.called(bootboxAlertStub);
    let options = bootboxAlertStub.getCall(0).args[0];
    expect(options.message).to.equal(objUt.errorMessage);
}));

按照马特的建议,修复它的方法是使用...

代码语言:javascript
复制
bootboxAlertStub.getCall(0);

略微调整

代码语言:javascript
复制
bootboxAlertStub.getCall(0).args[0];

来获取第一个参数(它是options对象)。

顺便说一句,当我通过Phantom和Karma运行测试时,发现我可以使用console.log查看正在发生的事情,这既是一个启示,也是一个令人惊讶的时刻。

票数 33
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/42401724

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档