Skip to content
Advertisement

How to unit test a mapbox popup with jasmine testing?

I have a mapbox popup. I am using jasmine and I want to write a unit test for it.

So I have this function:

  selectCluster(event: MouseEvent, feature: any) {
    event.stopPropagation(); 
    this.selectedCluster = {geometry: feature.geometry, properties: feature.properties};
  }

and this is the template:

 <ng-template mglClusterPoint let-feature>
        <div class="marker-cluster" (click)="selectCluster($event, feature)">
          <fa-icon [icon]="faVideo" [styles]="{'stroke': 'black', 'color': 'black'}" size="lg" class="pr-2"></fa-icon>
          <fa-icon [icon]="faWifi" [styles]="{'stroke': 'black', 'color': 'black'}" size="lg" class="pr-2"></fa-icon>
        </div>
      </ng-template>

and this is my unit test:

 fit('Should prevent popup will be closing after popup is triggered', () => {
    const ev = new Event('MouseEvent');
    spyOn(ev, 'stopPropagation');   
    expect(ev.stopPropagation).toHaveBeenCalled();
  });

But I get this error:

Expected spy stopPropagation to have been called.

So what I have to change?

Thank you

Advertisement

Answer

I dont think you should be testing like that.

 it('Should set selectedCluster when clicked', () => {
    spyOn(component,'selectCluster').and.callThrough();
    fixture.debugElement.query(By.css('.marker-cluster')).nativeElement.click();
    fixture.detectChanges();
    expect(component.selectCluster).toHaveBeenCalled();
    expect(component.selectedCluster).toBe('whatever you are expecting')
  });

To test stopPropagation, you should rather focus on the event which is being stopped by it. If your test checks that the event is not happening, you can be sure that event.stopPropagation(); is doing its thing in the code.

User contributions licensed under: CC BY-SA
4 People found this is helpful
Advertisement