Fixup: Simplify showing predictions list logic

ianguerin · Mar 15, 2024 · 5afa6b4 · 5afa6b4
1 parent 70b70f5
commit 5afa6b4
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 21 deletions.
diff --git a/src/js/views/maps/viewfinder/ViewfinderView.js b/src/js/views/maps/viewfinder/ViewfinderView.js
@@ -57,7 +57,6 @@ define(
           [`click   .${this.classNames.button}`]: 'search',
           [`blur    .${this.classNames.input}`]: 'hidePredictionsList',
           [`change  .${this.classNames.input}`]: 'keyup',
-          [`click   .${this.classNames.input}`]: 'showPredictionsList',
           [`focus   .${this.classNames.input}`]: 'showPredictionsList',
           [`keydown .${this.classNames.input}`]: 'keydown',
           [`keyup   .${this.classNames.input}`]: 'keyup',
@@ -200,9 +199,7 @@ define(
        */
       showPredictionsList() {
         this.getList().show();
-        if (this.viewfinderModel.get('query') !== this.templateVars.inputValue) {
-          this.viewfinderModel.autocompleteSearch(this.templateVars.inputValue);
-        }
+        this.viewfinderModel.autocompleteSearch(this.templateVars.inputValue);
       },
 
       /**

diff --git a/test/js/specs/unit/views/maps/viewfinder/ViewfinderView.spec.js b/test/js/specs/unit/views/maps/viewfinder/ViewfinderView.spec.js
@@ -10,7 +10,6 @@ define(
     '/test/js/specs/unit/views/maps/viewfinder/ViewfinderViewHarness.js',
     '/test/js/specs/unit/views/maps/viewfinder/PredictionsListViewHarness.js',
     '/test/js/specs/shared/clean-state.js',
-    '/test/js/specs/shared/mock-gmaps-module.js',
   ],
   (
     _,
@@ -20,8 +19,6 @@ define(
     ViewfinderViewHarness,
     PredictionsListViewHarness,
     cleanState,
-    // Import for side effect, unused.
-    unusedGmapsMock,
   ) => {
     const should = chai.should();
     const expect = chai.expect;
@@ -60,18 +57,26 @@ define(
         ];
         view.viewfinderModel.set('predictions', predictions);
 
+        // Actually render the view to document to test focus events.
+        const testContainer = document.createElement("div");
+        testContainer.id = "test-container";
+        testContainer.append(view.el);
+        document.body.append(testContainer);
+
         return {
           autocompleteSpy,
           debounceStub,
           harness,
           sandbox,
+          testContainer,
           view,
           zoomSpy,
         };
       }, beforeEach);
 
       afterEach(() => {
         state.sandbox.restore();
+        state.testContainer.remove();
       });
 
       it('creates a ViewfinderView instance', () => {
@@ -156,16 +161,20 @@ define(
         expect(state.harness.getError()).to.match(/some error/);
       });
 
-      it('initially does not show a autocompletions list', () => {
-        state.view.render();
+      it('does not show an autocompletions list when input is not focused',
+        () => {
+          state.view.render();
+          state.harness.blurInput();
 
-        expect(state.autocompleteSpy.callCount).to.equal(0);
-      });
+          expect(state.view.getList().is(":visible")).to.be.false;
+        });
 
       it('updates autocompletions when list is shown with updated query string', () => {
         state.view.render();
+        // Focus is called on render, reset call count.
+        state.autocompleteSpy.resetHistory();
         state.view.viewfinderModel.set('query', 'some query');
-        state.harness.clickInput();
+        state.harness.focusInput();
 
         expect(state.autocompleteSpy.callCount).to.equal(1);
       });

diff --git a/test/js/specs/unit/views/maps/viewfinder/ViewfinderViewHarness.js b/test/js/specs/unit/views/maps/viewfinder/ViewfinderViewHarness.js
@@ -1,43 +1,47 @@
-"use strict";
+'use strict';
 
 define([], function () {
   return class ViewFinderViewHarness {
     constructor(view) {
       this.view = view;
     }
 
-    clickInput() {
-      this.view.getInput().click();
+    focusInput() {
+      this.view.getInput().focus();
+    }
+
+    blurInput() {
+      this.view.getInput().blur();
     }
 
     setQuery(searchString) {
       this.view.getInput().val(searchString);
-      this.view.getInput().trigger("change");
+      this.view.getInput().trigger('change');
     }
 
     typeQuery(searchString) {
       this.view.getInput().val(searchString);
-      this.view.getInput().trigger("keyup");
+      this.view.getInput().trigger('keyup');
     }
 
     clickSearch() {
       this.view.getButton().click();
     }
 
     hitEnter() {
-      this.view.getInput().trigger({ type: "keyup", key: 'Enter', });
+      this.view.getInput().trigger({ type: 'keyup', key: 'Enter', });
     }
 
     hitArrowUp() {
-      this.view.getInput().trigger({ type: "keyup", key: 'ArrowUp', });
+      this.view.getInput().trigger({ type: 'keyup', key: 'ArrowUp', });
     }
 
     hitArrowDown() {
-      this.view.getInput().trigger({ type: "keyup", key: 'ArrowDown', });
+      this.view.getInput().trigger({ type: 'keyup', key: 'ArrowDown', });
     }
 
     getError() {
-      return this.view.$el.find(".viewfinder__error").text();
+      return this.view.$el.find('.viewfinder__error').text();
     }
 
     getInput() {