單元測試AngularJS指令與隔離範圍 - 如何獲得綁定輸出？

我真的需要關於使用隔離範圍測試AngularJS指令的建議和指導。單元測試AngularJS指令與隔離範圍 - 如何獲得綁定輸出？

說我有以下指令（工作）：

angular.module('myApp') 

    .directive('pageNav', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       title: '@' 
      }, 
      transclude: true, 
      templateUrl: 'pageNav.html', 
      link: function(scope, element, attrs) { 
       if (attrs.pageNav == 'translucent') { 
        element.find('nav').addClass('newClass'); 
       } 
      } 
     }; 
    }) 
;

這是模板URL代碼：

<nav class="pageNav"> 
    <div class="content"> 
     <h1 ng-if="title">{{ title }}</h1> 

     <div class="contentRight" ng-transclude></div> 
    </div> 
</nav>

現在我有以下的測試現在

describe('Page Nav Directive', function() { 

    var $scope, 
     element; 

    beforeEach(module('myApp')); 
    beforeEach(module('pageNav.html')); 

    beforeEach(inject(function($compile, $rootScope) { 
     $scope = $rootScope; 
     $scope.title = "hey hey, my my"; 
     element = angular.element('<div page-nav></div>'); 
     // element = angular.element('<div page-nav title="hey hey, my my"></div>'); 
     $compile(element)($scope); 

     $scope.$digest(); 
    })); 

    it('should render the directive', function() { 
     // this test will fail if I un-comment the element above 
     expect(element.find('div').eq(1).attr('class')).toBe('contentRight'); 
    }); 

    it('should render a title', function() { 
     // this test will pass if I un-comment the element above 
     expect(element.find('h1').eq(0).text()).toBe('hey hey, my my'); 
    }); 

}) 

;

我不明白爲什麼第二個測試會失敗，即使我已經設置了$scope.title（出於某種原因，未呈現綁定{{ title }}）。現在，如果我將$scope.title放在元素上作爲屬性，第二個測試將在渲染過程中通過，但第一個測試失敗？使用我的時候我甚至改變了第一次測試

expect(element.scope().find('div').eq(1).attr('class')).toBe('contentRight');

把$scope.title的元素作爲屬性然而，這太失敗。

我發現測試AngularJS指令與孤立範圍很少或沒有好的文檔，我拉我的頭髮。任何指導，信息或對我遇到的問題的解釋都將非常感激。

來源

2014-01-07 Mike Sav

你可以爲此創建一個jsffidle。它會幫助我們更快地幫你 – dcodesmith

這是一個原始的小提琴... http：// jsfiddle。淨/ itakesmack/ecfpz/ –

你檢查的小提琴作品？ – dcodesmith

問題1：設置$scope.title（出於某種原因，結合{{ title }}不渲染）

當然，因爲你使用title: '@'，@意味着你用靜態字符串綁定。

問題2：

您使用templateUrl，瀏覽器啓動一個Ajax請求加載模板，它表示該指令的模板在當前功能尚未加載 ，必須等待ajax請求完成=>結果是不可預測的。

由於此DEMO顯示，如果我立即在同一個函數中檢查編譯的html，我看到它沒有編譯。爲了向您表明templateUrl是正確的，將被加載後，我加入使用console.log與對象引用一個更DEMO來證明這一點

如果我使用內聯template，如本DEMO，模板是取代（但未編譯）。

問題3：

角JS編譯功能在目前的功能沒有完成，您可能需要使用$超時安排其下一個週期。 DEMO

來源

2014-01-07 14:01:21

非常感謝，我可以問一下，如果我使用了標題：'='或標題：'＆' - 我可以把這是一個單獨的問題 –

@Mike Sav：檢查我的問題編號爲3的更新。如果你需要將它與你的作用域的屬性綁定，你應該使用'title：'='' –

感謝您的幫助，我還有其他使用「=」的測試也沒有綁定，這就是我問的原因。 –

單元測試AngularJS指令與隔離範圍 - 如何獲得綁定輸出？

回答

相關問題