0
2つのコントローラと1つのサービスがあります。最初のコントローラーでは、イベントに参加して何かをしています。第2のコントローラは、いくつかの動作を実行し、完了すると、その動作をブロードキャストする。以下の例を参照してください。タイムアウトは長時間実行されるアクションのエミュレーション用です。テストしたいのですが、hasLoadedは、Jasmine 2.0を使用してtrueに設定してください。ジャスミンを使用してコールバックで実行されるアクションをテストする方法
var myApp = angular.module('MyApp', []);
myApp.controller('MyCtrl1', ['$scope', 'myService', function($scope, myService) {
$scope.hasLoaded = false;
$scope.fileName = '';
myService.onLoaded($scope, function(e, data){
// I want to test the following two lines, in the really the code here is much more complex
$scope.fileName = data.fileName;
$scope.hasLoaded = true;
});
}]);
myApp.controller('MyCtrl2', ['$rootScope', '$scope', '$timeout', 'myService', function($rootScope, $scope, $timeout, myService) {
$scope.isLoading = false;
$scope.title = 'Click me to load';
$scope.load = function(){
$scope.isLoading = true;
$scope.title = 'Loading, please wait...';
$timeout(function() {
$rootScope.$emit('loaded', { fileName: 'test.txt'});
}, 1000);
};
myService.onLoaded($scope, function(){
$scope.hasLoaded = true;
});
}]);
myApp.service('myService', ['$rootScope', function ($rootScope) {
this.onLoaded = function(scope, callback) {
var handler = $rootScope.$on('loaded', callback);
scope.$on('$destroy', handler);
};
}]);
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.min.js"></script>
<div ng-app="MyApp">
<div ng-controller="MyCtrl1">
<div ng-show="hasLoaded">{{fileName}} loaded !!!</div>
</div>
<div ng-controller="MyCtrl2">
<button ng-click="load()" ng-hide="hasLoaded" ng-disabled="isLoading" ng-bind="title"></button>
</div>
</div>
UPDATE:私は、私の場合に、それをより近づけるためにブロードキャスト呼び出しにパラメータを追加しています。
ありがとう、これは私が必要なものです。どうして$スコープを持つ必要があるのか教えてください。$ apply();コール? – Antipod
あなたは実際にあなたのケースではありません。私は最近、テストで解決するために$ apply()を必要とする偽の約束でテストしていたので、これをやっていました。 – mcgraphix