問題タブ [angular2-testing]

私は Angular2.0.1 を使用しており、いくつかの非同期タスクを使用して角度コンポーネントの周りに単体テストを作成しようとしていました。かなり一般的なことだと思います。彼らの最新のテスト例にも、この種の非同期テストが含まれています (こちらを参照)。

ただし、私自身のテストは決して成功せず、常にメッセージで失敗します

簡単に言えば、問題の実際の原因を特定するのに何時間もかかりました。私はライブラリ angular2-moment を使用しており、そこで amTimeAgo というパイプを使用していました。このパイプには、決して削除されない window.setTimeout(...) が含まれています。amTimeAgo パイプを削除した場合、テストは成功しますが、それ以外の場合は失敗します。

問題を再現するための非常に基本的なコードを次に示します。

testcomponent.html:

testcomponent.ts:

testmodule.ts

testcomponent.spec.ts:

これをうまくテストする方法を知っている人はいますか? afterEach で「残りの」タイムアウトをすべて強制終了することはできますか? または、非同期コードが実行されているゾーンをリセットして、この問題を解決できますか?

他の誰かがこれに遭遇したか、これをうまくテストする方法を知っていますか? ヒントをいただければ幸いです。

更新: @peeskillet が を使用した解決策を示唆した後fixture.destroy()、実際のテストでこれを試してみました (ここの例は、問題を再現するために必要な最小限のコードです)。実際のテストにはネストされた promise が含まれています。そうでなければ、asyncanddetectChangesアプローチは必要ありませんでした。

destroy の提案は素晴らしく、単純なテストの問題を解決するのに役立ちますが、実際のテストには、ネストされた promise が適切に解決されていることを確認する次のステートメントが含まれています。

問題は、ページ内の amTimeAgo パイプを使用すると、fixture.whenStable()promise が解決されないため、アサーション コードが実行されず、テストが同じタイムアウトで失敗することです。

したがって、破棄の提案は特定の単純化されたテストで機能しますが、実際のテストを修正することはできません。

ありがとう

ベン

以前の同様の質問を見ると、これに対する明確な答えがあったようには見えません。

これが何が起こっているかです。angular-cli ツールを使用して angular2 アプリを構築しています (ベータ 16 が実行されており、angular 2.0.1 およびルーター 3.0.1.

「ng test」を実行すると、すべてのテストがパスし、app.component が期待されます。(ng serve は正常に動作しているなど)

ここにいくつかのコードがあります：

app.module.ts

app.component.ts

app.component.spec.ts

app.component.html

最後に、「ng test」を実行したときに表示されるエラーは次のとおりです。

このエラーを防ぐためにさまざまなことを試しましたが、これを停止させることはできません!

これについて何か考えはありますか？

編集:コンストラクターでルーターを使用するこのコンポーネントまで追跡しました:

header.component.ts

では、単体テストでそのコンストラクターの前にコンポーネントをブートストラップするにはどうすればよいでしょうか?

Karma が angular 2 コンポーネントを読み込めません。このエラーを削除します:

angular 2テストチュートリアルですべてを行います（カルマのパスのみを変更しました）したがって、問題はパスにある必要があります。しかし、私はそれを修正する方法がわかりません。

私の進路：

container.component.ts

container.component.spec.ts

カルマ.conf.js

このガイドhttps://angular.io/docs/ts/latest/cookbook/form-validation.html#!#custom-validationに従って、カスタム角度(Angular 2.0.0)検証を書いています。

今、カスタム検証ディレクティブに単体テストを追加しようとしています。

私はこれらすべてのオブジェクトにアクセスしていますが、私の入力の有効性に関する情報は誰も持っていません。単体テスト内で私の入力の NgControl にアクセスする方法、または有効/無効(カスタム検証)入力フィールドを確認する方法を知っている人はいますか?

最近、複数のコンポーネントとサービスを備えた ng2 (2.0.1 を使用) アプリを作成しました。UserService (拡張された Http クラスを使用する)を含むHeaderComponentのテスト (Karma Jasmine) の最中です。

Angular.io Docsから簡単なテストを複製してサービスをスパイし、コンポーネントの初期化後にサービス関数が起動されたかどうかとその内容を確認しました。header.component の currentUser 変数の内容をチェックする fakeAsync (および async) を使用して最後のテストを実行するたびに、次のエラーが表示されます...

これらのセレクターは私のAppComponentからのものです...

私のheader.component.spec ...

これが私のheader.componentです...

TestBed.configureTestingModule() の初期化方法が原因で、このエラーが発生しているのではないかと疑っています。

私はもう試した...

1. app.module と TestBed モジュール宣言の両方の並べ替え
2. schema: [CUSTOM_ELEMENTS_SCHEMA] を両方のモジュールに追加

コンポーネントがあります。彼の主な役割はラッパーです。

どんなトラブルで？

コンポーネントを実行するメソッドcompileComponentsにプロパティtitleがない場合。それが、私が思うに、コンソールにエラーが表示される理由です

質問: 最初にプロパティをバインドしてから compileComponents メソッドを実行するにはどうすればよいですか?

コンポーネント テンプレート:

説明セクション: