Директива по угловому тестированию с шаблономUrl и область изоляции

Question

Новое на angular.js и не может понять, как написать тест для директивы с шаблономUrl & выделить область.

Вот мой контроллер

(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); 
    }); 
}); 

})();

Я использую жасмин и карму для тестирования, кто-то может направлять свет на то, что я делаю неправильно

Answer 1

Edit: Вот plunkr демонстрирует довольно близко к тому, что делает ваш код. Есть несколько вопросов, с кодом вы имеете в вашем вопросе, что я фиксированный:

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

1. В тесте вы называете e.digest(), который не будет работать, потому что вы не можете переварить элемент. .. вы должны вызывать $ scope. $ digest вместо этого.
2. e.html() не будет содержать этот кусок JSON. Я интерпретировал это как хочу, чтобы он содержал метку имени ...
3. info = 'buttonInfo' связывает информацию с атрибутом buttonInfo в аутсорсе, но вы назвали его primaryButton. Переименовать $ scope.primaryButton до $ scope.buttonInfo
4. Вы использовали некоторые подчеркивания, которые не были полностью необходимо, но это не имеет большого значения, при закачке компиляции, rootscope
5. Я использовал шаблон инлайн вместо загрузки его только для plunkr, нет ничего плохого в загрузке, хотя
6. Поскольку ваша директива - это элемент, я добавил 'replace', который заменяет элемент прямой кнопкой. Подумайте об этом вместо этого.

Мой plunkr имеет испытание прохождения жасмина и рабочая демонстрация кнопки. Дайте мне знать, если вам понадобится дополнительная помощь. Удачи с AngularJS.

(OLD ОТВЕТ)

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

Вам нужно будет использовать что-то вроде nghtml2js, чтобы загрузить свои шаблоны и сделать их доступными с кэшем шаблона.

using nghtml2js

Это ваш первый вопрос.Вторая проблема заключается в том, что выделение области изоляции выполняется путем вызова функции isolateScope() в элементе после его компиляции. Запишите результат вызова этого элемента на элементе, и вы найдете атрибуты, которые вы используете.

e.isolateScope() 

Answer 2

Непонятно, почему вышеуказанный ответ отмечен как признанный. Вопрос задает вопрос о том, как выполнить с помощью templateUrl, а ответ @ PeterAshwell дает решение с встроенным HTML , которое не работает при использовании шаблонаUrl.

Чтобы получить доступ к области изоляции при использовании шаблона, вы должны завернуть вызов isolateScope в $ timeout, чтобы завершить вызов $ http (сделанный templateUrl).

код будет выглядеть примерно так:

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

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

}), 0 , false); 

$timeout.flush();