带有 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);
   });
});

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

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);
   });
});