1 files changed, 21 insertions, 5 deletions

diff --git a/spec/frontend/members/components/avatars/user_avatar_spec.js b/spec/frontend/members/components/avatars/user_avatar_spec.js
index 303c82582a3..3f4d9155c5d 100644
--- a/spec/frontend/members/components/avatars/user_avatar_spec.js
+++ b/spec/frontend/members/components/avatars/user_avatar_spec.js
@@ -1,21 +1,31 @@
 import { GlAvatarLink, GlBadge } from '@gitlab/ui';
 import { within } from '@testing-library/dom';
 import { mount, createWrapper } from '@vue/test-utils';
+import Vue from 'vue';
+import Vuex from 'vuex';
 import UserAvatar from '~/members/components/avatars/user_avatar.vue';
-import { member as memberMock, orphanedMember } from '../../mock_data';
+import { member as memberMock, member2faEnabled, orphanedMember } from '../../mock_data';
+
+Vue.use(Vuex);
 
 describe('UserAvatar', () => {
   let wrapper;
 
   const { user } = memberMock;
 
-  const createComponent = (propsData = {}) => {
+  const createComponent = (propsData = {}, state = {}) => {
     wrapper = mount(UserAvatar, {
       propsData: {
         member: memberMock,
         isCurrentUser: false,
         ...propsData,
       },
+      store: new Vuex.Store({
+        state: {
+          canManageMembers: true,
+          ...state,
+        },
+      }),
     });
   };
 
@@ -69,9 +79,9 @@ describe('UserAvatar', () => {
 
   describe('badges', () => {
     it.each`
-      member                                                                     | badgeText
-      ${{ ...memberMock, user: { ...memberMock.user, blocked: true } }}          | ${'Blocked'}
-      ${{ ...memberMock, user: { ...memberMock.user, twoFactorEnabled: true } }} | ${'2FA'}
+      member                                                            | badgeText
+      ${{ ...memberMock, user: { ...memberMock.user, blocked: true } }} | ${'Blocked'}
+      ${member2faEnabled}                                               | ${'2FA'}
     `('renders the "$badgeText" badge', ({ member, badgeText }) => {
       createComponent({ member });
 
@@ -83,6 +93,12 @@ describe('UserAvatar', () => {
 
       expect(getByText("It's you").exists()).toBe(true);
     });
+
+    it('does not render 2FA badge when `canManageMembers` is `false`', () => {
+      createComponent({ member: member2faEnabled }, { canManageMembers: false });
+
+      expect(within(wrapper.element).queryByText('2FA')).toBe(null);
+    });
   });
 
   describe('user status', () => {