I'm currently working on a unit test to ensure that a user can't submit a form until all fields have been filled out. The test itself is functioning correctly and passes, but the problem arises when the default behavior of form submission causes the page to reload, resulting in an infinite loop every time the test runs.
One potential solution I considered was changing the type of the submit button from "submit" to "button," but this would break the functionality, so I'd prefer to avoid that option.
I also attempted commenting out the alert section in the TypeScript file, but unfortunately, it didn't make any difference.
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()">
<!-- Form Markup -->
</form>
</div>component.ts
onSave() {
// Functionality Logic Here
}