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

Question

I have a component which calls a service. I am trying to create a test first to see if the component actually gets created. I am trying to mock the service class but keep getting errors. I keep getting: "catch is not a function". I have added every possible reference I can find:

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';

Here is my code:

from my component:

     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);
            }
        );        
    }   

My test:

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();    
  });

});

I have created a mock class for ReviewServiceMock with all the same methods.

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

You need to implement your ReviewServiceMock class. Let getEmploymentDetails and all other methods return an empty observerable. -> return Observable.of([]);

The problem is that getEmploymentDetails returns null and catch is indeed not a function on null