Angular - 订阅中的函数从未在单元测试中调用

Question

我正在尝试测试我的导航功能是否称为删除车辆。但它似乎永远不会打电话。我认为这可能与它是一个异步函数有关，但即使我等待完全订阅完成它也不起作用。

.ts:

deleteVehicle(): void {
    if (confirm('Bent u zeker dat u deze wagen wilt verwijderen?')) {
      this.apiService.deleteVehicle(this.selectedVehicle.id).subscribe(() => this.navigateToListVehicleComponent());
    }
  }

spec.ts：

beforeEach(() => {
    fixture = TestBed.createComponent(VehicleDetailsComponent);
    component = fixture.componentInstance;

    apiService = TestBed.get(ApiService);
    fixture.detectChanges();
});
describe('#deleteVehicle', () => {
    it('should navigate to list vehicle component', fakeAsync(() => {
      spyOn(window, 'confirm').and.returnValue(true);
      spy = spyOn(apiService, 'deleteVehicle').withArgs(component.selectedVehicle.id).and.callThrough();
      let navigateSpy = spyOn(component,'navigateToListVehicleComponent').and.callThrough();

      component.deleteVehicle();
      tick();
      expect(spy).toHaveBeenCalled();
      expect(navigateSpy).toHaveBeenCalled();
    }));
  });

service.ts:

private deleteFromAPI(url): any {
    return this.http
    .delete(this.BASE_API_URL + url)
    .pipe(catchError(this.handleError));
}
deleteVehicle(id: number): any {
    return this.deleteFromAPI('vehicle/' + id);
}

并在我的测试平台中导入 HttpClientTestingModule。

错误： 预期的间谍 navigateToListVehicleComponent 已被调用。

有人知道我做错了什么吗？

Answer 1

我的测试策略是将apiService.deleteVehicle 方法存根，这样它就不会产生副作用（通过网络发送真正的HTTP 请求）。

使用angular v11+的单元测试解决方案：

example.component.ts:

import { Component } from '@angular/core';
import { ApiService } from './api.service';

@Component({})
export class ExampleComponent {
  selectedVehicle = {
    id: 1,
  };
  constructor(private apiService: ApiService) {}
  navigateToListVehicleComponent() {
    console.log('navigateToListVehicleComponent real implementation');
  }

  deleteVehicle(): void {
    if (confirm('Bent u zeker dat u deze wagen wilt verwijderen?')) {
      this.apiService
        .deleteVehicle(this.selectedVehicle.id)
        .subscribe(() => this.navigateToListVehicleComponent());
    }
  }
}

api.service.ts:

import { HttpClient } from '@angular/common/http';
import { Injectable } from '@angular/core';
import { of } from 'rxjs';
import { catchError } from 'rxjs/operators';

@Injectable()
export class ApiService {
  BASE_API_URL = 'http://localhost';
  constructor(private http: HttpClient) {}

  private deleteFromAPI(url): any {
    return this.http
      .delete(this.BASE_API_URL + url)
      .pipe(catchError(this.handleError));
  }
  private handleError(err) {
    return of(err);
  }
  deleteVehicle(id: number): any {
    return this.deleteFromAPI('vehicle/' + id);
  }
}

example.component.spec.ts:

import { HttpClient, HttpClientModule } from '@angular/common/http';
import { ComponentFixture, TestBed, waitForAsync } from '@angular/core/testing';
import { of } from 'rxjs';
import { ApiService } from './api.service';
import { ExampleComponent } from './example.component';

fdescribe('#deleteVehicle', () => {
  let apiService: ApiService;
  let fixture: ComponentFixture<ExampleComponent>;
  let component: ExampleComponent;

  beforeEach(
    waitForAsync(() => {
      TestBed.configureTestingModule({
        declarations: [ExampleComponent],
        imports: [HttpClientModule],
        providers: [ApiService, HttpClient],
      })
        .compileComponents()
        .then(() => {
          fixture = TestBed.createComponent(ExampleComponent);
          apiService = TestBed.get(ApiService);
          component = fixture.componentInstance;
          fixture.detectChanges();
        });
    })
  );
  it('should navigate to list vehicle component', () => {
    const confirmSpy = spyOn(window, 'confirm').and.returnValue(true);
    const deleteVehicleSpy = spyOn(apiService, 'deleteVehicle')
      .withArgs(component.selectedVehicle.id)
      .and.returnValue(of('deleteVehicle fake implementation'));

    let navigateSpy = spyOn(
      component,
      'navigateToListVehicleComponent'
    ).and.stub();

    component.deleteVehicle();

    expect(confirmSpy).toHaveBeenCalledOnceWith(
      'Bent u zeker dat u deze wagen wilt verwijderen?'
    );
    expect(deleteVehicleSpy).toHaveBeenCalledOnceWith(1);
    expect(navigateSpy).toHaveBeenCalled();
  });
});

单元测试结果：