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

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 >
  <form [formGroup]="webRecordingForm" (ngSubmit)="onSave()">
    <div>
      <div  style="padding: 5px 10px;">
        <div >
          <div >
            <label for="vrecord" style="font-size: 18px; font-weight: 500;">Name your Recording:</label>
            <input type="text"  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" >
              <div *ngIf="f.FileName.errors.required">File Name is required</div>
            </div>
          </div>
        </div>
      </div>
      <div  style="padding: 5px 10px; text-align: center;">
        <div  style="padding: 5px; ">
          <!-- ADD STOP WATCH - START -->
          <div >
            <span  id="display">{{audioTimer}}</span>
          </div>
          <!-- ADD STOP WATCH - END -->

          <br />
          <button  type="button" (click)="initiateRecording(); start()" title="Start Recording" style="background-color: #bd4932; color: white;" [disabled]="recording">
                        <i *ngIf="recording"  style="color:white;"
                            id="recCtrl1"></i>
                        <i *ngIf="!recording"  id="recCtrl2"></i>
                    </button>
          <button  type="button" (click)="stopRecording(); pause()" title="Stop Recording">
                        <i ></i>
                    </button>
        </div>
      </div>
      <div  style="padding: 5px 10px;">
        <div >
          <!-- 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  style="padding: 20px 10px;">
        <div >

          <button type="submit" [disabled]="!webRecordingForm.valid"  style="float: right; margin-left: 5px;color: white;background-color:#105b63 ;" id="createRecording"><i ></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");
    }

  }

CodePudding user response：

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

CodePudding user response：

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.