调用函数时，预期 spy toggleStyle 已被调用答案

【问题标题】：Expected spy toggleStyle to have been called, when calling function调用函数时，预期 spy toggleStyle 已被调用
【发布时间】：2021-03-06 06:36:57
【问题描述】：

我正在使用 jasmine 测试。

我有这个功能：

 style: string;
 toggleStyle(style: string, version: string) {
    this.style = `mapbox://styles/mapbox/${style}-${version}`;
  }

和模板：

 <div class="map-menu-item" (click)="toggleStyle('outdoors', 'v11')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faMountain" size="sm" class="pr-2"></fa-icon>Outdoors
        </span>
      </div>

所以我有这个单元测试功能：

 fit('Should mapbox style when user click on icon', () => {
    spyOn(component, 'toggleStyle').and.callThrough();
    fixture.debugElement.query(By.css('.map-menu-item')).nativeElement.click();
    fixture.detectChanges();
    expect(component.toggleStyle).toHaveBeenCalled();
  });

所以我调用了这个函数：toggleStyle

但我仍然收到此错误：

Expected spy toggleStyle to have been called.

当然，我用谷歌搜索了这个错误。但是我做了一个 callThrough 并调用了这个函数。

那么我必须改变什么？

谢谢

我在这里也使用 this.style：

async ngOnInit() {
    this.style = `mapbox://styles/mapbox/light-v10`;
    const earthquakes: GeoJSON.FeatureCollection = <any>await import('./amsterdam.geo.json');
    this.earthquakes = {...earthquakes};
  }

这里是用的：

<mgl-map [style]="style" [zoom]="[9]" [center]="[4.899, 52.372]">
  <mgl-control position="top-left">
    <div class="d-flex flex-column justify-content-start map-menu">
      <span class="map-menu-header">Sensor</span>
      <div class="map-menu-item" (click)="toggleLayer('amsterdam')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faVideo" size="sm" class="pr-2"></fa-icon>CityHeat
        </span>
      </div>
      <div class="map-menu-item" (click)="toggleLayer('earthquakes')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faWifi" size="sm" class="pr-2"></fa-icon>Wi-Fi
        </span>
      </div>
    </div>
    <div class="d-flex flex-column justify-content-start map-menu">
      <span class="map-menu-header">Layer</span>
      <div class="map-menu-item" (click)="toggleStyle('light', 'v10')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faAdjust" size="sm" flip="horizontal" class="pr-2"></fa-icon>Light
        </span>
      </div>     
      <div class="map-menu-item" (click)="toggleStyle('outdoors', 'v11')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faMountain" size="sm" class="pr-2"></fa-icon>Outdoors
        </span>
      </div>
      <div class="map-menu-item" (click)="toggleStyle('satellite', 'v9')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faSatellite" size="sm" class="pr-2"></fa-icon>Satellite
        </span>
      </div>
    </div>
  </mgl-control>
  
</mgl-map>

【问题讨论】：

我一般建议不要监视你应该测试的东西。测试行为 - this.style 在哪里使用？
我更新了帖子
这看起来像它的第一次设置。它在哪里使用过 - 你怎么知道它已经更新了？
嗨，我添加了模板

标签： javascript angular karma-jasmine istanbul

【解决方案1】：

选择器选择它匹配的第一个元素，所以你的选择器匹配这个元素：

<div class="map-menu-item" (click)="toggleLayer('amsterdam')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faVideo" size="sm" class="pr-2"></fa-icon>CityHeat
        </span>
      </div>

点击处理程序在哪里调用toggleLayer。

将您的 HTML 更改为更具体：

<div class="d-flex flex-column justify-content-start map-menu somethingMoreSpecific">
      <span class="map-menu-header">Layer</span>
      <div class="map-menu-item" (click)="toggleStyle('light', 'v10')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faAdjust" size="sm" flip="horizontal" class="pr-2"></fa-icon>Light
        </span>
      </div>     
      <div class="map-menu-item" (click)="toggleStyle('outdoors', 'v11')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faMountain" size="sm" class="pr-2"></fa-icon>Outdoors
        </span>
      </div>
      <div class="map-menu-item" (click)="toggleStyle('satellite', 'v9')" [state]="[true]" menuItemToggle>
        <span>
          <fa-icon [icon]="faSatellite" size="sm" class="pr-2"></fa-icon>Satellite
        </span>
      </div>
    </div>

fit('Should mapbox style when user click on icon', () => {
    spyOn(component, 'toggleStyle').and.callThrough();
    fixture.debugElement.query(By.css('.somethingMoreSpecific .map-menu-item')).nativeElement.click(); // change the selector to select the correct div
    fixture.detectChanges();
    expect(component.toggleStyle).toHaveBeenCalled();
  });

【讨论】：