2016-05-30 8 views
6

Was ist der einfachste Weg, die Antwort von Httpget() in Angular 2 mock zu machen?Angular 2 Mock Http Get() lokale json-Datei zurückgeben

Ich habe vor Ort data.json Datei in meinem Arbeitsverzeichnis, und ich möchte get() Antwort auf das Rück enthalten, dass die Daten als Nutzlast, den Rest api simuliert.

Dokumente für die Konfiguration der Backend Objekt für Http schien etwas undurchsichtig und zu kompliziert für solch eine einfache Aufgabe.

+0

Keine Ahnung, warum Sie die Konfiguration von 'Backend' für unklar halten. DI ist ein wichtiger und grundlegender Baustein von Angular2 und genau das ist der Anwendungsfall, für den DI gedacht ist. Was ist kompliziert mit 'MockBackend, bieten (XHRBackend, {useExisting: MockBackend})'. Es ist einfach und geradlinig. –

+0

@ GünterZöchbauer Software-Ingenieure kommt in einer Vielzahl. Nur weil etwas für die oberen 50 Perzentile einfach ist, ist es für die unteren 50 nicht einfach. Es ist nie gut so abwegig zu sein von dem POV einer anderen Person, ohne tatsächlich in ihren Schuhen zu sein. –

+1

@KaMok Mein Kommentar ist nicht abweisend. Wenn jemand eine Lösung wünscht, muss er Informationen über das Problem bereitstellen. Das war mein Kommentar. "Dokumente für die Konfiguration des Backend-Objekts für Http erschienen für eine so einfache Aufgabe etwas undurchsichtig und kompliziert." ist nur nutzlos schimpfen. Wenn er einen Link zur Verfügung gestellt oder den Code, den er zu kompliziert fand, gepostet hätte, hätte es etwas zu besprechen gegeben, aber so wie es ist, ist es nicht wirklich eine Frage. Ich habe nur versucht, mehr Informationen zu bekommen. –

Antwort

2

Sie müssen den XhrBackend Anbieter mit der MockBackend einen überschreiben. Sie müssen dann einen weiteren Injektor erstellen, um eine echte HTTP-Anfrage ausführen zu können.

Hier ist ein Beispiel ist:

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

nach einer Recherche fand ich die Antwort viel einfacher: nur den Speicherort der lokalen JSON-Datei (app/data.json) als URL anstelle von http Adresse –

+0

Großartig! Interessiert an weiteren Details ;-) Wie wird die Anfrage tatsächlich ausgeführt? –

+0

@ThierryTemplier Die Anfrage wird wie jede GET-Anfrage von einem echten Server ausgeführt, aber für nuanciertere Prozeduren, wie das Testverhalten auf Anfragen, die nicht erfolgreich sind oder PUT-Anfragen, wird MockBackend benötigt. –

1

By the way, müssen Sie die XHRBackend und bieten verspott Daten in einer Klasse mit der createDb Methode verspotten. createDb Methode gibt das verspottete JSON-Objekt zurück. Um diese Daten zu laden, geben Sie URL bis http.get korrekt an. Wenn beispielsweise das JSON-Objekt in einer Variablen mockedObject enthalten ist, sollte die URL "app\mockedObject" lauten.

können Sie weitere Details lesen Sie hier: https://angular.io/docs/ts/latest/guide/server-communication.html.

0

Sie die HttpTestingController als mir zur Verfügung über den Kern TestBed können es intuitiver anfühlt (jeweils ihre eigenen, natürlich). Nicht getesteter Schnipsel:

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); 

    })); 
    }); 
}