如何测试具有服务的 Angular 控制器答案

【问题标题】：How to test Angular controller having a service如何测试具有服务的 Angular 控制器
【发布时间】：2016-05-16 15:02:27
【问题描述】：

我有一个控制器和服务，如下所示

(function () {

    var mockController = function ($scope, MockService) {
        $scope.message = "This is a text message";

        $scope.getCities = function () {
            $scope.places = [];
            MockService.getCities().then(function (response) {
                var places = response.data["weather-app:root"].city;
                if (places) {
                    if (Array.isArray(places)) {
                        $scope.places = places;
                    } else {
                        $scope.places.push(places);
                    }
                }
            });
        };

    };


    var mockService = function ($http) {
        this.getCities = function () {
            return $http.get("../rest/url", {
                headers: {
                    'Accept': 'application/yang.data+json'
                }
            });
        };
    };

    angular.module("MockApp", [])
        .service("MockService", mockService)
        .controller("MockController", mockController);

}())

我创建了一个如下所示的模拟服务来模拟该服务以进行单元测试。

(function () {
    angular.module('mock.service', [])
        .service('MockService', function ($q) {
            var mockService = {};
            mockService.getCities = function () {
                var mydata = {
                    "weather-app:root": {
                        "city": [
                            {
                                "city-name": "Chennai"
                                , "country-name": "India"
                            }




                            , {
                                "city-name": "Mangalore"
                                , "country-name": "India"
                                }
                                ]
                    }
                }
                return $q.when(mydata);
            };
            return mockService;

        });
}());

我的测试用例是这样的

describe("MockController", function () {

    var $scope;

    beforeEach(function () {
        module("MockApp");
        beforeEach(module('mock.service'));

        inject(function (_$controller_, _$rootScope_, _MockService_) {
            $scope = _$rootScope_.$new();
            controller = _$controller_("MockController", {
                $scope: $scope
                , MockService: _MockService_
            });

        });
    });

    describe("Test", function () {

        it("Should be Bangalore", function () {
            $scope.getCities();
            console.log($scope.places);
        });
    });

});

问题是控制器中的 then 方法没有被调用。我该如何解决这个问题？

【问题讨论】：

Unit-test promise-based code in Angular的可能重复
@Phil 如果我在 beforeeach 中调用它，我应该在哪里调用它，它的抛出错误说 apply not function
哎呀，本来是$scope.$apply()（忘了$）。无论如何，我看到了另一个问题，因此将其全部编译为答案。

标签： angularjs unit-testing

【解决方案1】：

要解决的三件事...

不要嵌套beforeEach 调用。您可以使用module 初始化多个模块。

beforeEach(function() {
    module('MockApp', 'mock.service');
    // and so on

您的模拟数据与您从基于 $http 的承诺响应中看到的不太匹配
```
return $q.when({data: mydata});
```

为了处理 promise，你需要触发一个摘要循环

it("Should be Bangalore", function() {
    $scope.getCities();
    $scope.$apply();
    console.log($scope.places);
});

【讨论】：