Wie Unit-Test eine Komponente, die beobachtbaren Service ruft

Question

Ich versuche Unit-Test eine Funktion, die einen beobachtbaren Dienst abonniert ist. Ich bin mir nicht sicher, wo ich anfangen soll.

Component Funktion ich Unit-Test versuchen:

register() { 
    this._registrationService.registerUser(this.form.value) 
     .subscribe(data => { 
      if (data) { 
      this.errorMessage = ''; 
      this.successMessage = 'Account successfully created'; 
      } else { 
      this.errorMessage = 'Error'; 
      this.successMessage = ''; 
      } 
     }, 
     error => { 
      this.errorMessage = error; 
      this.successMessage = ''; 
     }); 
    } 

Service:

registerUser(user) { 
    const registerUrl = this.apiUrl; 

    return this._http.post(registerUrl, JSON.stringify(user), { headers: this.apiHeaders }) 
     .map(res => res.json()) 
     .catch(this._handleError); 
    } 

Answer 1

Ich würde den RegistrationService Service verspotten Daten zurückzukehren Observable.of verwenden.

class MockRegistrationService { 
    registerUser(data: any) { 
    return Observable.of({}); 
    } 
} 

Innerhalb Sie Unit-Test, müssen Sie den RegistrationService Service des verspottete man außer Kraft zu setzen:

describe('component tests',() => { 
    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, 
        TEST_BROWSER_APPLICATION_PROVIDERS); 

    var service = new MockRegistrationService(); 

    beforeEachProviders(() => [ 
    provide(RegistrationService, { useValue: service }) 
    ]); 

    it('should open', 
    injectAsync([TestComponentBuilder], (tcb: TestComponentBuilder) => { 
     return tcb 
     .createAsync(RegistrationComponent) 
     .then(fixture => { 
     let elt = fixture.nativeElement; 
     let comp: RegistrationComponent = fixture.componentInstance; 

     fixture.detectChanges(); 

     expect(comp.successMessage).toEqual('Account successfully created'); 
     expect(comp.errorMessage).toEqual(''); 
     }); 
    }); 
    })); 
}); 

Sehen Sie diese plunkr für weitere Informationen: https://plnkr.co/edit/zTy3Ou?p=info.

Answer 2

Im Komponententest gibt es nur ein "echtes" Objekt: dasjenige, das Sie testen. Abhängigkeiten, wie andere Objekte und Funktionen, sollten verspottet werden.

Mocking erstellt Objekte, die das Verhalten realer Objekte simulieren. Dieses Thema enthält weitere Informationen: What is Mocking?

ich wih Jasmin nicht vertraut bin, aber hier fand ich einen Artikel, die nützlich sein könnten: https://volaresystems.com/blog/post/2014/12/10/Mocking-calls-with-Jasmine

Answer 3

meine Arbeitstest/Spec-Datei Posting, wenn jemand fragen, ist, wie diese gedreht out:

Testdatei:

import { 
    it, 
    inject, 
    injectAsync, 
    describe, 
    beforeEachProviders, 
    TestComponentBuilder, 
    resetBaseTestProviders, 
    setBaseTestProviders 
} from 'angular2/testing'; 

import {TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS} from 'angular2/platform/testing/browser'; 
import {Observable} from 'rxjs/Rx'; 
import {provide} from 'angular2/core'; 
import {RootRouter} from 'angular2/src/router/router'; 
import {Location, Router, RouteRegistry, ROUTER_PRIMARY_COMPONENT} from 'angular2/router'; 
import {SpyLocation} from 'angular2/src/mock/location_mock'; 

import {RegistrationService} from '../shared/services/registration'; 
import {Register} from './register'; 
import {App} from '../app'; 

class MockRegistrationService { 
    registerUser(user) { 
    return Observable.of({ 
     username: 'TestUser1', 
     password: 'TestPassword1' 
    }); 
    } 
} 

describe('Register',() => { 
    resetBaseTestProviders(); 
    setBaseTestProviders(TEST_BROWSER_PLATFORM_PROVIDERS, TEST_BROWSER_APPLICATION_PROVIDERS); 

    let registrationService = new MockRegistrationService(); 

    beforeEachProviders(() => [ 
    Register, 
    RouteRegistry, 
    provide(RegistrationService, { useValue: registrationService }), 
    provide(Location, {useClass: SpyLocation}), 
    provide(Router, {useClass: RootRouter}), 
    provide(ROUTER_PRIMARY_COMPONENT, {useValue: App}) 
    ]); 


    it('should open', injectAsync([TestComponentBuilder], (tcb) => { 
     return tcb 
     .createAsync(Register) 
     .then(fixture => { 
      let registerComponent = fixture.componentInstance; 

      fixture.detectChanges(); 

      registerComponent.register({ 
      username: 'TestUser1', 
      password: 'TestPassword1' 
      }); 

      expect(registerComponent.successMessage).toEqual('Account successfully created'); 
      expect(registerComponent.errorMessage).toEqual(''); 
     }); 
    })); 

});