使用JavaScript进行单元测试伪造Google Maps对象结构

问题描述 投票:16回答:3

Google Maps API对象的使用方式如下:google.maps."Constructor"似乎。

我想伪造下面列出的电话......

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

......以下代码......

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

我怎么能伪造这个谷歌代码......

map.mapTypes.set();

...通过调用返回...

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

我的JavaScript必须输入map.mapTypes.set(),最后调用set函数?

我只想伪造我在代码中用于单元测试的Google对象。

javascript unit-testing google-maps
3个回答
11
投票

这是我们针对v3.19.18的Google Maps存根。它最初是用CoffeeScript编写的,但是我通过js2coffee运行它,这是一个原始的Javascript实现。我为你添加了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 () { }
                };
            }
        }
    }
};

7
投票

这是Google Maps v3.36的存根,这是撰写本文时的发布版本。此API经常更新,因此我已添加指向参考API的每个相关部分的链接:如果需要任何更新,则应易于查找:

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() {
                return {
                    //methods
                    getMap: function() {},
                    setMap: 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() {
                return {
                    getDirections: function() {},
                    getMap: function() {},
                    getPanel: function() {},
                    getRouteIndex: function() {},
                    setDirections: function() {},
                    setMap: function() {},
                    setOptions: function() {},
                    setPanel: function() {},
                    setRouteIndex: 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() {},
                    getClickableIcons: function() {},
                    getDiv: function() {},
                    getHeading: function() {},
                    getMapTypeId: function() {},
                    getProjection: function() {},
                    getStreetView: function() {},
                    getTilt: function() {},
                    getZoom: function() {},
                    panBy: function(x, y) {},
                    panTo: function (latLng) { },
                    panToBounds: function() {},
                    setCenter: function (latlng) { },
                    setClickableIcons: function (value) { },
                    setHeading: function (heading) { },
                    setMapTypeId: function (mapTypeId) { },
                    setOptions: function (options) { },
                    setStreetView: function(panorama) {
                        return {
                            //https://developers.google.com/maps/documentation/javascript/reference/street-view#StreetViewPanorama
                            getLinks: function () { },
                            getLocation: function () { },
                            getMotionTracking: function () { },
                            getPano: function () { },
                            getPhotographerPov: function () { },
                            getPosition: function () { },
                            getPov: function () { },
                            getStatus: function () { },
                            getVisible: function () { },
                            getZoom: function () { },
                            registerPanoProvider: function () { },
                            setLinks: function (links) { },
                            setMotionTracking: function (motionTracking) { },
                            setOptions: function (options) { },
                            setPano: function () { },
                            setPosition: function (latLng) { },
                            setPov: function (pov) { },
                            setVisible: function (flag) { },
                            setZoom: function (zoom) { }
                        }
                    },
                    setTilt: function (tilt) { },
                    setZoom: function (zoom) { },
                    //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() {},
                        forEach: 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: {
                //properties
                anchorPoint: {
                    //https://developers.google.com/maps/documentation/javascript/reference/coordinates#Point
                    equals: function() {},
                    toString: function() {}
                },
                animation: {
                    BOUNCE: '',
                    DROP: ''
                },
                visible: false
            },
            //https://developers.google.com/maps/documentation/javascript/reference#MaxZoomService
            MaxZoomService: function () {
                return {
                    getMaxZoomAtLatLng: function (latlng, callback) { }
                };
            },
            //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
            Polygon: function() {
                return {
                    getDraggable: function () { },
                    getEditable: function () { },
                    getMap: function () { },
                    getPath: function () { },
                    getPaths: function () { },
                    getVisible: function () { },
                    setDraggable: function (draggable) { },
                    setEditable: function (editable) { },
                    setMap: function (map) { },
                    setOptions: function (options) { },
                    setPath: function (path) { },
                    setPaths: function (paths) { },
                    setVisible: function (visible) { }
                }
            },
            //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, widthUnit, 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 () { },
                addDomListener: function () { }
            },
            places: {
                AutocompleteService: function () {
                    return {
                        getPlacePredictions: function () { }
                    };
                }
            }
        },
        visualization: {
            ColumnChart: function() {
              return {
                  draw: function () { }
              }  
            },
            //https://developers.google.com/chart/interactive/docs/reference#DataTable
            DataTable: function () {
                return {
                    addColumn: function (description_object) { },
                    addRow: function (opt_cellArray) { },
                    addRows: function (numOrArray) { },
                    clone: function() { },
                    getColumnId: function (columnIndex) { },
                    getColumnLabel: function (columnIndex) { },
                    getColumnPattern: function (columnIndex) { },
                    getColumnProperties: function (columnIndex) { },
                    getColumnProperty: function (columnIndex, name) { },
                    getColumnRange: function (columnIndex) { },
                    getColumnRole: function (columnIndex) { },
                    getColumnType: function (columnIndex) { },
                    getDistinctValues: function (columnIndex) { },
                    getFilteredRows: function (filters) { },
                    getFormattedValue: function (rowIndex, columnIndex) { },
                    getNumberOfColumns: function() { },
                    getNumberOfRows: function() { },
                    getProperties: function (rowIndex, columnIndex) {},
                    getProperty: function(rowIndex, columnIndex, name) {},
                    getRowProperties: function(rowIndex) {},
                    getRowProperty: function() {},
                    getSortedRows: function(sortedColumns) {},
                    getTableProperties: function () { },
                    getTableProperty: function (name) { },
                    getValue: function(rowIndex, columnIndex) {}
                }
            },

            //https://developers.google.com/chart/interactive/docs/reference#dataview-class
            DataView: {},
            //https://developers.google.com/chart/interactive/docs/reference#chartwrapperobject
            ChartWrapper: {},
            //https://developers.google.com/chart/interactive/docs/reference#charteditor-class
            ChartEditor: {},

        }
    };
};

0
投票

将你的Map()功能改为此 -

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

然后map.mapTypes.set();应该工作

看看这个解释如何定义javascript类的link。很有用。

© www.soinside.com 2019 - 2024. All rights reserved.