AngularJS Jasmine 单元测试与 httpBackend - rootScope 变量未定义

Question

我有以下控制器

app.controller('NavController', ['$rootScope', '$scope', 'api', function($rootScope, $scope, $location, auth, api) {
    $scope.load = function() {
        return api.get('/location').success(function(data) {
            $rootScope.locations = data;
        }).error(function(data) {
            console.log('load error');
        });
    };
}]);

这是我为它编写的单元测试

describe('Navigation Controller Test', function() {

    beforeEach(module('app'));

    var controller, scope, rootScope, httpBackend;

    beforeEach(inject(function(_$controller_, _$rootScope_, $httpBackend) {
        var $controller = _$controller_;
        rootScope = _$rootScope_;
        scope = rootScope.$new();
        httpBackend = $httpBackend;
        controller = $controller('NavController', {
            $rootScope: rootScope,
            $scope: scope,
        });

        apiRequestHandler = httpBackend.when('GET', '/api/v2/location')
            .respond({userId: 'userX'});

    }));

    afterEach(function() {
        httpBackend.verifyNoOutstandingExpectation();
        httpBackend.verifyNoOutstandingRequest();
    });

    describe('load()', function() {
        it('should have locations when successful', function() {
            httpBackend.expectGET('/api/v2/location');
            scope.load();
            expect(rootScope.locations).toEqual("{userId: 'userX'}");
            httpBackend.flush();
        });
    });
});

我遇到的当前问题是，即使在调用 scope.load() 函数之后，rootScope.locations 也未定义。我不太确定这是为什么，但我似乎找到的最接近的帖子是 this 一个我认为可能与我的问题有关但我不太确定的帖子。

当获取请求成功并且它具有正确的输出时，我在控制器中执行了console.log($rootScope.locations)，但是我不知道如何让它在此测试中显示相同。

Answer 1

您不应该在控制器中使用 rootScope。你的控制器应该只使用 $scope 并且为了让 jasmine 测试正常工作，你应该有 beforeEach 如下：

var controller, scope, httpBackend;

beforeEach(inject(function(_$controller_, _$rootScope_, $httpBackend) {
    var $controller = _$controller_;
    scope = rootScope.$new();
    httpBackend = $httpBackend;
    controller = $controller('NavController', {
        $scope: scope,
        //authentication dependency and so on
    });

    ...

}));

你的控制器：

 app.controller('NavController', function($scope, api) {
     $scope.load = function() {
         return api.get('/location').success(function(data) {
             $scope.locations = data;
         }).error(function(data) {
         console.log('load error');
    });
};
});

编辑： 测试流程也应该是：

it('should have locations when successful', function() { 
  scope.load(); 
  httpBackend.expectGET('/api/v2/location'); 
  httpBackend.flush(); 
  expect(rootScope.locations).toEqual("{userId: 'userX'}"); 
}); 

您需要首先调用您的函数，而不是期望 http 后端、下一次刷新，然后才进行验证。此外，只有在控制器中使用 $http 而不是其他第三方 ajax 调用提供程序时，才能使用 httpBackend。