AngularJSのコントローラー・ディレクティブのテスト方法

Question

多くの研究の後、私はコントローラー内の関数にアクセスすることができないため、Angularディレクティブを正しくテストできませんでした。 $ダイジェスト（）関数の後、我々はへのアクセス権を持つことができ、私が読んだ多くの文書によると

describe('Invoice', function() { 
    var $scope = {}, controller, $httpBackend, $controller, form, element; 
    beforeEach(module('app')); 

    describe('Directives', function() { 
     beforeEach(inject(function($compile, $rootScope, _$httpBackend_, _$controller_) { 
      $httpBackend = _$httpBackend_; 
      $httpBackend.expect('GET', 'data/translation/?lang=pt').respond(200, []); 
      $httpBackend.when('GET', 'partials/invoice/undefined.html').respond(200, []); 
      $httpBackend.when('GET', 'partials/templates/loading.html').respond(200, []); 
      $httpBackend.when('GET', 'partials/invoice/invoiceContent.html').respond(200, []); 
      $scope = $rootScope.$new(); 
      $controller = _$controller_; 

      form = $compile("<accordion-item temp='invoiceContent'></accordion-item>")($scope); 
      $scope.$digest(); 

     })); 
     it('should submitButtonDisabled', inject(function($injector) { 
      var listSelectionService = $injector.get("listSelectionService"); 
      $scope.selectItem(); 
      expect(listSelectionService.selectedItem).toBe(-1); 
     })); 
    }); 
}); 

：

angular.module('app'). 
    directive("accordionItem", function() { 
     return{ 
      restrict: 'E', 
      replace: true, 
      templateUrl: function (elem, attr) { 
       return 'partials/invoice/' + attr.temp + '.html'; 
      }, 
      scope: { 
       invoice: '=', 
       temp: '@' 
      }, 
      controller: function ($scope, listSelectionService, $state) { 

      $scope.selectItem = function() { 
       if ($scope.isOpen()) { 
        listSelectionService.selectedItem = -1; 
       } 
       else { 
        listSelectionService.selectedItem = $scope.invoice; 
       } 
      }; 
      $scope.isOpen = function() { 
       return listSelectionService.selectedItem === $scope.invoice; 
      }; 
      $scope.showFaturasSubscription = function() { 
       $state.go('app.ultimasFaturasSubscription', {subscriptionId: $scope.invoice.subscriptionId}); 
      }; 
     } 
    }; 
}); 

そして、私のテスト：ここ

は、ディレクティブコードです指令のコントローラ。これは私に次のエラーが表示されるので、これは起こっていません。

TypeError: $scope.selectItem is not a function 
at null.<anonymous> (http://localhost:8234/spec/invoice/invoiceDirectivesSpec.js:27:20) 
at Object.invoke (http://localhost:8234/src/main/webapp/vendor/angular/angular.js:4452:17) 
at workFn (http://localhost:8234/src/main/webapp/vendor/angular-mocks/angular-mocks.js:2420:20) 
at jasmine.Block.execute (http://localhost:8234/?:1164:19) 
at jasmine.Queue.next_ (http://localhost:8234/?:2196:33) 
at jasmine.Queue.start (http://localhost:8234/?:2149:10) 
at jasmine.Spec.execute (http://localhost:8234/?:2476:16) 
at jasmine.Queue.next_ (http://localhost:8234/?:2196:33) 
at jasmine.Queue.start (http://localhost:8234/?:2149:10) 
at jasmine.Suite.execute (http://localhost:8234/?:2621:16) 
Error: Declaration Location 
    at window.inject.angular.mock.inject (http://localhost:8234/src/main/webapp/vendor/angular-mocks/angular-mocks.js:2391:25) 
    at null.<anonymous> (http://localhost:8234/spec/invoice/invoiceDirectivesSpec.js:25:43) 
    at jasmine.Env.describe (http://localhost:8234/?:919:23) 
    at describe (http://localhost:8234/?:703:29) 
    at null.<anonymous> (http://localhost:8234/spec/invoice/invoiceDirectivesSpec.js:10:5) 
    at jasmine.Env.describe (http://localhost:8234/?:919:23) 
    at describe (http://localhost:8234/?:703:29) 
    at http://localhost:8234/spec/invoice/invoiceDirectivesSpec.js:5:1 

本当にありがとうございます。

Answer 1

通常、私は通常のコントローラーと同じ方法で指示コントローラーをテストします。

ディレクティブでは、ディレクティブの一部としてコントローラをインラインで定義しています。

angular.module('app').controller('DirectiveController', function($scope) { ... }); 

リファレンスディレクティブの設定のコントローラ：

はモジュール上のコントローラを登録します。あなたはビューで使用されているコントローラの場合と同様に代わり、それを定義します

controller: 'DirectiveController' 

これは、実際の指令テストを置き換えるか、補完するものです。ディレクティブの外部でコントローラをテストするほうがはるかに簡単です。ディレクティブのインスタンス化やDOM要素の処理について心配する必要はありません。多くの場合、ディレクティブのテンプレートが十分に単純であれば、私はディレクティブテストを気にせず、コントローラをテストするだけです。簡単な例：

var controller, scope; 

beforeEach(inject(function($rootScope, $controller) { 
    scope = $rootScope.$new(); 
    controller = $controller('DirectiveController', {$scope: scope}); 
})); 

describe('controller', function() { 
    it('exists', function() { 
    expect(controller).toBeDefined(); 
    expect(controller).not.toBeNull(); 
    }); 
});