Angular 2 - 如何模拟组件中调用的服务？

Question

我有一个调用服务的组件。我正在尝试首先创建一个测试，以查看组件是否实际创建。我试图嘲笑服务类，但不断收到错误。我不断收到：“抓住不是一个功能”。我已经添加了每一个可能的参考，我可以找到：

import 'rxjs/add/observable/throw'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 
import { Injectable } from '@angular/core'; 
import { Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

这里是我的代码：

从我的组件：

 ngOnInit():void{ 

      this.bindCustomerId();  
      this.bindEmploymentDetails();  
     } 

private bindEmploymentDetails(){ 

     this.reviewService.getEmploymentDetails(this.reviewId) 
     .catch(this.handleError) 
     .subscribe(
      (employmentDetails: EmploymentInfo[]) => 
      {    

       this.employmentDetails = employmentDetails;  
       this.bindEmploymentDetailsVisibility(this.employmentDetails); 
      } 
     );   
    } 

我的测试：

describe('EmploymentDetailsComponent',() => { 

    let component: EmploymentDetailsComponent; 
    let fixture: ComponentFixture<EmploymentDetailsComponent>; 
    let config: Route[] = []; 

    beforeEach(async(() => { 
    TestBed.configureTestingModule({ 
     imports: [ 
      EmploymentDetailsModule, 
      RouterTestingModule.withRoutes(config), 
      FormsModule, 
      BrowserModule, 
      HttpModule, 
     ], 
     declarations: [ ], 
     providers:[ 
      { 
       provide:CustomerService, 
       useClass: mockCustomerService 
      }, 
      { 
       provide: ReviewService, 
       useClass: ReviewServiceMock 
      }, 
      { 
       provide: LookUpService, 
       useClass: mockCustomerService 
      }   
     ] 
    }) 
    .compileComponents(); 
    })); 

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

    }); 

    it('should create',() => { 

    expect(component).toBeTruthy();  
    }); 

}); 

我创建使用所有相同的方法为ReviewServiceMock创建一个模拟类。

import 'rxjs/add/observable/throw'; 
import 'rxjs/add/operator/catch'; 
import 'rxjs/add/operator/map'; 

import { Injectable } from '@angular/core'; 
import { Response } from '@angular/http'; 
import { Observable } from 'rxjs/Observable'; 

@Injectable() 
export class ReviewServiceMock implements IReviewService{ 

private apiUrl: string;    



public createNewReview(customerId: number): Observable<ReviewResponse>{ 

    return null; 
} 

public getPersonalInfo(reviewId: number): Observable<PersonalInfo[]>{ 

    return null; 
} 

public getPersonalInfoForSingleCustomer(reviewId: number, customerId: number): Observable<PersonalInfo>{ 

    return null; 
} 

public getContactInfo(reviewId: number) : Observable<ContactInformation[]>{ 

    return null; 
} 

public getContactInfoForSingleCustomer(reviewId: number, customerId : number) : Observable<ContactInformation>{ 

    return null; 
} 

public saveContactInfo(contactInfo: ContactInformation, customerId : number, reviewId: number): Observable<any>{ 

    return null; 
} 

public savePersonalInfo(personalInfo: PersonalInfo, customerId : number, reviewId: number){ 

    return null; 
} 


public getEmploymentDetails(reviewId : number):Observable<EmploymentInfo[]> { 

    var mm = JSON.parse(
      `[ 
{ 
    "CustomerId": 1, 
    "EmployerName": "TMG", 
    "EmployerAddress": "Mosley road", 
    "EmploymentStartDate": "2016-12-28T13:49:36.317Z", 
    "EmploymentType": { 
    "Id": 1, 
    "Description": "Programmer" 
    }, 
    "OccupationType": { 
    "Id": 0, 
    "Description": "string" 
    }, 
    "JobTitle": { 
    "Id": 0, 
    "Description": "string" 
    }, 
    "EstimatedMonthlyIncome": 0, 
    "CustomerPayingNationalInsurance": true, 
    "CustomerWorkingOver16HoursAWeek": true, 
    "AffectedByInsolvency": true 
} 
]`  ); 


} 

public getEmploymentDetailsForSingleCustomer(reviewId : number, customerId : number):Observable<EmploymentInfo>{ 

    return null; 
} 

public saveEmploymentDetails(employmentDetails: EmploymentInfo, reviewId: number){ 

    return null; 
} 

public confirmEmploymentDetails(reviewId: number, customerId: number){   

    return null; 
} 

public saveCustomerDependant(customerDependant:CustomerDependant, reviewId:number){ 
    return null; 

} 

public getCustomerDependant(reviewId: number, dependantId:number){ 
    return null; 
} 

public getAllDependants(reviewId: number){ 
    return null; 
} 

public catch() 
{ 

} 

public deleteDependant(reviewId: number, dependantId:number){ 
    return null; 
} 

public getHomeOwnerAndTenantInfoForReview(reviewId: number){ 
    return null; 
} 

public saveHousingInfoMultipleCustomer(reviewId:number,housingInfo:any){ 
    return null; 
} 

public getCurrentReview(customerId: number): Observable<ReviewResponse>{ 
    return null; 
} 

}

Answer 1

你需要实现你的ReviewServiceMock类。让getEmploymentDetails和所有其他方法返回一个空的可观察性。 - >return Observable.of([]);

的问题是，getEmploymentDetails返回null，catch确实不是空值的函数