Add tests + congestion on route

package.json

@@ -6,6 +6,7 @@
   "devDependencies": {
     "@mapbox/spritezero-cli": "^2.0.0",
     "enzyme": "^2.8.2",
+    "enzyme-to-json": "^1.5.1",
     "eslint": "^3.17.1",
     "eslint-config-mourner": "^2.0.1",
     "eslint-plugin-jest": "^20.0.3",
@@ -19,7 +20,6 @@
     "@turf/bbox": "^3.13.0",
     "@turf/bbox-polygon": "^3.13.0",
     "@turf/buffer": "^3.13.0",
-    "@turf/distance": "^3.13.0",
     "blueimp-md5": "^2.7.0",
     "cheap-ruler": "^2.5.0",
     "lodash": "^4.17.4",

src/api-caller/index.js

@@ -14,8 +14,12 @@ const apiCaller = (store) => (next) => (action) => { // eslint-disable-line
 
     const baseUrl = 'https://api.mapbox.com/directions/v5/mapbox/';
 
-    let profile = 'driving-traffic';
-    if (action.modality === 'car') profile = 'driving-traffic';
+    let profile = 'driving-traffic'; // default
+    let annotationsParam = '';
+    if (action.modality === 'car') {
+      profile = 'driving-traffic';
+      annotationsParam = '&annotations=congestion';
+    }
     if (action.modality === 'bike') profile = 'cycling';
     if (action.modality === 'walk') profile = 'walking';
 
@@ -24,7 +28,8 @@ const apiCaller = (store) => (next) => (action) => { // eslint-disable-line
 
     const url = baseUrl + profile + '/' + fromCoordinates + ';' + toCoordinates
       + '?access_token=' + action.accessToken
-      + '&overview=full';
+      + '&overview=full'
+      + annotationsParam;
 
     // Fetch
     fetch(url, {method: 'get'})
@@ -33,11 +38,6 @@ const apiCaller = (store) => (next) => (action) => { // eslint-disable-line
           return res.json();
         } else { // 4xx or 5xx response
           var err = new Error(res.statusText);
-          next({
-            type: 'SET_STATE_VALUE',
-            key: 'routeStatus',
-            value: 'error'
-          });
           return Promise.reject(err);
         }
       })

src/components/Geocoder.js

@@ -27,7 +27,7 @@ class Geocoder extends Component {
   }
 
   componentDidMount() {
-    if (this.props.focusOnMount) this.input.focus();
+    if (this.props.focusOnMount && this.input) this.input.focus();
   }
 
   onInput(e) {
@@ -126,7 +126,8 @@ class Geocoder extends Component {
       value={this.props.searchString}
       onChange={this.onInput}
       placeholder={this.props.inputPlaceholder}
-      type='text' />;
+      type='text'
+    />;
 
     return (
       <div className='w-full'>

src/components/RouteElevation.spec.js

@@ -0,0 +1,19 @@
+import React from 'react';
+import {shallow} from 'enzyme';
+import toJson from 'enzyme-to-json';
+import RouteElevation from './RouteElevation';
+import {bikeRoute} from './fixtures/RoutePanel.fixtures.js';
+
+it('renders correctly', () => {
+  const component = shallow(
+    <RouteElevation
+      accessToken='test'
+      route={bikeRoute}
+    />
+  );
+
+  component.setState({elevations: [10, 30, 50, 100, 75, 20], status: 'ok'});
+
+  let tree = toJson(component);
+  expect(tree).toMatchSnapshot();
+});

src/components/RoutePanel.js

@@ -77,4 +77,5 @@ const mapStateToProps = (state) => {
   };
 };
 
+export {RoutePanel};
 export default connect(mapStateToProps)(RoutePanel);

src/components/RoutePanel.spec.js

@@ -0,0 +1,64 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {RoutePanel} from './RoutePanel';
+import {bikeRoute, walkingRoute} from './fixtures/RoutePanel.fixtures.js';
+
+it('bike route renders correctly', () => {
+
+  const component = renderer.create(
+    <RoutePanel
+      mapboxAccessToken='test'
+      modality='bike'
+      route={bikeRoute}
+      routeStatus='idle'
+    />
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('walking route renders correctly', () => {
+
+  const component = renderer.create(
+    <RoutePanel
+      mapboxAccessToken='test'
+      modality='walk'
+      route={walkingRoute}
+      routeStatus='idle'
+    />
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('pending route renders correctly', () => {
+
+  const component = renderer.create(
+    <RoutePanel
+      mapboxAccessToken='test'
+      modality='walk'
+      route={null}
+      routeStatus='pending'
+    />
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('error route renders correctly', () => {
+
+  const component = renderer.create(
+    <RoutePanel
+      mapboxAccessToken='test'
+      modality='walk'
+      route={null}
+      routeStatus='error'
+    />
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});

src/components/Search.js

@@ -10,42 +10,53 @@ import {triggerMapUpdate, setDirectionsLocation, getPlaceInfo, resetStateKeys, s
 
 class Search extends Component {
   render() {
+    let SearchBar;
+
+    if (this.props.searchLocation === null) { // no place was selected yet
+      SearchBar = (
+        <Geocoder
+          onSelect={(data) => this.onSelect(data)}
+          searchString={this.props.searchString}
+          writeSearch={(value) => {
+            this.props.triggerMapUpdate();
+            this.props.writeSearch(value);
+          }}
+          resultsClass={this.styles.results}
+          inputClass={this.styles.input}
+          focusOnMount={true}
+        />
+      );
+
+    } else { // There is a selected place
+      SearchBar = (
+        <div className={this.styles.input + ' flex-parent flex-parent--center-cross flex-parent--center-main'}>
+          <div className='w-full w420-mm pr42 txt-truncate'>
+            <PlaceName
+              location={this.props.searchLocation}
+              onClick={() => {
+                this.props.writeSearch(this.props.searchLocation.place_name);
+                this.props.resetStateKeys(['searchLocation', 'placeInfo']);
+              }}
+            />
+          </div>
+          <div
+            id='search-directions'
+            className={'mr30 cursor-pointer right ' + this.styles.icon}
+            onClick={() => this.clickDirections()}
+          >
+            <img src={directionsIcon} alt='directions'/>
+          </div>
+        </div>
+      );
+
+    }
+
     return (
       <div className={this.styles.main}>
         <div className={this.styles.icon}>
           <svg className='icon color-gray'><use xlinkHref='#icon-search'></use></svg>
         </div>
-        {
-          (this.props.searchLocation === null)// no place was selected yet
-          ? <Geocoder
-            onSelect={(data) => this.onSelect(data)}
-            searchString={this.props.searchString}
-            writeSearch={(value) => {
-              this.props.triggerMapUpdate();
-              this.props.writeSearch(value);
-            }}
-            resultsClass={this.styles.results}
-            inputClass={this.styles.input}
-            focusOnMount={true}
-          />
-          : <div className={this.styles.input + ' flex-parent flex-parent--center-cross flex-parent--center-main'}>
-            <div className='w-full w420-mm pr42 txt-truncate'>
-              <PlaceName
-                location={this.props.searchLocation}
-                onClick={() => {
-                  this.props.writeSearch(this.props.searchLocation.place_name);
-                  this.props.resetStateKeys(['searchLocation', 'placeInfo']);
-                }}
-              />
-            </div>
-            <div
-              className={'mr30 cursor-pointer right ' + this.styles.icon}
-              onClick={() => this.clickDirections()}
-            >
-              <img src={directionsIcon} alt='directions'/>
-            </div>
-          </div>
-        }
+        {SearchBar}
         <CloseButton
           show={(this.props.searchString !== '' || this.props.searchLocation !== null)}
           onClick={() => this.closeSearch()}
@@ -123,6 +134,7 @@ const mapDispatchToProps = (dispatch) => {
   };
 };
 
+export {Search};
 export default connect(
   mapStateToProps,
   mapDispatchToProps

src/components/Search.spec.js

@@ -0,0 +1,72 @@
+import React from 'react';
+import renderer from 'react-test-renderer';
+import {shallow} from 'enzyme';
+import {createStore} from 'redux';
+import {Provider} from 'react-redux';
+import {defaultState} from '../reducers/index';
+import reducer from '../reducers/index';
+import {Search} from './Search';
+import ConnectedSearch from './Search';
+import {placeInfo, searchLocation} from './fixtures/Search.fixtures.js';
+
+it('renders correctly with search location', () => {
+
+  const component = renderer.create(
+    <Search
+      getPlaceInfo={() => {}}
+      placeInfo={placeInfo}
+      resetStateKeys={() => {}}
+      searchLocation={searchLocation}
+      searchString='Paris'
+      setDirectionsLocation={() => {}}
+      setMode={() => {}}
+      setPlaceInfo={() => {}}
+      setSearchLocation={() => {}}
+      triggerMapUpdate={() => {}}
+      writeSearch={() => {}}
+    />
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('renders correctly without search location', () => {
+
+  let store = createStore(reducer, defaultState);
+
+  const component = renderer.create(
+    <Provider store={store}>
+      <ConnectedSearch/>
+    </Provider>
+  );
+
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
+});
+
+it('behaves correctly on clicking directions', () => {
+
+  const setDirectionsLocation = jest.fn();
+  const setMode = jest.fn();
+
+  const search = shallow(
+    <Search
+      getPlaceInfo={() => {}}
+      placeInfo={placeInfo}
+      resetStateKeys={() => {}}
+      searchLocation={searchLocation}
+      searchString='Paris'
+      setDirectionsLocation={setDirectionsLocation}
+      setMode={setMode}
+      setPlaceInfo={() => {}}
+      setSearchLocation={() => {}}
+      triggerMapUpdate={() => {}}
+      writeSearch={() => {}}
+    />
+  );
+
+  search.find('#search-directions').simulate('click');
+  expect(setDirectionsLocation).toBeCalledWith('to', searchLocation);
+  expect(setMode).toBeCalledWith('directions');
+});

src/components/StyleSwitch.js

@@ -68,7 +68,6 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 export {StyleSwitch};
-
 export default connect(
   mapStateToProps,
   mapDispatchToProps

src/components/StyleSwitch.spec.js

@@ -1,21 +1,23 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
 import {shallow} from 'enzyme';
 import {StyleSwitch} from './StyleSwitch';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it('renders correctly', () => {
 
-  ReactDOM.render(<StyleSwitch
-    accessToken='abc'
-    center={[123, -37]}
-    setStateValues={() => {}}
-    mapStyle='streets'
-    triggerMapUpdate={() => {}}
-    zoom={14}
-  />, div);
+  const component = renderer.create(
+    <StyleSwitch
+      accessToken='abc'
+      center={[123, -37]}
+      setStateValues={() => {}}
+      mapStyle='streets'
+      triggerMapUpdate={() => {}}
+      zoom={14}
+    />
+  );
 
-  expect(true).toBe(true);
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
 });
 
 it('switches style on change event', () => {

src/components/TrafficSwitch.js

@@ -61,7 +61,6 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 export {TrafficSwitch};
-
 export default connect(
   mapStateToProps,
   mapDispatchToProps