Updated geocoder logic and added simple mounting test

Signed-off-by: Giuseppe Macri <macri.giuseppe@gmail.com>
keplergl · Nov 21, 2020 · 862e189 · 862e189
1 parent 2051ce1
commit 862e189
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 3 deletions.
diff --git a/src/components/geocoder/geocoder.js b/src/components/geocoder/geocoder.js
@@ -89,6 +89,7 @@ const StyledContainer = styled.div`
 const PLACEHOLDER = 'Enter an Address';
 
 const GeoCoder = ({
+  mapboxClient,
   mapboxApiAccessToken,
   className = '',
   initialInputValue = '',
@@ -109,7 +110,10 @@ const GeoCoder = ({
   const [results, setResults] = useState([]);
   const [selectedIndex, setSelectedIndex] = useState(0);
 
-  const client = useMemo(() => new MapboxClient(mapboxApiAccessToken), [mapboxApiAccessToken]);
+  const client = useMemo(() => mapboxClient || new MapboxClient(mapboxApiAccessToken), [
+    mapboxApiAccessToken,
+    mapboxClient
+  ]);
 
   const onChange = useCallback(
     event => {
@@ -120,8 +124,10 @@ const GeoCoder = ({
       debounceTimeout = setTimeout(async () => {
         if (limit > 0 && Boolean(queryString)) {
           const response = await client.geocodeForward(queryString, {limit});
-          setShowResults(true);
-          setResults(response.entity.features);
+          if (response.entity && response.entity.features) {
+            setShowResults(true);
+            setResults(response.entity.features);
+          }
         }
       }, timeout);
     },
@@ -196,6 +202,7 @@ const GeoCoder = ({
           <Search height="20px" />
         </div>
         <Input
+          id="geocoder-search-input"
           type="text"
           onChange={onChange}
           onBlur={onBlur}

diff --git a/test/browser/components/geocoder-test.js b/test/browser/components/geocoder-test.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import sinon from 'sinon';
+import test from 'tape';
+import {IntlWrapper, mountWithTheme} from 'test/helpers/component-utils';
+import GeoCoder from 'components/geocoder/geocoder';
+
+test('GeoCoder - render', t => {
+  const geocodeForward = sinon.spy();
+  const onSelected = sinon.spy();
+  const onDeleteMarker = sinon.spy();
+  const width = 500;
+
+  t.doesNotThrow(() => {
+    mountWithTheme(
+      <IntlWrapper>
+        <GeoCoder
+          mapboxClient={{geocodeForward}}
+          onSelected={onSelected}
+          onDeleteMarker={onDeleteMarker}
+          width={width}
+        />
+      </IntlWrapper>
+    );
+  }, 'Should render');
+
+  t.end();
+});
diff --git a/test/browser/components/index.js b/test/browser/components/index.js
@@ -31,5 +31,6 @@ import './common';
 import './editor';
 import './map-container-test';
 import './geocoder-panel-test';
+import './geocoder-test';
 import './tooltip-config-test';
 import './bottom-widget-test';