Add tests for Search and RoutePanel. Use snapshot testing.

benjamintd · Jun 14, 2017 · ea9d17d · ea9d17d
1 parent 47f16cc
commit ea9d17d
Show file tree

Hide file tree

Showing 16 changed files with 514 additions and 57 deletions.
diff --git a/src/components/Geocoder.js b/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'>

diff --git a/src/components/RoutePanel.js b/src/components/RoutePanel.js
@@ -77,4 +77,5 @@ const mapStateToProps = (state) => {
   };
 };
 
+export {RoutePanel};
 export default connect(mapStateToProps)(RoutePanel);
diff --git a/src/components/RoutePanel.spec.js b/src/components/RoutePanel.spec.js
@@ -0,0 +1,65 @@
+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();
+});
diff --git a/src/components/Search.js b/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

diff --git a/src/components/Search.spec.js b/src/components/Search.spec.js
@@ -0,0 +1,73 @@
+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');
+});
diff --git a/src/components/StyleSwitch.js b/src/components/StyleSwitch.js
@@ -68,7 +68,6 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 export {StyleSwitch};
-
 export default connect(
   mapStateToProps,
   mapDispatchToProps

diff --git a/src/components/StyleSwitch.spec.js b/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', () => {

diff --git a/src/components/TrafficSwitch.js b/src/components/TrafficSwitch.js
@@ -61,7 +61,6 @@ const mapDispatchToProps = (dispatch) => {
 };
 
 export {TrafficSwitch};
-
 export default connect(
   mapStateToProps,
   mapDispatchToProps

diff --git a/src/components/TrafficSwitch.spec.js b/src/components/TrafficSwitch.spec.js
@@ -1,18 +1,20 @@
 import React from 'react';
-import ReactDOM from 'react-dom';
+import renderer from 'react-test-renderer';
 import {shallow} from 'enzyme';
 import {TrafficSwitch} from './TrafficSwitch';
 
-it('renders without crashing', () => {
-  const div = document.createElement('div');
+it('renders correctly', () => {
 
-  ReactDOM.render(<TrafficSwitch
-    triggerMapUpdate={() => {}}
-    mapStyle='streets'
-    setStateValues={() => {}}
-  />, div);
+  const component = renderer.create(
+    <TrafficSwitch
+      triggerMapUpdate={() => {}}
+      mapStyle='streets'
+      setStateValues={() => {}}
+    />
+  );
 
-  expect(true).toBe(true);
+  let tree = component.toJSON();
+  expect(tree).toMatchSnapshot();
 });
 
 it('switches style on change event', () => {