单元测试具有包含[virtualScroll]属性的离子列表的页面

Question

我想知道如何确保ion-list显示正确的内容.

该ion-list如下所示:

<ion-list [virtualScroll]="list" [approxItemHeight]="'132px'">
  <ion-item *virtualItem="let item">
    <span item-start>{{item.foo}}</span>
  </ion-item>
</ion-list>

单元测试:

it('should display the correct content', () => {
  comp.list = [ { foo: 'bar' } ];
  fixture.detectChanges();

  de = fixture.debugElement.query(By.css('ion-content'));
  el = de.nativeElement;

  console.log(el);
});

这输出:

<ion-list class="list list-md virtual-loading" ng-reflect-virtual-scroll="[object Object],[object Object" ng-reflect-approx-item-height="132px">
    <!---->
</ion-list>

如何触发因果报应来呈现ion-item的ion-list？

Answer 1

您已在测试中手动发出更新事件：

const virtualScrollComponent = fixture.debugElement.query(By.directive(VirtualScrollComponent)).componentInstance;
virtualScrollComponent.update.emit(list);