Only search commits on input change since last search26448-unnecessary-request-is-made-when-filter-input-box-is-focused-by-keyboard

2 files changed, 57 insertions, 1 deletions

diff --git a/app/assets/javascripts/commits.js b/app/assets/javascripts/commits.js
index cabeae74ae3..c6fdfbcaa10 100644
--- a/app/assets/javascripts/commits.js
+++ b/app/assets/javascripts/commits.js
@@ -3,7 +3,7 @@
 
 (function() {
   this.CommitsList = (function() {
-    function CommitsList() {}
+    var CommitsList = {};
 
     CommitsList.timer = null;
 
@@ -20,6 +20,7 @@
       });
       this.content = $("#commits-list");
       this.searchField = $("#commits-search");
+      this.lastSearch = this.searchField.val();
       return this.initSearch();
     };
 
@@ -37,6 +38,7 @@
       var commitsUrl, form, search;
       form = $(".commits-search-form");
       search = CommitsList.searchField.val();
+      if (search === CommitsList.lastSearch) return;
       commitsUrl = form.attr("action") + '?' + form.serialize();
       CommitsList.content.fadeTo('fast', 0.5);
       return $.ajax({
@@ -47,12 +49,16 @@
           return CommitsList.content.fadeTo('fast', 1.0);
         },
         success: function(data) {
+          CommitsList.lastSearch = search;
           CommitsList.content.html(data.html);
           return history.replaceState({
             page: commitsUrl
           // Change url so if user reload a page - search results are saved
           }, document.title, commitsUrl);
         },
+        error: function() {
+          CommitsList.lastSearch = null;
+        },
         dataType: "json"
       });
     };
diff --git a/spec/javascripts/commits_spec.js.es6 b/spec/javascripts/commits_spec.js.es6
new file mode 100644
index 00000000000..bb9a9072f3a
--- /dev/null
+++ b/spec/javascripts/commits_spec.js.es6
@@ -0,0 +1,50 @@
+/* global CommitsList */
+
+//= require jquery.endless-scroll
+//= require pager
+//= require commits
+
+(() => {
+  describe('Commits List', () => {
+    beforeEach(() => {
+      setFixtures(`
+        <form class="commits-search-form" action="/h5bp/html5-boilerplate/commits/master">
+          <input id="commits-search">
+        </form>
+        <ol id="commits-list"></ol>
+        `);
+    });
+
+    it('should be defined', () => {
+      expect(CommitsList).toBeDefined();
+    });
+
+    describe('on entering input', () => {
+      let ajaxSpy;
+
+      beforeEach(() => {
+        CommitsList.init(25);
+        CommitsList.searchField.val('');
+        spyOn(history, 'replaceState').and.stub();
+        ajaxSpy = spyOn(jQuery, 'ajax').and.callFake((req) => {
+          req.success({
+            data: '<li>Result</li>',
+          });
+        });
+      });
+
+      it('should save the last search string', () => {
+        CommitsList.searchField.val('GitLab');
+        CommitsList.filterResults();
+        expect(ajaxSpy).toHaveBeenCalled();
+        expect(CommitsList.lastSearch).toEqual('GitLab');
+      });
+
+      it('should not make ajax call if the input does not change', () => {
+        CommitsList.filterResults();
+        expect(ajaxSpy).not.toHaveBeenCalled();
+        expect(CommitsList.lastSearch).toEqual('');
+      });
+    });
+  });
+})();