CODEWITHSUNDEEP
angularangular-materialjasminekarma-jasmine
Gopinath Vedagiri
Gopinath Vedagiri

Reputation: 53

Forms array error while unit test using jasmine and karma

I'am writing unit test case for angular application version 9. but im getting below error.

TypeError: Cannot read property 'get' of undefined

how to spy getFormControls methos or else i have to use spyonproperty, i have tried to set spyonproperty but getting different error.

iam new to jasmine unit test getting struck in most of place,

ts:

  get getFormControls() {
    const control = this.relTable.get('tableRows') as FormArray;
    return control;
  }

submit() {
    this.messageService.clear();

/*     const formGroup = this.getFormControls.controls[this.isEdit.length - 1] as FormGroup;
    const rNameValue = formGroup.controls['rName'].value;
    const pEntityValue = formGroup.controls['pEntity'].value;
    const cEntityValue = formGroup.controls['cEntity'].value;


    this.new_rel_Data.push({
      'rName': rNameValue,
      'pEntity': pEntityValue,
      'cEntity': cEntityValue
    });  */



     this.new_rel_Data.push({
      'rName': this.getFormControls.controls[this.isEdit.length - 1].get('rName').value,
      'pEntity': this.getFormControls.controls[this.isEdit.length - 1].get('pEntity').value,
      'cEntity': this.getFormControls.controls[this.isEdit.length - 1].get('cEntity').value
    }); 

    this.relTemp.addReldata(this.new_rel_Data).subscribe(
      (res) => {
        console.log(res);
        this.loadRelTemp();
        this.messageService.add({ severity: 'success', summary: 'New value inserted successfully', sticky: true });
      },
      (err) => {
        this.messageService.add({ severity: 'error', summary: err.message, detail: 'Please contact Admin', sticky: true });
      },
      () => {
        const control = this.relTable.get('tableRows') as FormArray;
        control.clear();
        this.enableSubmit = false;
      }
    );

  }

spec:

 // submit for insert new value
  fit('Submit() Relational data', () => {

    let data = [ 'foo' ];
    component.new_rel_Data = data;

  fixture.detectChanges();
    spyOn(component, 'submit').and.callThrough();
    

    spyOn(relTemplateUpdateService, 'addReldata').and.returnValue(
      of({ result: { status: 200 } })
    );
    component.submit();
    fixture.detectChanges();
    expect(component.submit).toHaveBeenCalled();
    expect(relTemplateUpdateService.addReldata).toHaveBeenCalledWith(data);
  });

Upvotes: 1

Views: 1156

Answers (1)

Gynteniuxas
Gynteniuxas

Reputation: 7093

When you have errors like these: TypeError: Cannot read property 'get' of undefined, usually that means you forgot to add/mock something in your tests (although this could happen anywhere in real code as well).

In this particular case, you missed to mock either relTable or the result of getFormControls getter.

In any case, I would probably mock the getter like this:

spyOnProperty(relTemplateUpdateService, 'getFormControls').and.returnValue(new FormArray([
    new FormGroup({
      rName: new FormControl('rName'),
      pEntity: new FormControl('pEntity'),
      cEntity: new FormControl('cEntity'),
    }),
  ]));

Since TypeScript doesn't allow assigning to a getter, you would probably need to use spyOnProperty method instead of something like relTemplateUpdateService.getFormControls = .... If it wasn't a getter, then you could have also mocked this.relTable with the same return value but I personally didn't find this working with getter.

Also you should check (probably better in real code; unless you're sure you don't need to) that this.isEdit is always greater than 0, otherwise, you'll get another error with undefined.

Upvotes: 1

Related Questions