clientHeightを使用するディレクティブをユニットテストする

Question

動的高さを持つ要素のclientHeightを監視し、スコープ変数をその値に設定する指示がありますが、ユニットテストの方法を決めることはできません。私が単体テストで行ったことはすべて、clientHeightは常に0を返します。私はここで同様の問題について読んだ多くの異なるソリューションを試しましたが、どれもうまくいきません。ここ

ディレクティブである：

return { 
    link: function (scope, element, attrs) { 
    scope.$watch(function() { return element[0].clientHeight; }, 
     function(newValue, oldValue) { 
     if (newValue !== oldValue) { 
      scope.$parent.headerHeight = newValue; 
     } 
     }, true); 
    } 
}; 

Answer 1

その寸法は、試験の終了時に測定し、取り壊される前に取り外さDOM要素の寸法は0要素がDOMに追加されなければならないれる。

効率（E2Eテストではなく、ユニットテストのドメインである）DOM匿名時計機能から離れて、それをテストする

element = $compile('<directive>')(scope); 
angular.element(document.body).append(element); 
scope.$digest(); 
... 
element.remove(); 

スコープ

scope._getHeight = function() { return element[0].clientHeight; }; 
scope.$watch('_getHeight()', ...); 

0に露出されなければなりません

、それがテストされるディレクティブの論理ではなく、ブラウザのレンダリングエンジンであるので、嘲笑：

element = $compile('<directive>')(scope); 
spyOn(scope, '_getHeight').and.returnValue(100); 
scope.$digest(); 
...