2017-06-21 3 views
1

Ich schreibe Komponententests für meine Dienste mit MockBackend, jedes Mal, wenn ich die Antwort als {} bekomme.Angular 2/4 Testdienst mit MockBackend gibt undefined zurück

I bezeichnet die folgende URL für Lösung: https://angular.io/api/http/testing/MockBackend

Jede Hilfe sehr geschätzt wird.

Hier ist mein Service:

import {Injectable} from '@angular/core'; 
import { Http, Headers, Response, RequestOptions } from '@angular/http'; 
import {LoginResult} from './models'; 
import { Observable } from 'rxjs/Observable'; 
import 'rxjs/add/operator/map'; 

@Injectable() 
export class AuthService { 
    private _loginUrl = '/api/login'; 
    private _logoutUrl = '/api/logout'; 
    private headers = new Headers({ 'Content-Type': 'application/json' }); 
    private options = new RequestOptions({ headers: this.headers }); 
    private _isAuthenticated:boolean; 

    constructor(private _http:Http) {} 

    isAuthenticated():boolean { 
     return this._isAuthenticated; 
    } 

    setUserLoggedIn(authStatus: boolean) { 
     this._isAuthenticated = authStatus; 
    } 

    login(username:string, password:string) { 
     let body = JSON.stringify({username: username, password: password}); 
     return this._http.post(this._loginUrl, body, this.options) 
      .map(res => res.json()); 
    } 
} 

Hier ist mein Test:

import {async, fakeAsync, TestBed, tick} from '@angular/core/testing'; 
import { HttpModule, Http, ConnectionBackend, XHRBackend, RequestOptions, BaseRequestOptions, ResponseOptions} from '@angular/http'; 
import { MockBackend, MockConnection } from '@angular/http/testing'; 
import { ReflectiveInjector } from '@angular/core'; 
import { AuthService } from './auth.service'; 
import { LoginResult } from './models'; 

export const loginData = { 
    "userId": "593732e2d3d20e1b852dc463", 
    "username": "xyz", 
    "roles": [ 
     "ROLE1", 
     "ROLE2" 
    ], 
    "token": "e26c2b7b-c60f-404d-94d5-d35446fd2a9c" 
}; 

describe('AuthService',() => { 
    beforeEach(() => { 
     this.injector = ReflectiveInjector.resolveAndCreate([ 
      {provide: ConnectionBackend, useClass: MockBackend}, 
      {provide: RequestOptions, useClass: BaseRequestOptions}, 
      Http, 
      AuthService 
     ]); 
     this.authService = this.injector.get(AuthService); 
     this.backend = this.injector.get(ConnectionBackend) as MockBackend; 
    t his.backend.connections.subscribe((connection: any) => this.lastConnection = connection); 
    }); 

    it('login should query current service url',() => { 
     this.authService.login('username', 'password'); 
     expect(this.lastConnection).toBeDefined('no http service connection t all?'); 
     expect(this.lastConnection.request.url).toMatch(/api\/login$/, 'url invalid`'); 
    }); 

    it('login', fakeAsync(() => { 
     let result: any; 
     this.authService.login('username', 'password') 
      .subscribe(response => { 
       console.log('Response :::' + JSON.stringify(response)); 
       result = response; 
      }) 
     this.lastConnection.mockRespond(new Response(new ResponseOptions({ 
     body: JSON.stringify(loginData), 
     }))); 
     tick(); 
     expect(result).toBeDefined(); 
    })); 

    it('login while server is down', fakeAsync(() => { 
     let result: LoginResult; 
     let loginError: any; 
     this.authService.login('username', 'password') 
      .subscribe(response => { 
       console.log('Response1 :::' + JSON.stringify(response)); 
       result = response; 
      }, (error: any) => { loginError = error; }); 
     this.lastConnection.mockRespond(new Response(new ResponseOptions({ 
       status: 404, 
       statusText: 'URL not found.' 
      }))); 
     tick(); 
     expect(result).toBeUndefined(); 
     expect(loginError).toBeDefined(); 
    })); 
}); 

Antwort

2

Sieht aus wie Sie Antwort von es6.lib verwenden, aber Sie müssen eine von Angular http.

import {Response} from '@angular/http'; 
+0

Danke für die Antwort. Aber das eigentliche Problem ist, dass das Ergebnis am falschen Ort verifiziert wird. Ich habe es funktioniert wie folgt 'it ('Login() Erfolg', inject ([XHRBackend, AuthService], (MockBackend: MockBackend, AuthService: AuthService) => { mockBackend.connections.subscribe ((Verbindung: MockConnection) = > { connection.mockRespond (neu Response (neue ResponseOptions ({ Körper: JSON.stringify (Logindaten), }))); }); authService.login ('username', 'password') .subscribe (Daten => { erwarten (Daten) .toBeDefined(); erwarten (data.userId) .toBeDefined(); erwarten (data.token) .toBeDefined(); }); }) ); ' – Vairam

+0

Upvoting die Antwort, weil es mir half, eine Lösung für das gleiche Problem zu finden, danke – rchavarria