Currently I am trying to write a test that will perform the following actions:
- Load my Component
- Wait for return from a service class (HTTP Call + Observable)
- Check value returned.
Service class:
getMyInfo(): Observable<any[]> {
return this.httpClient.get(`${this.serviceurl}/all`) as Observable<any[]>;
}
Relevant component code:
ngOnInit() {
this.myService.getMyInfo().subscribe((data: any[]) => {
console.log('I was called')
this.myInfo = data;
})
}
In test class, using this method from Service will not work, the method is called, however the return is never applied in the class (Subscription).
Using a stub works, but this is not what I want, since I want to e2e.
const serviceStub = {
getMyInfo() {
return fakeAsyncResponse([{ id: 1,name: 'myname'}]);
}
};
it("should request names on component initiation.", inject([FrontendComponent, Service], async(component: FrontendComponent, service: Service) => {
let debugElement = fixture.debugElement;
let Service = debugElement.injector.get(Service);
let incrementSpy = spyOn(Service, 'getMyInfo').and.callThrough();
component.ngOnInit();
expect(incrementSpy).toHaveBeenCalled();
await fixture.whenStable();
fixture.detectChanges();
console.log(component.myInfo);
expect(component.myInfo.length).toEqual(1);
}));
To sum up, how can I handle real http calls and then process the expect assertion without stubbing the service classes?
