web-dev-qa-db-ja.com

Angular 2テスト-非同期関数呼び出し-使用する場合

Angular 2でテストするときにTestBedで非同期関数を使用するのはいつですか？

いつこれを使用しますか？

 beforeEach(() => {
        TestBed.configureTestingModule({
            declarations: [MyModule],
            schemas: [NO_ERRORS_SCHEMA],
        });
    });

そして、いつこれを使用しますか？

beforeEach(async(() => {
    TestBed.configureTestingModule({
        declarations: [MyModule],
        schemas: [NO_ERRORS_SCHEMA],
    });
}));

誰もこれで私を啓発できますか？

angularunit-testingkarma-jasmineangular2-testingangular-test
66
xiotee

asyncは、asyncがすべてのタスクを完了するまで、次のテストの開始を許可しません。 asyncが行うことは、すべての非同期タスク（たとえば、setTimeout）が追跡されるゾーンでコールバックをラップすることです。すべての非同期タスクが完了すると、asyncが完了します。

Angular以外でJasmineを使用したことがある場合は、doneがコールバックに渡されるのを目にしたことがあるでしょう。

it('..', function(done) {
  someAsyncAction().then(() => {
    expect(something).toBe(something);
    done();
  });
});

ここで、これはネイティブジャスミンです。ここでは、done()を呼び出すまでこのテストの完了を遅らせる必要があることをジャスミンに伝えます。 done()を呼び出さず、代わりにこれを実行した場合：

it('..', function() {
  someAsyncAction().then(() => {
    expect(something).toBe(something);
  });
});

Promiseはafterを解決するため、テストは期待される前でも完了します。テストは同期タスクの実行を終了します。

Angular（Jasmine環境）では、Angularは実際にdoneを使用するときにasyncを舞台裏で呼び出します。ゾーン内のすべての非同期タスクを追跡し、それらがすべて完了すると、doneが舞台裏で呼び出されます。

TestBed構成を使用する特定のケースでは、compileComponentsを使用する場合に一般的にこれを使用します。そうでなければ、それを呼び出さなければならない状況に陥ることはめったにありません

beforeEach(async(() => {
   TestBed.configureTestingModule({
     declarations: [MyModule],
     schemas: [NO_ERRORS_SCHEMA],
   })
   .compileComponent().then(() => {
      fixture = TestBed.createComponent(TestComponent);
   });
}));

templateUrlを使用するコンポーネントをテストする場合（webpackを使用していない場合）、Angularはテンプレートを取得するためにXHRリクエストを行う必要があるため、コンポーネントのコンパイルは非同期になります。したがって、テストを続行する前に、それが解決するまで待つ必要があります。

75
Paul Samsotha

テストで非同期呼び出しを行うと、非同期呼び出しが完了する前に実際のテスト機能が完了します。呼び出しが完了したときに何らかの状態を確認する必要がある場合（通常これが該当します）、テストフレームワークは、まだ非同期作業が行われている間にテストが完了したと報告します。

async(...)を使用すると、テストを完了したものとして扱う前に、リターンフレームワークまたはオブザーバブルが完了するまで待機するようにテストフレームワークに指示します。

it('should show quote after getQuote promise (async)', async(() => {
  fixture.detectChanges();

  fixture.whenStable().then(() => { // wait for async getQuote
    fixture.detectChanges();        // update view with quote
    expect(el.textContent).toBe(testQuote);
  });
}));

then(...)に渡されたコードが実行されますafterテスト関数自体が完了しました。 async()を使用すると、テストを完了したものとして扱う前に、PromiseとObservableが完了するのを待つ必要があることをテストフレームワークに認識させます。

こちらもご覧ください

22
Günter Zöchbauer