unit-testing - AngularJS：存根 JQlite 方法

Question

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

...
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 实例测试。

Answer 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);

Answer 2

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

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