add tests for google maps module

test/modules/google-maps/google-maps-overlay.spec.js

@@ -0,0 +1,91 @@
+import test from 'tape-catch';
+
+import {GoogleMapsOverlay} from '@deck.gl/google-maps';
+import {ScatterplotLayer} from '@deck.gl/layers';
+import {makeSpy} from '@probe.gl/test-utils';
+import {equals} from 'math.gl';
+
+import * as mapsApi from './mock-maps-api';
+
+/* global global, window */
+const _global = typeof global === 'undefined' ? window : global;
+_global.google = {maps: mapsApi};
+
+test('GoogleMapsOverlay#constructor', t => {
+  const map = new mapsApi.Map({
+    width: 1,
+    height: 1,
+    longitude: 0,
+    latitude: 0,
+    zoom: 1
+  });
+
+  const overlay = new GoogleMapsOverlay({
+    layers: []
+  });
+
+  overlay.setMap(map);
+  const deck = overlay._deck;
+  t.ok(deck, 'Deck instance is created');
+
+  overlay.setMap(map);
+  t.is(overlay._deck, deck, 'Deck instance is the same');
+
+  overlay.setMap(null);
+  t.is(overlay._deck, deck, 'Deck instance is not removed');
+
+  overlay.finalize();
+  t.notOk(overlay._deck, 'Deck instance is finalized');
+
+  t.end();
+});
+
+test('GoogleMapsOverlay#draw, pick', t => {
+  const map = new mapsApi.Map({
+    width: 800,
+    height: 400,
+    longitude: -122.45,
+    latitude: 37.78,
+    zoom: 13
+  });
+
+  const overlay = new GoogleMapsOverlay({
+    layers: [
+      new ScatterplotLayer({
+        data: [{position: [0, 0]}, {position: [0, 0]}],
+        radiusMinPixels: 100,
+        pickable: true
+      })
+    ]
+  });
+
+  overlay.setMap(map);
+  const deck = overlay._deck;
+
+  t.notOk(deck.props.viewState, 'Deck does not have view state');
+
+  map.draw();
+  const {viewState, width, height} = deck.props;
+  t.ok(equals(viewState.longitude, map.opts.longitude), 'longitude is set');
+  t.ok(equals(viewState.latitude, map.opts.latitude), 'latitude is set');
+  t.ok(equals(viewState.zoom, map.opts.zoom - 1), 'zoom is set');
+  t.ok(equals(width, map.opts.width), 'width is set');
+  t.ok(equals(height, map.opts.height), 'height is set');
+  t.notOk(deck.props.layerFilter, 'layerFilter is empty');
+
+  map.setTilt(45);
+  map.draw();
+  t.ok(deck.props.layerFilter, 'layerFilter should be set to block drawing');
+
+  const pointerMoveSpy = makeSpy(overlay._deck, '_onPointerMove');
+  map.emit({type: 'mousemove', pixel: [0, 0]});
+  t.ok(pointerMoveSpy.called, 'pointer move event is handled');
+
+  const pointerLeaveSpy = makeSpy(overlay._deck, '_onPointerLeave');
+  map.emit({type: 'mouseout', pixel: [0, 0]});
+  t.ok(pointerLeaveSpy.called, 'pointer leave event is handled');
+
+  overlay.finalize();
+
+  t.end();
+});

test/modules/google-maps/index.js

@@ -0,0 +1 @@
+import './google-maps-overlay.spec';

test/modules/google-maps/mock-maps-api.js

@@ -0,0 +1,158 @@
+import {WebMercatorViewport} from '@deck.gl/core';
+
+export class Point {
+  constructor(x, y) {
+    this.x = x;
+    this.y = y;
+  }
+}
+
+export class LatLng {
+  constructor(lat, lng) {
+    this._lat = lat;
+    this._lng = lng;
+  }
+
+  lat() {
+    return this._lat;
+  }
+  lng() {
+    return this._lng;
+  }
+}
+
+export class LatLngBounds {
+  constructor(ne, sw) {
+    this._ne = ne;
+    this._sw = sw;
+  }
+
+  getNorthEast() {
+    return this._ne;
+  }
+  getSouthWest() {
+    return this._sw;
+  }
+}
+
+export class Projection {
+  constructor(opts) {
+    this._viewport = new WebMercatorViewport(opts);
+  }
+
+  fromLatLngToDivPixel(latLng) {
+    const p = this._viewport.project([latLng.lng(), latLng.lat()]);
+    return new Point(p[0], p[1]);
+  }
+
+  fromContainerPixelToLatLng(point) {
+    const coord = this._viewport.unproject([point.x, point.y]);
+    return new LatLng(coord[1], coord[0]);
+  }
+
+  _getBounds() {
+    const nw = this._viewport.unproject([0, 0]);
+    const se = this._viewport.unproject([this._viewport.width, this._viewport.height]);
+
+    return new LatLngBounds(new LatLng(nw[1], se[0]), new LatLng(se[1], nw[0]));
+  }
+}
+
+export class Map {
+  constructor(opts) {
+    this.opts = opts;
+    this._overlays = new Set();
+    this._callbacks = {};
+
+    this.projection = new Projection(opts);
+  }
+
+  addListener(event, cb) {
+    this._callbacks[event] = this._callbacks[event] || new Set();
+    this._callbacks[event].add(cb);
+    return {
+      remove: () => this._callbacks[event].delete(cb)
+    };
+  }
+
+  emit(event) {
+    if (!this._callbacks[event.type]) {
+      return;
+    }
+    for (const func of this._callbacks[event.type]) {
+      func(event);
+    }
+  }
+
+  draw() {
+    for (const overlay of this._overlays) {
+      overlay.draw();
+    }
+  }
+
+  getDiv() {
+    return {
+      firstChild: {
+        offsetWidth: this.opts.width,
+        offsetHeight: this.opts.height
+      }
+    };
+  }
+
+  getBounds() {
+    return this.projection._getBounds();
+  }
+
+  getZoom() {
+    return this.opts.zoom;
+  }
+
+  setTilt(tilt) {
+    this.opts.pitch = tilt;
+  }
+
+  getTilt() {
+    return this.opts.pitch || 0;
+  }
+
+  _addOverlay(overlay) {
+    this._overlays.add(overlay);
+    overlay.onAdd();
+  }
+
+  _removeOverlay(overlay) {
+    this._overlays.delete(overlay);
+    overlay.onRemove();
+  }
+}
+
+export class OverlayView {
+  constructor() {
+    this.map = null;
+    /* global document */
+    this._container = document.createElement('div');
+  }
+
+  setMap(map) {
+    if (this.map) {
+      this.map._removeOverlay(this);
+    }
+    if (map) {
+      map._addOverlay(this);
+    }
+    this.map = map;
+  }
+
+  getProjection() {
+    return this.map.projection;
+  }
+
+  getPanes() {
+    return {
+      floatPane: this._container,
+      mapPane: this._container,
+      markerLayer: this._container,
+      overlayLayer: this._container
+    };
+  }
+}

test/modules/index.js

@@ -25,6 +25,7 @@ import './layers';
 import './aggregation-layers';
 import './geo-layers';
 
+import './google-maps';
 import './mapbox';
 import './json';
 import './react';