Fix wrong class name on SearchForm (#3065)

* Fix wrong class name on SearchForm
* Replace simple-debounce with lodash.debounce

package.json

@@ -172,6 +172,7 @@
     "join-url": "2.0.0",
     "jsdom": "11.2.0",
     "localforage": "1.5.0",
+    "lodash.debounce": "4.0.8",
     "moment": "2.18.1",
     "mozilla-version-comparator": "1.0.2",
     "normalize.css": "7.0.0",
@@ -197,7 +198,6 @@
     "redux-logger": "3.0.6",
     "redux-saga": "0.15.6",
     "serialize-javascript": "1.4.0",
-    "simple-debounce": "0.0.3",
     "stylefmt": "6.0.0",
     "ua-parser-js": "0.7.14",
     "url": "0.11.0",

src/amo/components/AddonReview.js

@@ -2,7 +2,7 @@
 /* eslint-disable react/sort-comp */
 /* global $Shape, Event, HTMLInputElement, Node */
 import { oneLine } from 'common-tags';
-import defaultDebounce from 'simple-debounce';
+import defaultDebounce from 'lodash.debounce';
 import React from 'react';
 import { connect } from 'react-redux';
 import { compose } from 'redux';

src/amo/components/SearchForm/index.js

@@ -6,7 +6,7 @@ import { connect } from 'react-redux';
 import { compose } from 'redux';
 import Autosuggest from 'react-autosuggest';
 import { withRouter } from 'react-router';
-import defaultDebounce from 'simple-debounce';
+import defaultDebounce from 'lodash.debounce';
 import deepEqual from 'deep-eql';
 
 import Suggestion from 'amo/components/SearchSuggestion';
@@ -144,7 +144,9 @@ export class SearchFormBase extends React.Component {
         filters,
       }));
     });
