1 files changed, 52 insertions, 11 deletions

diff --git a/spec/frontend/members/components/avatars/user_avatar_spec.js b/spec/frontend/members/components/avatars/user_avatar_spec.js
index 5cf3a4cdc13..7bcf4a11413 100644
--- a/spec/frontend/members/components/avatars/user_avatar_spec.js
+++ b/spec/frontend/members/components/avatars/user_avatar_spec.js
@@ -1,7 +1,8 @@
 import { GlAvatarLink, GlBadge } from '@gitlab/ui';
-import { within } from '@testing-library/dom';
-import { mount, createWrapper } from '@vue/test-utils';
+import { mountExtended } from 'helpers/vue_test_utils_helper';
 import UserAvatar from '~/members/components/avatars/user_avatar.vue';
+import { AVAILABILITY_STATUS } from '~/set_status_modal/utils';
+
 import { member as memberMock, member2faEnabled, orphanedMember } from '../../mock_data';
 
 describe('UserAvatar', () => {
@@ -10,7 +11,7 @@ describe('UserAvatar', () => {
   const { user } = memberMock;
 
   const createComponent = (propsData = {}, provide = {}) => {
-    wrapper = mount(UserAvatar, {
+    wrapper = mountExtended(UserAvatar, {
       propsData: {
         member: memberMock,
         isCurrentUser: false,
@@ -23,9 +24,6 @@ describe('UserAvatar', () => {
     });
   };
 
-  const getByText = (text, options) =>
-    createWrapper(within(wrapper.element).findByText(text, options));
-
   const findStatusEmoji = (emoji) => wrapper.find(`gl-emoji[data-name="${emoji}"]`);
 
   afterEach(() => {
@@ -48,13 +46,13 @@ describe('UserAvatar', () => {
   it("renders user's name", () => {
     createComponent();
 
-    expect(getByText(user.name).exists()).toBe(true);
+    expect(wrapper.findByText(user.name).exists()).toBe(true);
   });
 
   it("renders user's username", () => {
     createComponent();
 
-    expect(getByText(`@${user.username}`).exists()).toBe(true);
+    expect(wrapper.findByText(`@${user.username}`).exists()).toBe(true);
   });
 
   it("renders user's avatar", () => {
@@ -67,7 +65,7 @@ describe('UserAvatar', () => {
     it('displays an orphaned user', () => {
       createComponent({ member: orphanedMember });
 
-      expect(getByText('Orphaned member').exists()).toBe(true);
+      expect(wrapper.findByText('Orphaned member').exists()).toBe(true);
     });
   });
 
@@ -85,13 +83,13 @@ describe('UserAvatar', () => {
     it('renders the "It\'s you" badge when member is current user', () => {
       createComponent({ isCurrentUser: true });
 
-      expect(getByText("It's you").exists()).toBe(true);
+      expect(wrapper.findByText("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);
+      expect(wrapper.findByText('2FA').exists()).toBe(false);
     });
   });
 
@@ -112,6 +110,23 @@ describe('UserAvatar', () => {
 
         expect(findStatusEmoji(emoji).exists()).toBe(true);
       });
+
+      describe('when `user.showStatus` is `false', () => {
+        it('does not display status emoji', () => {
+          createComponent({
+            member: {
+              ...memberMock,
+              user: {
+                ...memberMock.user,
+                showStatus: false,
+                status: { emoji, messageHtml: 'On vacation' },
+              },
+            },
+          });
+
+          expect(findStatusEmoji(emoji).exists()).toBe(false);
+        });
+      });
     });
 
     describe('when not set', () => {
@@ -122,4 +137,30 @@ describe('UserAvatar', () => {
       });
     });
   });
+
+  describe('user availability', () => {
+    describe('when `user.availability` is `null`', () => {
+      it("does not show `(Busy)` next to user's name", () => {
+        createComponent();
+
+        expect(wrapper.findByText('(Busy)').exists()).toBe(false);
+      });
+    });
+
+    describe(`when user.availability is ${AVAILABILITY_STATUS.BUSY}`, () => {
+      it("shows `(Busy)` next to user's name", () => {
+        createComponent({
+          member: {
+            ...memberMock,
+            user: {
+              ...memberMock.user,
+              availability: AVAILABILITY_STATUS.BUSY,
+            },
+          },
+        });
+
+        expect(wrapper.findByText('(Busy)').exists()).toBe(true);
+      });
+    });
+  });
 });