1 files changed, 32 insertions, 38 deletions
diff --git a/spec/features/groups/members/sort_members_spec.rb b/spec/features/groups/members/sort_members_spec.rb
index d940550b18a..f03cc36df18 100644
--- a/spec/features/groups/members/sort_members_spec.rb
+++ b/spec/features/groups/members/sort_members_spec.rb
@@ -2,14 +2,16 @@
 
 require 'spec_helper'
 
-RSpec.describe 'Groups > Members > Sort members' do
+RSpec.describe 'Groups > Members > Sort members', :js do
+  include Spec::Support::Helpers::Features::MembersHelpers
+
   let(:owner)     { create(:user, name: 'John Doe') }
   let(:developer) { create(:user, name: 'Mary Jane', last_sign_in_at: 5.days.ago) }
   let(:group)     { create(:group) }
 
-  before do
-    stub_feature_flags(vue_group_members_list: false)
+  dropdown_toggle_selector = '[data-testid="user-sort-dropdown"] [data-testid="dropdown-toggle"]'
 
+  before do
     create(:group_member, :owner, user: owner, group: group, created_at: 5.days.ago)
     create(:group_member, :developer, user: developer, group: group, created_at: 3.days.ago)
 
@@ -19,84 +21,76 @@ RSpec.describe 'Groups > Members > Sort members' do
   it 'sorts alphabetically by default' do
     visit_members_list(sort: nil)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Name, ascending')
   end
 
   it 'sorts by access level ascending' do
     visit_members_list(sort: :access_level_asc)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, ascending')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Access level, ascending')
   end
 
   it 'sorts by access level descending' do
     visit_members_list(sort: :access_level_desc)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Access level, descending')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Access level, descending')
   end
 
   it 'sorts by last joined' do
     visit_members_list(sort: :last_joined)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Last joined')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Last joined')
   end
 
   it 'sorts by oldest joined' do
     visit_members_list(sort: :oldest_joined)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest joined')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Oldest joined')
   end
 
   it 'sorts by name ascending' do
     visit_members_list(sort: :name_asc)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, ascending')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Name, ascending')
   end
 
   it 'sorts by name descending' do
     visit_members_list(sort: :name_desc)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Name, descending')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Name, descending')
   end
 
   it 'sorts by recent sign in', :clean_gitlab_redis_shared_state do
     visit_members_list(sort: :recent_sign_in)
 
-    expect(first_member).to include(owner.name)
-    expect(second_member).to include(developer.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Recent sign in')
+    expect(first_row.text).to include(owner.name)
+    expect(second_row.text).to include(developer.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Recent sign in')
   end
 
   it 'sorts by oldest sign in', :clean_gitlab_redis_shared_state do
     visit_members_list(sort: :oldest_sign_in)
 
-    expect(first_member).to include(developer.name)
-    expect(second_member).to include(owner.name)
-    expect(page).to have_css('.qa-user-sort-dropdown .dropdown-toggle-text', text: 'Oldest sign in')
+    expect(first_row.text).to include(developer.name)
+    expect(second_row.text).to include(owner.name)
+    expect(page).to have_css(dropdown_toggle_selector, text: 'Oldest sign in')
   end
 
   def visit_members_list(sort:)
     visit group_group_members_path(group.to_param, sort: sort)
   end
-
-  def first_member
-    page.all('ul.content-list > li').first.text
-  end
-
-  def second_member
-    page.all('ul.content-list > li').last.text
-  end
 end