He intentado simular algunas llamadas de servicio que devuelven observables en mi aplicación Angular, pero simplemente no puedo crear un observable válido que active llamadas como catch() o map() en mi código. Por ejemplo:
mi servicio:
create(): Observable<any> { return this.http .post('/api/stuff', { id: 123 }) .catch(this.handleError) .map(this.extractData); }Mi especificación:
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(); } ); El análisis de cobertura me dice que el método handleError nunca se ha ejecutado. En el caso de un observable exitoso, tampoco pasa por el método extractData .
¿Hacia dónde va ese observable? ¿Cómo puedo devolver un observable adecuado para probar tales llamadas?
En algún lugar de su código de prueba, creo que necesita tener este código:
AuthHttp.post('/api/stuff', {id : 123 }).subscribe(data => {});Hay dos maneras de lograr esto.
Primero sería, en su método de servicio, usar lo siguiente:
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)) }El segundo método sería llamar a usar el servicio de la siguiente manera:
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()); }Y cuando llame al método de servicio, use esto:
this._service.create(123) .subscribe((res:any) => { //do whatever with success }, (error:any) => { this.handleError(error) }); El método que está utilizando para extraer datos, this.extractData() , se puede llamar en lugar de res.json() dentro del servicio, pero en general es el mismo resultado.
Espero que esto ayude :)
Primero debe crear mockData para que el servicio pueda usarlo. Hay 2 archivos a continuación. Coloque el nombre de su componente y servicio en lugar de COMPONENT_NAME y SERVICE_NAME respectivamente.
Archivo de especificaciones
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(); }); });Debe crear un directorio llamado testHelper (o cualquier nombre) en el directorio raíz
servicioMockData 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); } }