如何在Angular 2中测试*ngFor？

Question

我是Angular的新手并创建了To-Do Application.我试图在许多地方找到解决方案,甚至 我正在测试组件的测试文档
.这带来了来自mongodb的数据,但我已经嘲笑了这些数据.

以下是模板的HTML(使用bootstrap):

<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();被调用以在第一个内部生成CSS和HTML beforeEach()？

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