我正在尝试写一个单元测试来验证当一个按钮被点击时函数是否被调用。由于某种原因我的测试陷入了一个重载循环。我已经添加了与测试相关的html和ts文件，以及在一个注解中指出的。

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>

ts文件

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

  }