使用包含[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>

如何触发karma在ion-list中呈现ion-item

Answer 1

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

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