테스트 구성 요소 각 2 내가 2 각도에 ​​새로 온 사람

Question

작동하지에 누군가가 제대로 (비동기 파이프를 사용하여) 내부 관찰과

를 구성 요소를 테스트하는 방법 나에게 설명해주십시오 수 있습니다 오류는 다음과 같습니다 내가 관찰은 관찰자를 실체화 할 수있는 충분한 시간이 없기 때문에

을 정의되지 않는다 당신이 나를 도울 수 _mockObserver 방법을 구독에 그래서, 생각 '다음'정의되지 않은

의 속성을 읽을 수 없습니다?

코드 :

@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> 

작동하지 않습니다 내 시험 :

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.')); 

    }); 

})); 

내가 시도한다 :

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); 
    }); 
}); 

그러나 하시다하지 않았다 당신은 listCmp.recipe$에 가입하지 않은 사전

Answer 1

에 의해 RK 중 하나

덕분에 이렇게 대응하는 초기화 함수가 호출되지 않고 _mockObserver가 초기화되지 않습니다.

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