So I did some testing with Karma, and using MockBackend provided from '@angular/http/testing'
The shape of data returned by MockBackend is like this :
{ data: [Object1, Object2, Object3] }
however, in my real backend (Spring), I'm not adding 'data' property, so the shape of data to be like this :
[Object1, Object2, Object3]
The error will be like this :
Error: Expected Object({ data: [ Object({ cityId: 1, city: 'Lorem' }), Object({ cityId: 2, city: 'Ipsum' }), Object({ cityId: 3, city: 'Dolor' }), Object({ cityId: 4, city: 'SitAmet' }) ] }) to equal [ Object({ cityId: 1, city: 'Lorem' }), Object({ cityId: 2, city: 'Ipsum' }), Object({ cityId: 3, city: 'Dolor' }), Object({ cityId: 4, city: 'SitAmet' }) ].
How do I modify returned data from MockBackend so that it doesn't automatically add 'data' property? Or I have to switch to other mock tool?
Here is my service :
getAllCities(): Promise<City[]> {
return this.http.get(this.getCityURL + `/fetch`).toPromise()
.then(response => {
console.log('data', response.json());
return response.json() as City[];
}).catch(this.handleError);
}
Here is test unit :
import { TestBed, inject } from '@angular/core/testing';
import { BaseRequestOptions, Http, Response, ResponseOptions } from '@angular/http';
import { MockBackend } from '@angular/http/testing';
import { Observable } from 'rxjs';
import { CityService } from './city.service';
import { City } from './city';
let mockBackend: MockBackend;
let cityService: CityService;
let MockCity: City = <City>{cityId: 1, city: 'Lorem'};
let MockCity2: City = <City>{cityId: 2, city: 'Ipsum'};
let MockCity3: City = <City>{cityId: 3, city: 'Dolor'};
let MockCity4: City = <City>{cityId: 4, city: 'SitAmet'};
let MockCitiesArray: Array<City> = [ MockCity, MockCity2, MockCity3, MockCity4 ];
let setup = (httpMock) => {
TestBed.configureTestingModule({
providers: [
CityService,
MockBackend,
BaseRequestOptions,
{
provide: Http,
useFactory: (backend: MockBackend, options: BaseRequestOptions) => new httpMock(backend, options),
deps: [ MockBackend, BaseRequestOptions ]
}
]
});
inject([ MockBackend, Http ],
(mb: MockBackend, http: Http) => {
mockBackend = mb;
cityService = new CityService(http);
})();
};
describe('CityService', () => {
it('should return the cities array from the promise when getAllCities succeeds', (done) => {
setup(MockSuccessGetHeroesHttp);
spyOn(cityService, 'handleError');
cityService.getAllCities().then((heroes) => {
expect(cityService.handleError).not.toHaveBeenCalled();
expect(heroes).toEqual(MockCitiesArray);
done();
});
});
});
class MockFailedGetHeroesHttp extends Http {
constructor(backend, options) {
super(backend, options);
}
get() {
return Observable.throw('error');
}
}
class MockSuccessGetHeroesHttp extends Http {
constructor(backend, options) {
super(backend, options);
}
get() {
return Observable.from([ new Response(new ResponseOptions({body: {data: MockCitiesArray}})) ]);
}
}