Angular2 testing logic before subscribe

Question

私は現在、自分のコンポーネントの1つに対してユニットテストを書いています。特に、私はlogin(): voidの機能を持っています。私はshowSpinnerプロパティはuserService.loginを呼び出す前にtrueに設定されることを確認し、テストを書くのに苦労しています

login(): void { 
    this.showSpinner = true; 
    this.userService.login(loginData) 
    .subscribe(result => { 
     this.showSpinner = false; 
    } 
) 
} 

：ここでは簡略化された論理です。 .subscribeは（私は私のコンポーネントでthis.showSpinner = falseをコメントアウト試みたが、テストは合格）すぐに実行/解決さので、

it('should display the spinner when the form is being saved', 
    inject([TestComponentBuilder], fakeAsync((tcb: any) => { 
    createComponent(tcb).then((fixture:ComponentFixture<any>) => { 
     fixture.componentInstance.login(); 
     expect(fixture.componentInstance.showSpinner).toBe(true); 
     tick(); 
    }); 
    }))); 
}); 

そして、このテストは失敗します。

は、ここに私のテストです。私userServiceモックで

、私はモックlogin方法については、以下を持っている：thisがmockUserServiceある

this.loginSpy = this.spy('login').andReturn(Observable.of(this));

。

userServiceのloginメソッドをuserServiceに正しく偽装していると確信しています。正しく動作するこのコンポーネントの他のテストがあります。

また、私のスパイからObservable.of(this).delay(1)を返してから、私のテストでtick(1)を呼び出してみました。しかし、その中に矛盾した行動の結果、時には私のテストに合格し、それ以外の時間は、私はというエラーを取得していること：

Error: 1 periodic timer(s) still in the queue.

にはどうすれば.subscribe()の前にロジックをテストすることができますか？

Answer 1

私は、私の現在のコードが単一責任の原則に従わないことに気付きました。この考えは、誰もが常に「コードをテストするのは難しい」と繰り返しているという事実に由来しています。

これを念頭に置いて、userService.loginへの呼び出しが行われる前に、必要なロジックをすべて別の機能に移動しました。基本的には次のようになります。

login():void { 
    this.userService.login(this.loginData) 
    .subscribe(result => { 
     this.showSpinner = false; 
    }); 
} 

formSubmit(): void { 
    this.showSpinner = true; 
    this.login(); 
} 

このロジックはテストするのがはるかに簡単です。

我々はformSubmit()をテストしているときに我々は、formSubmit()は、単に再び同期完了しますlogin()への呼び出しを作るだろうしていないかのように、私たちのlogin()方法にスパイを追加する覚えておく必要がもつとも、我々は持っています同じ問題。したがって、この機能の新しい最終テストは次のとおりです。

it('should display the spinner when the form is being saved', 
    inject([TestComponentBuilder], fakeAsync((tcb: any) => { 
    createComponent(tcb).then((fixture:ComponentFixture<any>) => { 
     var loginSpy = spyOn(fixture.componentInstance, 'login'); 
     fixture.componentInstance.formSubmit(); 
     expect(fixture.componentInstance.showSpinner).toBe(true); 
    }); 
    }))); 
});