Karma Jasmine 单元测试中的错误：“预期的间谍 VehicleId 已被调用”答案

【问题标题】：Error in Karma Jasmine Unit testing : "Expected spy VehicleId to have been called"Karma Jasmine 单元测试中的错误：“预期的间谍 VehicleId 已被调用”
【发布时间】：2018-06-07 20:29:36
【问题描述】：

您能帮我解决以下问题吗？我对 Angular 和单元测试相当陌生。服务没有返回承诺。

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

组件代码片段：

async getVehicleId() {
  debugger; 
  try {          
    if(this.selectedId) {
        let data: any = await this.VehicleComposer.fetchVehicleId(this.selectedID); 
        this.vehicleQuantity = data.vehicleCaseQuantity;
        this.vehicleId = data.vehicleId; 
        console.log("return service data",data);
      } 
   }
   catch (err) {
     console.log(err)
   }
}

Service Composer 代码片段：

fetchVehicleId(selectedID) {       
    let center = this.user.getCenterId();    
    let vehicleURL = this.config.getReceiveVehicleURL(selectedID.Id,selectedID.Number,center);
    return new Promise((resolve, reject) => {
        this.api.put(vehicleIdURL)
          .subscribe(
            data => {  
                this.receivingUnit = data.receivingUnitId;
                resolve(data);                   
            }, error => {
                reject({
                    error: true,
                    errorObj: error
                });
            });                             
        });        
    }

测试规范代码sn-p：

Class MockVehicleComposerService { 
  debugger;
  fetchVehicleId(){  
    console.log("---------"); 
    return Observable.of({}); 
  }
}

describe('VehicleComponent', () => {

  let comp: VehicleComponent;  
  let fixture: ComponentFixture<VehicleComponent>; 
  let mockService: MockVehicleComposerService;

  beforeEach(async(() => {

  mockService = new MockVehicleComposerService();

  TestBed.configureTestingModule({
    declarations: [VehicleComponent],
    imports: [IonicModule.forRoot(VehicleComponent)],
    providers: [{ 
        provide: ReceiveVehicleComposer, 
        useValue: MockVehicleComposerService
    }]
  })      
  .overrideComponent(VehicleComponent, {
    set: {
      template: '<div></div>',
      providers: [{
          provide: ReceiveVehicleComposer,
          useValue: MockVehicleComposerService
      }]
    }
  })
  .compileComponents();
}));


it('getVehicleId', async(() => {
  debugger;
  this.selectedID = { "Number":"123" }
  const app = fixture.componentInstance; 
  let messageSpy = spyOn(mockService, 'fetchVehicleId');
  if(this.selectedID){
    app.getVehicleId();
  }

  expect(messageSpy).toHaveBeenCalled();
}));

【问题讨论】：

你为什么要监视模拟服务方法？
我应该用什么来代替监视模拟类？我尝试了不同的方法，但仍然没有希望。你能告诉我吗？

标签： angular karma-runner ionic3 angular-promise karma-coverage

【解决方案1】：

你快到了。只是错过了您实际返回Observable 的部分。这是我过去的做法。希望这有助于您走上正轨。

it('getVehicleId', fakeAsync(() => {
  this.selectedID = { "Number":"123" }
  const app = fixture.componentInstance; 

  let messageSpy = spyOn(mockService, 'fetchVehicleId').and.returnVaue(
    Observable.of({});
  );

  if(this.selectedID){
    app.getVehicleId();
  }      

  fixture.detectChanges();

  expect(messageSpy).toHaveBeenCalled();
}));

【讨论】：