19

への呼び出しを模倣するために HttpPromise (または同様のもの) を返す方法はあり$httpますか? 本物の HTTP リクエストが行われたかどうか、または偽の HttpPromise オブジェクトが偽のデータで返されたかどうかを示すグローバル変数を設定したいと考えています。

たとえば、次のようなサービスがあります。

angular
  .module('myservice')
  .factory('MyService', ['$http', function($http) {
      return {
       get : function(itemId) {
         if (isInTestingMode) {
           // return a promise obj that returns success and fake data
         }
         return $http.get("/myapp/items/" + itemId);
       }
    };
 } ]);

そして、私のコントローラーには、次のような前述のサービスへの呼び出しがあります。

        // Somewhere in my controller

        MyService.get($scope.itemId)
           .success(function(data) {
              $scope.item = data;
           })
           .error(function(data, status, headers, config) {
              $scope.notFound = true;
           });

コントローラーのコードを変更しないようにしています。「 isInTestMode 」の場合でもチェーンが機能するようにしますsuccess。errorサービスで説明した方法で偽造することはできHttpPromiseますか?

以下は、上記の「MyService」(スニペット) の改訂版で、promise オブジェクトにsuccessandが含まれています。errorしかし、どうすればsuccessメソッドを実行できますか?

        return {
           get : function(itemId) {
             if (isInTestingMode) {
                var promise = $.defer().promise;
                // Mimicking $http.get's success 
                promise.success = function(fn) {
                  promise.then(function() {
                     fn({ itemId : "123", name : "ItemName"}, 200, {}, {});
                  });
                  return promise;
                };
                // Mimicking $http.get's error 
                promise.error = function(fn) {
                   promise.then(null, function(response) {
                     fn("Error", 404, {}, {});
                   });
                   return promise;
                };
                return promise;
             }
             return $http.get("/myapp/items/" + itemId);
           }
        }
4

5 に答える 5

18

サービスのdeferredメソッドを使用するだけです$q

    var fakeHttpCall = function(isSuccessful) {
    
      var deferred = $q.defer()
    
      if (isSuccessful === true) {
        deferred.resolve("Successfully resolved the fake $http call")
      }
      else {
        deferred.reject("Oh no! Something went terribly wrong in your fake $http call")
      }
      
      return deferred.promise
    }

そして、$httppromise のように関数を呼び出すことができます (もちろん、その中に入れたいものは何でもカスタマイズする必要があります)。

    fakeHttpCall(true).then(
      function (data) {
        // success callback
        console.log(data)
      },
      function (err) {
        // error callback
        console.log(err)
      })
于 2014-06-24T15:26:36.437 に答える
6

この投稿は、私が求めていたものと似ていることがわかりました。

ただし、真の HTTP 要求呼び出しを発行する代わりに、偽のデータを返すことができるように、サービス呼び出しをモックする方法が必要でした。この状況に対処する最善の方法は、Angular の$httpBackendサービスを使用することです。たとえば、「アイテム」リソースへの GET リクエストをバイパスするには、パーシャル/テンプレートの GET をバイパスしないようにするには、次のようにします。

angular
   .module('myApp', ['ngMockE2E'])
   .run(['$httpBackend', function($httpBackend) {
      $httpBackend
        .whenGET(/^partials\/.+/)
        .passThrough();
      $httpBackend
        .whenGET(/^\/myapp\/items\/.+/)
        .respond({itemId : "123", name : "ItemName"});
}]);

$httpBackend の詳細については、このドキュメントを参照してください。

于 2014-06-24T21:46:18.070 に答える
4

私は最終的にjasmin を使用する方法を見つけました。$httpBackend同じサービスでモックが必要な非 $http-methods もあったため、私には選択肢がありませんでした。また、URLを指定する必要があるコントローラーテストは、コントローラーとそのテストがそれについて知る必要がないため、完璧ではないと思います。

仕組みは次のとおりです。

beforeEach(inject(function ($controller, $rootScope, $q) {
  scope = $rootScope.$new();
  mockSvc = {
    someFn: function () {
    },
    someHttpFn: function () {
    }
  };

  // use jasmin to fake $http promise response
  spyOn(mockSvc, 'someHttpFn').and.callFake(function () {
    return {
      success: function (callback) {
        callback({
         // some fake response
        });
      },
      then: function(callback) {
         callback({
         // some fake response, you probably would want that to be
         // the same as for success 
         });
      },
      error: function(callback){
        callback({
         // some fake response
        });             
      }
    }
  });

  MyCtrl = $controller('MyCtrl', {
    $scope: scope,
    MyActualSvc: mockSvc
  });
}));
于 2015-05-04T10:07:45.400 に答える
0

簡単！

次のようにangular-mocks-asyncを使用して実行できます。

var app = ng.module( 'mockApp', [
    'ngMockE2E',
    'ngMockE2EAsync'
]);

app.run( [ '$httpBackend', '$q', function( $httpBackend, $q ) {

    $httpBackend.whenAsync(
        'GET',
        new RegExp( 'http://api.example.com/user/.+$' )
    ).respond( function( method, url, data, config ) {

        var re = /.*\/user\/(\w+)/;
        var userId = parseInt(url.replace(re, '$1'), 10);

        var response = $q.defer();

        setTimeout( function() {

            var data = {
                userId: userId
            };
            response.resolve( [ 200, "mock response", data ] );

        }, 1000 );

        return response.promise;

    });

}]);
于 2016-09-14T20:58:09.410 に答える