如何单元测试调用可观察服务的组件

问题描述：

我想单元测试订阅可观察服务的函数。不知道从哪里开始。如何单元测试调用可观察服务的组件

组件功能我试图单元测试：

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

答

我会嘲笑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。

答

在单元测试中，只有一个“真实”对象：您正在测试的对象。与其他对象和功能一样，依赖性应该被嘲弄。

模拟正在创建模拟真实对象行为的对象。本主题包含更多信息：What is Mocking?

我不熟悉王氏茉莉，但在这里我发现了一篇文章，可能是有用的： https://volaresystems.com/blog/post/2014/12/10/Mocking-calls-with-Jasmine

答

发布我的工作测试/规格文件，如果你想知道如何打开出：

测试文件：

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

});

如何单元测试调用可观察服务的组件

相关推荐