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

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

我们只是在这个特定的 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/ ）

解

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