1 files changed, 79 insertions, 15 deletions

diff --git a/spec/frontend/notes/components/note_header_spec.js b/spec/frontend/notes/components/note_header_spec.js
index d477de69716..2bb08b60569 100644
--- a/spec/frontend/notes/components/note_header_spec.js
+++ b/spec/frontend/notes/components/note_header_spec.js
@@ -1,7 +1,7 @@
 import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { nextTick } from 'vue';
 import Vuex from 'vuex';
 import NoteHeader from '~/notes/components/note_header.vue';
-import GitlabTeamMemberBadge from '~/vue_shared/components/user_avatar/badges/gitlab_team_member_badge.vue';
 
 const localVue = createLocalVue();
 localVue.use(Vuex);
@@ -18,6 +18,7 @@ describe('NoteHeader component', () => {
   const findActionText = () => wrapper.find({ ref: 'actionText' });
   const findTimestampLink = () => wrapper.find({ ref: 'noteTimestampLink' });
   const findTimestamp = () => wrapper.find({ ref: 'noteTimestamp' });
+  const findConfidentialIndicator = () => wrapper.find('[data-testid="confidentialIndicator"]');
   const findSpinner = () => wrapper.find({ ref: 'spinner' });
 
   const author = {
@@ -140,20 +141,6 @@ describe('NoteHeader component', () => {
     });
   });
 
-  test.each`
-    props                                                   | expected | message1            | message2
-    ${{ author: { ...author, is_gitlab_employee: true } }}  | ${true}  | ${'renders'}        | ${'true'}
-    ${{ author: { ...author, is_gitlab_employee: false } }} | ${false} | ${"doesn't render"} | ${'false'}
-    ${{ author }}                                           | ${false} | ${"doesn't render"} | ${'undefined'}
-  `(
-    '$message1 GitLab team member badge when `is_gitlab_employee` is $message2',
-    ({ props, expected }) => {
-      createComponent(props);
-
-      expect(wrapper.find(GitlabTeamMemberBadge).exists()).toBe(expected);
-    },
-  );
-
   describe('loading spinner', () => {
     it('shows spinner when showSpinner is true', () => {
       createComponent();
@@ -179,4 +166,81 @@ describe('NoteHeader component', () => {
       expect(findTimestamp().exists()).toBe(true);
     });
   });
+
+  describe('author username link', () => {
+    it('proxies `mouseenter` event to author name link', () => {
+      createComponent({ author });
+
+      const dispatchEvent = jest.spyOn(wrapper.vm.$refs.authorNameLink, 'dispatchEvent');
+
+      wrapper.find({ ref: 'authorUsernameLink' }).trigger('mouseenter');
+
+      expect(dispatchEvent).toHaveBeenCalledWith(new Event('mouseenter'));
+    });
+
+    it('proxies `mouseleave` event to author name link', () => {
+      createComponent({ author });
+
+      const dispatchEvent = jest.spyOn(wrapper.vm.$refs.authorNameLink, 'dispatchEvent');
+
+      wrapper.find({ ref: 'authorUsernameLink' }).trigger('mouseleave');
+
+      expect(dispatchEvent).toHaveBeenCalledWith(new Event('mouseleave'));
+    });
+  });
+
+  describe('when author status tooltip is opened', () => {
+    it('removes `title` attribute from emoji to prevent duplicate tooltips', () => {
+      createComponent({
+        author: {
+          ...author,
+          status_tooltip_html:
+            '"<span class="user-status-emoji has-tooltip" title="foo bar" data-html="true" data-placement="top"><gl-emoji title="basketball and hoop" data-name="basketball" data-unicode-version="6.0">🏀</gl-emoji></span>"',
+        },
+      });
+
+      return nextTick().then(() => {
+        const authorStatus = wrapper.find({ ref: 'authorStatus' });
+        authorStatus.trigger('mouseenter');
+
+        expect(authorStatus.find('gl-emoji').attributes('title')).toBeUndefined();
+      });
+    });
+  });
+
+  describe('when author username link is hovered', () => {
+    it('toggles hover specific CSS classes on author name link', done => {
+      createComponent({ author });
+
+      const authorUsernameLink = wrapper.find({ ref: 'authorUsernameLink' });
+      const authorNameLink = wrapper.find({ ref: 'authorNameLink' });
+
+      authorUsernameLink.trigger('mouseenter');
+
+      nextTick(() => {
+        expect(authorNameLink.classes()).toContain('hover');
+        expect(authorNameLink.classes()).toContain('text-underline');
+
+        authorUsernameLink.trigger('mouseleave');
+
+        nextTick(() => {
+          expect(authorNameLink.classes()).not.toContain('hover');
+          expect(authorNameLink.classes()).not.toContain('text-underline');
+
+          done();
+        });
+      });
+    });
+  });
+
+  describe('with confidentiality indicator', () => {
+    it.each`
+      status   | condition
+      ${true}  | ${'shows'}
+      ${false} | ${'hides'}
+    `('$condition icon indicator when isConfidential is $status', ({ status }) => {
+      createComponent({ isConfidential: status });
+      expect(findConfidentialIndicator().exists()).toBe(status);
+    });
+  });
 });