私たちのアプリには、複数のネストされたディレクティブのレイヤーがあります。トップレベルのディレクティブの単体テストをいくつか作成しようとしています。ディレクティブ自体に必要なものをモックしましたが、今度は下位レベルのディレクティブからエラーが発生しています。トップレベルのディレクティブの単体テストでは、下位レベルのディレクティブで何が起こっているかを気にしたくありません。下位レベルのディレクティブをモックし、基本的に何もしないようにして、トップレベルのディレクティブを単独でテストできるようにしたいだけです。
次のようにしてディレクティブ定義を上書きしてみました。
angular.module("myModule").directive("myLowerLevelDirective", function() {
return {
link: function(scope, element, attrs) {
//do nothing
}
}
});
ただし、これは上書きされず、実際のディレクティブに加えてこれを実行するだけです。最上位レベルのディレクティブの単体テストで、これらの下位レベルのディレクティブが何も実行しないようにするにはどうすればよいですか?
ベストアンサー1
ディレクティブは単なるファクトリなので、これを行う最善の方法は、module通常はブロック内で関数を使用してディレクティブのファクトリをモックすることですbeforeEach。do-something-else というディレクティブによって使用される do-something というディレクティブがあると仮定すると、次のようにモックします。
beforeEach(module('yourapp/test', function($provide){
$provide.factory('doSomethingDirective', function(){ return {}; });
}));
// Or using the shorthand sytax
beforeEach(module('yourapp/test', { doSomethingDirective: {} ));
その後、テンプレートがテストでコンパイルされるときにディレクティブが上書きされます。
inject(function($compile, $rootScope){
$compile('<do-something-else></do-something-else>', $rootScope.$new());
});
コンパイラは内部的にこれを実行するため、名前に「Directive」サフィックスを追加する必要があることに注意してください。https://github.com/angular/angular.js/blob/821ed310a75719765448e8b15e3a56f0389107a5/src/ng/compile.js#L530