ユニットテストのangularjsディレクティブ

Question

私のanglejsプロジェクトのユニットテストを始めたいと思います。それはまっすぐ進むことではないが、私はそれが本当に難しいと思う。私はカルマとジャスミンを使用しています。私のルートとアプリの依存関係をテストするために、私は問題ありません。しかし、このような命令をどのようにテストしますか？

angular.module('person.directives', []). 
directive("person", function() { 
return { 
    restrict: "E", 
    templateUrl: "person/views/person.html", 
    replace: true, 
    scope: { 
     myPerson: '=' 
    }, 
    link: function (scope, element, attrs) { 

    }   
} 

}）;

テンプレートが検出されたことをインスタンスでどのようにテストすればよいですか？ここで

Answer 1

はが、あなたはスコープの変更およびイベントハンドラをシミュレートしてかどうかを確認し、をコンパイルしに要素を公開し、それはスコープだ、を作成するには、にbeforeEachを使用して、基本的にhttps://github.com/vojtajina/ng-directive-testing

を移動するための方法でありますコードは要素とスコープを適切に反応させて更新します。ここには非常に簡単な例があります。

この仮定：私たちは、ユーザが指示を持つ要素をクリックしたときに、myPersonプロパティがclickedなることを期待

scope: { 
    myPerson: '=' 
}, 
link: function(scope, element, attr) { 
    element.bind('click', function() {console.log('testes'); 
    scope.$apply('myPerson = "clicked"'); 
    }); 
}   

を。これはテストする必要がある動作です。だから我々は、すべての仕様に（要素にバインドされた）コンパイルディレクティブを公開：

var elm, $scope; 

beforeEach(module('myModule')); 

beforeEach(inject(function($rootScope, $compile) { 
    $scope = $rootScope.$new(); 
    elm = angular.element('<div t my-person="outsideModel"></div>'); 
    $compile(elm)($scope); 
})); 

次に、あなたはちょうどそれを主張：

it('should say hallo to the World', function() { 
    expect($scope.outsideModel).toBeUndefined(); // scope starts undefined 
    elm.click(); // but on click 
    expect($scope.outsideModel).toBe('clicked'); // it become clicked 
}); 

Plnker here。 click()をシミュレートするには、このテストにjQueryが必要です。