带有 EventEmitter 测试的子组件

Question

我有这个子组件，当样式更改为父组件时会发出 true 或 false：

export class PruebaComponent implements OnInit, OnChanges {

  @Output() statusEvent = new EventEmitter<boolean>();
  
  getSytle(): string {
     return this.valueStyle;
  }

  private calcStyle(): void {
     this.calcPopUpStyle();
     if (this.isEngReady) {
       this.valueStyle = 'icon-green';
       this.statusEvent .emit(true);
     } else {
       this.valueStyle = 'icon-red';
       this.statusEvent.emit(false);
     }
     this.ref.detectChanges();
   }
}

我试图编写测试来检查当 isEngReady 也为真时发出的 statusEvent 是否为真，我试过这个：

describe('PruebaComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
       declarations: [ChatComponent]})
    .compileComponents();
    }));

   it('should emit chat availability to true if the engagement is available', () => {
     spyOn(component.statusEvent, 'emit')
     component.isEngReady = true;
     component.getSytle();
     //expect(component.statusEvent.emit).toHaveBeenCalled();
     expect(component.statusEvent.emit).toHaveBeenCalledWith(true);
   });
});

但我收到此错误消息： 预期间谍发射已被调用：[ true ] 但它从未被调用过。

Answer 1

你应该把你的间谍功能从 spyOn(component.chatAvailableEvent, 'emit') 至 spyOn(component.statusEvent, 'emit')

describe('PruebaComponent', () => {
   beforeEach(async(() => {
      TestBed.configureTestingModule({
       declarations: [ChatComponent]})
    .compileComponents();
    }));

   it('should emit chat availability to true if the engagement is available', () => {
     // given
     const statusSpy = spyOn(component.statusEvent, 'emit')
     component.isEngReady = true;

     // when
     component.calcStyle() // <-- call here the function or action that trigger this private function.
     // or make it public // I don't recommend that. But it can be.

     // expect
     expect(statusSpy).toHaveBeenCalledWith(true);
   });
});

带有 EventEmitter 测试的子组件

Child Component with EventEmitter test

testing

testunit

eventemitter

typescript

angular