1 files changed, 55 insertions, 73 deletions

diff --git a/spec/features/issues/filtered_search/visual_tokens_spec.rb b/spec/features/issues/filtered_search/visual_tokens_spec.rb
index 2d8587d886f..9fb6a4cc2af 100644
--- a/spec/features/issues/filtered_search/visual_tokens_spec.rb
+++ b/spec/features/issues/filtered_search/visual_tokens_spec.rb
@@ -14,178 +14,160 @@ RSpec.describe 'Visual tokens', :js do
   let_it_be(:cc_label) { create(:label, project: project, title: 'Community Contribution') }
   let_it_be(:issue) { create(:issue, project: project) }
 
-  let(:filtered_search) { find('.filtered-search') }
-  let(:filter_author_dropdown) { find("#js-dropdown-author .filter-dropdown") }
-
-  def is_input_focused
-    page.evaluate_script("document.activeElement.classList.contains('filtered-search')")
-  end
-
   before do
+    stub_feature_flags(vue_issues_list: true)
     project.add_user(user, :maintainer)
     project.add_user(user_rock, :maintainer)
     sign_in(user)
 
-    set_cookie('sidebar_collapsed', 'true')
-
     visit project_issues_path(project)
   end
 
   describe 'editing a single token' do
     before do
-      input_filtered_search('author:=@root assignee:=none', submit: false)
-      first('.tokens-container .filtered-search-token').click
-      wait_for_requests
+      select_tokens 'Author', '=', user.username, 'Assignee', '=', 'None'
+      click_token_segment(user.name)
     end
 
     it 'opens author dropdown' do
-      expect(page).to have_css('#js-dropdown-author', visible: true)
-      expect_filtered_search_input('@root')
+      expect_visible_suggestions_list
+      expect(page).to have_field('Search', with: 'root')
     end
 
     it 'filters value' do
-      filtered_search.send_keys(:backspace)
+      send_keys :backspace
 
-      expect(page).to have_css('#js-dropdown-author .filter-dropdown .filter-dropdown-item', count: 1)
+      expect_suggestion_count 1
     end
 
     it 'ends editing mode when document is clicked' do
       find('.js-navbar').click
 
-      expect_filtered_search_input_empty
-      expect(page).to have_css('#js-dropdown-author', visible: false)
+      expect_empty_search_term
+      expect_hidden_suggestions_list
     end
 
     describe 'selecting different author from dropdown' do
       before do
-        filter_author_dropdown.find('.filter-dropdown-item .dropdown-light-content', text: "@#{user_rock.username}").click
+        send_keys :backspace, :backspace, :backspace, :backspace
+        click_on user_rock.name
       end
 
       it 'changes value in visual token' do
-        wait_for_requests
-        expect(first('.tokens-container .filtered-search-token .value').text).to eq("#{user_rock.name}")
-      end
-
-      it 'moves input to the right' do
-        expect(is_input_focused).to eq(true)
+        expect_author_token(user_rock.name)
       end
     end
   end
 
   describe 'editing multiple tokens' do
     before do
-      input_filtered_search('author:=@root assignee:=none', submit: false)
-      first('.tokens-container .filtered-search-token').click
+      select_tokens 'Author', '=', user.username, 'Assignee', '=', 'None'
+      click_token_segment(user.name)
     end
 
     it 'opens author dropdown' do
-      expect(page).to have_css('#js-dropdown-author', visible: true)
+      expect_visible_suggestions_list
     end
 
     it 'opens assignee dropdown' do
-      find('.tokens-container .filtered-search-token', text: 'Assignee').click
-      expect(page).to have_css('#js-dropdown-assignee', visible: true)
+      click_token_segment 'Assignee'
+
+      expect_visible_suggestions_list
     end
   end
 
   describe 'editing a search term while editing another filter token' do
     before do
-      input_filtered_search('foo assignee:=', submit: false)
-      first('.tokens-container .filtered-search-term').click
+      click_filtered_search_bar
+      send_keys 'foo '
+      select_tokens 'Assignee', '='
+      click_token_segment 'foo'
+      send_keys ' '
     end
 
     it 'opens author dropdown' do
-      find('#js-dropdown-hint .filter-dropdown .filter-dropdown-item', text: 'Author').click
+      click_on 'Author'
 
