web-dev-qa-db-fra.com

Comment puis-je me moquer du résultat dans une promesse $ http.get lors du test de mon contrôleur AngularJS?

Après beaucoup de lecture, il semble que la façon recommandée d'appeler un service Web à partir d'un contrôleur AngularJS soit d'utiliser une usine et de renvoyer une promesse à partir de cela.

Ici, j'ai une usine simple qui appelle un exemple d'API.

myApp.factory('MyFactory', ['$http',function($http) {
var people = {
        requestPeople: function(x) {
            var url = 'js/test.json';
            return $http.get(url);
        }
    };
return people;
}]);

Et voici comment je l'appelle dans le contrôleur

myApp.controller('MyCtrl1', ['$scope', 'MyFactory', function ($scope, MyFactory) {
        MyFactory.requestPeople(22).then(function(result) {
             $scope.peopleList = result;
        });
}]);

Bien que cela fonctionne bien, je voudrais pouvoir se moquer du result qui est passé lorsque then est appelé. Est-ce possible?

Jusqu'à présent, ma tentative n'a rien produit. Voici ma tentative:

//Fake service
var mockService = {
    requestPeople: function () {
        return {
            then: function () {
                return {"one":"three"};
            }
        }

    }
};


//Some setup
beforeEach(module('myApp.controllers'));
var ctrl, scope;

beforeEach(inject(function ($rootScope, $controller) {
    scope = $rootScope.$new();

    ctrl = $controller('MyCtrl1', { $scope: scope, MyFactory: mockService });
}));

//Test
it('Event Types Empty should default to false', inject(function () {
    expect(scope.peopleList.one).toBe('three');
}));

L'erreur que j'obtiens en exécutant ceci dans le coureur de karma, est

TypeError: 'undefined' n'est pas un objet (évaluation de 'scope.peopleList.one')

Comment puis-je faire fonctionner ce test avec mes données simulées?

javascriptunit-testingangularjsmockingjasmine
28
Mendhak

Je ne pense pas que $ httpBackend soit ce que vous recherchez ici, vous voulez que l'ensemble de l'usine soit moqué sans qu'il ait une dépendance à $ http?

Jetez un oeil à $ q , en particulier l'exemple de code sous l'en-tête Testing. Votre problème peut être résolu avec un code qui ressemble à ceci:

'use strict';

describe('mocking the factory response', function () {

    beforeEach(module('myApp.controllers'));

    var scope, fakeFactory, controller, q, deferred;

    //Prepare the fake factory
    beforeEach(function () {
        fakeFactory = {
            requestPeople: function () {
                deferred = q.defer();
                // Place the fake return object here
                deferred.resolve({ "one": "three" });
                return deferred.promise;
            }
        };
        spyOn(fakeFactory, 'requestPeople').andCallThrough();
    });

    //Inject fake factory into controller
    beforeEach(inject(function ($rootScope, $controller, $q) {
        scope = $rootScope.$new();
        q = $q;
        controller = $controller('MyCtrl1', { $scope: scope, MyFactory: fakeFactory });
    }));

    it('The peopleList object is not defined yet', function () {
        // Before $apply is called the promise hasn't resolved
        expect(scope.peopleList).not.toBeDefined();
    });

    it('Applying the scope causes it to be defined', function () {
        // This propagates the changes to the models
        // This happens itself when you're on a web page, but not in a unit test framework
        scope.$apply();
        expect(scope.peopleList).toBeDefined();
    });

    it('Ensure that the method was invoked', function () {
        scope.$apply();
        expect(fakeFactory.requestPeople).toHaveBeenCalled();
    });

    it('Check the value returned', function () {
        scope.$apply();
        expect(scope.peopleList).toBe({ "one": "three" });
    });
});

J'ai ajouté quelques tests sur ce que fait $ apply, je ne le savais pas avant de commencer à jouer avec ça!

Gog

38
GogLlundain