ionic-framework - 使用包含 [virtualScroll] 属性的 ion-list 对页面进行单元测试

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>

如何触发 karma 来渲染 ion-item在 ion-list ?

Answer 1

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

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