ユニットをAngularJSでコントローラを定義するユニットをテストする

Question

私はKarmaとJasmineを使っていくつかのことを行うディレクティブをテストしようとしています。まず、templateUrlを使用し、次にコントローラーを定義することです。これは正しい用語ではないかもしれませんが、その宣言にコントローラを作成します。 Angularアプリケーションは、各ユニットが独自のモジュールに含まれるように設定されています。たとえば、すべてのディレクティブはapp.directiveモジュールに含まれ、すべてのコントローラはapp.controllerに含まれ、すべてのサービスはapp.serviceなどに含まれます。

さらに複雑になるため、このディレクティブ内で定義されているコントローラには単一の依存関係であり、$スコープ上に値を設定するための$ http要求を行う関数が含まれています。私は$ http呼び出しをシミュレートするために$ httpBackend mockを使ってこの依存関係を模擬し、この関数の呼び出しに適切なオブジェクトを返すことができることを知っています。私が作った他の単体テストでこれを何回もやったことがあり、このコンセプトをかなりよく理解しています。

以下のコードはCoffeeScriptで書かれています。ここで

私のディレクティブです：

angular.module('app.directive') 
     .directive 'exampleDirective', [() -> 
     restrict: 'A' 
     templateUrl: 'partials/view.html' 
     scope: true 
     controller: ['$scope', 'Service', ($scope, Service) -> 
      $scope.model = {} 
      $scope.model.value_one = 1 

      # Call the dependency 
      Service.getValue() 
      .success (data) -> 
       $scope.model.value_two = data 
      .error -> 
       $scope.model.value_two = 0 
     ] 
     ] 

ここで依存関係サービスさ：

angular.module("app.service") 
     .factory 'Service', ['$http', ($http) -> 

     getValue:() -> 
     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 

ここでは、ビューされています

<div> 
     {{model.value_one}} {{model.value_two}} 
    </div> 

これを単純化しました。私の目標は、これをワイヤリングする方法を理解することだけであり、そこから取り除くことができます。このように構造化している理由は、最初にこれを作成しなかったからです。私は既存のプロジェクトのテストを書くことに取り組んでおり、他の方法でそれを設定する能力はありません。私はテストを書く試みをしましたが、私が望むことをすることはできません。

値がビューにバインドされているかどうかを確認し、可能であればコントローラが値を適切に作成しているかどうかを確認するテストもしたいと考えています。

'use strict' 

    describe "the exampleDirective Directive", -> 

     beforeEach module("app.directive") 
     beforeEach module("app/partials/view.html") 

     ServiceMock = { 
     getValue :() -> 

     options.method = "GET" 
     options.url = "example/fetch" 

     $http _.defaults(options) 
     } 

    #use the mock instead of the service 
    beforeEach module ($provide) -> 
     $provide.value "Service", ServiceMock 
     return 

    $httpBackend = null 
    scope = null 
    elem = null 

    beforeEach inject ($compile, $rootScope, $injector) -> 

    # get httpBackend object 
    $httpBackend = $injector.get("$httpBackend") 
    $httpBackend.whenGET("example/fetch").respond(200, "it works") 

    #set up the scope 
    scope = $rootScope 

    #create and compile directive 
    elem = angular.element('<example-directive></example-directive>') 
    $compile(elem)(scope) 
    scope.$digest() 

を、私は私がどれだけ近いかを知らない、またはこれはさえ正しければ：ここ

は、私が持っているものです。値がビューに正しくバインドされていることをアサーションできるようにしたい。私はVojtajinaの例を使ってkarma.jsファイルにhtml2jsを設定して、ビューを取得できるようにしました。私は答えを見つけるために多くの研究をしましたが、私はいくつかの助けが必要です。うまくいけば、私よりプログラマが賢明であれば、正しい方向に向けることができます。ありがとうございました。

Answer 1

カルマに要素を作成し、コントローラを取得するために指示文の名前に.controller()関数を使用します。あなたのディレクティブを定義した方法を与え、それは属性によって、そしてない要素としてあるべきこと

elem = angular.element('<div example-directive></div>'); 
$compile(elem)($rootScope); 
var controller = elem.controller('exampleDirective'); 

注：ご例えば、これらとのラインの最後のカップルを交換してください。私も100％は確信していませんが、私はあなたがscope.$digest;が必要だとは思わないのですが、通常はscope.$apply(function() {})ブロックに適用する必要があるものを置いています。