feat(connector): refactor search function

src/connectors/search-box/connectSearchBox.js

@@ -64,8 +64,25 @@ const connectSearchBox = searchBoxRendering => ({
     poweredBy = {};
   }
 
+  const search = helper => {
+    let previousQuery;
+
+    const setQueryAndSearch = (q, doSearch = true) => {
+      if (q !== helper.state.query) {
+        previousQuery = helper.state.query;
+        helper.setQuery(q);
+      }
+      if (doSearch && previousQuery !== undefined && previousQuery !== q) helper.search();
+    };
+
+    return queryHook ?
+      q => queryHook(q, setQueryAndSearch) :
+      setQueryAndSearch;
+  };
+
   return {
     init({state, helper, onHistoryChange}) {
+      this._search = search(helper);
       searchBoxRendering({
         query: state.query,
         containerNode,
@@ -79,6 +96,7 @@ const connectSearchBox = searchBoxRendering => ({
         placeholder,
         cssClasses,
         templates: defaultTemplates,
+        search: this._search,
       }, true);
     },
     render({helper}) {
@@ -95,6 +113,7 @@ const connectSearchBox = searchBoxRendering => ({
         placeholder,
         cssClasses,
         templates: defaultTemplates,
+        search: this._search,
       }, false);
     },
   };

src/widgets/search-box/__tests__/search-box-test.js

@@ -412,11 +412,11 @@ describe('searchBox()', () => {
       });
 
       it('updates the query', () => {
-        expect(helper.setQuery.calledOnce).toBe(true);
+        expect(helper.setQuery.callCount).toBe(1);
       });
 
       it('does not search', () => {
-        expect(helper.search.called).toBe(false);
+        expect(helper.search.callCount).toBe(0);
       });
     });
 
@@ -475,18 +475,40 @@ describe('searchBox()', () => {
     context('non-instant search', () => {
       beforeEach(() => {
         widget = searchBox({container, searchOnEnterKeyPressOnly: true});
+        helper.state.query = 'tes';
+        widget.init({state: helper.state, helper, onHistoryChange});
       });
 
       it('performs the search on keyup if <ENTER>', () => {
-        simulateInputEvent('test', 'tes', widget, helper, state, container);
-        simulateKeyUpEvent({keyCode: 13}, widget, helper, state, container);
-        expect(helper.search.calledOnce).toBe(true);
+        // simulateInputEvent('test', 'tes', widget, helper, state, container);
+        // simulateKeyUpEvent({keyCode: 13}, widget, helper, state, container);
+        container.value = 'test';
+        const e1 = new window.Event('input');
+        container.dispatchEvent(e1);
+
+        expect(helper.setQuery.callCount).toBe(1);
+        expect(helper.search.callCount).toBe(0);
+
+        // setQuery is mocked and does not apply the modification of the helper
+        // we have to set it ourselves
+        helper.state.query = container.value;
+
+        const e2 = new window.Event('keyup', {keyCode: 13});
+        Object.defineProperty(e2, 'keyCode', {get: () => 13});
+        container.dispatchEvent(e2);
+
+        expect(helper.setQuery.callCount).toBe(1);
+        expect(helper.search.callCount).toBe(1);
       });
 
       it('doesn\'t perform the search on keyup if not <ENTER>', () => {
-        simulateKeyUpEvent({}, widget, helper, state, container);
-        expect(helper.setQuery.called).toBe(false);
-        expect(helper.search.called).toBe(false);
+        container.value = 'test';
+        const event = new window.Event('keyup', {keyCode: 42});
+        Object.defineProperty(event, 'keyCode', {get: () => 42});
+        container.dispatchEvent(event);
+
+        expect(helper.setQuery.callCount).toBe(0);
+        expect(helper.search.callCount).toBe(0);
       });
     });
   });
@@ -637,7 +659,8 @@ function simulateInputEvent(query, stateQuery, widget, helper, state, container)
   }
 
   // When
-  widget.init({state, helper, onHistoryChange});
+  widget.init({state: helper.state, helper, onHistoryChange});
+
   // Then
   container.value = query;
   const event = new window.Event('input');

src/widgets/search-box/search-box.js

@@ -56,6 +56,7 @@ function defaultRendering({
   placeholder,
   cssClasses,
   templates,
+  search,
 }, isFirstRendering) {
   if (isFirstRendering) {
     const INPUT_EVENT = window.addEventListener ?
@@ -102,38 +103,21 @@ function defaultRendering({
       input.setSelectionRange(helper.state.query.length, helper.state.query.length);
     }
 
-    let previousQuery;
-    const search = q => {
-      if (previousQuery !== undefined && previousQuery !== q) helper.search();
-    };
-    const setQuery = q => {
-      if (q !== helper.state.query) {
-        previousQuery = helper.state.query;
-        helper.setQuery(q);
-      }
-    };
-    const setQueryAndSearch = q => {
-      setQuery(q);
-      search(q);
-    };
-    const maybeSearch = queryHook ? q => queryHook(q, setQueryAndSearch) : search;
-
-    // always set the query every keystrokes when there's no queryHook
-    if (!queryHook) {
-      addListener(input, INPUT_EVENT, getInputValueAndCall(setQuery));
-    }
-
     // search on enter
     if (searchOnEnterKeyPressOnly) {
-      addListener(input, 'keyup', ifKey(KEY_ENTER, getInputValueAndCall(maybeSearch)));
+      addListener(input, INPUT_EVENT, e => {
+        search(getValue(e), false);
+      });
+      addListener(input, 'keyup', e => {
+        if (e.keyCode === KEY_ENTER) search(getValue(e));
+      });
     } else {
-      addListener(input, INPUT_EVENT, getInputValueAndCall(maybeSearch));
+      addListener(input, INPUT_EVENT, getInputValueAndCall(search));
 
       // handle IE8 weirdness where BACKSPACE key will not trigger an input change..
       // can be removed as soon as we remove support for it
       if (INPUT_EVENT === 'propertychange' || window.attachEvent) {
-        addListener(input, 'keyup', ifKey(KEY_SUPPRESS, getInputValueAndCall(setQuery)));
-        addListener(input, 'keyup', ifKey(KEY_SUPPRESS, getInputValueAndCall(maybeSearch)));
+        addListener(input, 'keyup', ifKey(KEY_SUPPRESS, getInputValueAndCall(search)));
       }
     }
   } else {