Testen - Stubbing Service-Methode ist undefined

Question

Ich habe einen sehr einfachen Test auf einen sehr einfachen Code geschrieben, aber aus irgendeinem Grund Stub Service-Methode ist undefiniert. Wenn ich Jasmine Spy benutze, funktioniert es aber für so eine einfache Aufgabe. könnte jemand bitte erklären, warum das passiert ist (i Import-Anweisungen entfernt haben nur Code zu reduzieren):

businessarea-overview.component

@Component({ 
    templateUrl: './businessarea-overview.component.html', 
    styleUrls: ['./businessarea-overview.component.css'] 
}) 
export class BusinessAreaOverviewComponent implements OnInit { 
    businessArea: BusinessArea; 
    businessAreaId: number; 
    errorMessage: string; 

    constructor(private businessAreaService: BusinessAreaService, private utilityService: UtilityService, private route: ActivatedRoute) { 
    this.businessArea = new BusinessArea(); 
    this.route.params.subscribe(params => { 
     this.businessAreaId = +params['id']; 
    }); 
    } 

    ngOnInit() { 
    if (!isNaN(this.businessAreaId)) { 
     this.businessAreaService.getBusinessAreaById(this.businessAreaId) 
     .subscribe(data => { 
      this.businessArea = data; 
     }, 
     error => this.errorMessage = error); 
    } 
    } 
} 

businessarea-overview.spec.ts

describe('BusinessareaOverviewComponent',() => { 
    let component: BusinessAreaOverviewComponent; 
    let fixture: ComponentFixture<BusinessAreaOverviewComponent>; 

    beforeEach(async(() => { 
    const authServiceSpy = jasmine.createSpyObj("AuthService", ["authenticateUser"]); 
    authServiceSpy.authenticateUser.and.callFake(() => { return Observable.from([true]); }); 

    //const businessAreaServiceSpy = jasmine.createSpyObj("BusinessAreaService", ["getBusinessAreaById"]); 
    //businessAreaServiceSpy.getBusinessAreaById.and.callFake(() => { return Observable.of(new BusinessArea()); }); 

     TestBed.configureTestingModule({ 
      declarations: [ 
       BusinessAreaOverviewComponent 
      ], 
      imports: [ 
       GrowlModule, 
       FormsModule, 
       RadioButtonModule, 
       AutoCompleteModule, 
       DataTableModule, 
       MessagesModule 
      ], 
      providers: [ 
       { provide: Http, useValue: httpServiceStub }, 
       { provide: AuthService, useValue: authServiceSpy }, 
       { provide: UtilityService, useValue: utilityServiceStub }, 
       { provide: ActivatedRoute, useValue: { params: Observable.of({id: 123})} }, 
       { provide: BusinessAreaService, useValue: businessAreaServiceStub } 
      ] 
     }).compileComponents(); 

     fixture = TestBed.createComponent(BusinessAreaOverviewComponent); 
     component = fixture.debugElement.componentInstance; 
    })); 

    it('should create the component',() => { 
     var businessAreaService = fixture.debugElement.injector.get(BusinessAreaService); 
     console.log(businessAreaService); 
     fixture.detectChanges(); 
     expect(component).toBeTruthy(); 
    }); 
}); 

export class httpServiceStub { 
} 

export class utilityServiceStub { 
    navigateTo(path: string, id: number, urlSegment){ } 
} 

export class businessAreaServiceStub{ 
    getBusinessAreaById(id: number): Observable<BusinessArea> { 
     return Observable.of(new BusinessArea()); 
    } 
} 

export class routerServiceStub { 
} 

in Testklasse die kommentierten Zeilen ist die Lösung. wenn ich console.log tun kann ich eindeutig die Stub-Service sehen injiziert wird, wenn

this.businessAreaService.getBusinessAreaById 

in OnInit Methode aufrufen aber getBusinessAreaById ist nicht definiert und nicht da.

ich unten Fehlermeldung erhalten

TypeError: this.businessAreaService.getBusinessAreaById is not a function

Ich weiß, es mit zu tun hat diese aber kann nicht meinen Kopf um, warum dies geschieht.

business-area.service.ts 

@Injectable() 
export class BusinessAreaService { 

    constructor(private http: Http) { 

    } 

    saveBusinessArea(businessArea: BusinessArea): Observable<any> { 
     let body = JSON.stringify(businessArea); 
     let headers = new Headers(AppSettings.jsonContentTypeObject); 
     let options = new RequestOptions({ headers: headers }); 

     if (businessArea && businessArea.id > 0) 
      return this.updateBusinessArea(businessArea.id, body, options); 

     return this.addBusinessArea(body, options); 
    } 

    private addBusinessArea(body: Object, options: Object): Observable<BusinessArea> { 
     return this.http.post(AppSettings.businessAreaEndPoint, body, options) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

    private updateBusinessArea(id: number, body: Object, options: Object): Observable<BusinessArea> { 
     return this.http.put(AppSettings.businessAreaEndPoint + id, body, options) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

    getBusinessAreaById(id: number): Observable<BusinessArea> { 
     return this.http.get(AppSettings.businessAreaEndPoint + id) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

    getAllBusinessAreas(): Observable<BusinessArea[]> { 
     return this.http.get(AppSettings.businessAreaEndPoint) 
      .map(this.extractData) 
      .catch(this.handleError); 
    } 

    private extractData(response: Response) { 
     let body = response.json().items || response.json(); 
     return body || {}; 
    } 

    private handleError(error: Response) { 
     console.log(error); 
     return Observable.throw(error || "500 internal server error"); 
    } 
} 

Answer 1

Änderung { provide: BusinessAreaService, useValue: businessAreaServiceStub } zu { provide: BusinessAreaService, useClass: businessAreaServiceStub }