Как протестировать компонент, вызывающий наблюдаемое обслуживание

Question

Я пытаюсь выполнить тестирование функции, подписанной на наблюдаемую службу. Не уверен, где начать.

функция компонента Я пытаюсь модульного тестирования:

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 = ''; 
     }); 
    } 

Услуги:

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

Я бы издеваться службу RegistrationService вернуть данные с помощью Observable.of.

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

внутри вас модульного тестирования, вам необходимо переопределить RegistrationService службу по издевался один:

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(''); 
     }); 
    }); 
    })); 
}); 

Смотрите эту plunkr для более подробной информации: https://plnkr.co/edit/zTy3Ou?p=info.

Answer 2

В модульном тесте есть только один «реальный» объект: тот, который вы тестируете. Зависимости, как и другие объекты и функции, следует издеваться.

Mocking создает объекты, которые имитируют поведение реальных объектов. В этом разделе содержится дополнительная информация: What is Mocking?

Я не знаком Жека Жасмин, но здесь я нашел статью, которая может оказаться полезной: https://volaresystems.com/blog/post/2014/12/10/Mocking-calls-with-Jasmine

Answer 3

проводки мой рабочий тест/файл спецификации, если кто-то интересно, как это оказалось из:

Test File:

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(''); 
     }); 
    })); 

});