I have been trying to mock some service calls that return observables in my Angular app, but i simply can't create a valid observable that will trigger calls like catch() or map() in my code. For example:
My service:
create(): Observable<any> {
return this.http
.post('/api/stuff', { id: 123 })
.catch(this.handleError)
.map(this.extractData);
}
My spec:
let authHttpMock = mock(AuthHttp);
when(authHttpMock.post('/api/stuff', { id: 123 })).thenReturn(Observable.create(observer => {
observer.error(new Error('500!'));
}));
const myService = new MyService(instance(authHttpMock));
myService.create({ id: 123 }).subscribe(
result => {
expect(result).toBeTruthy();
}
);
The coverage analysis tells me that the handleError method has never been executed. On the case of a successful observable, it also doesn't go through the extractData method.
Where is that observable going to? How can i return a proper observable in order to test such calls?
Somewhere in your test code I believe you need to have this code:
AuthHttp.post('/api/stuff', {id : 123 }).subscribe(data => {});
There are two ways you can achieve this.
First would be, in your service method, use the following:
create(id:number):Obserable<any> {
let url:string = 'http://localhost:3000/api/stuff';
let data:any = {
id: id
};
return this.http.post(url, JSON.stringify(data))
.map((res:Response) => res.json());
.catch((error:any) => this.handleError(error))
}
The second method would be, call use the service as follows:
create(id:number):Obserable<any> {
let url:string = 'http://localhost:3000/api/stuff';
let data:any = {
id: id
};
return this.http.post(url, JSON.stringify(data))
.map((res:Response) => res.json());
}
And when you call the service method, use this:
this._service.create(123)
.subscribe((res:any) => {
//do whatever with success
},
(error:any) => {
this.handleError(error)
});
The method you are using to extract data, this.extractData(), can be called instead of res.json() inside the service, but overall it's the same result.
Hope this helps :)
You need to create mockData first so that service can make use of it.There is 2 files below. Put your component and service name in place of COMPONENT_NAME & SERVICE_NAME respectively.
Spec File ts
describe('WalletComponent', () => {
let component: WalletManagementComponent;
let fixture: ComponentFixture<WalletManagementComponent>;
beforeEach(async(() => {
TestBed.configureTestingModule({
imports: [ReactiveFormsModule],
declarations: [COMPONENT_NAME],
schemas: [NO_ERRORS_SCHEMA],
providers: [
{provide: APP_BASE_HREF, useValue: '/'},
{provide: SERVICE_NAME, useClass: serviceMockData}
]
}).compileComponents();
}));
beforeEach(() => {
fixture = TestBed.createComponent(COMPONENT_NAME);
component = fixture.componentInstance;
fixture.detectChanges();
});
it('Should create WalletComponent', () => {
expect(component).toBeTruthy();
});
});
You need to create directory called testHelper(or any name) in root directory
serviceMockData ts
import {Observable} from 'rxjs/Observable';
const result = {
data: [
{id: 0, name: 'Temp Data 1'},
{id: 1, name: 'Temp Data 2'},
]
};
export class serviceMockData {
constructor() {
}
getWalletAudits() {
return Observable.of(result).map(res => res);
}
}