Add latest changes from gitlab-org/gitlab@master

17 files changed, 211 insertions, 92 deletions

diff --git a/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js
index 85eafa9e85c..53c098ee153 100644
--- a/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/bubble_menu_spec.js
@@ -65,7 +65,7 @@ describe('content_editor/components/bubble_menus/bubble_menu', () => {
         onHidden: expect.any(Function),
         onShow: expect.any(Function),
         strategy: 'fixed',
-        maxWidth: 'auto',
+        maxWidth: '400px',
         ...tippyOptions,
       }),
     });
diff --git a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
index c79df9c9ed8..b219c506753 100644
--- a/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/link_bubble_menu_spec.js
@@ -206,7 +206,7 @@ describe('content_editor/components/bubble_menus/link_bubble_menu', () => {
       await buildWrapperAndDisplayMenu();
       await wrapper.findByTestId('remove-link').vm.$emit('click');
 
-      expect(tiptapEditor.getHTML()).toBe('<p>Download PDF File</p>');
+      expect(tiptapEditor.getHTML()).toBe('<p dir="auto">Download PDF File</p>');
     });
   });
 
diff --git a/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
index 89beb76a6f2..002e19ee8cf 100644
--- a/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/media_bubble_menu_spec.js
@@ -22,19 +22,19 @@ import {
   PROJECT_WIKI_ATTACHMENT_DRAWIO_DIAGRAM_HTML,
 } from '../../test_constants';
 
-const TIPTAP_AUDIO_HTML = `<p>
+const TIPTAP_AUDIO_HTML = `<p dir="auto">
   <span class="media-container audio-container"><audio src="https://gitlab.com/favicon.png" controls="true" data-setup="{}" data-title="gitlab favicon"></audio><a href="https://gitlab.com/favicon.png" class="with-attachment-icon">gitlab favicon</a></span>
 </p>`;
 
-const TIPTAP_DIAGRAM_HTML = `<p>
-  <img src="https://gitlab.com/favicon.png" alt="gitlab favicon" title="gitlab favicon">
+const TIPTAP_DIAGRAM_HTML = `<p dir="auto">
+  <img src="https://gitlab.com/favicon.png" alt="gitlab favicon">
 </p>`;
 
-const TIPTAP_IMAGE_HTML = `<p>
-  <img src="https://gitlab.com/favicon.png" alt="gitlab favicon" title="gitlab favicon">
+const TIPTAP_IMAGE_HTML = `<p dir="auto">
+  <img src="https://gitlab.com/favicon.png" alt="gitlab favicon">
 </p>`;
 
-const TIPTAP_VIDEO_HTML = `<p>
+const TIPTAP_VIDEO_HTML = `<p dir="auto">
   <span class="media-container video-container"><video src="https://gitlab.com/favicon.png" controls="true" data-setup="{}" data-title="gitlab favicon"></video><a href="https://gitlab.com/favicon.png" class="with-attachment-icon">gitlab favicon</a></span>
 </p>`;
 
@@ -101,9 +101,7 @@ describe.each`
 
     const expectLinkButtonsToExist = (exist = true) => {
       expect(wrapper.findComponent(GlLink).exists()).toBe(exist);
-      expect(wrapper.findByTestId('copy-media-src').exists()).toBe(exist);
       expect(wrapper.findByTestId('edit-media').exists()).toBe(exist);
-      expect(wrapper.findByTestId('delete-media').exists()).toBe(exist);
     };
 
     beforeEach(() => {
@@ -128,14 +126,11 @@ describe.each`
       await buildWrapperAndDisplayMenu();
 
       const link = wrapper.findComponent(GlLink);
-      expect(link.attributes()).toEqual(
-        expect.objectContaining({
-          href: `/group1/project1/-/wikis/${filePath}`,
-          'aria-label': filePath,
-          title: filePath,
-          target: '_blank',
-        }),
-      );
+      expect(link.attributes()).toMatchObject({
+        href: `/group1/project1/-/wikis/${filePath}`,
+        'aria-label': filePath,
+        target: '_blank',
+      });
       expect(link.text()).toBe(filePath);
     });
 
