clean up GL JS state onRemove (#163)

* clean up GL JS state onRemove

* add gl-js state cleanup test and refactor

Author: mollymerp

src/directions.js

@@ -109,6 +109,12 @@ export default class MapboxDirections {
       this.storeUnsubscribe();
       delete this.storeUnsubscribe;
     }
+    directionsStyle.forEach((layer) => {
+      if (map.getLayer(layer.id)) map.removeLayer(layer.id);
+    });
+
+    if (map.getSource('directions')) map.removeSource('directions');
+
     this._map = null;
     return this;
   }

test/test.directions.js

@@ -2,43 +2,58 @@
 
 const test = require('tape');
 const once = require('lodash.once');
+const MapboxDirections = require('..');
 
-test('directions', (tt) => {
-  var container, map, directions;
+function setup() {
+  var container = document.createElement('div');
+  var map = new mapboxgl.Map({ container: container, style: {
+  "version": 8,
+  "sources": {
+  },
+  "layers": [
+      {
+          "id": "background", "type": "background",
+          "paint": {
+              "background-color": "#fff"
+          }
+      }] }});
 
-  function setup(opts) {
-    container = document.createElement('div');
-    map = new mapboxgl.Map({ container: container });
-    const MapboxDirections = require('..');
-    directions = new MapboxDirections(opts);
-    map.addControl(directions);
-  }
+  return map;
+}
 
+test('directions', (tt) => {
   tt.test('initialized', t => {
-    setup();
+    var map = setup();
+    var directions = new MapboxDirections();
+    map.addControl(directions);
+
     t.ok(directions, 'directions is initialized');
     t.end();
   });
 
   tt.test('set/get inputs', t => {
-    setup({
+    var map = setup();
+
+    var directions = new MapboxDirections({
       geocoder: {
         proximity: [-79.45, 43.65]
       }
     });
+    map.addControl(directions);
+
 
     directions.setOrigin('Queen Street NY');
     directions.setDestination([-77, 41]);
 
-    directions.on('origin', function(e) {
+    directions.on('origin', (e) => {
       t.ok(directions.getOrigin(), 'origin feature is present from get');
       t.ok(e.feature, 'origin feature is in the event object');
     });
 
-    directions.on('destination', once((e) => {
+    directions.on('destination', (e) => {
       t.ok(directions.getDestination(), 'destination feature is present from get');
       t.ok(e.feature, 'destination feature is in the event object');
-    }));
+    });
 
     directions.on('route', once((e) => {
       t.ok(e.route, 'routing data was passed');
@@ -50,3 +65,22 @@ test('directions', (tt) => {
   tt.end();
 });
 
+test('Directions#onRemove', t => {
+  var map = setup();
+  var directions = new MapboxDirections({
+    geocoder: {
+      proximity: [-79.45, 43.65]
+    }
+  });
+  map.addControl(directions);
+
+
+  directions.setOrigin('Queen Street NY');
+  directions.setDestination([-77, 41]);
+  directions.on('route', once(()=>{
+    t.true(!!map.getSource('directions'), 'directions source is added');
+    map.removeControl(directions);
+    t.false(!!map.getSource('directions'), 'directions source is removed');
+    t.end();
+  }));
+});