Add missing QA selectors

Add missing QA selectors to new Vue group members view

app/assets/javascripts/groups/members/index.js

@@ -5,7 +5,7 @@ import { parseDataAttributes } from 'ee_else_ce/groups/members/utils';
 import App from './components/app.vue';
 import membersModule from '~/vuex_shared/modules/members';
 
-export const initGroupMembersApp = (el, tableFields, requestFormatter) => {
+export const initGroupMembersApp = (el, tableFields, tableAttrs, requestFormatter) => {
   if (!el) {
     return () => {};
   }
@@ -18,6 +18,7 @@ export const initGroupMembersApp = (el, tableFields, requestFormatter) => {
       ...parseDataAttributes(el),
       currentUserId: gon.current_user_id || null,
       tableFields,
+      tableAttrs,
       requestFormatter,
     }),
   });

app/assets/javascripts/pages/groups/group_members/index.js

@@ -25,21 +25,25 @@ const SHARED_FIELDS = ['account', 'expires', 'maxRole', 'expiration', 'actions']
 initGroupMembersApp(
   document.querySelector('.js-group-members-list'),
   SHARED_FIELDS.concat(['source', 'granted']),
+  { tr: { 'data-qa-selector': 'member_row' } },
   memberRequestFormatter,
 );
 initGroupMembersApp(
   document.querySelector('.js-group-linked-list'),
   SHARED_FIELDS.concat('granted'),
+  { table: { 'data-qa-selector': 'groups_list' }, tr: { 'data-qa-selector': 'group_row' } },
   groupLinkRequestFormatter,
 );
 initGroupMembersApp(
   document.querySelector('.js-group-invited-members-list'),
   SHARED_FIELDS.concat('invited'),
+  {},
   memberRequestFormatter,
 );
 initGroupMembersApp(
   document.querySelector('.js-group-access-requests-list'),
   SHARED_FIELDS.concat('requested'),
+  {},
   memberRequestFormatter,
 );
 

app/assets/javascripts/vue_shared/components/members/table/members_table.vue

