Fixed broken tests

src/actions/index.js

@@ -1,6 +1,5 @@
 import * as types from '../constants/action_types';
 import utils from '../utils';
-const request = new XMLHttpRequest();
 
 function originPoint(coordinates) {
   return (dispatch) => {
@@ -68,7 +67,8 @@ function fetchDirections() {
     if (language) options.push('language='+language);
     if (exclude) options.push('exclude=' + exclude);
     if (accessToken) options.push('access_token=' + accessToken);
-    request.abort();
+
+    const request = new XMLHttpRequest();
     request.open('GET', `${api}${profile}/${query}.json?${options.join('&')}`, true);
 
     request.onload = () => {
@@ -93,6 +93,9 @@ function fetchDirections() {
         dispatch(destinationPoint(data.waypoints[data.waypoints.length - 1].location));
       } else {
         dispatch(setDirections([]));
+        if (!request.responseText.length) {
+          console.log(`${api}${profile}/${query}.json?${options.join('&')}`);
+        }
         return dispatch(setError(JSON.parse(request.responseText).message));
       }
     };
@@ -189,7 +192,6 @@ export function clearOrigin() {
 }
 
 export function clearDestination() {
-  request.abort();
   return dispatch => {
     dispatch({
       type: types.DESTINATION_CLEAR

test/index.js

@@ -14,7 +14,7 @@ if (!mapboxgl.accessToken) {
 
 // Tests
 require('./test.directions');
-// require('./test.options');
+require('./test.options');
 require('./test.inputs');
 require('./test.instructions');
 require('./test.geocoder');

test/test.directions.js

@@ -2,46 +2,23 @@
 
 const test = require('tape');
 const once = require('lodash.once');
-const MapboxDirections = require('..');
-
-function setup() {
-  var container = document.createElement('div');
-  var map = new mapboxgl.Map({ container: container, style: {
-  "version": 8,
-  "sources": {
-  },
-  "glyphs": "local://glyphs/{fontstack}/{range}.pbf",
-  "layers": [
-      {
-          "id": "background", "type": "background",
-          "paint": {
-              "background-color": "#fff"
-          }
-      }] }});
-
-  return map;
-}
+
+const setup = require('./utils/setup');
 
 test('directions', (tt) => {
   tt.test('initialized', t => {
-    var map = setup();
-    var directions = new MapboxDirections();
-    map.addControl(directions);
+    const { map, directions } = setup();
 
     t.ok(directions, 'directions is initialized');
     t.end();
   });
 
   tt.test('set/get inputs', t => {
-    var map = setup();
-
-    var directions = new MapboxDirections({
+    const { map, directions } = setup({
       geocoder: {
         proximity: [-79.45, 43.65]
       }
     });
-    map.addControl(directions);
-
 
     directions.setOrigin('Queen Street NY');
     directions.setDestination([-77, 41]);
@@ -67,7 +44,6 @@ test('directions', (tt) => {
 });
 
 test('Directions with custom styles', t => {
-  var map = setup();
   var customLayer = {
     'id': 'directions-route-line',
     'type': 'line',
@@ -86,28 +62,25 @@ test('Directions with custom styles', t => {
       'line-width': 4
     }
   };
-  var directions = new MapboxDirections({
+
+  const { map, directions } = setup({
     styles: [customLayer]
   });
-  t.ok(map.addControl(directions));
-  map.on('load', ()=>{
+
+  map.on('load', () => {
     t.ok(map.getLayer('directions-route-line-alt'), 'adds default for unspecified custom layer');
     t.deepEqual(map.getLayer('directions-route-line').serialize(), customLayer);
+    t.end();
   })
-
-  t.end();
 });
 
 
 test('Directions#onRemove', t => {
-  var map = setup();
-  var directions = new MapboxDirections({
+  const { map, directions } = setup({
     geocoder: {
       proximity: [-79.45, 43.65]
     }
   });
-  map.addControl(directions);
-
 
   directions.setOrigin('Queen Street NY');
   directions.setDestination([-77, 41]);

test/test.geocoder.js

@@ -1,6 +1,7 @@
 'use strict';
 
 const test = require('tape');
+
 import Geocoder from '../src/controls/geocoder';
 
 test('Geocoder#constructor', t =>{

test/test.inputs.js

@@ -3,25 +3,17 @@
 const once = require('lodash.once');
 const test = require('tape');
 
-test('Directions#inputControl', tt => {
-  let container, map, directions;
+const setup = require('./utils/setup');
 
+test('Directions#inputControl', tt => {
   const changeEvent = document.createEvent('HTMLEvents');
   changeEvent.initEvent('change', true, false);
 
   const clickEvent = document.createEvent('HTMLEvents');
   clickEvent.initEvent('click', true, false);
 
-  function setup(opts) {
-    container = document.createElement('div');
-    map = new mapboxgl.Map({ container: container });
-    var MapboxDirections = require('..');
-    directions = new MapboxDirections(opts);
-    map.addControl(directions);
-  }
-
   tt.test('profiles', (t) => {
-    setup({ profile: 'mapbox/cycling' });
+    const { container, directions } = setup({ profile: 'mapbox/cycling' });
     t.plan(3);
 
     var drivingEl = container.querySelector('#mapbox-directions-profile-driving');

test/test.instructions.js

@@ -3,36 +3,57 @@
 const once = require('lodash.once');
 const test = require('tape');
 
-test('Directions#instructionControl', tt => {
-  let container, map, directions;
-
-  function setup(opts) {
-    container = document.createElement('div');
-    map = new mapboxgl.Map({ container: container });
-    var MapboxDirections = require('..');
-    directions = new MapboxDirections(opts);
-    map.addControl(directions);
-  }
+const setup = require('./utils/setup');
 
+test('Directions#instructionControl', tt => {
   tt.test('displayed', t => {
-    setup();
+    const { directions, container } = setup();
     t.plan(2);
-    directions.setOrigin([-79, 43]);
-    directions.setDestination([-77, 41]);
+    directions.setOrigin([-77.1, 41]);
+    directions.setDestination([-77.3, 41]);
     directions.on('route', once((e) => {
       t.ok(e.route, 'route is emitted');
       t.ok(container.querySelector('.directions-control-directions').textContent, 'instructions are shown');
     }));
   });
 
+  tt.test('direction with waypoints are displayed', t => {
+    const { directions, container } = setup();
+    directions.setOrigin([-79.4486679946892, 43.66968384056892])
+
+    directions.on('route', once(() => {
+      directions.addWaypoint(0, {
+        type: 'Feature',
+        geometry: {
+            type: 'Point',
+            coordinates: [-79.41523694152666, 43.68393045837692]
+        },
+        properties: {}
+      });
+
+      directions.on('route', once(() => {
+        directions.setDestination([-79.39708375091327, 43.677009321432536]);
+
+        directions.on('route', once((e) => {
+          t.ok(e.route, 'route is emitted');
+          t.ok(
+            container.querySelector('.directions-icon-waypoint'),
+            'instructions for waypoint shown'
+          );
+          t.end();
+        }));
+      }));
+    }));
+  });
+
   tt.test('error', t => {
-    setup();
+    const { directions } = setup();
     t.plan(1);
-    directions.setOrigin('Montreal Quebec');
-    directions.setDestination('Toledo Spain');
     directions.on('error', once((e) => {
       t.ok(e.error, 'error is emitted');
     }));
+    directions.setOrigin('Montreal Quebec');
+    directions.setDestination('Toledo Spain');
   });
 
   tt.end();

test/test.options.js

@@ -3,20 +3,11 @@
 const once = require('lodash.once');
 const test = require('tape');
 
-test('Directions#option', tt => {
-  let container, map, directions;
-
-  function setup(opts) {
-    container = document.createElement('div');
-    map = new mapboxgl.Map({ container: container });
-    var MapboxDirections = require('..');
-    directions = new MapboxDirections(opts);
-    map.addControl(directions);
-  }
+const setup = require('./utils/setup');
 
+test('Directions#option', tt => {
   tt.test('option.styles', t => {
-    t.plan(1);
-    setup({
+    const { directions, map } = setup({
       styles: [{
         'id': 'foo',
         'type': 'circle',
@@ -32,9 +23,12 @@ test('Directions#option', tt => {
       }]
     });
 
-    directions.setOrigin([-77, 41]);
-    directions.on('origin', once(() => {
-      t.ok(map.getLayer('foo'), 'Custom layer is present');
+    map.on('load', once(() => {
+      directions.on('origin', once(() => {
+        t.ok(map.getLayer('foo'), 'Custom layer is present');
+        t.end();
+      }));
+      directions.setOrigin([-77, 41]);
     }));
   });
 

test/utils/setup.js

@@ -0,0 +1,35 @@
+const MapboxDirections = require('../..');
+
+module.exports = function setup(opts) {
+    const container = document.createElement('div');
+    mapboxgl.Map.prototype._detectMissingCSS = () => {};
+    const map = new mapboxgl.Map({ 
+        container: container,
+        style: {
+            version: 8,
+            sources: {},
+            glyphs: 'mapbox://fonts/mapbox/{fontstack}/{range}.pbf',
+            layers: [
+                {
+                    id: 'background', 
+                    type: 'background',
+                    paint: {
+                        'background-color': '#fff'
+                    }
+                }
+            ] 
+        }
+    });
+
+    const directions = new MapboxDirections({
+        accessToken: mapboxgl.accessToken,
+        ...opts
+    });
+    map.addControl(directions);
+
+    return {
+        container,
+        map,
+        directions
+    };
+}