How to prevent a form from reloading onSubmit while writing unit test in jasmine

Question

I am trying to write a unit test which is testing that a user should not be able to submit a form until the form has been filled out. Now, everything works as it should and my test passes, but my issue is since the default behaviour of submitting a form is reloading the page, which is making my unit test stuck in an infinite reloading cycle every time it is executed.

One potential solution for this was changing the submit button type from submit -> button, but that will break the functionality, so I want to defer from doing that.

I have also tried commenting out the alert part in the typescipt file but that didn't made a difference either.

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>

component.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

You may try using event.PreventDefault(); on onSubmit

Answer 2

I would be smarter about how you are writing the unit test.

e.g.

Instead of calling button.click(), I would just execute the code that is linked in the template. IMO, there is no real reason the test that the binding in angular is working.

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);
})

Also, you may consider rewriting your expect block to acutally check that the submit button is disabled OR change the it statement to reflect what you are actually testing. e.g. something like ... "onSave should not be called if the recording is not complete etc."

Are you importing the Forms Module into your TestBed? re: https://github.com/angular/angular/issues/12757

If not, that may be your issue.