不要混淆顾虑！

Question

我正在尝试找出控制器中单元测试成功和错误回调的最佳方法。我能够模拟出服务方法，只要控制器只使用默认的$ q函数，例如'then'（参见下面的例子）。当控制器响应“成功”或“错误”承诺时，我遇到了问题。（对不起，如果我的术语不正确）。

这是一个示例controller \ service

var myControllers = angular.module('myControllers');

myControllers.controller('SimpleController', ['$scope', 'myService',
  function ($scope, myService) {

      var id = 1;
      $scope.loadData = function () {
          myService.get(id).then(function (response) {
              $scope.data = response.data;
          });
      };

      $scope.loadData2 = function () {
          myService.get(id).success(function (response) {
              $scope.data = response.data;
          }).error(function(response) {
              $scope.error = 'ERROR';
          });
      }; 
  }]);


cocoApp.service('myService', [
    '$http', function($http) {
        function get(id) {
            return $http.get('/api/' + id);
        }
    }
]);

我有以下测试

'use strict';

describe('SimpleControllerTests', function () {

    var scope;
    var controller;
    var getResponse = { data: 'this is a mocked response' };

    beforeEach(angular.mock.module('myApp'));

    beforeEach(angular.mock.inject(function($q, $controller, $rootScope, $routeParams){

        scope = $rootScope;
        var myServiceMock = {
            get: function() {}
        };

        // setup a promise for the get
        var getDeferred = $q.defer();
        getDeferred.resolve(getResponse);
        spyOn(myServiceMock, 'get').andReturn(getDeferred.promise);

        controller = $controller('SimpleController', { $scope: scope, myService: myServiceMock });
    }));


    it('this tests works', function() {
        scope.loadData();
        expect(scope.data).toEqual(getResponse.data);
    });

    it('this doesnt work', function () {
        scope.loadData2();
        expect(scope.data).toEqual(getResponse.data);
    });
});

第一次测试通过，第二次测试失败并显示错误“TypeError：Object不支持属性或方法'成功'”。我在这个实例中得到了getDeferred.promise 没有成功的功能。好的，这是一个问题，编写这个测试的好方法是什么，以便我可以测试'成功'，'错误'和＆amp; '那么'模拟服务的条件？

我开始认为我应该避免在我的控制器中使用success（）和error（）......

修改

所以在考虑了这个之后，感谢下面的详细解答，我得出的结论是，在控制器中处理成功和错误回调是不好的。正如HackedByChinese所提到的那样低于成功\错误是由$ http添加的语法糖。所以，实际上，通过尝试处理成功\错误我让$ http关注泄漏到我的控制器，这正是我试图通过在服务中包装$ http调用来避免。我要采取的方法是更改控制器不使用success \ error：

myControllers.controller('SimpleController', ['$scope', 'myService',
  function ($scope, myService) {

      var id = 1;
      $scope.loadData = function () {
          myService.get(id).then(function (response) {
              $scope.data = response.data;
          }, function (response) {
              $scope.error = 'ERROR';
          });
      };
  }]);

这样我可以通过在延迟对象上调用resolve（）和reject（）来测试错误\成功条件：

'use strict';

describe('SimpleControllerTests', function () {

    var scope;
    var controller;
    var getResponse = { data: 'this is a mocked response' };
    var getDeferred;
    var myServiceMock;

    //mock Application to allow us to inject our own dependencies
    beforeEach(angular.mock.module('myApp'));
    //mock the controller for the same reason and include $rootScope and $controller
    beforeEach(angular.mock.inject(function($q, $controller, $rootScope, $routeParams) {

        scope = $rootScope;
        myServiceMock = {
            get: function() {}
        };
        // setup a promise for the get
        getDeferred = $q.defer();
        spyOn(myServiceMock, 'get').andReturn(getDeferred.promise);
        controller = $controller('SimpleController', { $scope: scope, myService: myServiceMock });  
    }));

    it('should set some data on the scope when successful', function () {
        getDeferred.resolve(getResponse);
        scope.loadData();
        scope.$apply();
        expect(myServiceMock.get).toHaveBeenCalled();
        expect(scope.data).toEqual(getResponse.data);
    });

    it('should do something else when unsuccessful', function () {
        getDeferred.reject(getResponse);
        scope.loadData();
        scope.$apply();
        expect(myServiceMock.get).toHaveBeenCalled();
        expect(scope.error).toEqual('ERROR');
    });
});

Answer 1

