1

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

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

4

2 回答 2

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);
于 2013-11-03T20:19:26.787 回答
1

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

spyOn($element,'css');
#call your code here
expect($element.css).toHaveBeenCalledWith('width','99px');
于 2013-11-04T14:22:24.820 回答