web-dev-qa-db-fra.com

Une manière de tester EventEmitter dans Angular2?

J'ai un composant qui utilise un EventEmitter et le EventEmitter est utilisé lorsque quelqu'un est cliqué sur la page. Existe-t-il un moyen d'observer EventEmitter lors d'un test d'unité et d'utiliser TestComponentBuilder pour cliquer sur l'élément qui déclenche la méthode EventEmitter.next () et voir ce qui a été envoyé?

unit-testingangular
46
tallkid24

Votre test pourrait être:

it('should emit on click', () => {
   const fixture = TestBed.createComponent(MyComponent);
   // spy on event emitter
   const component = fixture.componentInstance; 
   spyOn(component.myEventEmitter, 'emit');

   // trigger the click
   const nativeElement = fixture.nativeElement;
   const button = nativeElement.querySelector('button');
   button.dispatchEvent(new Event('click'));

   fixture.detectChanges();

   expect(component.myEventEmitter.emit).toHaveBeenCalledWith('hello');
});

quand votre composant est:

@Component({ ... })
class MyComponent {
  @Output myEventEmitter = new EventEmitter<string>();

  buttonClick() {
    this.myEventEmitter.emit('hello');
  }
}
123
cexbrayat

Supposons que vous avez une méthode appelée buttonClick() qui déclenche un émetteur d'événement appelé eventEmitter, vous pouvez vous abonner à l'événement, puis appeler la méthode pour voir si l'événement se déclenche, puis appeler le rappel. done() quand il le fait ...

@Component({ ... })
class MyComponent {
    @Output() eventEmitter = new EventEmitter();

    buttonClick() {
      this.eventEmitter.emit('bar');
    }
}

Et puis dans le test ...

it('should emit on click', (done) => {
    component.eventEmitter.subscribe(foo => {
        expect(foo).toEqual('bar');
        done();
    });
    component.buttonClick();
});

Alternativement, vous pouvez utiliser un espion, cela dépend de votre style. Voici comment utiliser facilement un espion pour voir si emit est en train de se faire virer ...

it('should emit on click', () => {
    spyOn(component.eventEmitter, 'emit');
    component.buttonClick();
    expect(component.eventEmitter.emit).toHaveBeenCalled();
    expect(component.eventEmitter.emit).toHaveBeenCalledWith('bar');
});
32
Joshua Michael Calafell

Vous pouvez vous abonner à l'émetteur ou le lier, s'il s'agit d'un @Output(), dans le modèle parent et vérifier le composant parent si la liaison a été mise à jour. Vous pouvez également envoyer un événement de clic, puis l'abonnement doit être déclenché.

3
Günter Zöchbauer