@@ -190,28 +185,6 @@ describe.each`
       });
     });
 
-    describe('copy button', () => {
-      it(`copies the canonical link to the ${mediaType} to clipboard`, async () => {
-        await buildWrapperAndDisplayMenu();
-
-        jest.spyOn(navigator.clipboard, 'writeText');
-
-        await wrapper.findByTestId('copy-media-src').vm.$emit('click');
-
-        expect(navigator.clipboard.writeText).toHaveBeenCalledWith(filePath);
-      });
-    });
-
-    describe(`remove ${mediaType} button`, () => {
-      it(`removes the ${mediaType}`, async () => {
-        await buildWrapperAndDisplayMenu();
-
-        await wrapper.findByTestId('delete-media').vm.$emit('click');
-
-        expect(tiptapEditor.getHTML()).toBe('<p>\n  \n</p>');
-      });
-    });
-
     describe(`replace ${mediaType} button`, () => {
       beforeEach(buildWrapperAndDisplayMenu);
 
@@ -252,7 +225,6 @@ describe.each`
 
     describe('edit button', () => {
       let mediaSrcInput;
-      let mediaTitleInput;
       let mediaAltInput;
 
       beforeEach(async () => {
@@ -261,7 +233,6 @@ describe.each`
         await wrapper.findByTestId('edit-media').vm.$emit('click');
 
         mediaSrcInput = wrapper.findByTestId('media-src');
-        mediaTitleInput = wrapper.findByTestId('media-title');
         mediaAltInput = wrapper.findByTestId('media-alt');
       });
 
@@ -269,11 +240,10 @@ describe.each`
         expectLinkButtonsToExist(false);
       });
 
-      it(`shows a form to edit the ${mediaType} src/title/alt`, () => {
+      it(`shows a form to edit the ${mediaType} src/alt`, () => {
         expect(wrapper.findComponent(GlForm).exists()).toBe(true);
 
         expect(mediaSrcInput.element.value).toBe(filePath);
-        expect(mediaTitleInput.element.value).toBe('');
         expect(mediaAltInput.element.value).toBe('test-file');
       });
 
@@ -281,7 +251,6 @@ describe.each`
         beforeEach(async () => {
           mediaSrcInput.setValue('https://gitlab.com/favicon.png');
           mediaAltInput.setValue('gitlab favicon');
-          mediaTitleInput.setValue('gitlab favicon');
 
           contentEditor.resolveUrl.mockResolvedValue('https://gitlab.com/favicon.png');
 
@@ -294,14 +263,11 @@ describe.each`
 
         it(`updates the link to the ${mediaType} in the bubble menu`, () => {
           const link = wrapper.findComponent(GlLink);
-          expect(link.attributes()).toEqual(
-            expect.objectContaining({
-              href: 'https://gitlab.com/favicon.png',
-              'aria-label': 'https://gitlab.com/favicon.png',
-              title: 'https://gitlab.com/favicon.png',
-              target: '_blank',
-            }),
-          );
+          expect(link.attributes()).toMatchObject({
+            href: 'https://gitlab.com/favicon.png',
+            'aria-label': 'https://gitlab.com/favicon.png',
+            target: '_blank',
+          });
           expect(link.text()).toBe('https://gitlab.com/favicon.png');
         });
       });
@@ -310,7 +276,6 @@ describe.each`
         beforeEach(async () => {
           mediaSrcInput.setValue('https://gitlab.com/favicon.png');
           mediaAltInput.setValue('gitlab favicon');
-          mediaTitleInput.setValue('gitlab favicon');
 
           await wrapper.findByTestId('cancel-editing-media').vm.$emit('click');
         });
@@ -324,12 +289,10 @@ describe.each`
           await wrapper.findByTestId('edit-media').vm.$emit('click');
 
           mediaSrcInput = wrapper.findByTestId('media-src');
-          mediaTitleInput = wrapper.findByTestId('media-title');
           mediaAltInput = wrapper.findByTestId('media-alt');
 
           expect(mediaSrcInput.element.value).toBe(filePath);
           expect(mediaAltInput.element.value).toBe('test-file');
-          expect(mediaTitleInput.element.value).toBe('');
         });
       });
     });
