3

私の見解では、API からの応答を受け取るまで表示されるアニメーションをロードしています。

//Displayed before we've received API response
<p ng-if="vm.vehicles == null">Loading ...</p>

//Displayed once we received response for the API
<table ng-if="vm.vehicles">
    <tr ng-repeat="vehicle.vm.vehicles">...</tr>

テストを行うために、$httpBackendAngular モジュールを使用します。このようなもの：

$httpBackend.whenGET('api/vehicles').respond({vehicles: [...]});

問題

ローディングアニメーションが表示されることを確認するテストを書きたいと思います。

私は試した：

expect(ptor.isElementPresent(By.cssContainingText('p', 'Loading'))).to.eventually.be.true;`

しかし、私は合格しません。したがって、$httpBackend からの応答を条件付きで遅らせる必要があると思います。

このブログ投稿を見つけましたhttp://endlessindirection.wordpress.com/2013/05/18/angularjs-delay-response-from-httpbackend/

ただし、その構成メソッドを挿入すると、すべてのテストが失敗し (テンプレートが時間内に読み込まれないためだと思います)、すべての応答が遅延するため、実際には必要ありません。

では、その 1 回の呼び出しに対する応答を遅らせるにはどうすればよいでしょうか。理想的には、そのテストのためだけに遅らせたいと思います。

4

2 に答える 2

0

$httpBackend の Respond() メソッドで利用可能な関数内の約束をタイムアウトを使用して解決することで、これを機能させることができました。

私は、API 呼び出しの結果をリストに入力する私の角度サービスでメソッドをテストしていました。さらに、そのサービスには、リストのロード時と終了時を示すブール値があります。したがって、私の特定の単体テストでは、「読み込み中」ブールがtrueに設定され、終了したらfalseに戻ることを確認したかっただけです（そして、そのリストの入力が成功すると、「読み込み完了」ブールがtrueに設定されました。

これを行うには、モックされた httpBackend GET 応答を遅らせる必要がありました。これにより、「読み込み中」ブールが true に設定され、「読み込み完了」ブールが未定義であることを確認できましたが、タイムアウトが経過した後、両方のブールに新しい値が必要でした。値。

更新: これをすぐに更新できなかったことをお詫びします。以前はrespond()内に$timeoutを入れていましたが、$timeout.flush()を実行していなかったため、$timeout関数内のexpectステートメントが実行されていませんでした。その方法で遅延をシミュレートすることはもうありませんが、これをここに投稿したことを忘れていました。私の注意を引いてくれてありがとう@Mark-Amery。

var fakeList = [{ id: 1, name: "item 1" }, { id: 2, name: "item 2" }];

$http.expectGET('/myapi/myresource').respond(fakeList);

 myAngularService.myMethod();

 expect(myAngularService.listIsLoading).toBeTruthy();
 expect(myAngularService.listFinishedSuccessfully).toBeUndefined();

 $http.flush();

 expect(myAngularService.listIsLoading).toBeFalsy();
 expect(myAngularService.listFinishedSuccessfully).toBeTruthy();
 expect(myAngularService.myList).toEqual(fakeList);
于 2015-02-01T20:38:07.437 に答える