2016-06-16 5 views
0
Arbeits

Ich bin neu in Winkel 2, kann jemand mir bitte erklären, wie man richtig mit einer beobachtbaren innerhalb einer Komponente testen (die Asynchron-Rohr mit)Testing Komponente mit innen beobachtbaren auf Winkel 2 nicht

Die Fehler: kann nicht lesen Eigenschaft ‚next‘ undefinierten

ich denke, es ist, weil die beobachtbare nicht genug Zeit hat, die Beobachter instanziieren, so in der Methode subscribe _mockObserver

undefiniert können Sie mir helfen?

Code:

@Component({ 
    moduleId: module.id, 
    selector: 'app-list', 
    templateUrl: 'list.component.html', 
    styleUrls: ['list.component.css'] 
}) 
export class ListComponent implements OnInit { 

@Input() objects$: Observable<Object[]>; 

constructor() { 
} 

ngOnInit() { 

} 

} 


<tr *ngFor="let object of objects$ | async"> 
    <td >{{ object.id }}</td> 
    <td id="field1">{{ object.field1}}</td> 
    <td id="field2">{{ object.field2}}</td> 
    <td id="field3">{{ object.field3}}</td> 
    <td> 
    <i class="fa fa-pencil-square font-list" aria-hidden="true"></i> 
    <i class="fa fa-trash font-list" aria-hidden="true"></i> 
</td> 
</tr> 

Mein Test, die nicht arbeiten:

it('should display the object', inject([],() => { 
builder.createAsync(ListComponentTestController) 
    .then((fixture: ComponentFixture<any>) => { 
    let listCmp = fixture.componentInstance; 
    let _mockObserver: Observer<Object[]>; 

    listCmp.recipe$ = new Observable<Object[]>(observer => { 
     this._mockObserver = observer; 
    }); 

    Observable.of(MOCK) 
     .map(MOCKOBJECT => MOCKOBJECT).subscribe(data => { 
     // Push the new list of users into the Observable stream 
     this._mockObserver.next(data); 
     fixture.detectChanges(); 
     let objectElement = fixture.nativeElement; 
     expect(objectElement.querySelector('#id')).toHaveText("looooooooool"); 

     }, error => console.log('Could not load mock.')); 

    }); 

})); 

Ich habe versucht, dass:

it('Should display two list items',() => { 
     // Arrange 
     const MOCK_DATA = [{ 
      id: 10, 
      field1: 'Field 10', 
      field2: 'Field 20', 
      field3: 'Field 30', 
     }, { 
      id: 11, 
      field1: 'Field 11', 
      field2: 'Field 21', 
      field3: 'Field 31', 
     }]; 
     fixture.componentInstance.objects$ = Observable.of(MOCK_DATA); 

     // Act 
     fixture.detectChanges(); 

     // Assert 
     const element = fixture.nativeElement; 
     expect(element.getElementsByTagName('tr').length).toBe(2); 
    }); 
}); 

aber nicht wo rk entweder

Dank durch Voraus

Antwort

1

Sie auf listCmp.recipe$ nicht abonniert haben, so dass die entsprechende Funktion zur Initialisierung wird nicht aufgerufen und _mockObserver ist nicht initialisiert.

Ich möchte hinzufügen, die folgenden:

listCmp.recipe$ = new Observable<Object[]>(observer => { 
    this._mockObserver = observer; 
}); 
listCmp.recipe$.subscribe((data) => { 
}); 
+0

Aber ist nicht der Zweck der Asynchron-Rohr automatisch abonniert? – raiden0610

+0

Und ich sehe nicht, wie ich innerhalb der subscribe tun sollte, da die async-Leitung es für mich tun – raiden0610

+0

Sie sind richtig, dass Sie mit der asynchronen Pipe abonnieren Sie die Observable. – Muirik