単体テストでのサービスの模擬

Question

コンポーネント単体テストのサービスを模擬しようとしています。ここ 私のサービス：

@Injectable() 
export class LoginService { 

    constructor(public http: Http) { } 

    getLanguages() { 
     return this.http.get('the-url') 
         .map((res: Response) => res.json()); 
    } 

...

注：私のコンポーネントは、コンストラクタでこのメソッドを呼び出します（COMPを構築する際の言語をロードします）。

そして、それを嘲笑する私の試み：

class MockLoginService { 
    getLanguages() { 
     return Observable.of(
      [ 
       { 
        'name': 'English (USA)', 
        'locale': 'en-US' 
       }, 
       { 
        'name': 'Español', 
        'locale': 'es-US' 
       } 
      ] 
     ); 
    } 

そして、私の部品ユニットテスト：

it('should load languages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { 
     tcb 
      .overrideProviders(LoginComponent, [ provide(LoginService, { useClass: MockLoginService })]) 
      .createAsync(LoginComponent).then((fixture) => { 
       let element = fixture.nativeElement; 
       let loginInstance = fixture.componentInstance; 
       fixture.detectChanges(); 
       expect(loginInstance._loginService.getLanguages).toHaveBeenCalled(); 
       expect(element.querySelectorAll('option').length).toBe(5); 
      }); 
    })); 

問題：

私は私のモックサービスが呼び出されると、データが受信された参照は正しいですが、私の2つのテストはスキップされます！ここにログがあります：

angular2-polyfills.js:528 Unhandled Promise rejection: 'expect' was used when there was no current spec, this could be because an asynchronous test timed out ; Zone: ; Task: Promise.then ; Value: Error: 'expect' was used when there was no current spec, this could be because an asynchronous test timed out(…)

サービスは非同期で実行され、テストはどこかで失われます。 angle2-polyfills.js：530エラー：未知（約束）：エラー：現在の仕様がないときに 'expect'が使用されました。これは非同期テストがタイムアウトしたためです（...）

私はfakeAsyncダニ - 成功しません。 ありがとうございます！

Answer 1

あなたはそれが私の作品

var service = new MockLoginService(); 

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

it('should load languages', inject([TestComponentBuilder], (tcb: TestComponentBuilder) => { 
    tcb 
     .createAsync(LoginComponent).then((fixture) => { 
      let element = fixture.nativeElement; 
      let loginInstance = fixture.componentInstance; 
      fixture.detectChanges(); 

      expect(element.querySelectorAll('option').length).toBe(2); 
     }); 
})); 

beforeEachProvidersメソッドコールバックの中に手動で嘲笑のサービスをインスタンス化し、それを設定しようとすることができます。このplunkr： https://plnkr.co/edit/zTy3Ou?p=previewを参照してください。