使用自己的控制器测试 Angular 指令答案

【问题标题】：Testing Angular Directives with their own controllers使用自己的控制器测试 Angular 指令
【发布时间】：2013-06-26 18:36:04
【问题描述】：

我正在尝试为 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？或者有没有更好的方法来构造我的代码以便可以访问它？

【问题讨论】：

标签： angularjs angularjs-directive

【解决方案1】：

在这种情况下，您最终访问控制器的方式是使用控制器从 HTML sn-ps 放置在其范围内的函数，该函数将形成您的测试输入。

注意：这里使用 jasmine spy 可能有点矫枉过正，我没有花时间查找正确的方法来匹配 $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();
    });
});

【讨论】：