Merge pull request mapbox#179 from mapbox/test

Write Tests

package.json

@@ -40,6 +40,7 @@
     "budo": "^4.0.0",
     "eslint": "^0.21.2",
     "geojson-validation": "^0.1.6",
+    "happen": "^0.2.0",
     "mapbox-gl": "^0.12.0",
     "smokestack": "^3.3.0",
     "tap-closer": "^1.0.0",

src/draw.js

@@ -70,7 +70,7 @@ export default class Draw extends API {
       this._createButtons();
     }
 
-    if (map.style.loaded()) {
+    if (map.style.loaded()) { // not public
       this._setEventListeners();
       this._setStyles();
     } else {

src/geometries/polygon.js

@@ -38,17 +38,17 @@ export default class Polygon extends Geometry {
     if (typeof this.vertexIdx === 'undefined') {
       this.vertexIdx = 0;
       this.first = p;
-      this.coordinates[0].splice(0, 4, p, p, p, p);
+      this.coordinates = [[p, p, p, p]];
       this.ready = true;
     }
 
-    this.vertexIdx++;
+    if (this.vertexIdx > 1) {
+      this.coordinates[0].push(this.first);
+    }
 
     this.coordinates[0][this.vertexIdx] = p;
 
-    if (this.vertexIdx > 2) {
-      this.coordinates[0].push(this.first);
-    }
+    this.vertexIdx++;
   }
 
   _onMouseMove(e) {
@@ -57,13 +57,16 @@ export default class Polygon extends Geometry {
     this.coordinates[0][this.vertexIdx] = [ coords.lng, coords.lat ];
   }
 
-  onStopDrawing() {
-    return this.onDoubleClick();
+  onStopDrawing(e) {
+    return this.onDoubleClick(e);
   }
 
-  onDoubleClick() {
+  onDoubleClick(e) {
+    const ENTER = 13;
     if (this.vertexIdx > 2) {
-      this.coordinates[0].splice(this.vertexIdx, 1);
+      var idx = this.vertexIdx - (e.keyCode === ENTER ? 0 : 1);
+      var remove = e.keyCode === ENTER ? 1 : 2;
+      this.coordinates[0].splice(idx, remove);
     }
 
     this._map.getContainer().classList.remove('mapboxgl-draw-activated');

src/geometries/square.js

@@ -38,10 +38,8 @@ export default class Square extends Geometry {
     var pos = DOM.mousePos(e, this._map.getContainer());
     this.initPos = pos;
     var c = this._map.unproject([pos.x, pos.y]);
-    var i = -1;
-    while (++i < 5) {
-      this.coordinates[0][i] = [ c.lng, c.lat ];
-    }
+    var p = [ c.lng, c.lat ];
+    this.coordinates = [[ p, p, p, p, p ]];
   }
 
   _onMouseDrag(e) {

test/events.test.js

@@ -0,0 +1,68 @@
+/* eslint no-shadow:[0] */
+import test from 'tape';
+import mapboxgl from 'mapbox-gl';
+import GLDraw from '../';
+import { accessToken, createMap, features } from './utils';
+
+mapboxgl.accessToken = accessToken;
+
+var feature = features.point;
+
+var map = createMap();
+
+map.on('load', () => {
+
+  test('Events test', t => {
+
+    var Draw = GLDraw();
+    map.addControl(Draw);
+
+    t.test('draw.set event', t => {
+      map.once('draw.set', e => {
+        t.pass('draw.set fired on add');
+        t.deepEquals(e.geojson.geometry, feature.geometry, 'geojson in payload is the same as set');
+        t.end();
+      });
+      Draw.add(feature);
+    });
+
+    t.test('draw.delete event', t => {
+      map.once('draw.delete', e => {
+        t.pass('draw.delete fired on delete');
+        t.deepEquals(e.geojson.geometry, feature.geometry, 'geojson in payload is the same as set');
+        t.equals(e.geojson.id, id, 'draw id in payload is correct');
+        t.end();
+      });
+      let id = Draw.add(feature);
+      Draw._select(id);
+      Draw._destroy();
+    });
+
+    t.test('draw.select.start event', t => {
+      map.once('draw.select.start', e => {
+        t.pass('draw.select.start fired on select');
+        t.deepEquals(e.geojson.geometry, feature.geometry, 'geojson in payload is the same as set');
+        t.equals(e.geojson.id, id, 'draw id in payload is correct');
+        Draw._handleDrawFinished();
+        t.end();
+      });
+      let id = Draw.add(feature);
+      Draw._select(id);
+    });
+
+    t.test('draw.select.end event', t => {
+      map.once('draw.select.end', e => {
+        t.pass('draw.select.end fired on select end');
+        t.deepEquals(e.geojson.geometry, feature.geometry, 'geojson in payload is the same as set');
+        t.equals(e.geojson.id, id, 'draw id in payload is correct');
+        t.end();
+      });
+      let id = Draw.add(feature);
+      Draw._select(id);
+      Draw._handleDrawFinished();
+    });
+
+    t.end();
+  });
+
+});

test/line.test.js

@@ -1,22 +1,12 @@
 import test from 'tape';
 import mapboxgl from 'mapbox-gl';
+import happen from 'happen';
 import GLDraw from '../';
-import Line from '../src/geometries/line';
+import { accessToken, createMap, features } from './utils';
 
-mapboxgl.accessToken = 'pk.eyJ1IjoibWFwYm94IiwiYSI6IlhHVkZmaW8ifQ.hAMX5hSW-QnTeRCMAy9A8Q';
+var feature = features.line;
 
-function createMap() {
-  var div = document.createElement('div');
-  div.setAttribute('id', 'map');
-  document.body.appendChild(div);
-
-  var map = new mapboxgl.Map({
-    container: 'map',
-    style: 'mapbox://styles/mapbox/streets-v8'
-  });
-
-  return map;
-}
+mapboxgl.accessToken = accessToken;
 
 var map = createMap();
 
@@ -26,7 +16,35 @@ map.on('load', () => {
     var Draw = GLDraw();
     map.addControl(Draw);
 
-    //var l = new Line(map);
+    Draw._startDrawing('line');
+
+    let coords = feature.geometry.coordinates;
+
+    for (var i = 0; i < coords.length; i++) {
+      let c = coords[i];
+      console.log(c);
+      let pt = map.project(mapboxgl.LngLat.convert(c));
+      console.log(pt);
+      happen.click(map.getCanvas(), {
+        clientX: pt.x,
+        clientY: pt.y
+      });
+    }
+
+    // complete drawing
+    happen.once(map.getCanvas(), {
+      type: 'keyup',
+      keyCode: 13
+    });
+
+    var feats = Draw._store._features;
+    var ids = Object.keys(feats);
+    var line = feats[ids[0]];
+
+    line.onStopDrawing();
+
+    // to do: fix floating point error and make this pass
+    //t.deepEquals(line.coordinates, coords);
 
     t.end();
   });

test/point.test.js

@@ -1,12 +1,10 @@
 import test from 'tape';
 import mapboxgl from 'mapbox-gl';
 import GLDraw from '../';
-import { accessToken, createMap, features } from './utils';
+import { accessToken, createMap } from './utils';
 
 mapboxgl.accessToken = accessToken;
 
-var feature = features.point;
-
 var map = createMap();
 
 map.on('load', () => {
@@ -15,10 +13,17 @@ map.on('load', () => {
     var Draw = GLDraw();
     map.addControl(Draw);
 
-    var id = Draw.add(feature);
-    var point = Draw._store.get(id);
-
-    console.log(point);
+    Draw._startDrawing('point');
+    map.fire('click', {
+      lngLat: {
+        lng: 10,
+        lat: 10
+      }
+    });
+
+    var feats = Draw._store._features;
+    var ids = Object.keys(feats);
+    t.deepEquals(feats[ids[0]].coordinates, [10, 10]);
 
     t.end();
   });

test/polygon.test.js

@@ -1,10 +1,11 @@
 import test from 'tape';
 import mapboxgl from 'mapbox-gl';
 import GLDraw from '../';
-import { accessToken, createMap } from './utils';
+import { accessToken, createMap, features } from './utils';
 
 mapboxgl.accessToken = accessToken;
 
+var feature = features.polygon;
 
 var map = createMap();
 
@@ -14,6 +15,36 @@ map.on('load', () => {
     var Draw = GLDraw();
     map.addControl(Draw);
 
+    Draw._startDrawing('polygon');
+    let coords = feature.geometry.coordinates[0];
+    for (var i = 0; i < coords.length - 1; i++) {
+      let c = coords[i];
+      map.fire('click', {
+        lngLat: {
+          lng: c[0],
+          lat: c[1]
+        }
+      });
+    }
+
+    // simulate mousemove behavior
+    // TO DO:
+    //    make this less totally garbage
+    map.fire('click', {
+      lngLat: {
+        lng: coords[coords.length - 2][0],
+        lat: coords[coords.length - 2][1]
+      }
+    });
+
+    Draw._events.onDoubleClick();
+
+    var feats = Draw._store._features;
+    var ids = Object.keys(feats);
+    var poly = feats[ids[0]];
+
+    t.deepEquals(poly.coordinates, feature.geometry.coordinates);
+
     t.end();
   });
 

test/square.test.js

@@ -1,8 +1,10 @@
 import test from 'tape';
 import mapboxgl from 'mapbox-gl';
+import happen from 'happen';
 import GLDraw from '../';
-//import Square from '../src/geometry/square';
-import { accessToken, createMap } from './utils';
+import { accessToken, createMap, features } from './utils';
+
+var feature = features.square;
 
 mapboxgl.accessToken = accessToken;
 
@@ -14,6 +16,34 @@ map.on('load', () => {
     var Draw = GLDraw();
     map.addControl(Draw);
 
+    Draw._startDrawing('square');
+
+    let coords = feature.geometry.coordinates;
+
+    let ne = map.project(mapboxgl.LngLat.convert(coords[0][0]));
+    let sw = map.project(mapboxgl.LngLat.convert(coords[0][2]));
+
+    happen.mousedown(map.getCanvas(), {
+      clientX: ne.x,
+      clientY: ne.y
+    });
+
+    happen.mousemove(map.getCanvas(), {
+      clientX: sw.x,
+      clientY: sw.y
+    });
+
+    happen.mouseup(map.getCanvas());
+
+    var feats = Draw._store._features;
+    var ids = Object.keys(feats);
+    var square = feats[ids[0]];
+
+    square.onStopDrawing();
+
+    // to do, fix floating point problems here
+    //t.deepEquals(square.coordinates, coords);
+
     t.end();
   });