正如有人在删除的答案中提到的那样，success和error是由$http添加的语法糖，因此当您创建自己的承诺时，它们就不存在。您有两种选择：

1 - 不要模拟服务并使用`$httpBackend`来设置期望并刷新

这个想法是让你的myService在不知道它被测试的情况下正常行事。 $httpBackend将允许您设置期望和响应，并刷新它们，以便您可以同步完成测试。 $http不会更明智，它返回的承诺看起来和功能就像真实的一样。如果你的HTTP期望很少，那么这个选项很好。

'use strict';

describe('SimpleControllerTests', function () {

    var scope;
    var expectedResponse = { name: 'this is a mocked response' };
    var $httpBackend, $controller;

    beforeEach(module('myApp'));

    beforeEach(inject(function(_$rootScope_, _$controller_, _$httpBackend_){ 
        // the underscores are a convention ng understands, just helps us differentiate parameters from variables
        $controller = _$controller_;
        $httpBackend = _$httpBackend_;
        scope = _$rootScope_;
    }));

    // makes sure all expected requests are made by the time the test ends
    afterEach(function() {
      $httpBackend.verifyNoOutstandingExpectation();
      $httpBackend.verifyNoOutstandingRequest();
    });

    describe('should load data successfully', function() {

        beforeEach(function() {
           $httpBackend.expectGET('/api/1').response(expectedResponse);
           $controller('SimpleController', { $scope: scope });

           // causes the http requests which will be issued by myService to be completed synchronously, and thus will process the fake response we defined above with the expectGET
           $httpBackend.flush();
        });

        it('using loadData()', function() {
          scope.loadData();
          expect(scope.data).toEqual(expectedResponse);
        });

        it('using loadData2()', function () {
          scope.loadData2();
          expect(scope.data).toEqual(expectedResponse);
        });
    });

    describe('should fail to load data', function() {
        beforeEach(function() {
           $httpBackend.expectGET('/api/1').response(500); // return 500 - Server Error
           $controller('SimpleController', { $scope: scope });
           $httpBackend.flush();
        });

        it('using loadData()', function() {
          scope.loadData();
          expect(scope.error).toEqual('ERROR');
        });

        it('using loadData2()', function () {
          scope.loadData2();
          expect(scope.error).toEqual('ERROR');
        });
    });           
});

2 - 返回完全嘲笑的承诺

如果您正在测试的内容具有复杂的依赖关系并且所有设置都很令人头疼，您可能仍然希望在尝试时自行模拟服务和调用。不同之处在于你要完全嘲笑承诺。这样做的缺点是可以创建所有可能的模拟承诺，但是您可以通过创建自己的函数来创建这些对象，从而使这更容易。

这样做的原因是因为我们假设它通过立即调用success，error或then提供的处理程序来解决它，导致它同步完成。

'use strict';

describe('SimpleControllerTests', function () {

    var scope;
    var expectedResponse = { name: 'this is a mocked response' };
    var $controller, _mockMyService, _mockPromise = null;

    beforeEach(module('myApp'));

    beforeEach(inject(function(_$rootScope_, _$controller_){ 
        $controller = _$controller_;
        scope = _$rootScope_;

        _mockMyService = {
            get: function() {
               return _mockPromise;
            }
        };
    }));

    describe('should load data successfully', function() {

        beforeEach(function() {

          _mockPromise = {
             then: function(successFn) {
               successFn(expectedResponse);
             },
             success: function(fn) {
               fn(expectedResponse);
             }
          };

           $controller('SimpleController', { $scope: scope, myService: _mockMyService });
        });

        it('using loadData()', function() {
          scope.loadData();
          expect(scope.data).toEqual(expectedResponse);
        });

        it('using loadData2()', function () {
          scope.loadData2();
          expect(scope.data).toEqual(expectedResponse);
        });
    });

    describe('should fail to load data', function() {
        beforeEach(function() {
          _mockPromise = {
            then: function(successFn, errorFn) {
              errorFn();
            },
            error: function(fn) {
              fn();
            }
          };

          $controller('SimpleController', { $scope: scope, myService: _mockMyService });
        });

        it('using loadData()', function() {
          scope.loadData();
          expect(scope.error).toEqual("ERROR");
        });

        it('using loadData2()', function () {
          scope.loadData2();
          expect(scope.error).toEqual("ERROR");
        });
    });           
});

即使在大型应用程序中，我也很少选择选项2。

对于它的价值，您的loadData和loadData2 http处理程序会出错。它们引用response.data，但handlers将直接使用已解析的响应数据调用，而不是响应对象（因此它应为data而不是response.data）。

