Elisabeth Elisabeth - 7 months ago 55
Javascript Question

Fake the Google Maps objects structure with JavaScript for Unit Tests

The Google Maps API objects are used like this:

google.maps."Constructor"
it seems.

I want to fake the calls listed below...

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


...with the code below...

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


How can I fake this Google code...

map.mapTypes.set();


...which is returned by calling...

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


What must my JavaScript look like to type map.mapTypes.set() and finally the set function is called?

I just want to fake the Google objects which I use in my code for unit tests.

Answer

Here's our Google Maps stub for v3.19.18. It was originally written in CoffeeScript, but I ran it through js2coffee and here's a raw Javascript implementation. I've added mapTypes.set() for you.

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