Add specs for remaining dropdowns

spec/features/issues/filtered_search/dropdown_assignee_spec.rb

+require 'rails_helper'
+
+describe 'Dropdown assignee', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user, name: 'administrator', username: 'root') }
+  let!(:user_john) { create(:user, name: 'John', username: 'th0mas') }
+  let!(:user_jacob) { create(:user, name: 'Jacob', username: 'otter32') }
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_assignee) { '#js-dropdown-assignee' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 3
+      wait_for_ajax
+    end
+  end
+
+  def dropdown_assignee_size
+    page.all('#js-dropdown-assignee .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_assignee(text)
+    find('#js-dropdown-assignee .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    project.team << [user_john, :master]
+    project.team << [user_jacob, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has assignee:' do
+      filtered_search.set('assignee:')
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('assignee:')
+      expect(page).to have_css('#js-dropdown-assignee .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('assignee:')
+      expect(page).not_to have_css('#js-dropdown-assignee .filter-dropdown-loading')
+    end
+
+    it 'should load all the assignees when opened' do
+      send_keys_to_filtered_search('assignee:')
+      expect(dropdown_assignee_size).to eq(3)
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      filtered_search.set('assignee:')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search('j')
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search('J')
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by username with symbol' do
+      send_keys_to_filtered_search('@ot')
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by case insensitive username with symbol' do
+      send_keys_to_filtered_search('@OT')
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by username without symbol' do
+      send_keys_to_filtered_search('ot')
+      expect(dropdown_assignee_size).to eq(2)
+    end
+
+    it 'filters by case insensitive username without symbol' do
+      send_keys_to_filtered_search('OT')
+      expect(dropdown_assignee_size).to eq(2)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('assignee:')
+    end
+
+    it 'fills in the assignee username when the assignee has not been filtered' do
+      click_assignee(user_jacob.name)
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+      expect(filtered_search.value).to eq("assignee:@#{user_jacob.username}")
+    end
+
+    it 'fills in the assignee username when the assignee has been filtered' do
+      send_keys_to_filtered_search('roo')
+      click_assignee(user.name)
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+      expect(filtered_search.value).to eq("assignee:@#{user.username}")
+    end
+
+    it 'selects `no assignee`' do
+      click_assignee('No Assignee')
+      expect(page).to have_css(js_dropdown_assignee, visible: false)
+      expect(filtered_search.value).to eq("assignee:none")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens assignee dropdown with existing search term' do
+      filtered_search.set('searchTerm assignee:')
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'opens assignee dropdown with existing author' do
+      filtered_search.set('author:@user assignee:')
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'opens assignee dropdown with existing label' do
+      filtered_search.set('label:~bug assignee:')
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+
+    it 'opens assignee dropdown with existing milestone' do
+      filtered_search.set('milestone:%v1.0 assignee:')
+      expect(page).to have_css(js_dropdown_assignee, visible: true)
+    end
+  end
+end

spec/features/issues/filtered_search/dropdown_author_spec.rb

+require 'rails_helper'
+
+describe 'Dropdown author', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user, name: 'administrator', username: 'root') }
+  let!(:user_john) { create(:user, name: 'John', username: 'th0mas') }
+  let!(:user_jacob) { create(:user, name: 'Jacob', username: 'otter32') }
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_author) { '#js-dropdown-author' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 3
+      wait_for_ajax
+    end
+  end
+
+  def dropdown_author_size
+    page.all('#js-dropdown-author .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_author(text)
+    find('#js-dropdown-author .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    project.team << [user_john, :master]
+    project.team << [user_jacob, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has author:' do
+      filtered_search.set('author:')
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+      expect(page).to have_css(js_dropdown_author, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('author:')
+      expect(page).to have_css('#js-dropdown-author .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('author:')
+      expect(page).not_to have_css('#js-dropdown-author .filter-dropdown-loading')
+    end
+
+    it 'should load all the authors when opened' do
+      send_keys_to_filtered_search('author:')
+      expect(dropdown_author_size).to eq(3)
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      filtered_search.set('author:')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search('j')
+      expect(dropdown_author_size).to eq(2)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search('J')
+      expect(dropdown_author_size).to eq(2)
+    end
+
+    it 'filters by username with symbol' do
+      send_keys_to_filtered_search('@ot')
+      expect(dropdown_author_size).to eq(2)
+    end
+
+    it 'filters by case insensitive username with symbol' do
+      send_keys_to_filtered_search('@OT')
+      expect(dropdown_author_size).to eq(2)
+    end
+
+    it 'filters by username without symbol' do
+      send_keys_to_filtered_search('ot')
+      expect(dropdown_author_size).to eq(2)
+    end
+
+    it 'filters by case insensitive username without symbol' do
+      send_keys_to_filtered_search('OT')
+      expect(dropdown_author_size).to eq(2)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('author:')
+    end
+
+    it 'fills in the author username when the author has not been filtered' do
+      click_author(user_jacob.name)
+      expect(page).to have_css(js_dropdown_author, visible: false)
+      expect(filtered_search.value).to eq("author:@#{user_jacob.username}")
+    end
+
+    it 'fills in the author username when the author has been filtered' do
+      click_author(user.name)
+      expect(page).to have_css(js_dropdown_author, visible: false)
+      expect(filtered_search.value).to eq("author:@#{user.username}")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens author dropdown with existing search term' do
+      filtered_search.set('searchTerm author:')
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'opens author dropdown with existing assignee' do
+      filtered_search.set('assignee:@user author:')
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'opens author dropdown with existing label' do
+      filtered_search.set('label:~bug author:')
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+
+    it 'opens author dropdown with existing milestone' do
+      filtered_search.set('milestone:%v1.0 author:')
+      expect(page).to have_css(js_dropdown_author, visible: true)
+    end
+  end
+end

spec/features/issues/filtered_search/dropdown_hint_spec.rb

@@ -6,6 +6,15 @@ describe 'Dropdown hint', js: true, feature: true do
   let!(:project) { create(:empty_project) }
   let!(:user) { create(:user) }
   let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_hint) { '#js-dropdown-hint' }
+
+  def dropdown_hint_size
+    page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_hint(text)
+    find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: text).click
+  end
 
   before do
     project.team << [user, :master]
@@ -17,30 +26,30 @@ describe 'Dropdown hint', js: true, feature: true do
 
   describe 'behavior' do
     before do
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
-      filtered_search.click();
+      expect(page).to have_css(js_dropdown_hint, visible: false)
+      filtered_search.click()
     end
 
     it 'opens when the search bar is first focused' do
-      expect(page).to have_css('#js-dropdown-hint', visible: true)
+      expect(page).to have_css(js_dropdown_hint, visible: true)
     end
 
     it 'closes when the search bar is unfocused' do
-      find('body').click();
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      find('body').click()
+      expect(page).to have_css(js_dropdown_hint, visible: false)
     end
   end
 
   describe 'filtering' do
     it 'does not filter `Keep typing and press Enter`' do
       filtered_search.set('randomtext')
-      expect(page).to have_css('#js-dropdown-hint', text: 'Keep typing and press Enter', visible: false)
-      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(0)
+      expect(page).to have_css(js_dropdown_hint, text: 'Keep typing and press Enter', visible: false)
+      expect(dropdown_hint_size).to eq(0)
     end
 
     it 'filters with text' do
       filtered_search.set('a')
-      expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(3)
+      expect(dropdown_hint_size).to eq(3)
     end
   end
 
@@ -50,29 +59,29 @@ describe 'Dropdown hint', js: true, feature: true do
     end
 
     it 'opens the author dropdown when you click on author' do
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'author').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('author')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-author', visible: true)
       expect(filtered_search.value).to eq('author:')
     end
 
     it 'opens the assignee dropdown when you click on assignee' do
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'assignee').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('assignee')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-assignee', visible: true)
       expect(filtered_search.value).to eq('assignee:')
     end
 
     it 'opens the milestone dropdown when you click on milestone' do
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'milestone').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('milestone')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-milestone', visible: true)
       expect(filtered_search.value).to eq('milestone:')
     end
 
     it 'opens the label dropdown when you click on label' do
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'label').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('label')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-label', visible: true)
       expect(filtered_search.value).to eq('label:')
     end
@@ -81,32 +90,32 @@ describe 'Dropdown hint', js: true, feature: true do
   describe 'selecting from dropdown with some input' do
     it 'opens the author dropdown when you click on author' do
       filtered_search.set('auth')
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'author').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('author')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-author', visible: true)
       expect(filtered_search.value).to eq('author:')
     end
 
     it 'opens the assignee dropdown when you click on assignee' do
       filtered_search.set('assign')
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'assignee').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('assignee')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-assignee', visible: true)
       expect(filtered_search.value).to eq('assignee:')
     end
 
     it 'opens the milestone dropdown when you click on milestone' do
       filtered_search.set('mile')
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'milestone').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('milestone')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-milestone', visible: true)
       expect(filtered_search.value).to eq('milestone:')
     end
 
     it 'opens the label dropdown when you click on label' do
       filtered_search.set('lab')
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'label').click
-      expect(page).to have_css('#js-dropdown-hint', visible: false)
+      click_hint('label')
+      expect(page).to have_css(js_dropdown_hint, visible: false)
       expect(page).to have_css('#js-dropdown-label', visible: true)
       expect(filtered_search.value).to eq('label:')
     end

