angular - Observable Input で Angular コンポーネントをテストする方法

Question

Component基本的に を受け取り、その Observable から発行された値に基づいてObservable変更する Angular をテストしようとしています。template簡略版は次のとおりです。

@Component({
    selector: 'async-text',
    template: `
        <span>{{ text | async }}</span>
    `,
})
export class AsyncTextComponent {    
    @Input() text: Observable<string>;
}

私はそれをテストしたいのですが、現在これが私が持っているもので、使用してrxjs-marblesいます（必須ではありませんが）。

import { async, ComponentFixture, TestBed } from '@angular/core/testing';
import { AsyncTextComponent } from './async-text.component';

describe('AsyncTextComponent', () => {
  let component: BannerComponent;
  let fixture: AsyncTextComponent<AsyncTextComponent>;

  it('...',
    marbles(m => {
      fixture = TestBed.createComponent(AsyncTextComponent);
      component = fixture.componentInstance;
      component.text = m.cold('-a-b-c|', {
        a: 'first',
        b: 'second',
        c: 'third',
      });

      fixture.detectChanges();
      expect(component.nativeElement.innerHTML).toContain('first');

      fixture.detectChanges();
      expect(component.nativeElement.innerHTML).toContain('second');

      fixture.detectChanges();
      expect(component.nativeElement.innerHTML).toContain('third');
    })
  );
});

明らかにこれは機能しません。私の問題は、 TestScheduler をそれぞれの間に所定の量の「フレーム」だけ進める方法が見つからなかったことexpectです。

フレームを手動でスキップするにはどうすればよいですか? または、上記のコンポーネント/シナリオをテストするより良い方法はありますか (を受け取る Angular コンポーネントでObservableあり、Observable の放出を考慮してその動作をテストしたい)。

は見.flush()ましたが、文書化されているように、Observable のすべての発行を実行するため、最終的な状態に到達し、状態間のさまざまな遷移をテストすることはできません。

ありがとう