在jasmine中编写单元测试时，如何防止表单重新加载onSubmit

Question

我正在尝试编写一个单元测试，测试用户在填写表单之前不能提交表单。现在，一切正常，我的测试通过了，但我的问题是，提交表单的默认行为是重新加载页面，这使得我的单元测试每次执行时都会陷入无限的重新加载循环。

对此的一个潜在解决方案是将提交按钮类型从submit更改为>按钮，但这会破坏功能，所以我想推迟这样做。

我也尝试过在typescipt文件中注释掉alert部分，但这也没有什么不同。

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;
console.log(button);
button.click();
expect(component.onSave).toHaveBeenCalledTimes(0);
})

<div class="web-recording-setup-container">
<form [formGroup]="webRecordingForm" (ngSubmit)="onSave()">
<div>
<div class="row" style="padding: 5px 10px;">
<div class="col-sm-12">
<div class="form-group">
<label for="vrecord" style="font-size: 18px; font-weight: 500;">Name your Recording:</label>
<input type="text" class="form-control input-lg" id="vrecord" formControlName="FileName" placeholder="Enter recording name ..." [ngClass]="{ 'is-invalid': f.FileName.touched && f.FileName.errors }">
<div *ngIf="f.FileName.touched && f.FileName.errors" class="invalid-feedback">
<div *ngIf="f.FileName.errors.required">File Name is required</div>
</div>
</div>
</div>
</div>
<div class="row" style="padding: 5px 10px; text-align: center;">
<div class="col-sm-12" style="padding: 5px; ">
<!-- ADD STOP WATCH - START -->
<div class="circle">
<span class="timer" id="display">{{audioTimer}}</span>
</div>
<!-- ADD STOP WATCH - END -->
<br />
<button class="btn" type="button" (click)="initiateRecording(); start()" title="Start Recording" style="background-color: #bd4932; color: white;" [disabled]="recording">
<i *ngIf="recording" class="fa fa-circle fa-lg recordingHide" style="color:white;"
id="recCtrl1"></i>
<i *ngIf="!recording" class="fa fa-microphone fa-lg recordingShow" id="recCtrl2"></i>
</button>
<button class="btn btn-light" type="button" (click)="stopRecording(); pause()" title="Stop Recording">
<i class="fa fa-stop fa-lg"></i>
</button>
</div>
</div>
<div class="row" style="padding: 5px 10px;">
<div class="col-sm-6">
<!-- cant attach click event to controls attribute -->
<audio controls *ngIf="url" style="width: 100%;">
<source [src]="sanitize(url)" type="audio/wav">
Your browser does not support the audio format.
</audio>
</div>
</div>
<div class="row" style="padding: 20px 10px;">
<div class="col-sm-12">
<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>
</div>
</form>
</div>

组件.ts

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

Answer 1

您可以尝试在onSubmit 上使用event.PreventDefault();

Answer 2

我会更聪明地了解如何编写单元测试。

例如

我不调用button.click()，而只是执行模板中链接的代码。IMO，没有真正的理由测试角度绑定是有效的。

it('should keep the save btn disabled until recording has been done', () => {
spyOn(component, "onSave");
fixture.detectChanges();
component.initiateRecording();
component.start();
expect(component.onSave).toHaveBeenCalledTimes(0);
})

此外，您可以考虑重写expect块，以准确检查submit按钮是否已禁用，或者更改it语句以反映实际测试的内容。例如"如果记录不完整等，则不应调用onSave；

您是否正在将表单模块导入TestBed？关于https://github.com/angular/angular/issues/12757

如果没有，那可能是你的问题。