Тестирование угловых директив с их собственными контроллерами

Question

Я пытаюсь написать модульные тесты для директивы AngularJS, которая использует отдельный контроллер с той, что находится на странице. Однако я не могу найти способ доступа к этому контроллеру из моих тестов.

Вот моя директива:

'use strict'; 
angular.module('myapp.directives') 
    .directive('searchButton', function() { 
    function SearchButtonCtrl ($scope, $location) { 
     $scope.search = function() { 
     $location.path('/search'); 
     $location.search(q, $scope.query.w); 
     }; 
    } 
    return { 
     template: '<input type="text" ng-model="query.q">', 
     controller: SearchButtonCtrl, 
     restrict: 'E' 
    }; 
    }); 

Можно ли получить доступ к SearchButtonCtrl? Или есть лучший способ структурировать мой код, чтобы его можно было получить?

Answer 1

Способ доступа к контроллеру в этом случае заключается в использовании функции, которую контроллер размещает в своей области, из фрагментов HTML, которые будут формировать ваши тестовые входы.

Примечание: использование шпионов жасмина может быть чрезмерным здесь, и я не нашел времени, чтобы найти правильные методы для сопоставления аргументов с параметрами $ location.path() и/или $ location.search (), но этого должно быть достаточно, чтобы помочь вам найти крючок в место для наблюдения, которое вы ищете.

'use strict'; 

describe('Directive: Search', function() { 

    var element, $location; 

    // Load your directive module with $location replaced by a test mock. 
    beforeEach(function() { 
     module('myapp.directives'), function() { 
      $provide.decorator('$location', function($delegate) { 
       $delegate.path = jasmine.createSpy(); 
       $delegate.search = jasmine.createSpy(); 

       return $delegate; 
      }); 
     }); 

     inject(function(_$location_) { 
      $location = _$location_; 
     }); 
    }); 

    it('changes the path', function() { 
     // Arrange to trigger your directive code 
     element = $element.html('<span ng-init="query.q = 'xyz'"><search><span ng-init="search()"></span></search></span>'); 

     // Express your directive's intended behavior 
     expect($location.path).toHaveBeenCalled(); 
    }); 

    it('changes a search param', function() { 
     // Arrange to trigger your directive code 
     element = $element.html('<span ng-init="query.q = 'xyz'"><search><span ng-init="search()"></span></search></span>'); 

     // Express your directive's intended behavior 
     expect($location.search).toHaveBeenCalled(); 
    }); 
});