Angular Materialはコンポーネントハーネステスト用で、次のように promise を実行してコンポーネントと対話できますawait。
it('should click button', async () => {
const matButton = await loader.getHarness(MatButtonHarness);
await matButton.click();
expect(...);
});
しかし、ボタンのクリックによって遅延操作がトリガーされた場合はどうなるでしょうか? 通常、これを処理するためにfakeAsync()/ を使用しますtick()。
it('should click button', fakeAsync(() => {
mockService.load.and.returnValue(of(mockResults).pipe(delay(1000)));
// click button
tick(1000);
fixture.detectChanges();
expect(...);
}));
しかし、同じテストで両方を実行する方法はあるのでしょうか?
async関数を 内にラップするとfakeAsync()、「エラー: この関数を呼び出すには、コードを fakeAsync ゾーンで実行する必要があります」というエラーが発生します。これは、 が終了するとawait、 に渡した関数と同じ関数ではなくなるためと考えられますfakeAsync()。
このようなこと、つまり await の後に fakeAsync 関数を開始することが必要ですか? または、もっとエレガントな方法がありますか?
it('should click button', async () => {
mockService.load.and.returnValue(of(mockResults).pipe(delay(1000)));
const matButton = await loader.getHarness(MatButtonHarness);
fakeAsync(async () => {
// not awaiting click here, so I can tick() first
const click = matButton.click();
tick(1000);
fixture.detectChanges();
await click;
expect(...);
})();
});
ベストアンサー1
fakeAsync(async () => {...})有効な構成です。
さらに、Angular Materialチームはこのシナリオを明示的にテストする。
it('should wait for async operation to complete in fakeAsync test', fakeAsync(async () => {
const asyncCounter = await harness.asyncCounter();
expect(await asyncCounter.text()).toBe('5');
await harness.increaseCounter(3);
expect(await asyncCounter.text()).toBe('8');
}));