角度单元测试控制器$scope长度

Question

我正在尝试使用$http获取一些数据的服务测试控制器，

存储控制器.js

(function () {
    var app = angular.module('storesController', ['storesService']);
    app.controller('StoresListController', function ($scope, StoresService) {
        $scope.getStores = function () {
            StoresService.getStores().then(function (data) {
                $scope.stores = data.data;
            });
        };
        $scope.getStores();
        $scope.deleteStore = function (id) {
            StoresService.deleteStore(id).then(function () {
                $scope.getStores();
            });
        };
    });
})()

商店服务.js

(function () {
    var app = angular.module('storesService', []);
    app.factory('StoresService', ['$http','appConfig', function ($http,appConfig) {
            var webServiceUrl = appConfig.webServiceUrl;
            var stores = [];
            stores.getStores = function () {
               return $http.get(webServiceUrl + 'getStores');
            };            
            return stores;
        }]);
})();

和我的测试

describe("Store Controller", function () {
var StoresService, createController, scope;
beforeEach(function () {
    module('storesController');
    module(function ($provide) {
        $provide.value('StoresService', {
            getStores: function () {
                return {
                    then: function (callback) {
                        return callback([
                            {name: "testName", country: "testCountry"},
                            {name: "testName2", country: "testCountry2"},
                            {name: "testName3", country: "testCountry3"},
                        ]);
                    }
                };
            },
        });
        return null;
    });
});
beforeEach(function () {
    inject(function ($controller, $rootScope, _StoresService_) {
        scope = $rootScope.$new();
        StoresService = _StoresService_;
        createController = function () {
            return $controller("StoresListController", {
                $scope: scope,
            });
        };
    });
});
it("should call the store service to retrieve the store list", function () {
    createController();
    expect(scope.stores.length).toBe(3);
});

}）;

我正在尝试测试在创建控制器时调用方法 $scope.getStores（） 并且变量 $scope.stores 是一个长度为 3 的对象。我已经尝试了几种方法来测试它，但我无法让它工作，得到这个错误

TypeError: scope.stores is undefined 

也许我应该对$httpBackend采取不同的方法，我从单元测试开始，我有点迷茫，有人可以帮忙吗？

Answer 1

可能这将使代码工作：

return callback({ data: [
                            {name: "testName", country: "testCountry"},
                            {name: "testName2", country: "testCountry2"},
                            {name: "testName3", country: "testCountry3"},
                        ]}); 

但我认为实际上创建一个虚假的承诺更具可读性且不易出错 - 像这样：

describe("Store Controller", function () {
    var StoresService, createController, scope, $q;
    beforeEach(function () {
        module('storesController');
        module(function ($provide) {
            $provide.value('StoresService', {
                getStores: function () {},
            });
            return null;
        });
    });
    beforeEach(function () {
        inject(function ($controller, $rootScope, _StoresService_, _$q_) {
            $q = _$q_;
            scope = $rootScope.$new();
            StoresService = _StoresService_;
            createController = function () {
                return $controller("StoresListController", {
                    $scope: scope,
                });
            };
        });
    });
    it("should call the store service to retrieve the store list", function () {
        var deferred = $q.defer();
        // Return fake promise.
        spyOn(StoresService, 'getStores').and.returnValue(deferred.promise);
        createController();
        // Resolve fake promise with some data.
        deferred.resolve({ data: 'some data'});
        // Callback from promise wont execute without digest:
        $rootScope.$digest();
        expect(scope.stores).toEqual('some data');
    });
    });