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

AngularJS：Stubbing JQlite方法

2 个答案: