Test di emulazione $ angolare e $ su eventi

Question

Sto provando a scrivere il test di unità per i miei eventi nel controller.

Qui di seguito è il mio controller

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); 
    } 

}]); 

E sotto è la mia prova che sto cercando di scrivere

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 
    }); 
}); 

mi aspetto un messaggio nel controller genitore per essere aggiornato, Ma la prova è in mancanza di aspettativa (scope.message) .toBe ('Ralf ninja turtle');

Answer 1

Nel test case è stato spiato scope.$on.

spyOn(scope, '$on'); 

Per chiamare la funzione effettiva, deve essere aggiunto .and.callThrough().

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

Ecco un esempio di lavoro completo:

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

È necessario chiamare $scope.$apply() dopo la chiamata a $emit. Ciò avverrebbe automaticamente nell'applicazione, ma deve essere chiamato esplicitamente nel test.