Creating Angular 2 Mock Observable from test data (JavaScript array)

Creating Angular 2 Mock Observable from test data (JavaScript array)

Angular 2 Observables are a powerful way of handling asynchronous streaming data.
However they can be a little tricky to mock out, if for example you want to mock out a concrete ng2 service, with a mock service.  This can be useful for unit testing, where you do not want your code to hit a real web service, when running under test.

Below is a pattern for implementing a mock service, which provides an Observable based on test data.

////////////////////////////////////
//car.service.ts

...
    public getRecentCars(): Observable {
        return this.http.get(`${this.urlToSvc}`)
                    .map((res: Response) => res.json())
                    .catch((error: any) => Observable.throw(error.json().error || 'Server error'));
    }
...

////////////////////////////////////
//mock-car.service.ts

...

    private _mockData: any = [
{ name: 'bmw', age: 5 },
{ name: 'toyota', age: 2 },
{ name: 'volkswagen', age: 2 }
];

    public getRecentCars(): Observable {
        console.log('mock: getRecentCars()');

        return ObservableCreator.createFromData(
            this._mockData
        );
    }
...

////////////////////////////////////
//ObservableCreator.ts
import { Observable } from 'rxjs/Rx';

export class ObservableCreator {
    public static createFromData(data: any) {
        let observable = new Observable>((observer: any) => {
            observer.next(data);
            observer.complete();
        });
        return observable;
    }
}

/////////////////////////////////
references:

https://angular-2-training-book.rangle.io/handout/observables/using_observables.html

https://scotch.io/tutorials/angular-2-http-requests-with-observables

http://blog.angular-university.io/how-to-build-angular2-apps-using-rxjs-observable-data-services-pitfalls-to-avoid/