Comment se moquer d'un appel http $ angulaire et retourner un objet promesse qui se comporte comme $ http

Est-il un moyen de retourner un HttpPromise (ou quelque chose de similaire) pour simuler un appel à $http? Je veux définir une variable qui indique si le réel de la requête HTTP est fait ou si un faux HttpPromise objet est retourné avec de fausses données.

Par exemple, j'ai un service qui est similaire à ceci:

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);
       }
    };
 } ]);

Et dans mon contrôleur, j'ai un appel à ce service qui ressemble à ceci:

        //Somewhere in my controller

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

Je suis en train de pas modifier le code du contrôleur, je veux le success et error le chaînage de continuer à travailler alors que dans mon "isInTestMode".
Est-il possible de simuler une HttpPromise dans la façon que j'ai décrite dans le service?

Ci-dessous est une édition révisée de la "MyService" ci-dessus (un extrait) contenant un success et error sur la promesse de l'objet. Mais, comment dois-je exécuter l' success méthode?

        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);
           }
        }

source d'informationauteur whyceewhite

Suffit d'utiliser la deferred méthode de la $qservice

    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 you fake $http call")
      }

      return deferred.promise
    }

Et puis vous pouvez appeler votre fonction comme un $http promesse (vous devez personnaliser tout ce que vous voulez mettre à l'intérieur, bien sûr).

    fakeHttpCall(true).then(
      function (data) {
        //success callback
        console.log(data)
      },
      function (err) {
        //error callback
        console.log(err)
      })

6

J'ai trouvé que ce post est similaire à ce que j'ai demandé.

Cependant, je voulais un moyen de se moquer de mon appel de service, de sorte que de fausses données pourraient être retournés au lieu d'émettre une vraie requête HTTP appel. La meilleure façon de gérer cette situation, pour moi, est d'utiliser angulaire du $httpBackend service. Par exemple, pour contourner une requête GET à mes "articles" de la ressource, MAIS à pas de dérivation Obtient de mes partiels/templates je voudrais faire quelque chose comme ceci:
```
angular
   .module('myApp', ['ngMockE2E'])
   .run(['$httpBackend', function($httpBackend) {
      $httpBackend
        .whenGET(/^partials\/.+/)
        .passThrough();
      $httpBackend
        .whenGET(/^\/myapp\/items\/.+/)
        .respond({itemId : "123", name : "ItemName"});
}]);
```
Voir cette documentation pour plus d'informations sur $httpBackend.

J'ai enfin trouvé un moyen à l'aide de jasmin. $httpBackend était pas une option pour moi, car il y avait aussi des non-$http-méthodes-je besoin de fantaisie sur le même service. Je pense aussi que le test du contrôleur avoir besoin de spécifier l'url n'est pas parfait comme à mon humble avis le contrôleur et son test ne devrait pas avoir besoin de le savoir.

Voici comment cela fonctionne:

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
  });
}));

Vous pouvez mettre en œuvre votre FakeHttp classe:

var FakeHttp = function (promise) {
    this.promise = promise;
    this.onSuccess = function(){};
    this.onError = function(){};
    this.premise.then(this.onSuccess, this.onError);
};
FakeHttp.prototype.success = function (callback) {
    this.onSuccess = callback;
    /**You need this to avoid calling previous tasks**/
    this.promise.$$state.pending = null;
    this.promise.then(this.onSucess, this.onError);
    return this;
};
FakeHttp.prototype.error = function (callback) {
    this.onError = callback;
    /**You need this to avoid calling previous tasks**/
    this.promise.$$state.pending = null;
    this.promise.then(this.onSuccess, this.onError);
    return this;
};

Puis dans votre code, vous seriez de retour d'un nouveau fakeHttp de la promesse.

if(testingMode){
    return new FakeHttp(promise);
};

La promesse doit être asynchrone, sinon ça ne marchera pas. Pour cela, vous pouvez utiliser $timeout.

facile comme bonjour!

Vous pouvez le faire en utilisant angulaires-se moque-async comme suit:

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;

    });

}]);

Vous devez vous connecter pour publier un commentaire.