Giả mạo cấu trúc đối tượng Google Maps bằng JavaScript cho Bài kiểm tra Đơn vị

Question

Đối tượng API Google Maps được sử dụng như thế này: google.maps."Constructor" có vẻ như vậy.

Tôi muốn giả mạo các cuộc gọi được liệt kê dưới đây ...

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

... với mã dưới đây ...

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

Làm thế nào tôi có thể giả mã Google này ...

map.mapTypes.set(); 

... được trả lại bằng cách gọi ...

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

JavaScript của tôi trông như thế nào để nhập map.mapTypes.set() và cuối cùng là chức năng đặt được gọi?

Tôi chỉ muốn giả mạo các đối tượng của Google mà tôi sử dụng trong mã của mình để kiểm tra đơn vị.

Answer 1

Đây là bản đồ Google Maps của chúng tôi cho v3.19.18. Ban đầu nó được viết bằng CoffeeScript, nhưng tôi đã chạy nó qua js2coffee và đây là triển khai Javascript thô. Tôi đã thêm mapTypes.set() cho bạn.

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

thay đổi chức năng Map() của bạn này -

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

sau đó map.mapTypes.set(); nên làm việc

séc ra link này mà giải thích làm thế nào để xác định lớp javascript. rất hữu dụng.

Answer 3

Đây là sơ khai cho Google Maps v3.23, đây là phiên bản phát hành tại thời điểm viết bài. API này được cập nhật thường xuyên vì vậy tôi đã bao gồm các liên kết đến từng phần có liên quan của API tham chiếu: nếu cần cập nhật bất kỳ thông tin nào cần tìm:

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