@@ -39,7 +39,7 @@ export default {
       ),
   },
   computed: {
-    ...mapState(['members', 'tableFields', 'currentUserId', 'sourceId']),
+    ...mapState(['members', 'tableFields', 'tableAttrs', 'currentUserId', 'sourceId']),
     filteredFields() {
       return FIELDS.filter(field => this.tableFields.includes(field.key) && this.showField(field));
     },
@@ -79,6 +79,7 @@ export default {
 <template>
   <div>
     <gl-table
+      v-bind="tableAttrs.table"
       class="members-table"
       data-testid="members-table"
       head-variant="white"
@@ -89,6 +90,7 @@ export default {
       thead-class="border-bottom"
       :empty-text="__('No members found')"
       show-empty
+      :tbody-tr-attr="tableAttrs.tr"
     >
       <template #cell(account)="{ item: member }">
         <members-table-cell #default="{ memberType, isCurrentUser }" :member="member">

app/assets/javascripts/vue_shared/components/members/table/role_dropdown.vue

@@ -35,6 +35,14 @@ export default {
   },
   mounted() {
     this.isDesktop = bp.isDesktop();
+
+    // Bootstrap Vue and GlDropdown to not support adding attributes to the dropdown toggle
+    // This can be changed once https://gitlab.com/gitlab-org/gitlab-ui/-/issues/1060 is implemented
+    const dropdownToggle = this.$refs.glDropdown.$el.querySelector('.dropdown-toggle');
+
+    if (dropdownToggle) {
+      dropdownToggle.setAttribute('data-qa-selector', 'access_level_dropdown');
+    }
   },
   methods: {
     ...mapActions(['updateMemberRole']),
@@ -63,6 +71,7 @@ export default {
 
 <template>
   <gl-dropdown
+    ref="glDropdown"
     :right="!isDesktop"
     :text="member.accessLevel.stringValue"
     :header-text="__('Change permissions')"
@@ -73,6 +82,7 @@ export default {
       :key="value"
       is-check-item
       :is-checked="value === member.accessLevel.integerValue"
+      data-qa-selector="access_level_link"
       @click="handleSelect(value, name)"
     >
       {{ name }}

app/assets/javascripts/vuex_shared/modules/members/state.js

@@ -3,6 +3,7 @@ export default ({
   sourceId,
   currentUserId,
   tableFields,
+  tableAttrs,
   memberPath,
   requestFormatter,
 }) => ({
@@ -10,6 +11,7 @@ export default ({
   sourceId,
   currentUserId,
   tableFields,
+  tableAttrs,
   memberPath,
   requestFormatter,
   showError: false,

ee/spec/frontend/groups/members/index_spec.js

@@ -6,7 +6,7 @@ describe('initGroupMembersApp', () => {
   let vm;
 
   const createVm = () => {
-    vm = initGroupMembersApp(el, ['account'], () => ({}));
+    vm = initGroupMembersApp(el, ['account'], {}, () => ({}));
   };
 
   beforeEach(() => {

ee/spec/frontend/vue_shared/components/members/table/members_table_spec.js

@@ -15,6 +15,10 @@ describe('MemberList', () => {
       state: {
         members: [],
         tableFields: [],
+        tableAttrs: {
+          table: { 'data-qa-selector': 'members_list' },
+          tr: { 'data-qa-selector': 'member_row' },
+        },
         sourceId: 1,
         currentUserId: 1,
         ...state,

qa/qa/page/group/members.rb

@@ -16,17 +16,24 @@ module QA
           element :invite_member_button
         end
 
-        view 'app/views/shared/members/_member.html.haml' do
+        view 'app/assets/javascripts/pages/groups/group_members/index.js' do
           element :member_row
+          element :groups_list
+          element :group_row
+        end
+
+        view 'app/assets/javascripts/vue_shared/components/members/table/role_dropdown.vue' do
           element :access_level_dropdown
+          element :access_level_link
+        end
+
+        view 'app/assets/javascripts/vue_shared/components/members/action_buttons/remove_member_button.vue' do
           element :delete_member_button
-          element :developer_access_level_link, 'qa_selector: "#{role.downcase}_access_level_link"' # rubocop:disable QA/ElementWithPattern, Lint/InterpolationCheck
         end
 
         view 'app/views/groups/group_members/index.html.haml' do
           element :invite_group_tab
           element :groups_list_tab
-          element :groups_list
         end
 
         view 'app/views/shared/members/_invite_group.html.haml' do
@@ -34,10 +41,6 @@ module QA
           element :invite_group_button
         end
 
-        view 'app/views/shared/members/_group.html.haml' do
-          element :group_row
-        end
-
         def select_group(group_name)
           click_element :group_select_field
           search_and_select(group_name)
@@ -57,7 +60,7 @@ module QA
         def update_access_level(username, access_level)
           within_element(:member_row, text: username) do
             click_element :access_level_dropdown
-            click_element "#{access_level.downcase}_access_level_link"
+            click_element :access_level_link, text: access_level
           end
         end
 

qa/qa/specs/features/ee/browser_ui/1_manage/group/group_audit_logs_1_spec.rb

@@ -85,8 +85,10 @@ module QA
         it_behaves_like 'audit event', ['Changed name']
       end
 
-      context 'Add user, change access level, remove user', testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/734' do
+      context 'Add user, change access level, remove user', :requires_admin, testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/734' do
         before do
+          Runtime::Feature.enable('vue_group_members_list', group: group)
+
           sign_in
           group.visit!
           Page::Group::Menu.perform(&:click_group_members_item)
@@ -97,6 +99,10 @@ module QA
           end
         end
 
+        after do
+          Runtime::Feature.disable('vue_group_members_list', group: group)
+        end
+
         it_behaves_like 'audit event', ['Added user access as Guest', 'Changed access level', 'Removed user access']
       end
 

qa/qa/specs/features/ee/browser_ui/1_manage/group/share_group_with_group_spec.rb

@@ -32,6 +32,11 @@ module QA
 
       before do
         source_group_with_members.add_member(maintainer_user, Resource::Members::AccessLevel::MAINTAINER)
+        Runtime::Feature.enable('vue_group_members_list', group: target_group_with_project)
+      end
+
+      after do
+        Runtime::Feature.disable('vue_group_members_list', group: target_group_with_project)
       end
 
       it 'can be shared with another group with correct access level', :requires_admin, testcase: 'https://gitlab.com/gitlab-org/quality/testcases/-/issues/945' do

spec/frontend/groups/members/index_spec.js

@@ -9,7 +9,12 @@ describe('initGroupMembersApp', () => {
   let wrapper;
 
   const setup = () => {
-    vm = initGroupMembersApp(el, ['account'], () => ({}));
+    vm = initGroupMembersApp(
+      el,
+      ['account'],
+      { table: { 'data-qa-selector': 'members_list' } },
+      () => ({}),
+    );
     wrapper = createWrapper(vm);
   };
 
@@ -68,6 +73,12 @@ describe('initGroupMembersApp', () => {
     expect(vm.$store.state.tableFields).toEqual(['account']);
   });
 
+  it('sets `tableAttrs` in Vuex store', () => {
+    setup();
+
+    expect(vm.$store.state.tableAttrs).toEqual({ table: { 'data-qa-selector': 'members_list' } });
+  });
+
   it('sets `requestFormatter` in Vuex store', () => {
     setup();
 

spec/frontend/vue_shared/components/members/table/members_table_spec.js

@@ -5,7 +5,7 @@ import {
   getByTestId as getByTestIdHelper,
   within,
 } from '@testing-library/dom';
-import { GlBadge } from '@gitlab/ui';
+import { GlBadge, GlTable } from '@gitlab/ui';
 import MembersTable from '~/vue_shared/components/members/table/members_table.vue';
 import MemberAvatar from '~/vue_shared/components/members/table/member_avatar.vue';
 import MemberSource from '~/vue_shared/components/members/table/member_source.vue';
@@ -28,6 +28,10 @@ describe('MemberList', () => {
       state: {
         members: [],
         tableFields: [],
+        tableAttrs: {
+          table: { 'data-qa-selector': 'members_list' },
+          tr: { 'data-qa-selector': 'member_row' },
+        },
         sourceId: 1,
         currentUserId: 1,
         ...state,
@@ -58,6 +62,8 @@ describe('MemberList', () => {
   const getByTestId = (id, options) =>
     createWrapper(getByTestIdHelper(wrapper.element, id, options));
 
+  const findTable = () => wrapper.find(GlTable);
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
@@ -187,4 +193,20 @@ describe('MemberList', () => {
 
     expect(initUserPopoversMock).toHaveBeenCalled();
   });
+
+  it('adds QA selector to table', () => {
+    createComponent();
+
+    expect(findTable().attributes('data-qa-selector')).toBe('members_list');
+  });
+
+  it('adds QA selector to table row', () => {
+    createComponent();
+
+    expect(
+      findTable()
+        .find('tbody tr')
+        .attributes('data-qa-selector'),
+    ).toBe('member_row');
+  });
 });