karma Test : TypeError: Cannot read property 'map' of undefined

Question

I'm trying to test a ReactiveFormsControle with a separate formControle file dependency that contain the control form function. I need to use an observable to pass the form controls and returning messages errors after that. But when I tried to test that I have this error: TypeError: Cannot read property 'map' of undefined

Can any one help me please.

this is my code :

This is how can I call the Form control function(process Message) :

ngAfterViewInit(): void {
// Watch for the blur event from any input element on the form.
let controlBlurs: Observable<any>[] = this.formInputElements
  .map((formControl: ElementRef) => Observable.fromEvent(formControl.nativeElement, 'blur'));
// Merge the blur event observable with the valueChanges observable
Observable.merge(this.signUpForm.valueChanges, ...controlBlurs).debounceTime(1000).subscribe(value => {
  this.displayeErrorMessage = this.formValidator.processMessages(this.signUpForm);
});

}

processMessage function:

  processMessages(container : FormGroup) : {[key : string]: string}{

let messages = {};

for(let controlKey in container.controls){
  if(container.controls.hasOwnProperty(controlKey)){
    let c = container.controls[controlKey];

    if(c instanceof FormGroup){
      let childMessages = this.processMessages(c);
      Object.assign(messages, childMessages);
    }else {

      if(this.validationErrorMessages[controlKey]){
        messages[controlKey]='';
        if((c.dirty || c.touched) && c.errors){
          Object.keys(c.errors).map(messageKey =>{
            if(this.validationErrorMessages[controlKey][messageKey]){
              messages[controlKey] += this.validationErrorMessages[controlKey][messageKey] + ' '
            }
          })
        }
      }
    }
  }
}
return messages;

}

* this the test code that handle the error *

 beforeEach(() => {
fixture = TestBed.createComponent(SignUpComponent);
component = fixture.componentInstance;
debugHelpblck = fixture.debugElement.queryAll(By.css('.help-block'));
component.ngOnInit();
component.ngAfterViewInit(); // this handle the error
fixture.detectChanges();

});

Sasxa Sasxa · Accepted Answer · 2017-04-01T21:16:21

Add filter(Boolean) before map(), or be more careful with your data (;

Not sure where your error appears, if this is all the code then:

let controlBlurs: Observable<any>[] = this.formInputElements
  .filter(Boolean)
  .map(...)

or

Object.keys(c.errors).filter(Boolean).map(messageKey =>{...})

should fix the error...

karma Test : TypeError: Cannot read property 'map' of undefined

1 Answers