testing component when a service injected angular2.0

Question

I am using angular2.0 for my application

I am trying to write test cases for a component where a service is injected

//component.ts

import { Component, OnInit } from '@angular/core';
import { FPService } from './shared/services/forgot-password.service';
import { CookieService } from 'angular2-cookie/core';

@Component({
  // moduleId: module.id,
  selector: 'app-fp',
  templateUrl: 'fp.component.html',
  styleUrls: ['fp.component.css'],
  providers: [FPService]

})
export class FPComponent implements OnInit {

  constructor(
    private cookie: CookieService,
    private fpService: FPService
  ) { }

  ngOnInit() {

  }
  fnRequest(email) {

    var oData = { "email": email };
    this.fpService.fnFPServie(oData)
      .subscribe(
      data => {
        console.log('success', data);

      },
      error => {
        console.log('error', error);

      }
      );
  }

}

my spec.ts

import { FPComponent } from './forgot-password.component';


import { FPService } from './shared/services/forgot-password.service';
import { CookieService } from 'angular2-cookie/core';


class mockFPService {
    fnFPServie(data) {
        return {}
    }
}

class mockCookieService {
    getObject(name: string) {
        return true;
    }
}


let comp: FPComponent;
let fixture: ComponentFixture<FPComponent>;
describe('Component: FPComponent', () => {
    beforeEach(() => {
        TestBed.configureTestingModule({

            declarations: [FPComponent],
            providers: [

                { provide: FPService, useClass: mockFPService },
                { provide: CookieService, useClass: mockCookieService },


            ]
        });

        fixture = TestBed.createComponent(FPComponent);
        comp = fixture.componentInstance;

    });

    it('should have  method fnRequest', () => {
        expect(comp.fnRequest('adfa@fhf.fth')).toBeTruthy;
    });

    it('should sent data to fnFpService() of FpService', () => {

        comp.fnRequest('asd@gmail.com');

        **************************************************
        how do inject the Fpservice and call fnFPServie ?
       ********************************************************


    });


});

It would be helpfull if anybody suggest how to mock injected Fpservice to test fnRequest() function

Thanks in advance

score 0 · Answer 1 · answered Sep 30 '16 at 09:53

It's not enough to just add a fnFPServie method. The caller then subscribes to the returned observable, calling subscribe. How you can mock this is to just do something like

class MockFPService {
  error;
  data;
  fnFPServie(data) {
    return this;
  }

  subscribe(next, err) {
    if (next && !error) {
      next(this.data)
    }
    if (err && this.error) {
      err(this.error);
    }
  }
}

Here, you are just returning the service itself, which has it's own mock subscribe method. When some call's subscribe, they pass in the success and error callback functions, and you just call the callback passing in the appropriate response.

You can also configure the mock during the test, either with data, or with an error. So you can test both outcomes separately.

let mockFPService: MockFPService;

beforeEach(() => {
  mockFPService = new MockFPService ();
  TestBed.configureTestingModule({
    providers: [
      { provide: MockFPService, useValue: mockFPService }
    ]
  })
}) 

it('..', () => {
  mockFPService.data = 'some data'; 
})

it('..', () => {
  mockFPService.error = 'some error';
})

testing component when a service injected angular2.0

1 Answers1