javascript - AngularJS 测试 Controller 与指令中的谷歌地图

Question

我通过此 Controller 使用 NgMap 指令显示 map :

app.controller('AddStoreController', function ($scope, StoresService, NgMap, appConfig) {

    StoresService.getCompanies().then(function(data){
        $scope.companies = data.data;
    });
    $scope.store = {};
    $scope.geocoder = new google.maps.Geocoder;
    $scope.addStore = function () {
        StoresService.addStore($scope.store).then(function () {
            $scope.store = {};
            $scope.addStoreForm.$setPristine();
        });
    };

    $scope.gmapsKey = 'https://maps.googleapis.com/maps/api/js?key='+appConfig.gmapsKey;
    $scope.markerPosition = 'current-location';
    NgMap.getMap().then(function (map) {
        $scope.map = map;
    });
    $scope.placeMarker = function (e) {
        var position = e.latLng;
        $scope.markerPosition = [position.lat(),position.lng()];
        $scope.store.lat = position.lat();
        $scope.store.long = position.lng();
        $scope.getAddress();
        $scope.mapDirty = true;
    };
    navigator.geolocation.getCurrentPosition(function(location) {
        $scope.markerPosition = [location.coords.latitude,location.coords.longitude];
        $scope.store.lat = location.coords.latitude;
        $scope.store.long = location.coords.longitude;
        $scope.getAddress();
    }, function(error){
        alert('you should enable gelocation');
    });
    $scope.getAddress = function(){
        var latlng = {lat : parseFloat($scope.store.lat), lng : parseFloat($scope.store.long)}
        $scope.geocoder.geocode({'location': latlng}, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                $scope.store.address = results[0].address_components[1].long_name+' '+results[0].address_components[0].long_name;
                $scope.store.city = results[0].address_components[2].long_name;
                $scope.store.province = results[0].address_components[3].long_name;
                $scope.store.country = results[0].address_components[5].long_name;
                $scope.store.zip = results[0].address_components[6].long_name;
            }
        });
    }


});

和我的测试

describe("Stores Controller", function () {
beforeEach(function () {
    module('storesController');
});
beforeEach(function () {
        var StoresService, createController, scope, rootScope, $q;
        // Provide will help us create fake implementations for our dependencies
        module(function ($provide) {

            $provide.value('StoresService', {
                getStores: function () {
                    return {
                        then: function (callback) {
                            return callback({data: {name: 'store1'}});
                        }
                    };
                },
                deleteStore: function () {
                    return {
                        then: function (callback) {
                            return callback({data: {name: 'store1'}});
                        }
                    };
                },
                getCompanies: function () {
                    return {
                        then: function (callback) {
                            return callback({data: {name: 'store1'}});
                        }
                    };
                }
            });

            return null;
        });
    });

describe('AddStoreController', function(){
    beforeEach(function(){
        var NgMap, appConfig;
         module(function ($provide) {
            $provide.value('NgMap');
            $provide.value('appConfig');
            return null;
         });
    });
    beforeEach(function(){
        inject(function ($controller, _$rootScope_, _StoresService_,_NgMap_,_appConfig_) {
            rootScope = _$rootScope_;
            scope = _$rootScope_.$new();
            NgMap = _NgMap_;
            appConfig = _appConfig_;
            StoresService = _StoresService_;
            createController = function () {
                return $controller("AddStoreController", {
                    $scope: scope,
                });
            };
        });
    });
    it('should call getCompanies', function(){
         spyOn(StoresService, 'getCompanies').and.callThrough();
        createController();
        expect(StoresService.getCompanies).toHaveBeenCalled();
    })
});

});

我收到此错误 ReferenceError: google is not Defined, on line $scope.geocoder = new google.maps.Geocoder我怎样才能让它发挥作用？

Answer 1

我认为你漏掉了括号

$scope.geocoder = new google.maps.Geocoder();