Fałszywe struktury obiektów Google Maps z JavaScriptem dla testów jednostkowych

Question

Obiekty interfejsu API Map Google są używane w następujący sposób: wygląda na to, że: google.maps."Constructor".

Chcę fałszywe wywołania poniżej ...

//var map = new google.maps.Map(value); 
//var fireStationBound = new google.maps.LatLng(val,val); 
//var bounds = new google.maps.LatLngBounds(boundary, boundary); 
//var markerFireStation = new google.maps.Marker(val); 
//var waterstationLayer = new google.maps.KmlLayer(val); 
//map.mapTypes.set(); 

... z poniższym kodzie ...

$(document).ready(function() { 

    function google() { 

    /* todo: Setup for every constructor a test function returning the test data */ 

    function LatLng(value) { 

    } 

    function LatLngBounds(value,value) { 

    } 

    function Marker(value) { 

    } 

    function Map(value) { 

    } 

    function KmlLayer(value) { 

    } 

    var maps = { 
        maps: { 
          LatLng: LatLng, 
          LatLngBounds: LatLngBounds, 
          Marker: Marker, 
          Map: Map, 
          KmlLayer: KmlLayer 
         } 
       }; 
       return maps; 
    } 

    **// Works** 
    var google = new google();  
    var bound = new google.maps.LatLng(10); 
    var bounds = new google.maps.LatLngBounds(10,20); 
    var marker = new google.maps.Marker(10); 
    var layer = new google.maps.KmlLayer(10); 
    var map = new google.maps.Map(10); 
    **// Doesn't Work ** 
    map.mapTypes.set(); 
}); 

Jak mogę fałszywy kod Google ...

map.mapTypes.set(); 

... który jest zwracany przez wywołanie ...

var map = google.maps.Map(val); 

Co musi wyglądać mój JavaScript, aby wpisać map.mapTypes.set(), a na końcu wywoływana jest funkcja set?

Po prostu chcę sfałszować obiekty Google, których używam w moim kodzie do testów jednostkowych.

Answer 1

Oto nasz dodatek do Map Google w wersji 3.19.18. Pierwotnie był napisany w języku CoffeeScript, ale przeprowadziłem go przez js2coffee i tutaj jest to surowa implementacja JavaScriptu. Dodałem dla ciebie mapTypes.set().

