Javascript 带有谷歌地图的AngularJS测试控制器
I使用此控制器的NgMap指令显示地图:Javascript 带有谷歌地图的AngularJS测试控制器,javascript,angularjs,google-maps,Javascript,Angularjs,Google Maps,I使用此控制器的NgMap指令显示地图: app.controller('AddStoreController', function ($scope, StoresService, NgMap, appConfig) { StoresService.getCompanies().then(function(data){ $scope.companies = data.data; }); $scope.store = {}; $scope.geoc
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行
我怎样才能让它工作呢?我想你漏掉了括号
$scope.geocoder=新的google.maps.geocoder() 我想你漏掉了括号
$scope.geocoder=新的google.maps.geocoder() 我修复了它,首先我忘了在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();
})
});
我修复了它,首先我忘了在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();
})
});
请看这篇文章…显然你必须明确说明你的应用程序是否使用了传感器。。。。控制器工作正常,我只是试着运行一个工作测试请看这篇文章…显然你必须明确说明你的应用程序是否使用了传感器。。。。控制器工作正常,我只是试着运行一个工作测试很好,你找到了解决方案!:-)为了让其他人更容易看到您的问题已经解决,您可以将您的答案标记为已解决。太好了,您找到了解决方案!:-)为了让别人更容易看到你的问题已经解决,你可以将你的答案标记为已解决。