1 files changed, 125 insertions, 0 deletions
diff --git a/spec/frontend/super_sidebar/components/user_menu_profile_item_spec.js b/spec/frontend/super_sidebar/components/user_menu_profile_item_spec.js
new file mode 100644
index 00000000000..9cf55154a59
--- /dev/null
+++ b/spec/frontend/super_sidebar/components/user_menu_profile_item_spec.js
@@ -0,0 +1,125 @@
+import { GlDisclosureDropdownItem, GlTooltip } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import UserMenuProfileItem from '~/super_sidebar/components/user_menu_profile_item.vue';
+import { userMenuMockData, userMenuMockStatus } from '../mock_data';
+
+describe('UserMenuProfileItem component', () => {
+  let wrapper;
+
+  const findGlDisclosureDropdownItem = () => wrapper.findComponent(GlDisclosureDropdownItem);
+  const findGlTooltip = () => wrapper.findComponent(GlTooltip);
+  const findUserStatus = () => wrapper.findByTestId('user-menu-status');
+
+  const GlEmoji = { template: '<img/>' };
+
+  const createWrapper = (userDataChanges = {}) => {
+    wrapper = shallowMountExtended(UserMenuProfileItem, {
+      propsData: {
+        user: {
+          ...userMenuMockData,
+          ...userDataChanges,
+        },
+      },
+      stubs: {
+        GlEmoji,
+        GlDisclosureDropdownItem,
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  it('renders menu item', () => {
+    expect(findGlDisclosureDropdownItem().exists()).toBe(true);
+  });
+
+  it('passes the item to the disclosure dropdown item', () => {
+    expect(findGlDisclosureDropdownItem().props('item')).toEqual(
+      expect.objectContaining({
+        text: userMenuMockData.name,
+        href: userMenuMockData.link_to_profile,
+      }),
+    );
+  });
+
+  it("renders user's name", () => {
+    expect(findGlDisclosureDropdownItem().text()).toContain(userMenuMockData.name);
+  });
+
+  it("renders user's username", () => {
+    expect(findGlDisclosureDropdownItem().text()).toContain(userMenuMockData.username);
+  });
+
+  describe('Busy status', () => {
+    it('should not render "Busy" when user is NOT busy', () => {
+      expect(findGlDisclosureDropdownItem().text()).not.toContain('Busy');
+    });
+    it('should  render "Busy" when user is busy', () => {
+      createWrapper({ status: { customized: true, busy: true } });
+
+      expect(findGlDisclosureDropdownItem().text()).toContain('Busy');
+    });
+  });
+
+  describe('User status', () => {
+    describe('when not customized', () => {
+      it('should not render it', () => {
+        expect(findUserStatus().exists()).toBe(false);
+      });
+    });
+
+    describe('when customized', () => {
+      beforeEach(() => {
+        createWrapper({ status: { ...userMenuMockStatus, customized: true } });
+      });
+
+      it('should render it', () => {
+        expect(findUserStatus().exists()).toBe(true);
+      });
+
+      it('should render status emoji', () => {
+        expect(findUserStatus().findComponent(GlEmoji).attributes('data-name')).toBe(
+          userMenuMockData.status.emoji,
+        );
+      });
+
+      it('should render status message', () => {
+        expect(findUserStatus().html()).toContain(userMenuMockData.status.message_html);
+      });
+
+      it("sets the tooltip's target to the status container", () => {
+        expect(findGlTooltip().props('target')?.()).toBe(findUserStatus().element);
+      });
+
+      describe('Tooltip', () => {
+        it('renders the tooltip when message has some text', () => {
+          createWrapper({
+            status: { ...userMenuMockStatus, customized: true, message_html: 'Has text' },
+          });
+          expect(findGlTooltip().exists()).toBe(true);
+        });
+
+        it('does not render the tooltip when message is empty', () => {
+          createWrapper({
+            status: { ...userMenuMockStatus, customized: true, message_html: '' },
+          });
+          expect(findGlTooltip().exists()).toBe(false);
+        });
+      });
+    });
+  });
+
+  describe('Tracking', () => {
+    it('sets the tracking attributes', () => {
+      expect(findGlDisclosureDropdownItem().find('a').attributes()).toEqual(
+        expect.objectContaining({
+          'data-track-property': 'nav_user_menu',
+          'data-track-action': 'click_link',
+          'data-track-label': 'user_profile',
+        }),
+      );
+    });
+  });
+});