anglejsのpromiseにタイムアウトハンドラを設定する
コントローラーでタイムアウトを設定して、応答が250ミリ秒で受信されない場合に失敗するようにしようとしています。この条件が満たされるように、ユニットテストのタイムアウトを10000に設定しました。誰かが私を正しい方向に向けることができますか？ （編集、タイムアウト機能を提供することがわかっている$ httpサービスを使用せずにこれを達成しようとしています）
（編集-私は他のユニットテストでtimeout.flushを呼び出さなかったために失敗していましたが、promiseService.getPromise（）によって未定義のプロミスが返されたときにタイムアウトメッセージを取得する必要があります。質問からの初期コード）。
promiseService（promiseは、テストスイート変数であり、適用前に各テストスイートのプロミスに異なる動作を使用できます（例：拒否、別の成功））
mockPromiseService = jasmine.createSpyObj('promiseService', ['getPromise']);
mockPromiseService.getPromise.andCallFake( function() {
promise = $q.defer();
return promise.promise;
})
テスト中のコントローラー機能-
$scope.qPromiseCall = function() {
var timeoutdata = null;
$timeout(function() {
promise = promiseService.getPromise();
promise.then(function (data) {
timeoutdata = data;
if (data == "promise success!") {
console.log("success");
} else {
console.log("function failure");
}
}, function (error) {
console.log("promise failure")
}
)
}, 250).then(function (data) {
if(typeof timeoutdata === "undefined" ) {
console.log("Timed out")
}
},function( error ){
console.log("timed out!");
});
}
テスト（通常、ここで約束を解決または拒否しますが、設定しないことでタイムアウトをシミュレートしています）
it('Timeout logs promise failure', function(){
spyOn(console, 'log');
scope.qPromiseCall();
$timeout.flush(251);
$rootScope.$apply();
expect(console.log).toHaveBeenCalledWith("Timed out");
})
まず、コントローラーの実装は次のようにする必要があります。
$scope.qPromiseCall = function() {
var timeoutPromise = $timeout(function() {
canceler.resolve(); //aborts the request when timed out
console.log("Timed out");
}, 250); //we set a timeout for 250ms and store the promise in order to be cancelled later if the data does not arrive within 250ms
var canceler = $q.defer();
$http.get("data.js", {timeout: canceler.promise} ).success(function(data){
console.log(data);
$timeout.cancel(timeoutPromise); //cancel the timer when we get a response within 250ms
});
}
あなたのテスト：
it('Timeout occurs', function() {
spyOn(console, 'log');
$scope.qPromiseCall();
$timeout.flush(251); //timeout occurs after 251ms
//there is no http response to flush because we cancel the response in our code. Trying to call $httpBackend.flush(); will throw an exception and fail the test
$scope.$apply();
expect(console.log).toHaveBeenCalledWith("Timed out");
})
it('Timeout does not occur', function() {
spyOn(console, 'log');
$scope.qPromiseCall();
$timeout.flush(230); //set the timeout to occur after 230ms
$httpBackend.flush(); //the response arrives before the timeout
$scope.$apply();
expect(console.log).not.toHaveBeenCalledWith("Timed out");
})
promiseService.getPromiseを使用した別の例：
app.factory("promiseService", function($q,$timeout,$http) {
return {
getPromise: function() {
var timeoutPromise = $timeout(function() {
console.log("Timed out");
defer.reject("Timed out"); //reject the service in case of timeout
}, 250);
var defer = $q.defer();//in a real implementation, we would call an async function and
// resolve the promise after the async function finishes
$timeout(function(data){//simulating an asynch function. In your app, it could be
// $http or something else (this external service should be injected
//so that we can mock it in unit testing)
$timeout.cancel(timeoutPromise); //cancel the timeout
defer.resolve(data);
});
return defer.promise;
}
};
});
app.controller('MainCtrl', function($scope, $timeout, promiseService) {
$scope.qPromiseCall = function() {
promiseService.getPromise().then(function(data) {
console.log(data);
});//you could pass a second callback to handle error cases including timeout
}
});
テストは上記の例に似ています：
it('Timeout occurs', function() {
spyOn(console, 'log');
spyOn($timeout, 'cancel');
$scope.qPromiseCall();
$timeout.flush(251); //set it to timeout
$scope.$apply();
expect(console.log).toHaveBeenCalledWith("Timed out");
//expect($timeout.cancel).not.toHaveBeenCalled();
//I also use $timeout to simulate in the code so I cannot check it here because the $timeout is flushed
//In real app, it is a different service
})
it('Timeout does not occur', function() {
spyOn(console, 'log');
spyOn($timeout, 'cancel');
$scope.qPromiseCall();
$timeout.flush(230);//not timeout
$scope.$apply();
expect(console.log).not.toHaveBeenCalledWith("Timed out");
expect($timeout.cancel).toHaveBeenCalled(); //also need to check whether cancel is called
})
「指定された時間枠で解決されない限り、約束に失敗する」という動作は、別のサービス/工場にリファクタリングするのに理想的です。これにより、新しいサービス/工場とコントローラーの両方のコードがより明確になり、再利用しやすくなります。
私が想定したコントローラーは、スコープで成功/失敗を設定するだけです。
app.controller('MainCtrl', function($scope, failUnlessResolvedWithin, myPromiseService) {
failUnlessResolvedWithin(function() {
return myPromiseService.getPromise();
}, 250).then(function(result) {
$scope.result = result;
}, function(error) {
$scope.error = error;
});
});
ファクトリーfailUnlessResolvedWithinは、新しいプロミスを作成します。これは、渡された関数からプロミスを効果的に「インターセプト」します。タイムアウト内に解決されなかった場合にプロミスも拒否することを除いて、その解決/拒否動作を複製する新しいものを返します。
app.factory('failUnlessResolvedWithin', function($q, $timeout) {
return function(func, time) {
var deferred = $q.defer();
$timeout(function() {
deferred.reject('Not resolved within ' + time);
}, time);
$q.when(func()).then(function(results) {
deferred.resolve(results);
}, function(failure) {
deferred.reject(failure);
});
return deferred.promise;
};
});
これらのテストは少し難しい（そして長い）が、 http://plnkr.co/edit/3e4htwMI5fh595ggZY7h?p=preview で見ることができる。テストの主なポイントは
コントローラーのテストでは、
$timeoutを呼び出してfailUnlessResolvedWithinをモックします。$provide.value('failUnlessResolvedWithin', function(func, time) { return $timeout(func, time); });これは、 'failUnlessResolvedWithin'が（意図的に）
$timeoutと構文的に同等であり、$timeoutがさまざまなケースをテストするflush関数を提供するために可能です。サービス自体のテストでは、
$timeout.flush呼び出しを使用して、タイムアウトの前後に解決/拒否される元のプロミスのさまざまなケースの動作をテストします。beforeEach(function() { failUnlessResolvedWithin(func, 2) .catch(function(error) { failResult = error; }); }); beforeEach(function() { $timeout.flush(3); $rootScope.$digest(); }); it('the failure callback should be called with the error from the service', function() { expect(failResult).toBe('Not resolved within 2'); });
このすべての動作を http://plnkr.co/edit/3e4htwMI5fh595ggZY7h?p=preview で見ることができます。
@Michal CharemzaのfailUnlessResolvedWithinを実際のサンプルで実装します。遅延オブジェクトをfuncに渡すことにより、使用コード「ByUserPosition」でプロミスをインスタンス化する必要が減ります。 firefoxとgeolocationに対処するのに役立ちます。
.factory('failUnlessResolvedWithin', ['$q', '$timeout', function ($q, $timeout) {
return function(func, time) {
var deferred = $q.defer();
$timeout(function() {
deferred.reject('Not resolved within ' + time);
}, time);
func(deferred);
return deferred.promise;
}
}])
$scope.ByUserPosition = function () {
var resolveBy = 1000 * 30;
failUnlessResolvedWithin(function (deferred) {
navigator.geolocation.getCurrentPosition(
function (position) {
deferred.resolve({ latitude: position.coords.latitude, longitude: position.coords.longitude });
},
function (err) {
deferred.reject(err);
}, {
enableHighAccuracy : true,
timeout: resolveBy,
maximumAge: 0
});
}, resolveBy).then(findByPosition, function (data) {
console.log('error', data);
});
};