unit-testing - 非同期サービスを持つコンポーネントの TestBed を使用した Angular2 の単体テスト

Question

Angular 2.1.0 を使用しています。

私は非常に単純な非同期サービスを持っています:

@Injectable()
export class Service {

    protected str: Subject<string>;

    constructor() {
        this.str = <Subject<string>>new Subject();
    }

    getStream(): Observable<string> {
        return this.str.asObservable();
    }

    emit() {
        setTimeout(() => {
            this.str.next('Value 1');
            setTimeout(() => {
                this.str.next('Super Value 2');
            }, 10000);
        }, 10000);
    }
}

emit()非同期動作をエミュレートします。そしてそれを使用するクラス：

@Component({
    selector: 'my-app',
    template: '<div class="c" *ngIf="c">{{c}}</div>'
})
export class AppComponent {

    private c: string;

    constructor(private s: Service) { }

    ngOnInit() {
        this.s.getStream().subscribe(data => {
            this.c = data;
        });
        this.s.emit();
    }

}

サービスとコンポーネントの単体テストを作成したいと考えています。angular.io チュートリアルは既に読みました。そして、追加の説明が必要です:(

コンポーネントをテストするために、次のことを行います。

1. 最初にdiv.cがないことをテストします
2. ティック
3. div.c content = 'Value 1' を確認してください
4. ティック
5. check div.c content = 'Super Value 2'

それとも、2 と 3 が 2 倍になっているので、4 と 5 を指す必要はないのでしょうか。

非同期サービスを使用してコンポーネントをテストするには、スタブ サービスを使用するか、実際のサービスを使用して重要な機能をスパイするかの 2 つのオプションがあることを知っています。私の場合、両方のシナリオのテストをどのように作成すればよいですか?

そして、サービスをテストする方法は？テスト結果が出るまで 20 秒も待たされたくありません。