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

Question

我有一个地图框弹出窗口。 我正在使用茉莉花，我想为它编写一个单元测试。

所以我有这个功能：

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

这是模板：

 <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>

这是我的单元测试：

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

但我收到此错误：

Expected spy stopPropagation to have been called.

那我必须改变什么？

谢谢

Answer 1

我不认为你应该那样测试。

 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')
  });

要测试stopPropagation ，您应该专注于被它停止的事件。 如果您的测试检查事件没有发生，您可以确定event.stopPropagation(); 在代码中做它的事情。