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