-      expect(page).to have_css('#js-dropdown-operator', visible: true)
-      expect(page).to have_css('#js-dropdown-author', visible: false)
+      expect_suggestion '='
+      expect_suggestion '!='
 
-      find('#js-dropdown-operator .filter-dropdown .filter-dropdown-item[data-value="="]').click
+      click_on '= is'
 
-      expect(page).to have_css('#js-dropdown-operator', visible: false)
-      expect(page).to have_css('#js-dropdown-author', visible: true)
+      expect_suggestion(user.name)
+      expect_suggestion(user_rock.name)
     end
   end
 
   describe 'add new token after editing existing token' do
     before do
-      input_filtered_search('author:=@root assignee:=none', submit: false)
-      first('.tokens-container .filtered-search-token').click
-      filtered_search.send_keys(' ')
+      select_tokens 'Assignee', '=', user.username, 'Label', '=', 'None'
+      click_token_segment(user.name)
+      send_keys ' '
     end
 
     describe 'opens dropdowns' do
       it 'opens hint dropdown' do
-        expect(page).to have_css('#js-dropdown-hint', visible: true)
+        expect_visible_suggestions_list
       end
 
       it 'opens token dropdown' do
-        filtered_search.send_keys('author:=')
+        click_on 'Author'
 
-        expect(page).to have_css('#js-dropdown-author', visible: true)
+        expect_visible_suggestions_list
       end
     end
 
     describe 'visual tokens' do
       it 'creates visual token' do
-        filtered_search.send_keys('author:=@thomas ')
-        token = page.all('.tokens-container .filtered-search-token')[1]
+        click_on 'Author'
+        click_on '= is'
+        click_on 'The Rock'
 
-        expect(token.find('.name').text).to eq('Author')
-        expect(token.find('.value').text).to eq('@thomas')
+        expect_author_token 'The Rock'
       end
     end
 
     it 'does not tokenize incomplete token' do
-      filtered_search.send_keys('author:=')
-
+      click_on 'Author'
       find('.js-navbar').click
-      token = page.all('.tokens-container .js-visual-token')[1]
 
-      expect_filtered_search_input_empty
-      expect(token.find('.name').text).to eq('Author')
+      expect_empty_search_term
+      expect_token_segment 'Assignee'
     end
   end
 
   describe 'search using incomplete visual tokens' do
     before do
-      input_filtered_search('author:=@root assignee:=none', extra_space: false)
+      select_tokens 'Author', '=', user.username, 'Assignee', '=', 'None'
     end
 
     it 'tokenizes the search term to complete visual token' do
-      expect_tokens([
-        author_token(user.name),
-        assignee_token('None')
-      ])
+      expect_author_token(user.name)
+      expect_assignee_token 'None'
     end
   end
 
   it 'does retain hint token when mix of typing and clicks are performed' do
-    input_filtered_search('label:', extra_space: false, submit: false)
-
-    expect(page).to have_css('#js-dropdown-operator', visible: true)
-
-    find('#js-dropdown-operator li[data-value="="]').click
-
-    token = page.all('.tokens-container .js-visual-token')[0]
+    select_tokens 'Label'
+    click_on '= is'
 
-    expect(token.find('.name').text).to eq('Label')
-    expect(token.find('.operator').text).to eq('=')
+    expect_token_segment 'Label'
+    expect_token_segment '='
   end
 
   describe 'Any/None option' do
     it 'hidden when NOT operator is selected' do
-      input_filtered_search('milestone:!=', extra_space: false, submit: false)
+      select_tokens 'Milestone', '!='
 
-      expect(page).not_to have_selector("#js-dropdown-milestone", text: 'Any')
-      expect(page).not_to have_selector("#js-dropdown-milestone", text: 'None')
+      expect_no_suggestion 'Any'
+      expect_no_suggestion 'None'
     end
 
     it 'shown when EQUAL operator is selected' do
-      input_filtered_search('milestone:=', extra_space: false, submit: false)
+      select_tokens 'Milestone', '='
 
-      expect(page).to have_selector("#js-dropdown-milestone", text: 'Any')
-      expect(page).to have_selector("#js-dropdown-milestone", text: 'None')
+      expect_suggestion 'Any'
+      expect_suggestion 'None'
     end
   end
 end