Angular 2 Observable Service Integration Test

Question

I would like to create an integration test and hit my actual service (not a mock). How would I do that in Angular 2?

Here is what I have for my observable service:

import { Injectable } from '@angular/core';
import { Http, Response, RequestOptions, Headers } from '@angular/http';

import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/do';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

import { UserDetail } from '../models/user-detail.model';

export class GetUserDetailService {
  private _userDetailUrl : string = 'http://ourserver/api/GetCurrentUserDetail';

  constructor(private _http: Http) { }

  getUserDetail(): Observable<UserDetail> {
        return this._http.get(this._userDetailUrl)
        .map((response: Response) => <UserDetail> response.json())
        .do(data => console.log('All: ' +  JSON.stringify(data)))
        .catch(this.handleError);
  }

  private handleError(error: Response) {
      console.error(error);
      return Observable.throw(error.json().error || 'Server error');
  }
}

How to I ensure that an object is returned from the service?

// Third party imports
import { Observable } from 'rxjs/Observable';
import { HttpModule } from '@angular/http';

// Our imports
import { GetUserDetailService } from './get-user-detail.service';
import { UserDetail } from '../models/user-detail.model';

describe('GetUserDetailService', () => {

  beforeEach(() => {
    // What do I put here?
  });

  it('should get the user detail', () => {
    // What do I put here?
  });
});

you want to check the value returned from the service or the value binded to component's variable? — Aravind, Apr 27 '17 at 17:17
It would be nice to do something like let response = callTheService; and then do something like expect(response).toBeDefined(); and also expect(response.UserId).toBeDefined(); — Greg Finzer, Apr 27 '17 at 17:35
Do you want to test the actual service with a mock of the Http service? or do you want to test the service with absolutely no mocks (meaning that your api will have to be available when you run your tests)? You can mock only the Http service, to provide fake answers looking like your API answers, and observe your service's reactions when you have this or that response from the API. — Supamiu, May 04 '17 at 12:36
I am testing the actual Http service, not a mock (an integration test). — Greg Finzer, May 04 '17 at 14:06

score 3 · Accepted Answer · edited May 23 '17 at 12:34

As shown in this example, a way to do XHR integration tests in Angular is to just use HttpModule without MockBackend:

describe('GetUserDetailService', () => {
  beforeEach(() => {
    TestBed.configureTestingModule({
      provide: [GetUserDetailService],
      imports: [HttpModule]
    });
  });

  it('should get user detail', async(inject([Http, GetUserDetailService], (http, svc) => {
    spyOn(http, 'get').and.callThrough();

    svc.getUserDetail().subscribe(
      (userDetail: UserDetail) => {
        expect(userDetail).toEqual(...);
      }
    );

    expect(http.get).toHaveBeenCalledWith(...);
  })));

  it('shouldnot get user detail', async(inject([Http, GetUserDetailService], (http, svc) => {
    spyOn(http, 'get').and.callThrough();
    spyOn(svc, 'handleError').and.callThrough();
    svc._userDetailUrl = 'wrong url';

    svc.getUserDetail().subscribe(
      (userDetail: UserDetail) => { throw new Error('should fail') },
      (error) => {
        expect(svc.handleError).toHaveBeenCalledWith(...);
        expect(error).toEqual(...);
      }
    );

    expect(http.get).toHaveBeenCalledWith('wrong url');
  })));
});

fakeAsync helper can't be used in really asynchronous test (there should be be an error if is used), so it is async.

The first test fails automatically if there was an error in observable, so it doesn't have to be caught in subscribe.

I could not get it to compile. I will get you the error later today. — Greg Finzer, May 08 '17 at 19:32

Angular 2 Observable Service Integration Test

1 Answers1