如何在Angular 2中測試* ngFor？

我是Angular的新手，並創建待辦事宜應用程序。我試圖在很多地方找到解決方案，即使是我正在測試組件的情況下也是如此。這從MongoDB中獲取數據，但我嘲笑了這些數據。
如何在Angular 2中測試* ngFor？

以下是模板的HTML（使用自舉）：

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

的下面是組件代碼（我只增加子部分）：

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; 

    }); 

}; 
}

現在我添加測試代碼（.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的對象被創建並且表現很好。

有人可以建議我哪裏錯了嗎？我遲到了三天提交這項任務。任何幫助都會很棒。

整個代碼爲github repo

另外，我沒有看到任何瀏覽器時，我只運行一次考驗。它應該在瀏覽器上顯示任務！

那麼這是否意味着* ngFor不會填充頁面上的內容一旦.compileComponents();被調用來在第一個beforeEach()內生成CSS和HTML？

來源

2017-03-03 Ashish1269

import {By} from @ angular/platform-browser'; –

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

來源

2017-03-03 03:34:53

它不適合我！有任何想法嗎？ – Luillyfe

如何在Angular 2中測試* ngFor？

回答

相關問題