AngularJS：存根 JQlite 方法答案

【问题标题】：AngularJS : Stubbing JQlite methodsAngularJS：存根 JQlite 方法
【发布时间】：2013-11-13 12:35:29
【问题描述】：

我想在我的指令中对一些逻辑进行单元测试：

...
link: function ($scope, $element) {
   var rightMargin = 3;
   var w = $element.find('span')[0].scrollWidth;
   if (w > 100) {
      $element.css('width', (w + rightMargin) + 'px');
   }
...

因为 $compile 服务并没有真正在文档上添加元素，scrollWidth 总是返回 0。所以我不知道如何存根 $element.find 调用的返回值，因为在我的单元测试中无法访问 $element 实例。

【问题讨论】：

标签： unit-testing angularjs directive

【解决方案1】：

尝试直接在正文中设置页面的 HTML

使用innerHTML：

angular.element(document.body).html('<div class="my-elm" my-directive></div>');
var elm = angular.element(document.body.querySelector('.my-elm'));
$compile(elm)($rootScope);

或者使用追加：

var elm = angular.element('<div class="my-elm" my-directive></div>');
angular.element(document.body).append(elm);
$compile(elm)($rootScope);

【讨论】：

【解决方案2】：

如果这是一个单元测试，那么您不应该测试外部依赖项，只要您的逻辑是准确的。我会把它存起来。

spyOn($element,'css');
#call your code here
expect($element.css).toHaveBeenCalledWith('width','99px');

【讨论】：

直接从元素监视方法似乎不起作用。我从 sinon 那里得到一个错误，说“无法调用未定义的恢复”。