テストイベントの角$ emitと$

Question

私のイベントの単体テストをコントローラに書き込もうとしています。以下は

私のコントローラ

myApp.controller('ParentCtrl', ['$scope', function ($scope) { 
    $scope.message = "Some text in parent"; 
    $scope.$on("update_parent_controller", function(event, message){ 
     $scope.message = message; 
    }); 

}]) 
.controller('ChildCtrl', ['$scope', function ($scope) { 
    $scope.clickFunction = function() { 
    $scope.message = "Parent updated from child controller"; 

     $scope.$emit('update_parent_controller', $scope.message); 
    } 

}]); 

以下は、私が

describe("Hello Controller Test", function() { 
    var ctrl, scope; 

    beforeEach(module("myApp")); 

    beforeEach(inject(function ($controller, $rootScope) { 
     scope = $rootScope.$new(); 
     spyOn(scope, '$on'); 

     ctrl = $controller("ParentCtrl", { 
      $scope : scope 
     }); 
    })); 

    it('should change ParentCtrl message property from child ctrl', function(){ 

     var new_hero = 'Ralf ninja turtle', 
      sub_scope = scope.$new(); 

     sub_scope.$emit('update_parent_controller', new_hero); 

     expect(scope.$on).toHaveBeenCalled(); 
     expect(scope.message).toBe('Ralf ninja turtle'); //Getting err here 
    }); 
}); 

を記述しようとしています私のテストである私が更新する親コントローラ、 にメッセージを期待しています。しかしテストがありますexpect（scope.message）.toBe（ 'Ralf ninja turtle'）に失敗しました。

Answer 1

テストケースでは、scope.$onがスパイしました。

spyOn(scope, '$on'); 

実際の機能を呼び出すには、.and.callThrough()を追加する必要があります。ここで

spyOn(scope, '$on').and.callThrough(); 

はフル実施例である：

angular.module('myApp', []).controller('ParentCtrl', ['$scope', function ($scope) { 
 
    $scope.message = "Some text in parent"; 
 
    $scope.$on("update_parent_controller", function(event, message){ 
 
     $scope.message = message; 
 
    }); 
 
}]); 
 

 
describe("Hello Controller Test", function() { 
 
    var ctrl, scope; 
 

 
    beforeEach(module("myApp")); 
 

 
    beforeEach(inject(function ($controller, $rootScope) { 
 
     scope = $rootScope.$new(); 
 
     spyOn(scope, '$on').and.callThrough(); // <-- This is the fix 
 

 
     ctrl = $controller("ParentCtrl", { 
 
      $scope : scope 
 
     }); 
 
    })); 
 

 
    it('should change ParentCtrl message property from child ctrl', function(){ 
 

 
     var new_hero = 'Ralf ninja turtle', 
 
      sub_scope = scope.$new(); 
 

 
     sub_scope.$emit('update_parent_controller', new_hero); 
 

 
     expect(scope.$on).toHaveBeenCalled(); 
 
     expect(scope.message).toBe('Ralf ninja turtle'); //Getting err here 
 
    }); 
 
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.css"> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/jasmine-html.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/jasmine/2.3.4/boot.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular-mocks.js"></script>

Answer 2

$emitへの電話後に$scope.$apply()に電話する必要があります。これはアプリケーションで自動的に発生しますが、テストで明示的に呼び出す必要があります。