Unit test page with ion list containing attribute [virtualScroll]

Question

I am wondering how to make sure that it ion-listdisplays the correct content.

ion-list as follows:

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

unit test:

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

It is output:

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

How to cause karma to render ion-itemin ion-list?

Answer 1

You manually sent an update event in the test:

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