diff --git a/spec/frontend/content_editor/components/bubble_menus/reference_bubble_menu_spec.js b/spec/frontend/content_editor/components/bubble_menus/reference_bubble_menu_spec.js
index 169f77dc054..c46aa1b657e 100644
--- a/spec/frontend/content_editor/components/bubble_menus/reference_bubble_menu_spec.js
+++ b/spec/frontend/content_editor/components/bubble_menus/reference_bubble_menu_spec.js
@@ -241,7 +241,7 @@ describe('content_editor/components/bubble_menus/reference_bubble_menu', () => {
       await buildWrapperAndDisplayMenu();
       await wrapper.findByTestId('remove-reference').trigger('click');
 
-      expect(tiptapEditor.getHTML()).toBe('<p></p>');
+      expect(tiptapEditor.getHTML()).toBe('<p dir="auto"></p>');
     });
   });
 });
diff --git a/spec/frontend/content_editor/components/wrappers/image_spec.js b/spec/frontend/content_editor/components/wrappers/image_spec.js
new file mode 100644
index 00000000000..0ac3b7e9465
--- /dev/null
+++ b/spec/frontend/content_editor/components/wrappers/image_spec.js
@@ -0,0 +1,100 @@
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
+import ImageWrapper from '~/content_editor/components/wrappers/image.vue';
+import { createTestEditor, mockChainedCommands } from '../../test_utils';
+
+describe('content/components/wrappers/image_spec', () => {
+  let wrapper;
+  let tiptapEditor;
+
+  const createWrapper = (node = {}) => {
+    tiptapEditor = createTestEditor();
+    wrapper = shallowMountExtended(ImageWrapper, {
+      propsData: {
+        editor: tiptapEditor,
+        node,
+        getPos: jest.fn().mockReturnValue(12),
+      },
+    });
+  };
+
+  const findHandle = (handle) => wrapper.findByTestId(`image-resize-${handle}`);
+  const findImage = () => wrapper.find('img');
+
+  it('renders an image with the given attributes', () => {
+    createWrapper({
+      type: 'image',
+      attrs: { src: 'image.png', alt: 'My Image', width: 200, height: 200 },
+    });
+
+    expect(findImage().attributes()).toMatchObject({
+      src: 'image.png',
+      alt: 'My Image',
+      height: '200',
+      width: '200',
+    });
+  });
+
+  it('sets width and height to auto if not provided', () => {
+    createWrapper({ type: 'image', attrs: { src: 'image.png', alt: 'My Image' } });
+
+    expect(findImage().attributes()).toMatchObject({
+      src: 'image.png',
+      alt: 'My Image',
+      height: 'auto',
+      width: 'auto',
+    });
+  });
+
+  it('renders corner resize handles', () => {
+    createWrapper({ type: 'image', attrs: { src: 'image.png', alt: 'My Image' } });
+
+    expect(findHandle('nw').exists()).toBe(true);
+    expect(findHandle('ne').exists()).toBe(true);
+    expect(findHandle('sw').exists()).toBe(true);
+    expect(findHandle('se').exists()).toBe(true);
+  });
+
+  describe.each`
+    handle  | htmlElementAttributes              | tiptapNodeAttributes
+    ${'nw'} | ${{ width: '300', height: '75' }}  | ${{ width: 300, height: 75 }}
+    ${'ne'} | ${{ width: '500', height: '125' }} | ${{ width: 500, height: 125 }}
+    ${'sw'} | ${{ width: '300', height: '75' }}  | ${{ width: 300, height: 75 }}
+    ${'se'} | ${{ width: '500', height: '125' }} | ${{ width: 500, height: 125 }}
+  `('resizing using $handle', ({ handle, htmlElementAttributes, tiptapNodeAttributes }) => {
+    let handleEl;
+
+    const initialMousePosition = { screenX: 200, screenY: 200 };
+    const finalMousePosition = { screenX: 300, screenY: 300 };
+
+    beforeEach(() => {
+      createWrapper({
+        type: 'image',
+        attrs: { src: 'image.png', alt: 'My Image', width: 400, height: 100 },
+      });
+
+      handleEl = findHandle(handle);
+      handleEl.element.dispatchEvent(new MouseEvent('mousedown', initialMousePosition));
+      document.dispatchEvent(new MouseEvent('mousemove', finalMousePosition));
+    });
+
+    it('resizes the image properly on mousedown+mousemove', () => {
+      expect(findImage().attributes()).toMatchObject(htmlElementAttributes);
+    });
+
+    it('updates prosemirror doc state on mouse release with final size', () => {
+      const commands = mockChainedCommands(tiptapEditor, [
+        'focus',
+        'updateAttributes',
+        'setNodeSelection',
+        'run',
+      ]);
+
+      document.dispatchEvent(new MouseEvent('mouseup'));
+
+      expect(commands.focus).toHaveBeenCalled();
+      expect(commands.updateAttributes).toHaveBeenCalledWith('image', tiptapNodeAttributes);
+      expect(commands.setNodeSelection).toHaveBeenCalledWith(12);
+      expect(commands.run).toHaveBeenCalled();
+    });
+  });
+});
diff --git a/spec/frontend/content_editor/extensions/hard_break_spec.js b/spec/frontend/content_editor/extensions/hard_break_spec.js
index 9e2e28b6e72..6a57e7eaa9b 100644
--- a/spec/frontend/content_editor/extensions/hard_break_spec.js
+++ b/spec/frontend/content_editor/extensions/hard_break_spec.js
@@ -3,35 +3,21 @@ import { createTestEditor, createDocBuilder } from '../test_utils';
 
 describe('content_editor/extensions/hard_break', () => {
   let tiptapEditor;
-  let eq;
+
   let doc;
   let p;
-  let hardBreak;
 
   beforeEach(() => {
     tiptapEditor = createTestEditor({ extensions: [HardBreak] });
 
     ({
-      builders: { doc, p, hardBreak },
-      eq,
+      builders: { doc, p },
     } = createDocBuilder({
       tiptapEditor,
       names: { hardBreak: { nodeType: HardBreak.name } },
     }));
   });
 
-  describe('Shift-Enter shortcut', () => {
-    it('inserts a hard break when shortcut is executed', () => {
-      const initialDoc = doc(p(''));
-      const expectedDoc = doc(p(hardBreak()));
-
-      tiptapEditor.commands.setContent(initialDoc.toJSON());
-      tiptapEditor.commands.keyboardShortcut('Shift-Enter');
-
-      expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
-    });
-  });
-
   describe('Mod-Enter shortcut', () => {
     it('does not insert a hard break when shortcut is executed', () => {
       const initialDoc = doc(p(''));
@@ -40,7 +26,7 @@ describe('content_editor/extensions/hard_break', () => {
       tiptapEditor.commands.setContent(initialDoc.toJSON());
       tiptapEditor.commands.keyboardShortcut('Mod-Enter');
 
-      expect(eq(tiptapEditor.state.doc, expectedDoc)).toBe(true);
+      expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDoc.toJSON());
     });
   });
 });
diff --git a/spec/frontend/content_editor/extensions/html_nodes_spec.js b/spec/frontend/content_editor/extensions/html_nodes_spec.js
index 24c68239025..3fe496aa708 100644
--- a/spec/frontend/content_editor/extensions/html_nodes_spec.js
+++ b/spec/frontend/content_editor/extensions/html_nodes_spec.js
@@ -28,9 +28,9 @@ describe('content_editor/extensions/html_nodes', () => {
   });
 
   it.each`
-    input                      | insertedNodes
-    ${'<div><p>foo</p></div>'} | ${() => div(p('foo'))}
-    ${'<pre><p>foo</p></pre>'} | ${() => pre(p('foo'))}
+    input                                 | insertedNodes
+    ${'<div><p dir="auto">foo</p></div>'} | ${() => div(p('foo'))}
+    ${'<pre><p dir="auto">foo</p></pre>'} | ${() => pre(p('foo'))}
   `('parses and creates nodes for $input', ({ input, insertedNodes }) => {
     const expectedDoc = doc(insertedNodes());
 
diff --git a/spec/frontend/content_editor/extensions/image_spec.js b/spec/frontend/content_editor/extensions/image_spec.js
index f73b0143fd9..69f4f4c6d65 100644
--- a/spec/frontend/content_editor/extensions/image_spec.js
+++ b/spec/frontend/content_editor/extensions/image_spec.js
@@ -35,7 +35,7 @@ describe('content_editor/extensions/image', () => {
     tiptapEditor.commands.setContent(initialDoc.toJSON());
 
     expect(tiptapEditor.getHTML()).toEqual(
-      '<p><img src="/-/wikis/uploads/image.jpg" alt="image" title="this is an image"></p>',
+      '<p dir="auto"><img src="/-/wikis/uploads/image.jpg" alt="image" title="this is an image"></p>',
     );
   });
 });
diff --git a/spec/frontend/content_editor/extensions/paragraph_spec.js b/spec/frontend/content_editor/extensions/paragraph_spec.js
new file mode 100644
index 00000000000..d04dda1871d
--- /dev/null
+++ b/spec/frontend/content_editor/extensions/paragraph_spec.js
@@ -0,0 +1,29 @@
+import { createTestEditor, createDocBuilder } from '../test_utils';
+
+describe('content_editor/extensions/paragraph', () => {
+  let tiptapEditor;
+  let doc;
+  let p;
+
+  beforeEach(() => {
+    tiptapEditor = createTestEditor();
+
+    ({
+      builders: { doc, p },
+    } = createDocBuilder({ tiptapEditor }));
+  });
+
+  describe('Shift-Enter shortcut', () => {
+    it('inserts a new paragraph when shortcut is executed', async () => {
+      const initialDoc = doc(p('hello'));
+      const expectedDoc = doc(p('hello'), p(''));
+
+      tiptapEditor.commands.setContent(initialDoc.toJSON());
+      tiptapEditor.commands.keyboardShortcut('Shift-Enter');
+
+      await Promise.resolve();
+
+      expect(tiptapEditor.state.doc.toJSON()).toEqual(expectedDoc.toJSON());
+    });
+  });
+});
diff --git a/spec/frontend/content_editor/extensions/paste_markdown_spec.js b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
index baf0919fec8..10e456d4b4e 100644
--- a/spec/frontend/content_editor/extensions/paste_markdown_spec.js
+++ b/spec/frontend/content_editor/extensions/paste_markdown_spec.js
@@ -16,7 +16,8 @@ const CODE_BLOCK_HTML = '<pre class="js-syntax-highlight" lang="javascript">var
 const DIAGRAM_HTML =
   '<img data-diagram="nomnoml" data-diagram-src="data:text/plain;base64,WzxmcmFtZT5EZWNvcmF0b3IgcGF0dGVybl0=">';
 const FRONTMATTER_HTML = '<pre lang="yaml" data-lang-params="frontmatter">key: value</pre>';
-const PARAGRAPH_HTML = '<p>Some text with <strong>bold</strong> and <em>italic</em> text.</p>';
+const PARAGRAPH_HTML =
+  '<p dir="auto">Some text with <strong>bold</strong> and <em>italic</em> text.</p>';
 
 describe('content_editor/extensions/paste_markdown', () => {
   let tiptapEditor;
diff --git a/spec/frontend/content_editor/remark_markdown_processing_spec.js b/spec/frontend/content_editor/remark_markdown_processing_spec.js
index d4a02ab2202..3d4d5b13120 100644
--- a/spec/frontend/content_editor/remark_markdown_processing_spec.js
+++ b/spec/frontend/content_editor/remark_markdown_processing_spec.js
@@ -1337,13 +1337,13 @@ content
 alert("Hello world")
 </script>
     `,
-      expectedHtml: '<p></p>',
+      expectedHtml: '<p dir="auto"></p>',
     },
     {
       markdown: `
 <foo>Hello</foo>
       `,
-      expectedHtml: '<p></p>',
+      expectedHtml: '<p dir="auto"></p>',
     },
     {
       markdown: `
@@ -1356,7 +1356,7 @@ alert("Hello world")
 <a id="link-id">Header</a> and other text
       `,
       expectedHtml:
-        '<p><a target="_blank" rel="noopener noreferrer nofollow">Header</a> and other text</p>',
+        '<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow">Header</a> and other text</p>',
     },
     {
       markdown: `
@@ -1366,11 +1366,11 @@ body {
 }
 </style>
       `,
-      expectedHtml: '<p></p>',
+      expectedHtml: '<p dir="auto"></p>',
     },
     {
       markdown: '<div style="transform">div</div>',
-      expectedHtml: '<div><p>div</p></div>',
+      expectedHtml: '<div><p dir="auto">div</p></div>',
     },
   ])(
     'removes unknown tags and unsupported attributes from HTML output',
diff --git a/spec/frontend/content_editor/test_utils.js b/spec/frontend/content_editor/test_utils.js
index 2184a829cf0..00aee32753b 100644
--- a/spec/frontend/content_editor/test_utils.js
+++ b/spec/frontend/content_editor/test_utils.js
@@ -1,7 +1,4 @@
 import { Node } from '@tiptap/core';
-import { Document } from '@tiptap/extension-document';
-import { Paragraph } from '@tiptap/extension-paragraph';
-import { Text } from '@tiptap/extension-text';
 import { Editor } from '@tiptap/vue-2';
 import { builders, eq } from 'prosemirror-test-builder';
 import { nextTick } from 'vue';
@@ -18,6 +15,7 @@ import DescriptionList from '~/content_editor/extensions/description_list';
 import Details from '~/content_editor/extensions/details';
 import DetailsContent from '~/content_editor/extensions/details_content';
 import Diagram from '~/content_editor/extensions/diagram';
+import Document from '~/content_editor/extensions/document';
 import DrawioDiagram from '~/content_editor/extensions/drawio_diagram';
 import Emoji from '~/content_editor/extensions/emoji';
 import FootnoteDefinition from '~/content_editor/extensions/footnote_definition';
@@ -36,6 +34,7 @@ import Italic from '~/content_editor/extensions/italic';
 import Link from '~/content_editor/extensions/link';
 import ListItem from '~/content_editor/extensions/list_item';
 import OrderedList from '~/content_editor/extensions/ordered_list';
+import Paragraph from '~/content_editor/extensions/paragraph';
 import ReferenceDefinition from '~/content_editor/extensions/reference_definition';
 import Reference from '~/content_editor/extensions/reference';
 import ReferenceLabel from '~/content_editor/extensions/reference_label';
@@ -47,6 +46,7 @@ import TableRow from '~/content_editor/extensions/table_row';
 import TableOfContents from '~/content_editor/extensions/table_of_contents';
 import TaskItem from '~/content_editor/extensions/task_item';
 import TaskList from '~/content_editor/extensions/task_list';
+import Text from '~/content_editor/extensions/text';
 import Video from '~/content_editor/extensions/video';
 import HTMLMarks from '~/content_editor/extensions/html_marks';
 import HTMLNodes from '~/content_editor/extensions/html_nodes';
diff --git a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
index 43050e6edc9..14efe253bd0 100644
--- a/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
+++ b/spec/frontend/design_management/components/design_notes/__snapshots__/design_note_spec.js.snap
@@ -6,7 +6,9 @@ exports[`Design note component should match the snapshot 1`] = `
   id="note_123"
 >
   <glavatarlink-stub
-    class="gl-float-left gl-mr-3 link-inherit-color"
+    class="gl-float-left gl-mr-3 link-inherit-color js-user-link"
+    data-user-id="1"
+    data-username="foo-bar"
     href="https://gitlab.com/user"
   >
     <glavatar-stub
diff --git a/spec/frontend/design_management/components/design_notes/design_note_spec.js b/spec/frontend/design_management/components/design_notes/design_note_spec.js
index 661d1ac4087..51007483caf 100644
--- a/spec/frontend/design_management/components/design_notes/design_note_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_note_spec.js
@@ -92,7 +92,11 @@ describe('Design note component', () => {
       entityName: note.author.username,
     });
 
-    expect(findUserAvatarLink().attributes('href')).toBe(note.author.webUrl);
+    expect(findUserAvatarLink().attributes()).toMatchObject({
+      href: note.author.webUrl,
+      'data-user-id': '1',
+      'data-username': `${note.author.username}`,
+    });
   });
 
   it('should render author details', () => {
diff --git a/spec/frontend/notes/components/diff_discussion_header_spec.js b/spec/frontend/notes/components/diff_discussion_header_spec.js
index 7a60e7246f1..123d53de3f3 100644
--- a/spec/frontend/notes/components/diff_discussion_header_spec.js
+++ b/spec/frontend/notes/components/diff_discussion_header_spec.js
@@ -34,9 +34,17 @@ describe('diff_discussion_header component', () => {
     const findAvatarLink = () => wrapper.findComponent(GlAvatarLink);
     const findAvatar = () => wrapper.findComponent(GlAvatar);
 
-    it('should render user avatar and user avatar link', () => {
+    it('should render user avatar and user avatar link with popover support', () => {
       expect(findAvatar().exists()).toBe(true);
-      expect(findAvatarLink().exists()).toBe(true);
+
+      const avatarLink = findAvatarLink();
+      expect(avatarLink.exists()).toBe(true);
+      expect(avatarLink.classes()).toContain('js-user-link');
+      expect(avatarLink.attributes()).toMatchObject({
+        href: firstNoteAuthor.path,
+        'data-user-id': `${firstNoteAuthor.id}`,
+        'data-username': `${firstNoteAuthor.username}`,
+      });
     });
 
     it('renders avatar of the first note author', () => {
diff --git a/spec/frontend/notes/components/noteable_note_spec.js b/spec/frontend/notes/components/noteable_note_spec.js
index d50fb130a69..0a01e76c2bd 100644
--- a/spec/frontend/notes/components/noteable_note_spec.js
+++ b/spec/frontend/notes/components/noteable_note_spec.js
@@ -1,6 +1,6 @@
 import Vue, { nextTick } from 'vue';
 import Vuex from 'vuex';
-import { GlAvatar } from '@gitlab/ui';
+import { GlAvatarLink, GlAvatar } from '@gitlab/ui';
 import { clone } from 'lodash';
 import { mountExtended } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
@@ -218,6 +218,18 @@ describe('issue_note', () => {
       });
     });
 
+    it('should render user avatar link with popover support', () => {
+      const { author } = note;
+      const avatarLink = wrapper.findComponent(GlAvatarLink);
+
+      expect(avatarLink.classes()).toContain('js-user-link');
+      expect(avatarLink.attributes()).toMatchObject({
+        href: author.path,
+        'data-user-id': `${author.id}`,
+        'data-username': `${author.username}`,
+      });
+    });
+
     it('should render user avatar', () => {
       const { author } = note;
       const avatar = wrapper.findComponent(GlAvatar);
diff --git a/spec/frontend/work_items/components/notes/work_item_note_spec.js b/spec/frontend/work_items/components/notes/work_item_note_spec.js
index 09299f1733c..59158d2ba15 100644
--- a/spec/frontend/work_items/components/notes/work_item_note_spec.js
+++ b/spec/frontend/work_items/components/notes/work_item_note_spec.js
@@ -1,6 +1,7 @@
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
+import { GlAvatarLink } from '@gitlab/ui';
 import mockApollo from 'helpers/mock_apollo_helper';
 import waitForPromises from 'helpers/wait_for_promises';
 import { updateDraft, clearDraft } from '~/lib/utils/autosave';
@@ -270,6 +271,19 @@ describe('Work Item Note', () => {
         createComponent();
       });
 
+      it('should show avatar link with popover support', () => {
+        const avatarLink = findTimelineEntryItem().findComponent(GlAvatarLink);
+        const { author } = mockWorkItemCommentNote;
+
+        expect(avatarLink.exists()).toBe(true);
+        expect(avatarLink.classes()).toContain('js-user-link');
+        expect(avatarLink.attributes()).toMatchObject({
+          href: author.webUrl,
+          'data-user-id': '1',
+          'data-username': `${author.username}`,
+        });
+      });
+
       it('should have the note header, actions and body', () => {
         expect(findTimelineEntryItem().exists()).toBe(true);
         expect(findNoteHeader().exists()).toBe(true);