Javascript 服务的Angularjs单元测试

我正在使用我正在为其编写单元测试用例的服务。当我注入

服务时

&从

控制器调用函数

，我没有得到

数据

。我是写案例的初学者

这是我的密码

国家名单服务

angular.module('myApp').factory('StatesList', ['$resource', function($resource) {
    return $resource('/api/states');
}]);    

控制器

$scope.statesList = function () {
            StatesList.query(function (states) {      
                // Brings all states
                 $scope.states = states;
            });
        };

试验

WebStorm中的输出

'List of States'
undefined

为什么州不被展示。通过使用邮递员可以查看数据。

StatesList.query（）

是一个异步http调用，因此您需要在测试中使用来自

ngMock

模块的mock

$httpBackend

服务。将

angular mock.js

添加到测试配置中，然后尝试以下操作：

describe('States List', function () {
    var ctrl, scope, statesService, $httpBackend;
    beforeEach(function () {
        module('myApp');
        inject(function ($rootScope, $controller, StatesList, _$httpBackend_) {
            scope = $rootScope.$new();
            statesService = StatesList;
            ctrl = $controller('StatesCtrl', { $scope: scope, StatesList: statesService});
            $httpBackend = _$httpBackend_;
        });
    });

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

    it('should have practice list to be null', function () {

        $httpBackend.expectGET('/api/states').respond([{ // ask mock $httpBackend to respond with fake data
            name: 'State 1'
        }, {
            name: 'State 2'
        }]);

        console.log('List of States');
        scope.statesList();

        $httpBackend.flush(); // flush the http request to send fake data back to StatesList.query()

        console.log(scope.states); // I don't see any data here
        expect(scope.states).not.toBeNull();
    });
});

StatesList.query（）

是一个异步http调用，因此您需要在测试中使用来自

ngMock

模块的mock

$httpBackend

服务。将

angular mock.js

添加到测试配置中，然后尝试以下操作：

describe('States List', function () {
    var ctrl, scope, statesService, $httpBackend;
    beforeEach(function () {
        module('myApp');
        inject(function ($rootScope, $controller, StatesList, _$httpBackend_) {
            scope = $rootScope.$new();
            statesService = StatesList;
            ctrl = $controller('StatesCtrl', { $scope: scope, StatesList: statesService});
            $httpBackend = _$httpBackend_;
        });
    });

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

    it('should have practice list to be null', function () {

        $httpBackend.expectGET('/api/states').respond([{ // ask mock $httpBackend to respond with fake data
            name: 'State 1'
        }, {
            name: 'State 2'
        }]);

        console.log('List of States');
        scope.statesList();

        $httpBackend.flush(); // flush the http request to send fake data back to StatesList.query()

        console.log(scope.states); // I don't see any data here
        expect(scope.states).not.toBeNull();
    });
});

StatesList.query（）

是一个异步http调用，因此您需要在测试中使用来自

ngMock

模块的mock

$httpBackend

服务。将

angular mock.js

添加到测试配置中，然后尝试以下操作：

describe('States List', function () {
    var ctrl, scope, statesService, $httpBackend;
    beforeEach(function () {
        module('myApp');
        inject(function ($rootScope, $controller, StatesList, _$httpBackend_) {
            scope = $rootScope.$new();
            statesService = StatesList;
            ctrl = $controller('StatesCtrl', { $scope: scope, StatesList: statesService});
            $httpBackend = _$httpBackend_;
        });
    });

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

    it('should have practice list to be null', function () {

        $httpBackend.expectGET('/api/states').respond([{ // ask mock $httpBackend to respond with fake data
            name: 'State 1'
        }, {
            name: 'State 2'
        }]);

        console.log('List of States');
        scope.statesList();

        $httpBackend.flush(); // flush the http request to send fake data back to StatesList.query()

        console.log(scope.states); // I don't see any data here
        expect(scope.states).not.toBeNull();
    });
});

StatesList.query（）

是一个异步http调用，因此您需要在测试中使用来自

ngMock

模块的mock

$httpBackend

服务。将

angular mock.js

添加到测试配置中，然后尝试以下操作：

describe('States List', function () {
    var ctrl, scope, statesService, $httpBackend;
    beforeEach(function () {
        module('myApp');
        inject(function ($rootScope, $controller, StatesList, _$httpBackend_) {
            scope = $rootScope.$new();
            statesService = StatesList;
            ctrl = $controller('StatesCtrl', { $scope: scope, StatesList: statesService});
            $httpBackend = _$httpBackend_;
        });
    });

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

    it('should have practice list to be null', function () {

        $httpBackend.expectGET('/api/states').respond([{ // ask mock $httpBackend to respond with fake data
            name: 'State 1'
        }, {
            name: 'State 2'
        }]);

        console.log('List of States');
        scope.statesList();

        $httpBackend.flush(); // flush the http request to send fake data back to StatesList.query()

        console.log(scope.states); // I don't see any data here
        expect(scope.states).not.toBeNull();
    });
});

---

---

作为第一个故障，控制器还接收服务，因此您需要：

{$scope:scope，StatesList:statesService}

（当然，在创建控制器之前分配服务）@JesusRodriguez因为我对这一点很陌生……我添加了你的代码……但没有得到你的第二点……如何分配服务？我正在使用我在问题中编辑的代码……仍然给我结果……

未定义

作为第一个失败，控制器也会收到服务，所以你需要：

{$scope:scope，StatesList:statesService}

（当然，在创建控制器之前分配服务）@JesusRodriguez因为我对这一点很陌生……我添加了你的代码……但没有得到你的第二点……如何分配服务？我正在使用我在问题中编辑的代码……仍然给我结果……

未定义

作为第一个失败，控制器也会收到服务，所以你需要：

{$scope:scope，StatesList:statesService}

（当然，在创建控制器之前分配服务）@JesusRodriguez因为我对这一点很陌生……我添加了你的代码……但没有得到你的第二点……如何分配服务？我正在使用我在问题中编辑的代码……仍然给我结果……

未定义

作为第一个失败，控制器也会收到服务，所以你需要：

{$scope:scope，StatesList:statesService}

（当然，在创建控制器之前分配服务）@JesusRodriguez因为我对这一点非常陌生…我添加了你的代码…但没有得到你的第二点…如何分配服务？我正在使用我在问题中编辑的代码…仍然给我结果…

未定义的
如何调用real
http
调用而不是mock？首先，你不应该在单元测试中进行真正的http调用。如果你真的想知道这一点，请检查jasmine的异步支持好答案，这对我也有帮助。我同意不调用实际的http api，因为它更多的是一个后端测试功能。如何调用real
http
call而不是mock？首先，您不应该在单元测试中进行真正的http调用。如果您真的想这样做，请检查jasmine的asynchronous-support-Good-response对我也有帮助。我同意不调用实际的http api，因为它更多的是一个后端测试功能。如何调用real
http
call而不是mock？首先，你不应该在单元测试中进行真正的http调用。如果你真的想这样做，请检查jasmine的异步支持-Good-response，帮助我解决这个问题o、 我同意不调用实际的http api，因为它更多的是后端测试的一个功能。如何调用real
http
call而不是mock？首先，你不应该在单元测试中调用real http。如果你真的想这样做，请检查jasmine的异步支持好的答案，这对我也有帮助。我同意不调用real hTTPAPI，因为它更多的是一个需要在后端测试的特性。