如何对角度@Output进行单元测试

Question

覆盖率报告中的问题：

我在components.ts中有这段代码

export class TimelinePlotComponent implements OnInit, OnChanges, OnDestroy {

form: FormGroup;
@Output() onchange: EventEmitter<any> = new EventEmitter<any>();

constructor() {}

initForm() {
    this.form = new FormGroup({
      timeRange: new FormControl(this.time_range_options_active, []),
      metric: new FormControl(this.metric_options_active, []),
      groupBy: new FormControl(this.group_by_options_active, []),
    });

    // How to unit test this part of the code
    this.form.valueChanges.subscribe( res => {
      console.log('form-changed');
      this.onchange.emit(res);
    });
  }

}

组件规格

  fit('should listen for form changes', async() => {
    component.form.controls['groupBy'].setValue('color');
    fixture.detectChanges();
    fixture.whenStable().then(() => {
      // your expectations.
      expect(component.form.valid).toBeTruthy();
      component.onchange.subscribe( res => {
        console.log('res: ', res);
      });

    });
  });

错误：没有任何反应，我不知道如何对触发输出事件发射器的表单进行单元测试。

如您所见，这不起作用，如何对单元测试表单进行更改有任何帮助？

Answer 1

I don't think you need the whenStable at all, also the async is not necessary. You should use detectChanges() to trigger the change detection. But this should only be done before the actual start, to trigger the ngOnInit hook (and friends).

Also use a spy to make sure the Output has been called:

fit('should listen for form changes', () => {
   spyOn(component.onchange, 'emit');
   fixture.detectChanges();

   component.form.controls['groupBy'].setValue('color');

   expect(component.form.valid).toBeTruthy();
   expect(component.onchange.emit).toHaveBeenCalled();
});