Unit testing the virtual scroll

I want to unit test the virtual scroll please suggest the way to test this scenario I have the component.html

<virtual-scroll [items]="items" (update)="viewPortItems = $event">
    <list-item *ngFor="let item of viewPortItems" [item]="item">
        <div>{item.name}</div>
   </list-item>
</virtual-scroll>

in my spec file i’m trying to test the debug element of virtual-scroll to check the childnodes to the length of mock data. but the child nodes doesn’t have the <div/> element inside the <list-item/>

let ListItemElement = riskfixture.debugElement.query(By.css('list-item'));
expect(mdlListItemElement.childNodes.length).toBe(mockData.length);

when i log the ListItemElement i see below

<virtual-scroll _ngcontent-c3="">
   <list-item _ngcontent-c3="">
     <!--bindings={}-->
   </list-item>
   <router-outlet _ngcontent-c3=""></router-outlet>
 </virtual-scroll>

Please help how can i achieve the unittesting

[alexanto]

For me the solution was to manually emit the update event in the test:

const virtualScrollComponent = fixture.debugElement.query(By.directive(VirtualScrollComponent)).componentInstance;
component.items$.subscribe(items => {
     virtualScrollComponent.update.emit(items);
});

[ataraciuk]

If this helps anyone, I ended up just creating a fake component.

Do not import the VirtualScrollerModule into the test, instead, just define a component like this:

@Component({
  selector: 'virtual-scroller',
  template: '<ng-content></ng-content>'
})
export class FakeVirtualScrollerComponent implements OnInit {
  @Input() items: any[];

  viewPortItems;

  ngOnInit(): void {
    this.viewPortItems = this.items;
  }
}

And add it as a declaration on

TestBed.configureTestingModule({
      declarations: [