moving to a mock for tests

API.md

@@ -58,7 +58,7 @@ var Draw = mapboxgl.Draw({
 
 This method takes any valid GeoJSON and adds it to Draw. The object will be turned into a GeoJSON feature and will be assigned a unique `drawId` that can be used to identify it. This method return the new feature's `drawId`. If an id is provided with the feature that ID will be used.
 
-The second argument is an optional options object to add information to the geometry when creating the new element. Currently the only used option is `permanent`, which, if set to true, will cause the element to ignore click events which would normally trigger selection.
+The second argument is an optional options object to add information to the geometry when creating the new element. Currently the only used option is `permanent`, which, if set to true, will cause the element to ignore click events, `Draw.select(:id:)` and `Draw.selectAll()`.
 
 Draw does not enforce unique IDs to be passed to `.add`, but it does enforce unique ids inside of it. This means that if you provide an id for a feature that is not unqiue, Draw will override the exhisting feature with your new feature. You can think of this like PUT in http verbs.
 

circle.yml

@@ -0,0 +1,3 @@
+machine:
+  node:
+    version: 4.3.2

package.json

@@ -12,8 +12,7 @@
     ]
   },
   "scripts": {
-    "test": "npm run lint && npm run prepublish",
-    "test-unit": "browserify test/*.test.js | tap-closer | smokestack | tap-status",
+    "test": "tape -r ./test/mock-browser.js -r babel-register test/*.test.js",
     "lint": "eslint --no-eslintrc -c .eslintrc index.js src",
     "prepublish": "NODE_ENV=production browserify index.js | uglifyjs -c -m > dist/mapbox-gl-draw.js",
     "start": "budo index.js --serve=dist/mapbox-gl-draw.js --live -d | bistre"
@@ -33,16 +32,13 @@
   },
   "devDependencies": {
     "babel-eslint": "4.1.7",
-    "babelify": "^7.2.0",
+    "babel-register": "^6.5.2",
     "bistre": "^1.0.1",
-    "browserify": "^9.0.3",
     "budo": "^4.0.0",
     "eslint": "^0.21.2",
     "geojson-validation": "^0.1.6",
-    "mapbox-gl": "^0.14.0",
-    "smokestack": "^3.3.0",
-    "tap-closer": "^1.0.0",
-    "tap-status": "^1.0.1",
+    "mapbox-gl-js-mock": "^0.15.0",
+    "mock-browser": "^0.92.10",
     "tape": "^4.0.0",
     "uglify-js": "^2.4.23"
   },
@@ -51,7 +47,9 @@
   },
   "dependencies": {
     "babel-preset-es2015": "^6.3.13",
+    "browserify": "^13.0.0",
     "hat": "0.0.3",
+    "point-geometry": "0.0.0",
     "ramda": "^0.17.1"
   }
 }

src/api.js

@@ -1,12 +1,11 @@
 'use strict';
 
-import mapboxgl from 'mapbox-gl';
-
 import Line from './feature_types/line';
 import Point from './feature_types/point';
 import Polygon from './feature_types/polygon';
+import Control from './control';
 
-export default class API extends mapboxgl.Control {
+export default class API extends Control {
 
   constructor() {
     super();
@@ -62,6 +61,7 @@ export default class API extends mapboxgl.Control {
     }
 
     internalFeature.ready = true;
+    internalFeature.created = true;
 
     var id = this._store.set(internalFeature);
     this._store._features[id].commited = true;
@@ -121,7 +121,9 @@ export default class API extends mapboxgl.Control {
    * @returns {Draw} this
    */
   select(id) {
-    this._store.select(id);
+    if (this._store.get(id).options.permanent !== true) {
+      this._store.select(id);
+    }
     return this;
   }
 
@@ -132,6 +134,7 @@ export default class API extends mapboxgl.Control {
    */
   selectAll() {
     this._store.getAllIds()
+      .filter(id => this._store.get(id).options.permanent !== true)
       .forEach(id => this.select(id));
     return this;
   }

src/control.js

@@ -0,0 +1,49 @@
+'use strict';
+
+module.exports = Control;
+
+/**
+ * A base class for map-related interface elements.
+ *
+ * @class Control
+ */
+function Control() {}
+
+Control.prototype = {
+    /**
+     * Add this control to the map, returning the control itself
+     * for chaining. This will insert the control's DOM element into
+     * the map's DOM element if the control has a `position` specified.
+     *
+     * @param {Map} map
+     * @returns {Control} `this`
+     */
+    addTo: function(map) {
+        this._map = map;
+        var container = this._container = this.onAdd(map);
+        if (this.options && this.options.position) {
+            var pos = this.options.position;
+            var corner = map._controlCorners[pos];
+            container.className += ' mapboxgl-ctrl';
+            if (pos.indexOf('bottom') !== -1) {
+                corner.insertBefore(container, corner.firstChild);
+            } else {
+                corner.appendChild(container);
+            }
+        }
+
+        return this;
+    },
+
+    /**
+     * Remove this control from the map it has been added to.
+     *
+     * @returns {Control} `this`
+     */
+    remove: function() {
+        this._container.parentNode.removeChild(this._container);
+        if (this.onRemove) this.onRemove(this._map);
+        this._map = null;
+        return this;
+    }
+};

src/draw.js

@@ -83,6 +83,7 @@ export default class Draw extends API {
       this._setStyles();
     } else {
       map.on('load', () => {
+        console.log('loading');
         this._setEventListeners();
         this._setStyles();
       });

src/feature_types/feature.js

@@ -64,6 +64,7 @@ export default class Geometry {
   */
 
   onStopDrawing() {
+    console.log('super.onStopDrawing');
     this.created = !this.toRemove;
     if(this._map.options.doubleClickZoom) {
       this._map.doubleClickZoom.disable();

src/feature_types/polygon.js

@@ -58,6 +58,7 @@ export default class Polygon extends Feature {
       var idx = this.vertexIdx - (e.keyCode === ENTER ? 0 : 1);
       var remove = e.keyCode === ENTER ? 1 : 2;
       this.coordinates[0].splice(idx, remove);
+      this.created = true;
     }
     if (this.vertexIdx < 3 || this.coordinates[0].length < 4) {
       this.toRemove = true;

src/feature_types/square.js

@@ -32,12 +32,14 @@ export default class Square extends Polygon {
   }
 
   onClick(e) {
+    console.log('clicking', this.ready);
     if(this.ready === false) {
       this.ready = true;
       var p = [ e.lngLat.lng, e.lngLat.lat ];
       this.coordinates = [[ p, p, p, p, p ]];
     }
     else {
+      this.onMouseMove(e);
       this.onStopDrawing(e);
     }
   }

src/util.js

@@ -1,6 +1,6 @@
 'use strict';
 
-var mapboxgl = require('mapbox-gl');
+var Point = require('point-geometry');
 
 var DOM = {};
 
@@ -13,7 +13,7 @@ var DOM = {};
  */
 DOM.mousePos = function(e, el) {
   var rect = el.getBoundingClientRect();
-  return new mapboxgl.Point(
+  return new Point(
     e.clientX - rect.left - el.clientLeft,
     e.clientY - rect.top - el.clientTop
   );