Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)
Waitting for answers

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...