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

Question

我有一个调用服务的组件。我试图首先创建一个测试以查看是否实际创建了组件。我正在尝试模拟服务 class 但不断出现错误。我不断收到："catch is not a function"。我已经添加了我能找到的所有可能的参考资料：

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 创建了一个模拟 class。

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 class。让 getEmploymentDetails 和所有其他方法 return 成为一个空的可观察对象。 -> return Observable.of([]);

问题是 getEmploymentDetails returns null 而 catch 确实不是 null

上的函数

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

Angular 2 - how do I mock a service being called in a component?

angular

jasmine

karma-jasmine

angular2-services