web-dev-qa-db-fra.com

Comment puis-je tester des événements en angulaire?

Je dois vérifier que les événements sont correctement émis ou diffusés et déclencher les événements manuellement.

Quelle est la meilleure façon de faire cela?

angularjsunit-testingjavascript-eventsangularjs-directivejasmine
65
Kenneth Lynne

Si vous avez juste besoin d'essais sur le tir et la capture d'événements, voici comment je le fais. Pour s'assurer qu'un certain événement est déclenché ($emit- ed ou $broadcast- ed), un espion est le chemin à parcourir. Vous avez besoin d'une référence à la portée qui appellera le $emit ou le $broadcast, puis de faire quelque chose comme ceci:

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

Si vous n'avez pas besoin ou ne voulez pas vous soucier des arguments transmis avec le $emit, vous pouvez mettre un $on sur le $rootScope et définir un indicateur pour savoir que l'événement a été émis. Quelque chose comme ça:

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

Pour tester les fonctionnalités qui s'exécutent lorsqu'un événement est attrapé ($on), c'est un peu plus facile. Obtenez simplement un $rootScope à partir de la fonction inject, puis envoyez l'événement souhaité.

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

Maintenant, j'imagine que cette gestion d'événements se produirait dans une directive ou un contrôleur (ou les deux). Pour configurer des tests de directive, voir https://github.com/vojtajina/ng-directive-testing . Pour configurer les tests du contrôleur, voir https://github.com/angular/angular-phonecat/blob/master/test/unit/controllersSpec.js#L27

J'espère que cela t'aides.

121
dnc253

Nous avons utilisé cette syntaxe pour 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
0
Jnewbie

Voici les étapes à suivre pour un événement $ broadcast en JS angulaire

Lors de l’injection, initialisez le rootScope et le stub scope comme indiqué ci-dessous:

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

Une fois le contrôleur créé, relancez l’événement à l’aide de rootScope comme ci-dessous:

rootScope.$broadcast('eventName', parameter1);
0
Dilip Nannaware