title: How to prevent a form from reloading onSubmit while writing unit test in jasmine
body: <p>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.</p>
  <p>One potential solution for this was changing the submit button type from submit -&gt; button, but that will break the functionality, so I want to defer from doing that.</p>
  <p>I have also tried commenting out the alert part in the typescipt file but that didn't made a difference either.</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>it('should keep the save btn disabled until recording has been done', () =&gt; {
    spyOn(component, "onSave");
    fixture.detectChanges();
    let button = fixture.debugElement.query(By.css('#createRecording')).nativeElement;
    console.log(button);
    button.click();
    expect(component.onSave).toHaveBeenCalledTimes(0);
  })</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="web-recording-setup-container"&gt;
    &lt;form [formGroup]="webRecordingForm" (ngSubmit)="onSave()"&gt;
      &lt;div&gt;
        &lt;div class="row" style="padding: 5px 10px;"&gt;
          &lt;div class="col-sm-12"&gt;
            &lt;div class="form-group"&gt;
              &lt;label for="vrecord" style="font-size: 18px; font-weight: 500;"&gt;Name your Recording:&lt;/label&gt;
              &lt;input type="text" class="form-control input-lg" id="vrecord" formControlName="FileName" placeholder="Enter recording name ..." [ngClass]="{ 'is-invalid': f.FileName.touched &amp;&amp; f.FileName.errors }"&gt;
              &lt;div *ngIf="f.FileName.touched &amp;&amp; f.FileName.errors" class="invalid-feedback"&gt;
                &lt;div *ngIf="f.FileName.errors.required"&gt;File Name is required&lt;/div&gt;
              &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row" style="padding: 5px 10px; text-align: center;"&gt;
          &lt;div class="col-sm-12" style="padding: 5px; "&gt;
            &lt;!-- ADD STOP WATCH - START --&gt;
            &lt;div class="circle"&gt;
              &lt;span class="timer" id="display"&gt;{{audioTimer}}&lt;/span&gt;
            &lt;/div&gt;
            &lt;!-- ADD STOP WATCH - END --&gt;
  
            &lt;br /&gt;
            &lt;button class="btn" type="button" (click)="initiateRecording(); start()" title="Start Recording" style="background-color: #bd4932; color: white;" [disabled]="recording"&gt;
                          &lt;i *ngIf="recording" class="fa fa-circle fa-lg recordingHide" style="color:white;"
                              id="recCtrl1"&gt;&lt;/i&gt;
                          &lt;i *ngIf="!recording" class="fa fa-microphone fa-lg recordingShow" id="recCtrl2"&gt;&lt;/i&gt;
                      &lt;/button&gt;
            &lt;button class="btn btn-light" type="button" (click)="stopRecording(); pause()" title="Stop Recording"&gt;
                          &lt;i class="fa fa-stop fa-lg"&gt;&lt;/i&gt;
                      &lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row" style="padding: 5px 10px;"&gt;
          &lt;div class="col-sm-6"&gt;
            &lt;!-- cant attach click event to controls attribute --&gt;
            &lt;audio controls *ngIf="url" style="width: 100%;"&gt;
                          &lt;source [src]="sanitize(url)" type="audio/wav"&gt;
                          Your browser does not support the audio format.
                      &lt;/audio&gt;
          &lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="row" style="padding: 20px 10px;"&gt;
          &lt;div class="col-sm-12"&gt;
  
            &lt;button type="submit" [disabled]="!webRecordingForm.valid" class="btn btn-lg" style="float: right; margin-left: 5px;color: white;background-color:#105b63 ;" id="createRecording"&gt;&lt;i class="fa fa-check-circle fa-lg"&gt;&lt;/i&gt; Save&lt;/button&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>component.ts</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>onSave() {
      //console.log("on Save Recordings");
      if (this.record !== undefined || this.record != null) {
        this.OutputSaveRecording.emit("Clicked");
      }
      else {
        alert("No Recording Found");
      }
  
    }</code></pre>
  </div>
  </div>
  </p>