window.stubGoogleAPIS = function() { 
return window.google = { 
    maps: { 
     Animation: {}, 
     BicyclingLayer: function() {}, 
     Circle: function() {}, 
     ControlPosition: {}, 
     Data: function() {}, 
     DirectionsRenderer: function() {}, 
     DirectionsService: function() {}, 
     DirectionsStatus: {}, 
     DirectionsTravelMode: {}, 
     DirectionsUnitSystem: {}, 
     DistanceMatrixElementStatus: {}, 
     DistanceMatrixService: function() {}, 
     DistanceMatrixStatus: {}, 
     ElevationService: function() {}, 
     ElevationStatus: {}, 
     FusionTablesLayer: function() {}, 
     Geocoder: function() {}, 
     GeocoderLocationType: {}, 
     GeocoderStatus: {}, 
     GroundOverlay: function() {}, 
     ImageMapType: function() {}, 
     InfoWindow: function() {}, 
     KmlLayer: function() {}, 
     KmlLayerStatus: {}, 
     LatLng: function() {}, 
     LatLngBounds: function() {}, 
     MVCArray: function() {}, 
     MVCObject: function() {}, 
     Map: function() { 
      return { 
       setTilt: function() { }, 
       mapTypes: { 
        set: function() { } 
       }, 
       overlayMapTypes: { 
        insertAt: function() { }, 
        removeAt: function() { } 
       } 
      }; 
     }, 
     MapTypeControlStyle: {}, 
     MapTypeId: { 
      HYBRID: '', 
      ROADMAP: '', 
      SATELLITE: '', 
      TERRAIN: '' 
     }, 
     MapTypeRegistry: function() {}, 
     Marker: function() {}, 
     MarkerImage: function() {}, 
     MaxZoomService: function() { 
      return { 
       getMaxZoomAtLatLng: function() { } 
      }; 
     }, 
     MaxZoomStatus: {}, 
     NavigationControlStyle: {}, 
     OverlayView: function() { }, 
     Point: function() {}, 
     Polygon: function() {}, 
     Polyline: function() {}, 
     Rectangle: function() {}, 
     SaveWidget: function() {}, 
     ScaleControlStyle: {}, 
     Size: function() {}, 
     StreetViewCoverageLayer: function() {}, 
     StreetViewPanorama: function() {}, 
     StreetViewService: function() {}, 
     StreetViewStatus: {}, 
     StrokePosition: {}, 
     StyledMapType: function() {}, 
     SymbolPath: {}, 
     TrafficLayer: function() {}, 
     TransitLayer: function() {}, 
     TransitMode: {}, 
     TransitRoutePreference: {}, 
     TravelMode: {}, 
     UnitSystem: {}, 
     ZoomControlStyle: {}, 
     __gjsload__: function() { }, 
     event: { 
      addListener: function() { } 
     }, 
     places: { 
      AutocompleteService: function() { 
       return { 
        getPlacePredictions: function() { } 
       }; 
      } 
     } 
    } 
}; 

Answer 2

zmienić funkcję Map() do tego -

function Map(value) { 
    this.mapTypes = { 
     set:function(){ 
      return true; 
     }   
    }; 
} 

następnie map.mapTypes.set(); powinien działać

Sprawdź tę link która wyjaśnia, jak zdefiniować javascript klasę. bardzo przydatne.

Answer 3

Oto skrót do Google Maps v3.23, który jest wersją dostępną w chwili pisania. Ten interfejs API jest często aktualizowany, więc dodałem linki do każdej odpowiedniej sekcji interfejsu Reference API: jeśli wymagane są jakiekolwiek aktualizacje, powinny być łatwe do znalezienia:

window.stubGoogleAPIS = function() { 
return window.google = { 
maps: { 
    //https://developers.google.com/maps/documentation/javascript/reference#Animation 
    Animation: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#Attribution 
    Attribution: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#BicyclingLayer 
    BicyclingLayer: function() { }, 
    Circle: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#ControlPosition 
    ControlPosition: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#Data 
    Data: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#DirectionsRenderer 
    DirectionsRenderer: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#DirectionsService 
    DirectionsService: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#DirectionsStatus 
    DirectionsStatus: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#DistanceMatrixElementStatus 
    DistanceMatrixElementStatus: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#DistanceMatrixService 
    DistanceMatrixService: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#DistanceMatrixStatus 
    DistanceMatrixStatus: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#ElevationService 
    ElevationService: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#ElevationStatus 
    ElevationStatus: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#FusionTablesLayer 
    FusionTablesLayer: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#Geocoder 
    Geocoder: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#GeocoderLocationType 
    GeocoderLocationType: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#GeocoderStatus 
    GeocoderStatus: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#GroundOverlay 
    GroundOverlay: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#ImageMapType 
    ImageMapType: function() { }, 
    InfoWindow: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#KmlLayer 
    KmlLayer: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#KmlLayerStatus 
    KmlLayerStatus: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#LatLng 
    LatLng: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#LatLngBounds 
    LatLngBounds: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#MVCArray 
    MVCArray: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#MVCObject 
    MVCObject: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#Map 
    Map: function() { 
     return { 
      //methods 
      fitBounds: function() { }, 
      getBounds: function() { }, 
      getCenter: function() { }, 
      getDiv: function() { }, 
      getHeading: function() { }, 
      getMapTypeId: function() { }, 
      getProjection: function() { }, 
      getStreetView: function() { }, 
      getTilt: function() { }, 
      getZoom: function() { }, 
      panBy: function() { }, 
      panTo: function() { }, 
      panToBounds: function() { }, 
      setCenter: function() { }, 
      setHeading: function() { }, 
      setMapTypeId: function() { }, 
      setOptions: function() { }, 
      setStreetView: function() { }, 
      setTilt: function() { }, 
      setZoom: function() { }, 
      //properties 
      controls: {}, 
      data: { 
       //https://developers.google.com/maps/documentation/javascript/reference#Data 
       //methods 
       add: function() { }, 
       addGeoJson: function() { }, 
       contains: function() { }, 
       forEach: function() { }, 
       getControlPosition: function() { }, 
       getControls: function() { }, 
       getDrawingMode: function() { }, 
       getFeatureById: function() { }, 
       getMap: function() { }, 
       getStyle: function() { }, 
       loadGeoJson: function() { }, 
       overrideStyle: function() { }, 
       remove: function() { }, 
       revertStyle: function() { }, 
       setControlPosition: function() { }, 
       setControls: function() { }, 
       setDrawingMode: function() { }, 
       setMap: function() { }, 
       setStyle: function() { }, 
       toGeoJson: function() { }, 
       //properties 
       controlPosition: {}, 
       controls: [], 

      }, 
      mapTypes: { 
       //https://developers.google.com/maps/documentation/javascript/reference#MapTypeRegistry 
       //methods 
       set: function() { } 
      }, 
      overlayMapTypes: { 
       //https://developers.google.com/maps/documentation/javascript/reference#MVCArray 
       clear: function() { }, 
       getArray: function() { }, 
       getAt: function() { }, 
       getLength: function() { }, 
       insertAt: function() { }, 
       pop: function() { }, 
       push: function() { }, 
       removeAt: function() { }, 
       setAt: function() { } 
      } 
     }; 
    }, 
    MapTypeControlStyle: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#MapTypeId 
    MapTypeId: { 
     HYBRID: '', 
     ROADMAP: '', 
     SATELLITE: '', 
     TERRAIN: '' 
    }, 
    //https://developers.google.com/maps/documentation/javascript/reference#MapTypeRegistry 
    MapTypeRegistry: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#Marker 
    Marker: function() { 
     return { 
      setTitle: function (visible) { }, 
      setVisible: function() { }, 
      setZIndex: function() { } 
     } 
    }, 
    MarkerImage: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#MarkerOptions 
    MarkerOptions: { 
     visible: false 
    }, 
    //https://developers.google.com/maps/documentation/javascript/reference#MaxZoomService 
    MaxZoomService: function() { 
     return { 
      getMaxZoomAtLatLng: function() { } 
     }; 
    }, 
    //https://developers.google.com/maps/documentation/javascript/reference#MaxZoomStatus 
    MaxZoomStatus: {}, 
    NavigationControlStyle: {}, 
    OverlayView: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#Point 
    Point: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#Polygon 
    Polygon: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#Polyline 
    Polyline: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#Rectangle 
    Rectangle: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#SaveWidget 
    SaveWidget: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#ScaleControlStyle 
    ScaleControlStyle: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#Size 
    Size: function (width, height, wiidthUnit, heightUnit) { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#StreetViewCoverageLayer 
    StreetViewCoverageLayer: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#StreetViewPanorama 
    StreetViewPanorama: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#StreetViewService 
    StreetViewService: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#StreetViewStatus 
    StreetViewStatus: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#StrokePosition 
    StrokePosition: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#StyledMapType 
    StyledMapType: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#SymbolPath 
    SymbolPath: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#TrafficLayer 
    TrafficLayer: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#TransitLayer 
    TransitLayer: function() { }, 
    //https://developers.google.com/maps/documentation/javascript/reference#TransitMode 
    TransitMode: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#TransitRoutePreference 
    TransitRoutePreference: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#TravelMode 
    TravelMode: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#UnitSystem 
    UnitSystem: {}, 
    //https://developers.google.com/maps/documentation/javascript/reference#ZoomControlStyle 
    ZoomControlStyle: {}, 
    __gjsload__: function() { }, 
    event: { 
     addListener: function() { } 
    }, 
    places: { 
     AutocompleteService: function() { 
      return { 
       getPlacePredictions: function() { } 
      }; 
     } 
    } 
} 
};