Mock Testing http - angular2

Question

Ich habe viele Fragen hier und ein paar Tutorials gelesen und ich kann immer noch nicht funktionieren, ich habe die Tutorials Wort für Wort kopiert und immer noch kein Glück, also habe ich keine Ahnung, was die Problem ist. Ich bin ziemlich neu in diesem Zeug. Hier ist mein Code:

import { TestBed, inject, async } from '@angular/core/testing'; 
 
import { MockBackend } from '@angular/http/testing'; 
 
import { 
 
    BaseRequestOptions, 
 
    HttpModule, 
 
    Http, 
 
    Response, 
 
    ResponseOptions 
 
} from '@angular/http'; 
 

 
import { ItemsService } from './items.service'; 
 
import { MOCKITEMS } from './mock-items'; 
 

 
describe('ItemsService',() => { 
 
    beforeEach(() => { 
 
    TestBed.configureTestingModule({ 
 
     imports: [HttpModule], 
 
     providers: [ItemsService] 
 
    }); 
 
    }); 
 

 
    it('should construct', inject([ItemsService], (service) => { 
 
     expect(service).toBeDefined(); 
 
    })); 
 
}); 
 

 
describe('ItemsService Mock',() => { 
 
    beforeEach(() => { 
 
    TestBed.configureTestingModule({ 
 
     providers: [ 
 
     ItemsService, 
 
     MockBackend, 
 
     BaseRequestOptions, 
 
     { 
 
      provide: Http, 
 
      useFactory: (backend, opts) => new Http(backend, opts), 
 
      deps: [MockBackend, BaseRequestOptions] 
 
     } 
 
     ], 
 
     imports: [HttpModule] 
 
    }); 
 
    }); 
 

 
    it('should construct', inject([ItemsService, MockBackend], (service, mockBackend) => { 
 
    expect(service).toBeDefined(); 
 
    })); 
 

 
    describe('#getItems()',() => { 
 
    it('should return <Array<Items>>', inject([ItemsService, MockBackend], (service, mockBackend) => { 
 
     const mockReponse = { 
 
     data: [ 
 
      { itemCharId: 1, itemName: 'milk' }, 
 
      { itemCharId: 2, itemName: 'eggs' }, 
 
      { itemCharId: 3, itemName: 'meat' } 
 
     ] 
 
     } 
 

 
     mockBackend.connections.subscribe((connection) => { 
 
     connection.mockRespond(new Response(new ResponseOptions({ body: JSON.stringify(mockReponse) }))); 
 
     }); 
 

 
     service.getItems().subscribe((items) => { 
 
     expect(items.length).toBe(3); 
 
     expect(items[0].itemName).toEqual('milk'); 
 
     expect(items[1].itemName).toEqual('eggs'); 
 
     expect(items[2].itemName).toEqual('meat'); 
 
     }); 
 
    })); 
 
    }); 
 
});

Die Tests mit versagen undefined erwartet 3 sein, etc. Also vorausgesetzt, ich bin es ist nicht wirklich mein mockResonse bekommen obj als Antwort oder etwas auf diesen Linien ? Könnte auch etwas Kleines sein.

Servicecode:

import { Injectable } from '@angular/core'; 
import { Http } from '@angular/http'; 

@Injectable() 
export class ItemsService { 

    constructor(private http: Http) { } 

    getItems() { 
    return this.http.get('/api/items'); 
    } 
} 

Jede Hilfe sehr geschätzt.

Answer 1

In the tutorial that was likely was followed, Service-Methode gibt response.json().data:

getHeroes(): Promise<String[]> { 
    return this.http.get('myservices.de/api/heroes') 
     .toPromise() 
     .then(response => response.json().data) 
     .catch(e => this.handleError(e)); 
    } 

So ist die Antwort als { data: [...] } verspottet wird.

Während in dem Beispiel in der Frage this.http.get('/api/items') zurückgegeben wird und response.json() nicht aufgerufen wird.

Aus diesem Grund gibt es keine Fehler außer fehlgeschlagenen Assertions; items muss gleich mockReponse sein.

Es sollte

getItems() { 
    return this.http.get('/api/items').map(res => res.json()); 
    } 

und

const mockReponse = [ 
     { itemCharId: 1, itemName: 'milk' }, 
     { itemCharId: 2, itemName: 'eggs' }, 
     { itemCharId: 3, itemName: 'meat' } 
    ] 

Dies kann zusätzlich mit

expect(items).toEqual(mockResponse);