2016-06-09 26 views
1

我示出使用NgMap指令與此控制器的地圖:AngularJS與谷歌測試控制器映射在指令

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沒有定義,就行$ scope.geocoder = new google.maps.Geocoder 我該如何讓它工作?

+0

請看到這個帖子。 ...顯然你必須明確說明你的應用程序是否使用傳感器或不.... .... http://stackoverflow.com/questions/6398342/cant-initiate-the-google-maps-geocoder – HoppyScoot

+0

控制器正在工作正確地說,我只是想運行一個工作測試 –

回答

0

我認爲你缺少的括號

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

0

我固定它,首先我所有我忘了,包括圖書館在karma.conf.js

module.exports = function(config) { 
    config.set({ 

    basePath: './', 
    frameworks: ['jasmine'], 
    files: [ 
     'public/js/libs/angular.min.js', 
     'node_modules/angular-mocks/angular-mocks.js', 
     'https://maps.googleapis.com/maps/api/js', 
     'public/js/**/*.js', 
     'test/**/*.js' 
    ], 
[...] 

和只是一些變化對我的測試

[...] 
describe('AddStoreController', function(){ 
     beforeEach(function(){ 
      var NgMap, appConfig; 
      module(function ($provide) { 
       $provide.value('NgMap',{ 
        getMap: function() { 
         return { 
          then: function() { 

          } 
         }; 
        } 
       }); 
       $provide.value('appConfig',{ 
        gmapsKey : 'asdasd' 
       }); 
       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(); 
     }) 
    });