帶有templateUrl和隔離範圍的角度測試指令

在angular.js上的新增功能，無法弄清楚如何使用templateUrl &隔離範圍編寫指令測試。帶有templateUrl和隔離範圍的角度測試指令

這裏是我的控制器

(function(){ 
angular.module('buttons') 
    .controller('buttonController', ['$scope', function($scope){ 

     //primary button 
     $scope.primaryButton = { name: 'Submit'}; 
})();

這是我的觀點的index.html &

<div class="layoutLeft"> 
     <p>Primary Button</p> 
     <primary-button info="primaryButton"></primary-button> 
    </div>

初級button.html

<button class="{{buttonInfo.class}}">{{buttonInfo.name}}</button>

這裏是我的指令

(function(){ 
    angular.module('buttons') 
     .directive('primaryButton', function() { 
      return { 
       restrict: 'EA', 
       scope: { 
        buttonInfo: '=info' 
       }, 
       templateUrl: 'scripts/local/views/primary-button.html' 
      } 
     }) 
    })();

這是我的測試

(function(){ 
    beforeEach(angular.mock.module('buttons')); 
describe('Buttons Directive Test', function(){ 

    var $compile, $scope, $httpBackend; 

    beforeEach(module('templates')); 

    beforeEach(inject(function(_$compile_, _$rootScope_) { 
     $compile = _$compile_; 
     $scope = _$rootScope_.$new(); 

     $scope.primaryButton = {name: 'Save'}; 

     elm = angular.element("<primary-button info='buttonInfo'></primary-button>"); 
     e = $compile(elm)($scope); 
     e.digest(); 
    })); 

    it('should do something', function(){ 
     expect(e.html()).toContain($scope.primaryButton); 
    }); 
});

}）（）;

我用的茉莉和業力進行測試，可以有人指導我在做什麼錯

來源

2014-12-29 Varun Sheth

難道我的解決方案解決你的問題？請告訴我。 –

編輯一些輕：這是一個plunkr證明非常接近你的代碼在做什麼。有多個問題與你在你的問題，我有固定的代碼：

http://plnkr.co/edit/QXprEUof2Ps0Vivg4L34?p=preview

在你測試你打電話e.digest（），因爲你不能消化的元素，這將無法正常工作。 ..你應該調用$ scope。$ digest來代替。
e.html（）將不包含該JSON blob。我將其解釋爲希望它包含名稱標籤...
info ='buttonInfo'將信息綁定到OUTERScope中的屬性buttonInfo，但您將其稱爲'primaryButton'。重命名$ scope.primaryButton至$ scope.buttonInfo
您使用的一些底線是沒有完全必要的，但是這不是什麼大不了的事，注射編譯時，rootscope
我用的不是加載它只是一個內聯模板plunkr，加載它沒有問題
因爲你的指令是一個元素，我添加了'替換'，它用一個直接的按鈕替換元素。考慮讓它成爲一個屬性。

我plunkr有傳球茉莉測試和按鈕的工作演示。讓我知道你是否需要更多的幫助。祝AngularJS好運。

（OLD ANSWER）

==============

您將需要使用像nghtml2js加載您的模板，使其可與模板緩存。

using nghtml2js

這是你的第一個問題。你的第二個問題是在編譯後通過在元素上調用isolateScope（）來完成隔離作用域。記錄調用elem的結果，你會發現你後面的屬性。

e.isolateScope()

來源

2014-12-30 01:54:48

我使用karma配置加載html文件並使用nghtml2js，我會嘗試使用isolateScope（） –

它工作嗎？這是讓你的隔離範圍出來的方法。 http://stackoverflow.com/questions/17371836/how-to-unit-test-isolated-scope-directive-in-angularjs –

嗨，彼得沒有它沒有工作，我仍然在嘗試 –

不遵循爲什麼上述答案被標記爲接受。該問題詢問如何使用templateUrl完成，而@PeterAshwell的答案提供了一個解決方案，使用內聯HTML ，這在使用templateUrl時不起作用。

要使用templateUrl訪問隔離範圍，必須將isolateScope調用包裝在$ timeout中以允許$ http調用（由templateUrl創建）完成。

代碼看起來是這樣的：

element = $compile("<myHTML />")($scope) 

$timeout(function() { 
    expect(element.isolateScope().myProp).toEqual(12); 

}), 0 , false); 

$timeout.flush();

來源

2015-05-22 21:10:44 user1821052

很好的答案！我也認爲增加一個$ apply（）是一個好主意，以確保任何未完成的承諾得到解決。 – TheChrisONeil

帶有templateUrl和隔離範圍的角度測試指令

回答

相關問題