1 files changed, 86 insertions, 15 deletions

diff --git a/spec/frontend/vue_shared/components/members/table/members_table_spec.js b/spec/frontend/vue_shared/components/members/table/members_table_spec.js
index 20c1c26d2ee..e593e88438c 100644
--- a/spec/frontend/vue_shared/components/members/table/members_table_spec.js
+++ b/spec/frontend/vue_shared/components/members/table/members_table_spec.js
@@ -3,14 +3,16 @@ import Vuex from 'vuex';
 import {
   getByText as getByTextHelper,
   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';
 import ExpiresAt from '~/vue_shared/components/members/table/expires_at.vue';
 import CreatedAt from '~/vue_shared/components/members/table/created_at.vue';
 import RoleDropdown from '~/vue_shared/components/members/table/role_dropdown.vue';
+import ExpirationDatepicker from '~/vue_shared/components/members/table/expiration_datepicker.vue';
 import MemberActionButtons from '~/vue_shared/components/members/table/member_action_buttons.vue';
 import * as initUserPopovers from '~/user_popovers';
 import { member as memberMock, invite, accessRequest } from '../mock_data';
@@ -26,7 +28,12 @@ describe('MemberList', () => {
       state: {
         members: [],
         tableFields: [],
+        tableAttrs: {
+          table: { 'data-qa-selector': 'members_list' },
+          tr: { 'data-qa-selector': 'member_row' },
+        },
         sourceId: 1,
+        currentUserId: 1,
         ...state,
       },
     });
@@ -44,6 +51,7 @@ describe('MemberList', () => {
         'member-action-buttons',
         'role-dropdown',
         'remove-group-link-modal',
+        'expiration-datepicker',
       ],
     });
   };
@@ -54,18 +62,24 @@ describe('MemberList', () => {
   const getByTestId = (id, options) =>
     createWrapper(getByTestIdHelper(wrapper.element, id, options));
 
+  const findTable = () => wrapper.find(GlTable);
+
   afterEach(() => {
     wrapper.destroy();
     wrapper = null;
   });
 
   describe('fields', () => {
-    const memberCanUpdate = {
+    const directMember = {
       ...memberMock,
-      canUpdate: true,
       source: { ...memberMock.source, id: 1 },
     };
 
+    const memberCanUpdate = {
+      ...directMember,
+      canUpdate: true,
+    };
+
     it.each`
       field           | label               | member             | expectedComponent
       ${'account'}    | ${'Account'}        | ${memberMock}      | ${MemberAvatar}
@@ -75,7 +89,7 @@ describe('MemberList', () => {
       ${'requested'}  | ${'Requested'}      | ${accessRequest}   | ${CreatedAt}
       ${'expires'}    | ${'Access expires'} | ${memberMock}      | ${ExpiresAt}
       ${'maxRole'}    | ${'Max role'}       | ${memberCanUpdate} | ${RoleDropdown}
-      ${'expiration'} | ${'Expiration'}     | ${memberMock}      | ${null}
+      ${'expiration'} | ${'Expiration'}     | ${memberMock}      | ${ExpirationDatepicker}
     `('renders the $label field', ({ field, label, member, expectedComponent }) => {
       createComponent({
         members: [member],
@@ -94,19 +108,60 @@ describe('MemberList', () => {
       }
     });
 
-    it('renders "Actions" field for screen readers', () => {
-      createComponent({ members: [memberMock], tableFields: ['actions'] });
+    describe('"Actions" field', () => {
+      it('renders "Actions" field for screen readers', () => {
+        createComponent({ members: [memberCanUpdate], tableFields: ['actions'] });
 
-      const actionField = getByTestId('col-actions');
+        const actionField = getByTestId('col-actions');
 
-      expect(actionField.exists()).toBe(true);
-      expect(actionField.classes('gl-sr-only')).toBe(true);
-      expect(
-        wrapper
-          .find(`[data-label="Actions"][role="cell"]`)
-          .find(MemberActionButtons)
-          .exists(),
-      ).toBe(true);
+        expect(actionField.exists()).toBe(true);
+        expect(actionField.classes('gl-sr-only')).toBe(true);
+        expect(
+          wrapper
+            .find(`[data-label="Actions"][role="cell"]`)
+            .find(MemberActionButtons)
+            .exists(),
+        ).toBe(true);
+      });
+
+      describe('when user is not logged in', () => {
+        it('does not render the "Actions" field', () => {
+          createComponent({ currentUserId: null, tableFields: ['actions'] });
+
+          expect(within(wrapper.element).queryByTestId('col-actions')).toBe(null);
+        });
+      });
+
+      const memberCanRemove = {
+        ...directMember,
+        canRemove: true,
+      };
+
+      describe.each`
+        permission     | members
+        ${'canUpdate'} | ${[memberCanUpdate]}
+        ${'canRemove'} | ${[memberCanRemove]}
+        ${'canResend'} | ${[invite]}
+      `('when one of the members has $permission permissions', ({ members }) => {
+        it('renders the "Actions" field', () => {
+          createComponent({ members, tableFields: ['actions'] });
+
+          expect(getByTestId('col-actions').exists()).toBe(true);
+        });
+      });
+
+      describe.each`
+        permission     | members
+        ${'canUpdate'} | ${[memberMock]}
+        ${'canRemove'} | ${[memberMock]}
+        ${'canResend'} | ${[{ ...invite, invite: { ...invite.invite, canResend: false } }]}
+      `('when none of the members have $permission permissions', ({ members }) => {
+        it('does not render the "Actions" field', () => {
+          createComponent({ members, tableFields: ['actions'] });
+
+          expect(within(wrapper.element).queryByTestId('col-actions')).toBe(null);
+        });
+      });
     });
   });
 
@@ -138,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');
+  });
 });