Angular 2で* ngForをテストするには？

Question

私はAngularを初めて使用し、To-Doアプリケーションを作成しました。私は多くの場所で解決策を見つけようとしましたTesting documentation
コンポーネントをテストしています。それはmongodbからデータを持ってきますが、私はそのデータを嘲笑しました。

テンプレートのHTMLである下記（使用してブートストラップ）：私は今

export class ShowTaskComponent extends OnInit{ 

tasks:Task[]; 

ngOnInit() { 
    setInterval(() => {this.refreshTasks()}, 3000); 
} 

constructor(private appService: AppService, private _router:Router){ 
    super(); 
    this.refreshTasks(); 
} 

refreshTasks = function() { 

    this.appService.retrieveDataFromServer().subscribe((data: any) => { 

    //this.appService.taskArray = data; 

    this.tasks = data; 

    }); 

}; 
} 

：以下

<li class="list-group-item" *ngFor="let task of tasks"> 
    <div class=" task-date">{{task.date}}</div> 
</li> 

は（私は、サブ部分を追加している）コンポーネント符号でありますテストコード（.spec.tsファイルのサブ部分）を追加しています...コードをすべて説明します（輸入品を除く）：

let comp: ShowTaskComponent; 
    let fixture: ComponentFixture<ShowTaskComponent>; 
    let service: AppService; 
    let router: Router; 

    let debugTaskTitle: DebugElement[]; 
    let taskTitles: any[]; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     declarations: [ShowTaskComponent], 
     providers: [AppService], 
     imports: [....] 
    }) 
     .compileComponents(); 
    })); 

    beforeEach(() => { 

    fixture = TestBed.createComponent(ShowTaskComponent); 
    service = fixture.debugElement.injector.get(AppService); 
    router = fixture.debugElement.injector.get(Router); 

    let dummyTasks: any[] = [ 
     { 
     "date": "12 October 2017", 
     "title": "Demo task 1", 
     "description": "Demo task 1 desc", 
     "priority" : "High", 
     "_id" : "1" 
     }, 
     { 
     "date": "1 January 2018", 
     "title": "Demo task 2", 
     "description": "Demo task 2 desc", 
     "priority" : "Low", 
     "_id" : "2" 
     } 
    ]; 

    spyOn(service, 'retrieveDataFromServer').and.returnValue(Observable.of<any[]>(dummyTasks)); 


    fixture = TestBed.createComponent(ShowTaskComponent); 
    comp = fixture.componentInstance; 
    console.log("----------------------------> comp ", comp); 

    debugTaskTitle = fixture.debugElement.queryAll(By.css('div.task-title')); 
    console.log("----------------------------> debugTaskTitle ", debugTaskTitle); 

    let counter: number = 0; 

    for(let title of debugTaskTitle) { 
     taskTitles.push(title.nativeElement); 
     taskTitles[counter].innerText = dummyTasks[counter].title; 
     counter ++; 
    } 
    }); 

    //This test fails because taskTitles is undefined! 
    it('test whether a correct test has loaded',() =>{ 

    expect(taskTitles).toBe(["Demo task 1", "Demo task 2"]); 
    }); 

debugTaskTitleに問題があります。 fixture.debugElement.queryAll(By.css())で初期化しようとすると、これは空の配列です。

私はそれをコンソールに印刷しようとしました（長い-------->矢印を見てください）空の配列です。

コンポーネントのオブジェクトcompが作成されています。

誰かが私が間違っている場所を教えていただけますか？この課題を3日後に提出するのが遅いです。どんな助けも素晴らしいでしょう。

全体のコードは、私が唯一の最初のテストを実行したときにもgithub repo

で、私はブラウザに何も表示されませんです。それはブラウザ上でタスクを表示する必要があります！

.compileComponents();が最初にbeforeEach()の範囲内でCSSとHTMLを生成するために呼び出された場合、* ngForはコンテンツをページに埋め込むことはありませんか？

Answer 1

retrieveDataFromServerはObservableを返しますので、非同期タスクが解決するのを待つ必要があります。そのためには、beforeEachを上記のようにasyncにラップすることができます。その後、それが安定するのを待つ必要があります

fixture = TestBed.createComponent(ShowTaskComponent); 
comp = fixture.componentInstance; 

fixture.whenStable().then(() => { 
    // after something in the component changes, you should detect changes 
    fixture.detectChanges(); 

    // everything else in the beforeEach needs to be done here. 
    debugTaskTitle = fixture.debugElement.queryAll(By.css('div.task-title')); 
    ... 
})