Unit testing angular mat-form

Question

I am new at Angular Testing.

I want to test all the scenarios with a form (valid form, required form, etc)

That's my html:

<div class="content" *ngIf="!recordsFound">
  <div class="alert">
    <span>OOOPS! No recordings found. You can add a new one:</span>
  </div>
  <form [formGroup]="recordingForm" #formDirective="ngForm" id="recordingForm">
    <div>
      <div>
        <mat-form-field>
          <mat-label>Artist*</mat-label>
          <input matInput placeholder="Artist" formControlName="artist" />
          <mat-error>Required input</mat-error>
        </mat-form-field>
      </div>
      <div>
        <mat-form-field>
          <mat-label>Title*</mat-label>
          <input matInput placeholder="Title" formControlName="title" />
          <mat-error>Required input</mat-error>
        </mat-form-field>
      </div>
      <div>
        <mat-form-field>
          <mat-label>ISRC</mat-label>
          <input matInput placeholder="ISRC" formControlName="isrc" />
        </mat-form-field>
      </div>
      <div>
        <mat-form-field>
          <mat-label>Duration</mat-label>
          <input matInput placeholder="Duration" formControlName="duration" />
        </mat-form-field>
      </div>
      <button mat-stroked-button color="primary" (click)="save()" [disabled]="!recordingForm.valid">
        Add recording <mat-icon>music_note</mat-icon>
      </button>
    </div>
  </form>
</div>

Example, test check if form is valid and fields required are not empty:

  it ('check if form is valid and required fields not empty',() =>{
    const fixture = TestBed.createComponent(AddRecordingComponent);
    const formArtistElement: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#recordingForm').querySelectorAll('input')[0];
    const formTitleElement: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#recordingForm').querySelectorAll('input')[1];
    formArtistElement.value='Rihanna';
    formTitleElement.value='Umbrella';
    formArtistElement.dispatchEvent(new Event('input'));
    formTitleElement.dispatchEvent(new Event('input'));
    const isFormValid = fixture.componentInstance.recordingForm.valid;
    
    fixture.whenStable().then(() => {
      expect(isFormValid).toBeTruthy();
    })
  
  });

I am getting this error: TypeError: Cannot read property 'querySelectorAll' of null How I can access to the form through the spec file?

Thanks

Abhishek Priyadarshi · Accepted Answer · 2021-07-23 10:26:54Z

2

Please try this

it ('check if form is valid and required fields not empty',() =>{
    const fixture = TestBed.createComponent(AddRecordingComponent);
    let component = fixture.componentInstance;
    component.recordsFound = false; // To make form visible
    fixture.detectChanges();
    const formArtistElement: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#recordingForm')?.querySelectorAll('input')[0];
    const formTitleElement: HTMLInputElement = fixture.debugElement.nativeElement.querySelector('#recordingForm')?.querySelectorAll('input')[1];
    if(formArtistElement) {
      formArtistElement.value='Rihanna';
      formTitleElement.value='Umbrella';
      formArtistElement.dispatchEvent(new Event('input'));
      formTitleElement.dispatchEvent(new Event('input'));
      const isFormValid = fixture.componentInstance.recordingForm.valid;
    }
    
    fixture.whenStable().then(() => {
      expect(isFormValid).toBeTruthy();
    })
  
  });

answered Jul 23, 2021 at 10:26

Abhishek Priyadarshi

5712 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Arnau Van Boschken ArnauB Over a year ago

I get this error: AddRecordingComponent > check if form is valid Error: NG0301: Export of name 'ngForm' not found!. Find more at angular.io/errors/NG0301

Collectives™ on Stack Overflow

Unit testing angular mat-form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related