如何使用茉莉花测试对 mapbox 弹出窗口进行单元测试？

Question

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

Answer 1

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.