以角度测试 $http.get() 请求

Question

我正在尝试为作为控制器实例化一部分的 http.get() 请求编写 jasmine 测试：

例如

angular.module('dashboard').controller('DashboardCtrl', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http) {

$scope.module_names = [
    [0, 'WorkforceMap', null, null],
    [10, 'Engagement SentiMap', 'Sentiment', 'engagement'],
    [11, 'Change SentiMap', 'Sentiment', 'change'],
];

$http.get('api/info', {cache: true}).success(function(data) {
    $rootScope.dash_info = data;

    var comp = $rootScope.components = [];
    for(var i = 0; i < scope.module_names.length; i++) {
        var mod = scope.module_names[i];
        if(mod[0] in data.modules)
            comp.push([mod[1], mod[3]]);
        else
            del_module(mod[2], mod[3]);
    }
});

$http.get('api/population_data', {cache: true}).success(function(data) {
    $rootScope.population_data = data;
});

还有一些 http 请求。

我正在尝试使用 httpBackend 为第一个 api 调用“api/info”编写单元测试，并且一直在苦苦挣扎。

describe("DashboardCtrl Tests", function(){

beforeEach(module('dashboard'));

var scope;
var $httpBackend;
var controller;

beforeEach(inject(function(_$controller_, _$httpBackend_, $rootScope, $injector){

    scope = $rootScope.$new();
    controller = _$controller_('DashboardCtrl', {$scope: scope});

    $httpBackend = _$httpBackend_;
    $httpBackend.expectGET('/api/info').respond({'short': 'hi'});
}));

describe('$http.get(api/info)', function(){

    it(' receives data from dashboard/:profile_id/api/info', function(){

        $httpBackend.expectGET('api/info');
        $httpBackend.flush();


    });
});
});

我认为我一直在苦苦挣扎的原因是我无法找出如何挑选出一个 http.get 请求，因为所有请求都是在实例化控制器时执行的。

我最近的错误是“ReferenceError: Can't find variable: scope”

我会继续挖掘，但如果有人以前见过这样的东西，我将不胜感激！

谢谢

Answer 1

在这种情况下，我所做的是隔离方法中的调用，您至少可以将所有这些包装在 $scope.init 函数中并对其进行测试。

更好的方法是在更小的函数上削减它，最好的方法是让服务在那些更小的函数中返回 $http 承诺。

初始化示例：

angular.module('dashboard').controller('DashboardCtrl', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http) {

$scope.init = function (){

    $scope.module_names = [
        [0, 'WorkforceMap', null, null],
        [10, 'Engagement SentiMap', 'Sentiment', 'engagement'],
        [11, 'Change SentiMap', 'Sentiment', 'change'],
    ];

    $scope.info();

    $http.get('api/population_data', {cache: true}).success(function(data) {
       $rootScope.population_data = data;
    });

};

$scope.info = function (){
    $http.get('api/info', {cache: true}).success(function(data) {
    $rootScope.dash_info = data;

    var comp = $rootScope.components = [];
    for(var i = 0; i < scope.module_names.length; i++) {
        var mod = scope.module_names[i];
        if(mod[0] in data.modules)
            comp.push([mod[1], mod[3]]);
        else
            del_module(mod[2], mod[3]);
    }
    });
};    

$scope.init();

在测试中：

describe('$http.get(api/info)', function(){

it(' receives data from dashboard/:profile_id/api/info', function(){

    $httpBackend.expectGET('api/info').respond({'title':'test'});
    scope.info();
    $httpBackend.flush();
    $rootScope.$digest();

    expect($rootScope.dash_info).toEqual({'title':'test'});


});
});