spec/features/issues/filtered_search/dropdown_label_spec.rb

+require 'rails_helper'
+
+describe 'Dropdown label', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user) }
+  let!(:bug_label) { create(:label, project: project, title: 'bug') }
+  let!(:uppercase_label) { create(:label, project: project, title: 'BUG') }
+  let!(:two_words_label) { create(:label, project: project, title: 'High Priority') }
+  let!(:wont_fix_label) { create(:label, project: project, title: 'Won"t Fix') }
+  let!(:special_label) { create(:label, project: project, title: '!@#$%^+&*()')}
+  let!(:long_label) { create(:label, project: project, title: 'this is a very long title this is a very long title this is a very long title this is a very long title this is a very long title')}
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_label) { '#js-dropdown-label' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 3
+      wait_for_ajax
+      sleep 3
+    end
+  end
+
+  def dropdown_label_size
+    page.all('#js-dropdown-label .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_label(text)
+    find('#js-dropdown-label .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has label:' do
+      filtered_search.set('label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+      expect(page).to have_css(js_dropdown_label, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('label:')
+      expect(page).to have_css('#js-dropdown-label .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('label:')
+      expect(page).not_to have_css('#js-dropdown-label .filter-dropdown-loading')
+    end
+
+    it 'should load all the labels when opened' do
+      send_keys_to_filtered_search('label:')
+      expect(dropdown_label_size).to be > 0
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      filtered_search.set('label:')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search('b')
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search('B')
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by name with symbol' do
+      send_keys_to_filtered_search('~bu')
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by case insensitive name with symbol' do
+      send_keys_to_filtered_search('~BU')
+      expect(dropdown_label_size).to eq(2)
+    end
+
+    it 'filters by multiple names using double quotes' do
+      send_keys_to_filtered_search('"High P')
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple names using single quotes' do
+      send_keys_to_filtered_search('\'High P')
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple names using single and double quotes' do
+      send_keys_to_filtered_search('~"won`\'t f')
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple names using double quotes with symbol' do
+      send_keys_to_filtered_search('~"High P')
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by multiple names using single quotes with symbol' do
+      send_keys_to_filtered_search('~\'High P')
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by special characters' do
+      send_keys_to_filtered_search('^+')
+      expect(dropdown_label_size).to eq(1)
+    end
+
+    it 'filters by special characters with symbol' do
+      send_keys_to_filtered_search('~^+')
+      expect(dropdown_label_size).to eq(1)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('label:')
+    end
+
+    it 'fills in the label name when the label has not been filled' do
+      click_label(bug_label.title)
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{bug_label.title}")
+    end
+
+    it 'fills in the label name when the label is partially filled' do
+      send_keys_to_filtered_search('bu')
+      click_label(bug_label.title)
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{bug_label.title}")
+    end
+
+    it 'fills in the label name that contains multiple words' do
+      click_label(two_words_label.title)
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~\"#{two_words_label.title}\"")
+    end
+
+    it 'fills in the label name that contains multiple words and is very long' do
+      click_label(long_label.title)
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~\"#{long_label.title}\"")
+    end
+
+    it 'fills in the label name that contains double quotes' do
+      click_label(wont_fix_label.title)
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~'#{wont_fix_label.title}'")
+    end
+
+    it 'fills in the label name with the correct capitalization' do
+      click_label(uppercase_label.title)
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{uppercase_label.title}")
+    end
+
+    it 'fills in the label name with special characters' do
+      click_label(special_label.title)
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:~#{special_label.title}")
+    end
+
+    it 'selects `no label`' do
+      click_label('No Label')
+      expect(page).to have_css(js_dropdown_label, visible: false)
+      expect(filtered_search.value).to eq("label:none")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens label dropdown with existing search term' do
+      filtered_search.set('searchTerm label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing author' do
+      filtered_search.set('author:@person label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing assignee' do
+      filtered_search.set('assignee:@person label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing label' do
+      filtered_search.set('label:~urgent label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+
+    it 'opens label dropdown with existing milestone' do
+      filtered_search.set('milestone:%v2.0 label:')
+      expect(page).to have_css(js_dropdown_label, visible: true)
+    end
+  end
+end

spec/features/issues/filtered_search/dropdown_milestone_spec.rb

+require 'rails_helper'
+
+describe 'Dropdown milestone', js: true, feature: true do
+  include WaitForAjax
+
+  let!(:project) { create(:empty_project) }
+  let!(:user) { create(:user) }
+  let!(:milestone) { create(:milestone, title: 'v1.0', project: project) }
+  let!(:uppercase_milestone) { create(:milestone, title: 'CAP_MILESTONE', project: project) }
+  let!(:two_words_milestone) { create(:milestone, title: 'Future Plan', project: project) }
+  let!(:wont_fix_milestone) { create(:milestone, title: 'Won"t Fix', project: project) }
+  let!(:special_milestone) { create(:milestone, title: '!@#$%^&*(+)', project: project) }
+  let!(:long_milestone) { create(:milestone, title: 'this is a very long title this is a very long title this is a very long title this is a very long title this is a very long title', project: project) }
+
+  let(:filtered_search) { find('.filtered-search') }
+  let(:js_dropdown_milestone) { '#js-dropdown-milestone' }
+
+  def send_keys_to_filtered_search(input)
+    input.split("").each do |i|
+      filtered_search.send_keys(i)
+      sleep 3
+      wait_for_ajax
+      sleep 3
+    end
+  end
+
+  def dropdown_milestone_size
+    page.all('#js-dropdown-milestone .filter-dropdown .filter-dropdown-item').size
+  end
+
+  def click_milestone(text)
+    find('#js-dropdown-milestone .filter-dropdown .filter-dropdown-item', text: text).click
+  end
+
+  def click_static_milestone(text)
+    find('#js-dropdown-milestone .filter-dropdown-item', text: text).click
+  end
+
+  before do
+    project.team << [user, :master]
+    login_as(user)
+    create(:issue, project: project)
+
+    visit namespace_project_issues_path(project.namespace, project)
+  end
+
+  describe 'behavior' do
+    it 'opens when the search bar has milestone:' do
+      filtered_search.set('milestone:')
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'closes when the search bar is unfocused' do
+      find('body').click()
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+    end
+
+    it 'should show loading indicator when opened' do
+      filtered_search.set('milestone:')
+      expect(page).to have_css('#js-dropdown-milestone .filter-dropdown-loading', visible: true)
+    end
+
+    it 'should hide loading indicator when loaded' do
+      send_keys_to_filtered_search('milestone:')
+      expect(page).not_to have_css('#js-dropdown-milestone .filter-dropdown-loading')
+    end
+
+    it 'should load all the milestones when opened' do
+      send_keys_to_filtered_search('milestone:')
+      expect(dropdown_milestone_size).to be > 0
+    end
+  end
+
+  describe 'filtering' do
+    before do
+      filtered_search.set('milestone:')
+    end
+
+    it 'filters by name' do
+      send_keys_to_filtered_search('v1')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by case insensitive name' do
+      send_keys_to_filtered_search('V1')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by name with symbol' do
+      send_keys_to_filtered_search('%v1')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by case insensitive name with symbol' do
+      send_keys_to_filtered_search('%V1')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by multiple names using double quotes' do
+      send_keys_to_filtered_search('"future')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by multiple names using single quotes' do
+      send_keys_to_filtered_search('\'future p')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by multiple names using single and double quotes' do
+      send_keys_to_filtered_search('%"won`\'t f')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by multiple names using double quotes with symbol' do
+      send_keys_to_filtered_search('%"future p')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by multiple names using single quotes with symbol' do
+      send_keys_to_filtered_search('%\'future p')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by special characters' do
+      send_keys_to_filtered_search('^+')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+
+    it 'filters by special characters with symbol' do
+      send_keys_to_filtered_search('~^+')
+      expect(dropdown_milestone_size).to eq(1)
+    end
+  end
+
+  describe 'selecting from dropdown' do
+    before do
+      filtered_search.set('milestone:')
+    end
+
+    it 'fills in the milestone name when the milestone has not been filled' do
+      click_milestone(milestone.title)
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{milestone.title}")
+    end
+
+    it 'fills in the milestone name when the milestone is partially filled' do
+      send_keys_to_filtered_search('v')
+      click_milestone(milestone.title)
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{milestone.title}")
+    end
+
+    it 'fills in the milestone name that contains multiple words' do
+      click_milestone(two_words_milestone.title)
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%\"#{two_words_milestone.title}\"")
+    end
+
+    it 'fills in the milestone name that contains multiple words and is very long' do
+      click_milestone(long_milestone.title)
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%\"#{long_milestone.title}\"")
+    end
+
+    it 'fills in the milestone name that contains double quotes' do
+      click_milestone(wont_fix_milestone.title)
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%'#{wont_fix_milestone.title}'")
+    end
+
+    it 'fills in the milestone name with the correct capitalization' do
+      click_milestone(uppercase_milestone.title)
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{uppercase_milestone.title}")
+    end
+
+    it 'fills in the milestone name with special characters' do
+      click_milestone(special_milestone.title)
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:%#{special_milestone.title}")
+    end
+
+    it 'selects `no milestone`' do
+      click_static_milestone('No Milestone')
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:none")
+    end
+
+    it 'selects `upcoming milestone`' do
+      click_static_milestone('Upcoming')
+      expect(page).to have_css(js_dropdown_milestone, visible: false)
+      expect(filtered_search.value).to eq("milestone:upcoming")
+    end
+  end
+
+  describe 'input has existing content' do
+    it 'opens milestone dropdown with existing search term' do
+      filtered_search.set('searchTerm milestone:')
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing author' do
+      filtered_search.set('author:@john milestone:')
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing assignee' do
+      filtered_search.set('assignee:@john milestone:')
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing label' do
+      filtered_search.set('label:~important milestone:')
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+
+    it 'opens milestone dropdown with existing milestone' do
+      filtered_search.set('milestone:%100 milestone:')
+      expect(page).to have_css(js_dropdown_milestone, visible: true)
+    end
+  end
+end

spec/features/issues/filtered_search/filter_issues_spec.rb

 require 'rails_helper'
 
-describe 'Filter issues', feature: true do
+describe 'Filter issues', js: true, feature: true do
   include WaitForAjax
 
   let!(:group) { create(:group) }
@@ -98,7 +98,7 @@ describe 'Filter issues', feature: true do
   end
 
   describe 'filter issues by author' do
-    context 'only author', js: true do
+    context 'only author' do
       it 'filters issues by searched author' do
         input_filtered_search("author:@#{user.username}")
         expect_issues_list_count(5)
@@ -113,7 +113,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'author with other filters', js: true do
+    context 'author with other filters' do
       it 'filters issues by searched author and text' do
         search = "author:@#{user.username} issue"
         input_filtered_search(search)
@@ -143,13 +143,13 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'sorting', js: true do
+    context 'sorting' do
       # TODO
     end
   end
 
   describe 'filter issues by assignee' do
-    context 'only assignee', js: true do
+    context 'only assignee' do
       it 'filters issues by searched assignee' do
         search = "assignee:@#{user.username}"
         input_filtered_search(search)
@@ -173,7 +173,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'assignee with other filters', js: true do
+    context 'assignee with other filters' do
       it 'filters issues by searched assignee and text' do
         search = "assignee:@#{user.username} searchTerm"
         input_filtered_search(search)
@@ -203,13 +203,13 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'sorting', js: true do
+    context 'sorting' do
       # TODO
     end
   end
 
   describe 'filter issues by label' do
-    context 'only label', js: true do
+    context 'only label' do
       it 'filters issues by searched label' do
         search = "label:~#{bug_label.title}"
         input_filtered_search(search)
@@ -256,7 +256,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'label with multiple words', js: true do
+    context 'label with multiple words' do
       it 'special characters' do
         special_multiple_label = create(:label, project: project, title: "Utmost |mp0rt@nce")
         special_multiple_issue = create(:issue, title: "Issue with special character multiple words label", project: project)
@@ -308,7 +308,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'label with other filters', js: true do
+    context 'label with other filters' do
       it 'filters issues by searched label and text' do
         search = "label:~#{caps_sensitive_label.title} bug"
         input_filtered_search(search)
@@ -338,7 +338,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'multiple labels with other filters', js: true do
+    context 'multiple labels with other filters' do
       it 'filters issues by searched label, label2, and text' do
         search = "label:~#{bug_label.title} label:~#{caps_sensitive_label.title} bug"
         input_filtered_search(search)
@@ -368,7 +368,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'issue label clicked', js: true do
+    context 'issue label clicked' do
       before do
         find('.issues-list .issue .issue-info a .label', text: multiple_words_label.title).click
         sleep 1
@@ -383,13 +383,13 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'sorting', js: true do
+    context 'sorting' do
       # TODO
     end
   end
 
   describe 'filter issues by milestone' do
-    context 'only milestone', js: true do
+    context 'only milestone' do
       it 'filters issues by searched milestone' do
         input_filtered_search("milestone:%#{milestone.title}")
         expect_issues_list_count(5)
@@ -433,7 +433,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'milestone with other filters', js: true do
+    context 'milestone with other filters' do
       it 'filters issues by searched milestone and text' do
         search = "milestone:%#{milestone.title} bug"
         input_filtered_search(search)
@@ -463,13 +463,13 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'sorting', js: true do
+    context 'sorting' do
       # TODO
     end
   end
 
   describe 'filter issues by text' do
-    context 'only text', js: true do
+    context 'only text' do
       it 'filters issues by searched text' do
         search = 'Bug'
         input_filtered_search(search)
@@ -520,7 +520,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'searched text with other filters', js: true do
+    context 'searched text with other filters' do
       it 'filters issues by searched text and author' do
         input_filtered_search("bug author:@#{user.username}")
         expect_issues_list_count(2)
@@ -588,7 +588,7 @@ describe 'Filter issues', feature: true do
       end
     end
 
-    context 'sorting', js: true do
+    context 'sorting' do
       it 'sorts by oldest updated' do
         create(:issue,
           title: '3 days ago',
@@ -618,7 +618,7 @@ describe 'Filter issues', feature: true do
     end
   end
 
-  describe 'retains filter when switching issue states', js: true do
+  describe 'retains filter when switching issue states' do
     before do
       input_filtered_search('bug')
 

spec/features/issues/filtered_search/search_bar_spec.rb

@@ -15,9 +15,9 @@ describe 'Search bar', js: true, feature: true do
     visit namespace_project_issues_path(project.namespace, project)
   end
 
-  def getLeftStyle(style)
-    leftStyle = /left:\s\d*[.]\d*px/.match(style)
-    leftStyle.to_s.gsub('left: ', '').to_f;
+  def get_left_style(style)
+    left_style = /left:\s\d*[.]\d*px/.match(style)
+    left_style.to_s.gsub('left: ', '').to_f
   end
 
   describe 'clear search button' do
@@ -53,7 +53,7 @@ describe 'Search bar', js: true, feature: true do
     end
 
     it 'resets the dropdown hint filter' do
-      filtered_search.click();
+      filtered_search.click()
       original_size = page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size
 
       filtered_search.set('author')
@@ -66,8 +66,8 @@ describe 'Search bar', js: true, feature: true do
 
     it 'resets the dropdown filters' do
       filtered_search.set('a')
-      hintStyle = page.find('#js-dropdown-hint')['style']
-      hintOffset = getLeftStyle(hintStyle)
+      hint_style = page.find('#js-dropdown-hint')['style']
+      hint_offset = get_left_style(hint_style)
 
       filtered_search.set('author:')
       expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to eq(0)
@@ -75,7 +75,7 @@ describe 'Search bar', js: true, feature: true do
       find('.filtered-search-input-container .clear-search').click
       filtered_search.click()
       expect(page.all('#js-dropdown-hint .filter-dropdown .filter-dropdown-item').size).to be > 0
-      expect(getLeftStyle(page.find('#js-dropdown-hint')['style'])).to eq (hintOffset)
+      expect(get_left_style(page.find('#js-dropdown-hint')['style'])).to eq hint_offset
     end
   end
 end