-  }, 200)
+  // Configure debounce (200ms) with `leading: true` so that the method is
+  // triggered immediately and subsequent calls are debounced.
+  }, 200, { leading: true, trailing: false })
 
   handleSuggestionsClearRequested = () => {
     this.props.dispatch(autocompleteCancel());
@@ -180,7 +182,6 @@ export class SearchFormBase extends React.Component {
     const {
       addonType,
       api,
-      autocompleteIsOpen,
       className,
       i18n,
       pathname,
@@ -208,6 +209,9 @@ export class SearchFormBase extends React.Component {
       value: this.state.searchValue,
     };
 
+    const autocompleteIsOpen = this.props.autocompleteIsOpen &&
+      this.state.searchValue.length > 0;
+
     return (
       <form
         action={`/${api.lang}/${api.clientApp}${pathname}`}

src/core/reducers/autocomplete.js

@@ -48,6 +48,7 @@ export default function reducer(state = initialState, action = {}) {
     case AUTOCOMPLETE_CANCELLED:
       return {
         ...state,
+        isOpen: false,
         loading: false,
       };
     case AUTOCOMPLETE_STARTED:

tests/unit/amo/components/TestSearchForm.js

@@ -442,12 +442,14 @@ describe(__filename, () => {
       const wrapper = mountComponent({
         query: 'foo',
         suggestions: autocompleteState.suggestions,
+        autocompleteIsOpen: autocompleteState.isOpen,
       });
       expect(wrapper.find(Suggestion)).toHaveLength(0);
       // this triggers Autosuggest
       wrapper.find('input').simulate('focus');
       expect(wrapper.find(Suggestion)).toHaveLength(2);
       expect(wrapper.find(LoadingText)).toHaveLength(0);
+      expect(wrapper.find('form')).toHaveClassName('SearchForm--autocompleteIsOpen');
     });
 
     it('does not display suggestions when search is empty', () => {
@@ -461,17 +463,23 @@ describe(__filename, () => {
       const wrapper = mountComponent({
         query: '',
         suggestions: autocompleteState.suggestions,
+        autocompleteIsOpen: autocompleteState.isOpen,
       });
       wrapper.find('input').simulate('focus');
       expect(wrapper.find(Suggestion)).toHaveLength(0);
+      expect(wrapper.find('form')).not.toHaveClassName('SearchForm--autocompleteIsOpen');
     });
 
     it('does not display suggestions when there is no suggestion', () => {
-      const wrapper = mountComponent({ suggestions: [] });
+      const wrapper = mountComponent({
+        suggestions: [],
+        autocompleteIsOpen: false,
+      });
 
       wrapper.find('input').simulate('focus');
       expect(wrapper.find(Suggestion)).toHaveLength(0);
       expect(wrapper.find(LoadingText)).toHaveLength(0);
+      expect(wrapper.find('form')).not.toHaveClassName('SearchForm--autocompleteIsOpen');
     });
 
     it('displays 10 loading bars when suggestions are loading', () => {
@@ -488,6 +496,7 @@ describe(__filename, () => {
       });
       wrapper.find('input').simulate('focus');
       expect(wrapper.find(LoadingText)).toHaveLength(10);
+      expect(wrapper.find('form')).toHaveClassName('SearchForm--autocompleteIsOpen');
     });
 
     it('updates the state and push a new route when a suggestion is selected', () => {
@@ -595,6 +604,7 @@ describe(__filename, () => {
         },
       ]);
       expect(mapStateToProps(state).loadingSuggestions).toEqual(false);
+      expect(mapStateToProps(state).autocompleteIsOpen).toEqual(true);
     });
 
     it('passes the loading suggestions boolean through', () => {
@@ -608,6 +618,18 @@ describe(__filename, () => {
       const state = store.getState();
 
       expect(mapStateToProps(state).loadingSuggestions).toEqual(true);
+      expect(mapStateToProps(state).autocompleteIsOpen).toEqual(true);
+    });
+
+    it('passes the `isOpen` boolean through', () => {
+      const { store } = dispatchSignInActions();
+
+      store.dispatch(autocompleteCancel());
+
+      const state = store.getState();
+
+      expect(mapStateToProps(state).loadingSuggestions).toEqual(false);
+      expect(mapStateToProps(state).autocompleteIsOpen).toEqual(false);
     });
   });
 });

tests/unit/core/reducers/test_autocomplete.js

@@ -22,9 +22,14 @@ describe(__filename, () => {
     it('handles AUTOCOMPLETE_CANCELLED', () => {
       const results = [createFakeAutocompleteResult({ name: 'foo' })];
       const previousState = reducer(undefined, autocompleteLoad({ results }));
-      const { loading, suggestions } = reducer(previousState, autocompleteCancel());
+      const {
+        isOpen,
+        loading,
+        suggestions,
+      } = reducer(previousState, autocompleteCancel());
 
       expect(loading).toEqual(false);
+      expect(isOpen).toEqual(false);
       expect(suggestions).toEqual(previousState.suggestions);
     });
 

yarn.lock

@@ -4743,6 +4743,10 @@ lodash.cond@^4.3.0:
   version "4.5.2"
   resolved "https://registry.yarnpkg.com/lodash.cond/-/lodash.cond-4.5.2.tgz#f471a1da486be60f6ab955d17115523dd1d255d5"
 
+lodash.debounce@4.0.8:
+  version "4.0.8"
+  resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
+
 lodash.defaults@^4.0.1:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/lodash.defaults/-/lodash.defaults-4.2.0.tgz#d09178716ffea4dde9e5fb7b37f6f0802274580c"
@@ -7181,10 +7185,6 @@ signal-exit@^3.0.0, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-simple-debounce@0.0.3:
-  version "0.0.3"
-  resolved "https://registry.yarnpkg.com/simple-debounce/-/simple-debounce-0.0.3.tgz#237296bb60d01d86cc49c9ce4fc09cbfcd0430dd"
-
 sinon@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/sinon/-/sinon-3.1.0.tgz#c2b6e58e178fe85afe24f0182828a0060e0df383"