我如何使用Sinon存根$（window）.width（）？

Question

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

我还使用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');

现在，为什么这个无效？？

我们只在此特定 jQuery对象上隐藏width方法 - 但每次调用$(...)都会创建一个新方法。结果如下：

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()方法存储在jQuery对象的prototype上 - 其方法/值对于每个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()原型方法，以防您以后必须使用它。）