我如何使用Sinon存根$(window).width()？

Question

我在JS视图中有一个函数,如果窗口宽度小于1000,它会执行一些操作.我正在尝试使用Mocha,chai为此编写单元测试,并通过Phantom/Chrome/Chromium浏览器中的karma测试运行器运行测试.

我还使用sinon来保存方法并使其返回一些所需的值.现在有一个条件检查,如果窗口宽度小于1000所以我怎么能存根,我尝试下面的东西,

sinon.stub($(window).width());
$(window).width().returns(900);

但它没有用.有什么具体的方法我可以存根$(window).width()值？

Answer 1

sinon.stub() 用法:

第一:你没有sinon.stub()正确传递方法/功能.这是正确的方法:

sinon.stub(object, 'method');

哪个object对象的方法是您想要存根的,'method'是一个包含此方法名称的字符串.

另一种方法是简单地用存根覆盖当前函数.stub(),不带参数调用:

object.method = sinon.stub();

考虑到这一点,让我们继续您当前的代码.

当前代码:

sinon.stub($(window).width());

正如我上面所写 - 这是一个不正确的电话sinon.stub().

把它放在一边,你是从错误的角度接近它.你不能存根$(window).width()- $(window).width()不是一个功能,它是一个通话功能 -返回数(这里:在PX窗口的宽度).这是你实际上试图用存根替换的值 - 任意原语(数字),甚至不绑定到任何变量.

接下来尝试:

sinon.stub($(window), 'width');

现在,为什么这不起作用？

我们只是width在这个特定的 jQuery对象上存根方法- 但每次调用$(...)都会创建一个新的.这是结果:

var $window = $(window);
sinon.stub($window, 'width').returns(900);

$window.width(); // 900 - using .width() method stub
$(window).width(); // real window width - new jQuery object

(jsfiddle:http://jsfiddle.net/xqco8u77/)

解

短截线的.width()上方法prototype的jQuery对象-其方法/可用值的全局每个jQuery对象.

sinon.stub($.prototype, 'width').returns(900);

// "900"
$(window).width();

// restoring original function
$.prototype.width.restore();

// real window width
$(window).width();

关于jsfiddle的工作演示:http://jsfiddle.net/gjcguvzh/5/

(正如您所看到的,我.width()在使用存根之后还恢复了原始原型方法,以防您以后必须使用它.)