Faux la structure des objets Google Maps avec JavaScript pour les tests unitaires

Question

Les objets API Google Maps sont utilisés comme ceci: google.maps."Constructor" semble-t-il.

Je veux truquer les appels énumérés ci-dessous ...

//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(); 

... avec le code ci-dessous ...

$(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(); 
}); 

Comment puis-je fake ce code Google ...

map.mapTypes.set(); 

... qui est retourné en appelant ...

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

A quoi doit ressembler mon JavaScript pour taper map.mapTypes.set() et finalement la fonction set est appelée?

Je veux juste simuler les objets Google que j'utilise dans mon code pour les tests unitaires.

Answer 1

Voici notre stub Google Maps pour v3.19.18. Il a été écrit à l'origine dans CoffeeScript, mais je l'ai exécuté à travers js2coffee et voici une implémentation Javascript brute. J'ai ajouté mapTypes.set() pour vous.

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

changer votre fonction Map() à ce -

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

alors map.mapTypes.set(); devrait fonctionner

vérifier cette link qui explique comment définir javascript classe. très utile.

Answer 3

Voici un bout pour Google Maps v3.23, qui est la version de la version au moment de la rédaction. Cette API est mis à jour fréquemment, donc j'ai inclus des liens vers chaque section pertinente de l'API de référence: si les mises à jour sont nécessaires, ils doivent être faciles à trouver:

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() { } 
      }; 
     } 
    } 
} 
};