我正在尝试使用Sinon来测试看起来有点像这样的JS组件......
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
});
}
}
测试看起来像这样......
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那里得到一个错误,说&#39;应该包装对象的属性&#39;。我已经尝试将它包装在Sinon.test包装器中并使用this.stub,但错误更加明显。
我已经通过Sinon.JS文档并在线搜索但我被卡住了。代码工作正常。
我看过这个类似的帖子 - Stubbing a class method with Sinon.js,但它并不完全相同。
查看实际的基础bootbox JavaScript文件,我有效地尝试存根看起来有点像这样的方法(缩减)......
exports.alert = function() {
// do something
};
JS文件然后返回导出...
return exports;
查看一些Github帖子似乎可能无法存根这些特定的调用,因为底层调用是实用函数而不是对象函数。
我通过更改我的Bootbox包装类来缓解这种情况(以一种可怕的方式),如下所示......
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,但当存根时我无法获得参数....
(来自测试)
let args = bootboxAlertStub.args;
这令人沮丧 - 这些参数作为一个复杂的参数传递,因此被称为&#39;断言不会削减它。
有什么方法可以获得存根的参数吗?
答案 0 :(得分:9)
感谢Matt Mokary(如果你想提交答案,我会给你这个答题)
我按如下方式编辑了我的测试...
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);
}));
正如马特建议的那样,解决它的问题是......
bootboxAlertStub.getCall(0);
略微调整
bootboxAlertStub.getCall(0).args[0];
获取第一个参数(这是选项对象)。
顺便说一句,发现我可以使用console.log查看当我通过Phantom和Karma进行测试时发生的事情既是一个启示,也是一个令人头疼的时刻。