Любой способ протестировать EventEmitter в Angular2?

У меня есть компонент, который использует EventEmitter, и EventEmitter используется, когда кто-то на странице нажат. Есть ли способ, которым я могу наблюдать EventEmitter во время unit test, и использовать TestComponentBuilder, чтобы щелкнуть элемент, который запускает метод EventEmitter.next() и посмотреть, что было отправлено?

Ответы

Ответ 1

Ваш тест может быть:

it('should emit on click', inject([], () => {
   tcb.createAsync(MyComponent)
      .then((fixture) => {
        // spy on event emitter
        let component = fixture.componentInstance; 
        spyOn(component.myEventEmitter, 'emit');

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

        fixture.detectChanges();

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

когда ваш компонент:

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

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

Ответ 2

Скажем, у вас есть метод под названием buttonClick(), который запускает событие-эмитент, называемый eventEmitter, вы можете подписаться на это событие, а затем вызвать метод, чтобы узнать, срабатывает ли событие и вызвать обратный вызов done(), когда он делает...

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

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

И затем в тесте...

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

В качестве альтернативы вы можете использовать шпиона, в зависимости от вашего стиля. Вот как вы могли бы легко использовать шпиона, чтобы узнать, уволен ли emit...

it('should emit on click', fakeAsync(() => {
    spyOn(component.eventEmitter, 'emit');
    component.buttonClick();
    tick(1);
    expect(component.eventEmitter.emit).toHaveBeenCalled();
    expect(component.eventEmitter.emit).toHaveBeenCalledWith('bar');
}));

Ответ 3

Вы можете подписаться на эмиттер или связать с ним, если он является @Output(), в родительском шаблоне и проверить родительский компонент, если привязка была обновлена. Вы также можете отправить событие клика, а затем подписку следует запустить.