你如何测试使用Angular $ http的方法

时间:2014-02-16 21:11:20

标签: angularjs

我有这个工厂服务(我正在显示TypeScript代码,因为它更容易阅读)

module cockpit.services {
'use strict';
export class loginService {
        static $inject = ['$http', 'baseUrl'];
    constructor(private $http, private baseUrl: string) {
        console.log(typeof this.$http);
    }
        getUserId(uName: string, pwd: string): number {
        var userId = 0;
        this.$http.put(this.baseUrl + '/login',
            {userName: uName,password: pwd})
            .success(function (data) {
                console.log(data);
                userId = data.userId;});
        return userId;
    }
}}

我正在使用以下qUnit测试来测试它

module('serviceTests', {
setup: function() {
    var appMocks = angular.module('appMocks', []);
    appMocks.config(function($provide) {
        $provide.decorator('$httpBackend',
            angular.mock.e2e.$httpBackendDecorator);
        $provide.constant('baseUrl', '');
    });
    injector = angular.injector(['ng', 'cockpit', 'appMocks']);
    httpBackend = injector.get('$httpBackend');
},
teardown: function() {
    httpBackend.verifyNoOutstandingExpectation();
    httpBackend.verifyNoOutstandingRequest();
}});
test('loginService', function () {
   var service;
   httpBackend.whenPUT('/login').respond(200,{ userId: 23 });
   service = injector.get('loginService');
   var id = service.getUserId('easy', 'path');
   equal(id, 23, 'returns a userId');
});

除了测试语句本身之外,一切都很美妙。我可以单步执行代码并观察成功回调get执行并且服务中的userId被正确填充,但是return语句中的值不会传递回测试中的id变量而且会失败。所以服务工作正常。我无法证明这一点。

我显然测试错误地连接了测试,但我不知道如何。

1 个答案:

答案 0 :(得分:0)

你应该做的是在getUserId中使用promises。因为它刚刚立即返回,所以它总是返回0.相反,你应该返回一个promise,一旦你得到它就用正确的id值解析。

Here是$ q的文档。

希望这有帮助!