Come posso testare gli eventi in modo angolare?

Question

Ho bisogno di verificare che gli eventi vengano correttamente emessi o trasmessi e attivino manualmente gli eventi.

Qual è il modo migliore per farlo?

Answer 1

Se hai solo bisogno di test sull'attivazione e l'attivazione degli eventi, questo è il modo in cui lo faccio. Per garantire che un determinato evento venga attivato ($emit -ed o $broadcast -ed), una spia è la strada da percorrere. È necessario un riferimento al campo di applicazione che verrà chiamando il $emit o $broadcast, e poi solo per fare qualcosa di simile:

spyOn(scope, "$emit") 
//run code to test 
expect(scope.$emit).toHaveBeenCalledWith("MY_EVENT_ID", other, possible, args); 

Se non è necessario o non si vuole preoccupare gli argomenti che sono superato con il $emit, si può mettere un $on sulla $rootScope e impostare un flag per conoscere l'evento è stato emesso. Qualcosa di simile a questo:

var eventEmitted = false; 
$rootScope.$on("MY_EVENT_ID", function() { 
    eventEmitted = true; 
}); 
//run code to test 
expect(eventEmitted).toBe(true); 

Per la funzionalità di test che viene eseguito quando un evento viene catturato ($on), è un po 'più facile. Basta ottenere un $rootScope dalla funzione inject e quindi inviare l'evento desiderato.

$rootScope.$broadcast("EVENT_TO_TEST", other, possible, args); 
//expects for event here 

Ora, immagino che questo la gestione degli eventi sarebbe successo in una direttiva o di un controller (o entrambi) Per la realizzazione di prove di direttiva, vedi https://github.com/vojtajina/ng-directive-testing. Per l'impostazione dei test del controller, vedere https://github.com/angular/angular-phonecat/blob/master/test/unit/controllersSpec.js#L27

Spero che questo aiuti.

Answer 2

Questi sono i passi da seguire per $ evento di trasmissione in angolare JS

Mentre inijecting inizializzare la rootScope e la portata stub come indicato di seguito:

var rootScope; 
var scopeStub = beforeEach(function() { 
    inject(function($rootScope, _$controller_) { 
     rootScope = $rootScope; 
     scopeStub = $rootScope.$new(); 
     $controller = _$controller_; 
    }); 
}); 

Dopo controller è creato evento raise usando rootScope come qui di seguito:

rootScope.$broadcast('eventName', parameter1); 

Answer 3

Abbiamo usato questo sintassi per A1

=========== Controller ======== 
    var vm = this; 
    $scope.$on('myEvent', function(event, data){ 
     console.log('event number', data.id); 
    }); 
============ Test ============= 
it('should throw myEvent', function() { 
    var data = {}; 
    $scope.$broadcast('myEvent', {id:1}); 
    $scope.$broadcast('myEvent', {id:2}); 
    $scope.$broadcast('myEvent', {id:3}); 
}); 

============ Output ============ 
Chrome LOG: '--------------------------------------------' 
Chrome LOG: 'event number', 1 
Chrome LOG: 'event number', 2 
Chrome LOG: 'event number', 3