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

因爲$編譯服務並沒有真正增加的文檔元素，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');