Comment puis-je tester les événements angulaire?

J'ai besoin de tester que les événements d'obtenir correctement émise ou diffusée, et de déclencher des événements manuellement.

Quelle est la meilleure façon de le faire?

InformationsquelleAutor Kenneth Lynne | 2013-03-07
  1. 121

    Si vous avez juste besoin d'un peu de tests sur le cas de la cuisson et de la capture, c'est 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 sera l'appel de la $emit ou $broadcast, et puis il suffit 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 veulent pas à vous soucier de la arguments qui sont passés à la $emit, vous pouvez mettre un $on sur le $rootScope et de définir un indicateur de connaître l'événement a été émise. Quelque chose comme ceci:

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

    Pour tester la fonctionnalité qui s'exécute lorsqu'un événement est capturé ($on), c'est un peu plus facile. Juste obtenir un $rootScope de la inject fonction et ensuite envoyer l'événement souhaité.

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

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

    Espère que cette aide.

    • C'est bon pour les correspondances exactes mais comment pourrait-on correspondre à un sous-ensemble d'arguments? Par exemple, si les arguments sont juste un objet {p1:'oui', p2: "non"} comment vous vous attendriez à ce que p1: "oui" peu importe ce que p2 est (ou s'il existe)? Je sais qu'il y a le "tout" de jasmin clavier, mais qui semble être à l'opposé - pas de précision, un contrôle suffisant. Aucun terrain d'entente où vous pouvez vous attendre simplement les arguments que vous voulez?
    • Jasmin a jasmine.objectContaining. À partir de la documentation: le jasmin.objectContaining est pour les moments où l'attente se soucie uniquement de certaines paires clé/valeur dans l'objet réel.
    • Merci, mais y aurait-il un moyen d'utiliser le jasmin? Quelque chose comme: expect(scope.$emit.calls.argsFor(0)[0]).toBe('MY_EVENT_ID');
    • J'ai un nœud parent à l'écoute pour $emit événements. Mes tests ne laisser passer que lorsque j'utilise $rootScope.$broadcast puis vérifiez les événements, ils ne passent pas pour $rootScope.$emit, est-ce parce que $emit ne peut traverser le noeud et pas lui-même et pour les enfants de nœuds?
    • un peu en retard, mais je crois que l'aide toHaveBeenCalledWith est approprié, même pour juste vérifier si un événement a été déclenché. C'est parce que le nom de l'événement est un argument pour $emit, voici donc le test aurait du sens.
    InformationsquelleAutor dnc253
  2. 0

    Voici les étapes à suivre pour $événement de diffusion en angular JS

    Tout inijecting initialiser le rootScope et la portée de stub comme indiqué ci-dessous:

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

    Après le contrôleur est créé élever événement à l'aide de rootScope comme ci-dessous:

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

    Nous avons utilisé cette sintax 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
    InformationsquelleAutor Jnewbie