Add arrayOf proptype validation to MarkableMap

appearhere · Mar 21, 2017 · d3b2862 · d3b2862
1 parent b9c8565
commit d3b2862
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 9 deletions.
diff --git a/components/Map/MarkableMap.js b/components/Map/MarkableMap.js
@@ -9,6 +9,7 @@ import isEqual from 'lodash/fp/isEqual';
 import uniqueId from 'lodash/fp/uniqueId';
 import cx from 'classnames';
 
+import lngLat from '../../utils/propTypeValidations/lngLat';
 import minLngLatBounds from '../../utils/geoUtils/minLngLatBounds';
 import mapboxgl from '../../utils/mapboxgl/mapboxgl';
 import MarkerContainer from './MarkerContainer';
@@ -27,8 +28,17 @@ import css from './MarkableMap.css';
 
 export default class MarkableMap extends Component {
   static propTypes = {
-    // TODO: shapeOf prop type
-    markers: PropTypes.array,
+    markers: PropTypes.arrayOf(
+      PropTypes.shape({
+        id: React.PropTypes.oneOfType([
+          PropTypes.string,
+          PropTypes.number,
+        ]).isRequired,
+        lngLat: lngLat.isRequired,
+        label: PropTypes.string.isRequired,
+        props: PropTypes.object,
+      })
+    ),
     MarkerComponent: PropTypes.func.isRequired,
     autoFit: PropTypes.bool,
   };

diff --git a/components/Map/MarkableMap.test.js b/components/Map/MarkableMap.test.js
@@ -30,7 +30,7 @@ it('it renders the active marker correctly', () => {
     <MarkableMap
       ref={ (c) => { component = c; } }
       MarkerComponent={ SpaceMarker }
-      markers={ [{ id: 1, lngLat: [1, 0] }] }
+      markers={ [{ id: 1, lngLat: [1, 0], label: 'test' }] }
     />,
     div
   );
@@ -54,7 +54,7 @@ it('it autosizes the map correctly', () => {
   ReactDOM.render(
     <MarkableMap
       MarkerComponent={ SpaceMarker }
-      markers={ [{ id: 1, lngLat: [1, 0] }] }
+      markers={ [{ id: 1, lngLat: [1, 0], label: 'test' }] }
       autoFit
     />,
     div
@@ -68,8 +68,8 @@ it('it autosizes the map correctly', () => {
     <MarkableMap
       MarkerComponent={ SpaceMarker }
       markers={ [
-        { id: 1, lngLat: [0, 0] },
-        { id: 2, lngLat: [1, 1] },
+        { id: 1, lngLat: [0, 0], label: 'test' },
+        { id: 2, lngLat: [1, 1], label: 'test' },
       ] }
       autoFit
     />,
@@ -87,8 +87,8 @@ it('it autosizes the map correctly', () => {
     <MarkableMap
       MarkerComponent={ SpaceMarker }
       markers={ [
-        { id: 1, lngLat: [0, 0] },
-        { id: 2, lngLat: [1, 1] },
+        { id: 1, lngLat: [0, 0], label: 'test' },
+        { id: 2, lngLat: [1, 1], label: 'test' },
       ] }
       autoFit
     />,
@@ -106,7 +106,7 @@ it('unmounts without crashing', () => {
   ReactDOM.render(
     <MarkableMap
       MarkerComponent={ SpaceMarker }
-      markers={ [{ id: 1, lngLat: [1, 0] }] }
+      markers={ [{ id: 1, lngLat: [1, 0], label: 'test' }] }
     />,
     div
   );