Jasmine 测试陷入无限重载循环

Question

我正在尝试编写一个单元测试来验证单击按钮时是否调用了函数。由于某种原因，我的测试陷入了重新加载循环。我添加了与测试相关的 html 和 ts 文件，并在其中一个 cmets 中指出。

it('should keep the save btn disabled until recording has been done', () => {
  spyOn(component, 'onSave');
  fixture.detectChanges()
  let button = fixture.debugElement.query(By.css('#createRecording')).nativeElement;
  button.click();
  expect(component.onSave).toHaveBeenCalledTimes(0);
})

 
<form [formGroup]="webRecordingForm" (ngSubmit)="onSave()">
<div class="row" style="padding: 20px 10px;">
<div class="col-sm-12">
<!-- <a href="#" id="backToMsgs1" class="btn btn-primary btn-lg" style="float: right; margin-left: 5px;" title="Back to Messages">Back<span class="glyphicon glyphicon-menu-right"></span></a> -->
<button type="submit" [disabled]="!webRecordingForm.valid" class="btn btn-lg" style="float: right; margin-left: 5px;color: white;background-color:#105b63 ;" id="createRecording"><i class="fa fa-check-circle fa-lg"></i> Save</button>
</div>
</div>
</form>

文件

onSave() {
    //console.log("on Save Recordings");
    if (this.record !== undefined || this.record != null) {
      this.OutputSaveRecording.emit("Clicked");
    }
    else {
      alert("No Recording Found");
    }

  }

Answer 1

在 TestBed.configureTestingModule 中导入 ReactiveFormsModule。

await TestBed.configureTestingModule({
  declarations: [ YourComponent ],
  imports: [ReactiveFormsModule],
  providers: [
    FormBuilder
  ]
})
.compileComponents();