Answer 2

不要混淆顾虑！

在控制器中使用$httpBackend是一个不好的主意，因为您在测试中混合了关注点。无论您是否从端点检索数据都不是Controller的关注点，您要调用的DataService是一个问题。

如果您更改服务中的Endpoint Url，则可以更清楚地看到这一点，然后您必须修改两个测试：服务测试和控制器测试。

同样如前所述，使用success和error是语法糖，我们应该坚持使用then和catch。但实际上，您可能会发现自己需要测试“遗留”代码。所以我正在使用这个功能：

function generatePromiseMock(resolve, reject) {
    var promise;
    if(resolve) {
        promise = q.when({data: resolve});
    } else if (reject){
        promise = q.reject({data: reject});
    } else {
        throw new Error('You need to provide an argument');
    }
    promise.success = function(fn){
        return q.when(fn(resolve));
    };
    promise.error = function(fn) {
        return q.when(fn(reject));
    };
    return promise;
}

通过调用此函数，您将获得一个真正的承诺，在您需要时响应then和catch方法，并且也适用于success或error回调。请注意，成功和错误会返回一个promise本身，因此它将使用链式then方法。

（注意：在第4行和第6行，函数返回解析并拒绝对象的data属性中的值。这是为了模拟$ http的行为，因为它返回数据，http状态等。）

Answer 3

是的，不要在你的控制器中使用$ httpbackend，因为我们不需要发出真正的请求，你只需要确保一个单元完全按预期完成它的工作，看看这个简单的控制器测试，这很容易理解

/**
 * @description Tests for adminEmployeeCtrl controller
 */
(function () {

    "use strict";

    describe('Controller: adminEmployeeCtrl ', function () {

        /* jshint -W109 */
        var $q, $scope, $controller;
        var empService;
        var errorResponse = 'Not found';


        var employeesResponse = [
            {id:1,name:'mohammed' },
            {id:2,name:'ramadan' }
        ];

        beforeEach(module(
            'loadRequiredModules'
        ));

        beforeEach(inject(function (_$q_,
                                    _$controller_,
                                    _$rootScope_,
                                    _empService_) {
            $q = _$q_;
            $controller = _$controller_;
            $scope = _$rootScope_.$new();
            empService = _empService_;
        }));

        function successSpies(){

            spyOn(empService, 'findEmployee').and.callFake(function () {
                var deferred = $q.defer();
                deferred.resolve(employeesResponse);
                return deferred.promise;
                // shortcut can be one line
                // return $q.resolve(employeesResponse);
            });
        }

        function rejectedSpies(){
            spyOn(empService, 'findEmployee').and.callFake(function () {
                var deferred = $q.defer();
                deferred.reject(errorResponse);
                return deferred.promise;
                // shortcut can be one line
                // return $q.reject(errorResponse);
            });
        }

        function initController(){

            $controller('adminEmployeeCtrl', {
                $scope: $scope,
                empService: empService
            });
        }


        describe('Success controller initialization', function(){

            beforeEach(function(){

                successSpies();
                initController();
            });

            it('should findData by calling findEmployee',function(){
                $scope.findData();
                // calling $apply to resolve deferred promises we made in the spies
                $scope.$apply();
                expect($scope.loadingEmployee).toEqual(false);
                expect($scope.allEmployees).toEqual(employeesResponse);
            });
        });

        describe('handle controller initialization errors', function(){

            beforeEach(function(){

                rejectedSpies();
                initController();
            });

            it('should handle error when calling findEmployee', function(){
                $scope.findData();
                $scope.$apply();
                // your error expectations
            });
        });
    });
}());

使用success（）和error（）测试控制器

3 个答案:

1 - 不要模拟服务并使用`$httpBackend`来设置期望并刷新

2 - 返回完全嘲笑的承诺

不要混淆顾虑！

（注意：在第4行和第6行，函数返回解析并拒绝对象的data属性中的值。这是为了模拟$ http的行为，因为它返回数据，http状态等。）

使用success（）和error（）测试控制器

3 个答案:

1 - 不要模拟服务并使用$httpBackend来设置期望并刷新

2 - 返回完全嘲笑的承诺

不要混淆顾虑！

（注意：在第4行和第6行，函数返回解析并拒绝对象的data属性中的值。这是为了模拟$ http的行为，因为它返回数据，http状态等。）

1 - 不要模拟服务并使用`$httpBackend`来设置期望并刷新