Maintain milestone filter option when updating filter

Setup teaspoon tests for Issuable

app/assets/javascripts/issuable.js.es6

-/* eslint-disable func-names, no-var, camelcase, no-unused-vars, object-shorthand, space-before-function-paren, no-return-assign, comma-dangle, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, prefer-const, padded-blocks, wrap-iife, max-len */
+/* eslint-disable no-param-reassign, func-names, no-var, camelcase, no-unused-vars, object-shorthand, space-before-function-paren, no-return-assign, comma-dangle, consistent-return, one-var, one-var-declaration-per-line, quotes, prefer-template, prefer-arrow-callback, prefer-const, padded-blocks, wrap-iife, max-len */
 /* global Issuable */
 /* global Turbolinks */
 
-(function() {
+((global) => {
   var issuable_created;
 
   issuable_created = false;
 
-  this.Issuable = {
+  global.Issuable = {
     init: function() {
       Issuable.initTemplates();
       Issuable.initSearch();
@@ -111,7 +111,11 @@
     filterResults: (function(_this) {
       return function(form) {
         var formAction, formData, issuesUrl;
-        formData = form.serialize();
+        formData = form.serializeArray();
+        formData = formData.filter(function(data) {
+          return data.value !== '';
+        });
+        formData = $.param(formData);
         formAction = form.attr('action');
         issuesUrl = formAction;
         issuesUrl += "" + (formAction.indexOf('?') < 0 ? '?' : '&');
@@ -184,4 +188,4 @@
     }
   };
 
-}).call(this);
+})(window);

app/views/shared/issuable/_milestone_dropdown.html.haml

@@ -3,7 +3,7 @@
 - show_menu_above = show_menu_above || false
 - selected_text = selected.try(:title) || params[:milestone_title]
 - dropdown_title = local_assigns.fetch(:dropdown_title, "Filter by milestone")
-- if selected.present?
+- if selected.present? || params[:milestone_title].present?
   = hidden_field_tag(name, name == :milestone_title ? selected_text : selected.id)
 = dropdown_tag(milestone_dropdown_label(selected_text), options: { title: dropdown_title, toggle_class: "js-milestone-select js-filter-submit #{extra_class}", filter: true, dropdown_class: "dropdown-menu-selectable dropdown-menu-milestone",
   placeholder: "Search milestones", footer_content: project.present?, data: { show_no: true, show_menu_above: show_menu_above, show_any: show_any, show_upcoming: show_upcoming, field_name: name, selected: selected.try(:title), project_id: project.try(:id), milestones: milestones_filter_dropdown_path, default_label: "Milestone" } }) do

spec/javascripts/fixtures/issuable_filter.html.haml

+%form.js-filter-form{action: '/user/project/issues?scope=all&state=closed'}
+  %input{id: 'utf8', name: 'utf8', value: '✓'}
+  %input{id: 'check_all_issues', name: 'check_all_issues'}
+  %input{id: 'search', name: 'search'}
+  %input{id: 'author_id', name: 'author_id'}
+  %input{id: 'assignee_id', name: 'assignee_id'}
+  %input{id: 'milestone_title', name: 'milestone_title'}
+  %input{id: 'label_name', name: 'label_name'}

spec/javascripts/issuable_spec.js.es6

+/* global Issuable */
+/* global Turbolinks */
+
+//= require issuable
+//= require turbolinks
+
+(() => {
+  const BASE_URL = '/user/project/issues?scope=all&state=closed';
+  const DEFAULT_PARAMS = '&utf8=%E2%9C%93';
+
+  function updateForm(formValues, form) {
+    $.each(formValues, (id, value) => {
+      $(`#${id}`, form).val(value);
+    });
+  }
+
+  function resetForm(form) {
+    $('input[name!="utf8"]', form).each((index, input) => {
+      input.setAttribute('value', '');
+    });
+  }
+
+  describe('Issuable', () => {
+    fixture.preload('issuable_filter');
+
+    beforeEach(() => {
+      fixture.load('issuable_filter');
+      Issuable.init();
+    });
+
+    it('should be defined', () => {
+      expect(window.Issuable).toBeDefined();
+    });
+
+    describe('filtering', () => {
+      let $filtersForm;
+
+      beforeEach(() => {
+        $filtersForm = $('.js-filter-form');
+        fixture.load('issuable_filter');
+        resetForm($filtersForm);
+      });
+
+      it('should contain only the default parameters', () => {
+        spyOn(Turbolinks, 'visit');
+
+        Issuable.filterResults($filtersForm);
+
+        expect(Turbolinks.visit).toHaveBeenCalledWith(BASE_URL + DEFAULT_PARAMS);
+      });
+
+      it('should filter for the phrase "broken"', () => {
+        spyOn(Turbolinks, 'visit');
+
+        updateForm({ search: 'broken' }, $filtersForm);
+        Issuable.filterResults($filtersForm);
+        const params = `${DEFAULT_PARAMS}&search=broken`;
+
+        expect(Turbolinks.visit).toHaveBeenCalledWith(BASE_URL + params);
+      });
+
+      it('should keep query parameters after modifying filter', () => {
+        spyOn(Turbolinks, 'visit');
+
+        // initial filter
+        updateForm({ milestone_title: 'v1.0' }, $filtersForm);
+
+        Issuable.filterResults($filtersForm);
+        let params = `${DEFAULT_PARAMS}&milestone_title=v1.0`;
+        expect(Turbolinks.visit).toHaveBeenCalledWith(BASE_URL + params);
+
+        // update filter
+        updateForm({ label_name: 'Frontend' }, $filtersForm);
+
+        Issuable.filterResults($filtersForm);
+        params = `${DEFAULT_PARAMS}&milestone_title=v1.0&label_name=Frontend`;
+        expect(Turbolinks.visit).toHaveBeenCalledWith(BASE_URL + params);
+      });
+    });
+  });
+})();