karma jasmine - QueryList.changes.subscribe() does not get triggered in Angular unit test

Question

I want to generate some containers for popups based on how many items received. The component is working as expected in dev and prod, but it is not working in the unit test, because the querylist.changes never emit. I have to call querylist.notifyChanges() as a workaround. The mapRef is an Openlayers map instance

HTML template:

<ng-container *ngFor="let id of currentDivs">
        <div class="popup" #popupContainer [id]="id"></div>
</ng-container>

Component:

   @ViewChildren("popupContainer", { read: ElementRef })
   popupContainers: QueryList<ElementRef<HTMLElement>>;

   ngOnInit(): void {
   //init map and other stuff...
    init();
   }
   ngAfterViewInit(): void {
     this.popupContainers.changes.subscribe(
                (containers: QueryList<ElementRef>) => {
                    this._mapRef.getOverlays().clear();
                    containers.forEach((container) => {
                        //create overlay container for popup
                        const id = container.nativeElement.id;
                        if (!this._mapRef.getOverlayById(id)) {
                            const overlay = new Overlay({
                                id,
                                element: container.nativeElement,
                                autoPan: false,
                            });
                            this._mapRef.addOverlay(overlay);
                        }
                    });
                }
            );
  }

  init(): void {
  
   bService.getItems().subscribe((items) => {
    this.ngZone.runOutsideAngular(() => {
     divs = items.map((item) =>item.id);
     this.ngZone.run(() => {
       this.currentDivs = divs;
       this.cdr.detectChanges();
    });
   });
  });
 }
  

Test code:

 beforeEach((done) => {
            aServiceSpy.getInfo.and.returnValue(of(infos));
            bServiceSpy.getItems.and.returnValue(of(items));
            fixture.detectChanges();

            component.mapRef.once("rendercomplete", () => {
                //I have to call notifyChanges() as a workaround 
                //component.popupContainers.notifyChanges() 
                done();
      });
  it("should populate popup",() => {
      console.log(component.popupContainers) 
      // it actually has length == items.length,
      //but component.popupContainers.changes in the actual code never emit
  })
 });

question from:https://stackoverflow.com/questions/65948286/querylist-changes-subscribe-does-not-get-triggered-in-angular-unit-test

Answer 1

Waitting for answers