Блог

Главная - Вопросы по программированию - Ожидаемый шпионский стиль переключения, который должен был быть вызван при вызове функции

Ожидаемый шпионский стиль переключения, который должен был быть вызван при вызове функции

#javascript #angular #karma-jasmine #istanbul

#javascript #угловой #карма-жасмин #istanbul

Вопрос:

Я использую тестирование 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.

Конечно, я погуглил об этой ошибке. Но я выполняю прохождение вызова и вызываю функцию.

Итак, что я должен изменить?

Спасибо

Я также использую 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>

Комментарии:

1. Я бы вообще рекомендовал не шпионить за тем, что вы должны тестировать. Проверьте поведение — где this.style используется?

2. Я обновил сообщение

3. Это похоже на то, где он установлен впервые. Где он используется — как бы вы сказали, что он был обновлен?

4. Привет, я добавил шаблон

Ответ №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();
  });
Метки: