AngularJS 和 Jasmine 测试控制器方法使用 $http 调用工厂方法答案

【问题标题】：AngularJS and Jasmine testing controller method calling factory method with $httpAngularJS 和 Jasmine 测试控制器方法使用 $http 调用工厂方法
【发布时间】：2013-11-07 21:24:16
【问题描述】：

我知道有很多类似的问题，但没有一个适用于相同的场景 - 所以请不要将其标记为重复。

我试图弄清楚如何执行控制器方法的测试，该方法调用注入的工厂服务的方法，执行 $http 调用并返回 json 数组。

这是我得到的：

angular.module('myApp', [])

.factory('callsFact', function($http) {

    var urlWrite = 'write.php';

    return {

        write : function(content) {

            return $http({
                method: 'POST',
                url: urlWrite,
                data: "content=" + content,
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            });

        }

      };

})

.controller('ReadWriteCtrl', function($scope, callsFact) {

    $scope.data = [];

    $scope.content = 'Some content';

    $scope.add = function() {

        callsFact.write($scope.content).success(function(data) {

            $scope.data.push({ id : data.id, content : $scope.content });

        });

    };

});

现在，这是我进行测试的地方，因为我不太确定该怎么做（请不要批评 - 我正在寻求帮助）：

describe('ReadWriteCtrl tests', function() {

    var $scope,
        callsFact;



    beforeEach(function() {

        module('myApp');

        inject(function($rootScope, _callsFact_) {

            $scope = $rootScope.$new();
            callsFact = _callsFact_;

        });

    });


    it('should add new content', inject(function($controller) {

        $controller('ReadWriteCtrl', {

            $scope : $scope,
            callsFact : callsFact

        });


        $scope.data = [];

        $scope.content = 'Some message';

        $scope.add();

        expect($scope.data.length).toBe(1);


    }));

});

澄清一下 - 我试图弄清楚如何测试 ReadWriteCtrl 的 add() 方法。

【问题讨论】：

标签： angularjs controller tdd jasmine

【解决方案1】：

所以在这种情况下，您可以使用 callsFact 的模拟版本

var mockPromise = {success: function(f){f({id:1})}};
var mockCallsFact = spyOn({}, 'add').andReturn(mockPromise);
$controller('ReadWriteCtrl', {

        $scope : $scope,
        callsFact : mockCallsFact

    });

那么你也可以包含断言：

expect(mockCallsFact.add).toHaveBeenCalled();

您也可以使用模拟 `httpBackend'，但我更喜欢用这种方式模拟依赖项。

【讨论】：