2016-05-30 15 views
6

Qual è il modo più semplice per simulare la risposta restituita da Httpget() in Angular 2?Angular 2 mock Http get() per restituire il file json locale

Ho un file locale data.json nella mia directory di lavoro, e voglio get() per restituire la risposta contenente tali dati come un carico utile, simulando il resto delle API.

I documenti per la configurazione dell'oggetto Backend per Http sembravano piuttosto oscuri e complicati per un compito così semplice.

+0

Non ho idea del motivo per cui pensi che la configurazione di 'Backend' sia oscura. Il DI è un elemento fondamentale e basilare di Angular2 e questo è esattamente il caso d'uso DI per cui è stato creato. Cosa è complicato con 'MockBackend, fornire (XHRBackend, {useExisting: MockBackend})'. È semplice e diretto. –

+0

@ GünterZöchbauer Gli ingegneri del software sono disponibili in una varietà. Solo perché qualcosa è facile per il 50 percentile più alto, non rende facile il fondo 50. Non è mai bello essere così sprezzanti nei confronti di POV di un'altra persona senza essere effettivamente nei loro panni. –

+1

@KaMok Il mio commento non è sprezzante. Se qualcuno vuole una soluzione, deve fornire informazioni su quale sia il problema. Questo è stato il mio commento. "I documenti per la configurazione dell'oggetto Backend per Http sembravano piuttosto oscuri e complicati per un compito così semplice." è solo una frase inutile. Se avesse fornito un link o pubblicato il codice che ha trovato complicato, c'era qualcosa di cui discutere, ma per come è, non è davvero una domanda. Ho solo cercato di ottenere più informazioni. –

risposta

2

È necessario eseguire l'override del provider XhrBackend con lo MockBackend. È necessario quindi creare un altro iniettore per poter eseguire una vera richiesta HTTP.

Ecco un esempio:

beforeEachProviders(() => { 
    return [ 
    HTTP_PROVIDERS, 
    provide(XHRBackend, { useClass: MockBackend }), 
    SomeHttpService 
    ]; 
}); 

it('Should something', inject([XHRBackend, SomeHttpService], (mockBackend, httpService) => { 
    mockBackend.connections.subscribe(
    (connection: MockConnection) => { 
     var injector = ReflectiveInjector.resolveAndCreate([ 
     HTTP_PROVIDERS 
     ]); 
     var http = injector.get(Http); 
     http.get('data.json').map(res => res.json()).subscribe(data) => { 
     connection.mockRespond(new Response(
      new ResponseOptions({ 
      body: data 
      }))); 
     }); 
    }); 
})); 
+1

dopo una ricerca ho trovato che la risposta è MOLTO più semplice: basta usare la posizione del file json locale (app/data.json) come url invece dell'indirizzo http –

+0

Great! Interessato ad avere maggiori dettagli ;-) Come viene effettivamente eseguita la richiesta? –

+0

@ThierryTemplier la richiesta viene eseguita come qualsiasi richiesta GET da un server reale, ma per procedure più dettagliate, come il comportamento di test su richieste che non hanno successo o richieste PUT necessitano di MockBackend. –

1

A proposito, è necessario prendere in giro il XHRBackend e fornire dati beffato in una classe con il metodo createDb. Il metodo createDb restituisce l'oggetto JSON deriso. Per caricare tali dati fornire URL corretto a http.get, ad esempio, se l'oggetto JSON è contenuto in una variabile mockedObject, l'URL deve essere "app\mockedObject".

Si può leggere maggiori dettagli qui: https://angular.io/docs/ts/latest/guide/server-communication.html.

0

È possibile utilizzare il HttpTestingController disponibile tramite il TestBed nucleo da me ci si sente più intuitivo (ognuno di loro, ovviamente). Snippet non testato:

import { TestBed, async } from '@angular/core/testing'; 
import { HttpTestingController } from '@angular/common/http/testing'; 

import { MyApiService } from './my-api.service'; 

export function main() { 
    describe('Test set',() => { 
    let httpMock: HttpTestingController; 

    beforeEach(() => { 

     TestBed.configureTestingModule({ 
     imports: [], 
     providers: [MyApiService] 
     }); 

     httpMock = TestBed.get(HttpTestingController); 
    }); 

    it('should call get', async(() => { 

     const data: any = {mydata: 'test'}; 
     let actualResponse: any = null; 
     MyApiService.get().subscribe((response: any) => { 
     actualResponse = response; 
     }); 

     httpMock.expectOne('localhost:5555/my-path').flush(data); 
     expect(actualResponse).toEqual(data); 

    })); 
    }); 
} 
Problemi correlati