Unit Testing Angular Observable

Say that you created a service that essentially wraps Angular’s HttpClient calls:

	import { Injectable } from '@angular/core';
	import { HttpClient } from '@angular/common/http';
	import { Observable } from 'rxjs/Observable';
	@Injectible()
	export class MyService {
	public constructor(private _http: HttpClient) {
	}
	public GetValue(id: number): Observable<string> {
	return this._http.get<string>(`/API/MyService/${id}`);
	}
	}

view raw my.service.ts hosted with by GitHub

And say that you called that in a component:

	import { Component } from '@angular/core';
	import { MyService } from './my.service';
	@Component({
	selector: 'app-my-component',
	template: `<div>{{myValue}}</div>`
	})
	export class MyComponent {
	public myValue: string;
	constructor(private _myService: MyService) {
	myValue = '';
	}
	public Get(value: number) {
	this._myService.GetValue(value).subscribe((result) => {
	this.myValue = result;
	});
	}
	}

view raw my.component.ts hosted with by GitHub

And now you want to test the Get function to make sure that myValue is set to the value returned by the service.  If you try to create a spy on the function in MyService, you’ll find that the code is executed properly – that is, the value is set (you can put logging statements around and see it working), but any expect assertions you do will fail.  This is because the Observable is asynchronous, but your test is synchronous.  Here’s the working spec file, but I’ll go into more detail below.

	import { async, ComponentFixture, TestBed } from '@angular/core/testing';
	import { HttpClientTestingModule, HttpTestingController } from '@angular/common/http/testing';
	import { MyComponent } from './my.component';
	import { MyService } from './my.service';
	import { Observable } from 'rxjs/Observable';
	import 'rxjs/add/observable/of';
	describe('MyComponent', () => {
	let component = MyComponent;
	let fixture = ComponentFixture<MyComponent>;
	let service = MyService;
	beforeEach(async(() => {
	TestBed.configureTestingModule({
	declarations: [ MyComponent ],
	imports: [ HttpClientTestingModule ],
	providers: [ MyService ]
	})
	.compileComponents();
	}));
	beforeEach(() => {
	fixture = TestBed.createComponent(MyComponent);
	service = TestBed.get(MyService);
	component = fixture.componentInstance;
	fixture.detectChanges();
	});
	it('should populate myValue', async () => {
	const expected = 'expectedValue';
	spyOn(service, 'Get').and.returnValue(Observable.of(expected));
	component.Get(1);
	fixture.whenStable().then(() => {
	expect(component.myValue).toBe(expected);
	});
	});
	});

view raw my.component.spec.ts hosted with by GitHub

The first key is to make the test function async.  This is so Jasmine knows that the function contains callbacks.

Next, include Observable and ‘rxjs/add/observable/of’.  (Note that you need the ‘rxjs/add/observable/of’ to get the .of() function on your Observable).  This will let you create an Observable (which is returned by your service) to spy on.  Create the spy on the function using spyOn, which will replace the contents of the function with something else (namely returning Observable.of()), but also allow you to watch and assert on that function.

Finally, wrap your assertions in
fixture.whenStable().then(() => {
});
This signals Jasmine that there is something that is in a callback, and the test runner will wait until all of the callbacks have been received before ending the test.