Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42

4 files changed, 47 insertions, 27 deletions

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 4ecf82a4714..402e55347af 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
@@ -5,16 +5,19 @@ exports[`Design note component should match the snapshot 1`] = `
   class="design-note note-form"
   id="note_123"
 >
-  <user-avatar-link-stub
-    imgalt="foo-bar"
-    imgcssclasses=""
-    imgsize="40"
-    imgsrc=""
-    linkhref=""
-    tooltipplacement="top"
-    tooltiptext=""
-    username=""
-  />
+  <gl-avatar-link-stub
+    class="gl-float-left gl-mr-3"
+    href="https://gitlab.com/user"
+  >
+    <gl-avatar-stub
+      alt="avatar"
+      entityid="0"
+      entityname="foo-bar"
+      shape="circle"
+      size="32"
+      src="https://gitlab.com/avatar"
+    />
+  </gl-avatar-link-stub>
    
   <div
     class="gl-display-flex gl-justify-content-space-between"
@@ -22,8 +25,10 @@ exports[`Design note component should match the snapshot 1`] = `
     <div>
       <gl-link-stub
         class="js-user-link"
+        data-testid="user-link"
         data-user-id="1"
         data-username="foo-bar"
+        href="https://gitlab.com/user"
       >
         <span
           class="note-header-author-name gl-font-weight-bold"
@@ -69,8 +74,9 @@ exports[`Design note component should match the snapshot 1`] = `
   </div>
    
   <div
-    class="note-text js-note-text md"
+    class="note-text md"
     data-qa-selector="note_content"
+    data-testid="note-text"
   />
    
 </timeline-entry-item-stub>
diff --git a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
index bbf2190ad47..77935fbde11 100644
--- a/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
+++ b/spec/frontend/design_management/components/design_notes/design_discussion_spec.js
@@ -31,7 +31,6 @@ describe('Design discussions component', () => {
   const findReplyForm = () => wrapper.find(DesignReplyForm);
   const findRepliesWidget = () => wrapper.find(ToggleRepliesWidget);
   const findResolveButton = () => wrapper.find('[data-testid="resolve-button"]');
-  const findResolveIcon = () => wrapper.find('[data-testid="resolve-icon"]');
   const findResolvedMessage = () => wrapper.find('[data-testid="resolved-message"]');
   const findResolveLoadingIcon = () => wrapper.find(GlLoadingIcon);
   const findResolveCheckbox = () => wrapper.find('[data-testid="resolve-checkbox"]');
@@ -117,7 +116,7 @@ describe('Design discussions component', () => {
     });
 
     it('does not render an icon to resolve a thread', () => {
-      expect(findResolveIcon().exists()).toBe(false);
+      expect(findResolveButton().exists()).toBe(false);
     });
 
     it('does not render a checkbox in reply form', async () => {
@@ -147,7 +146,7 @@ describe('Design discussions component', () => {
     });
 
     it('renders a correct icon to resolve a thread', () => {
-      expect(findResolveIcon().props('name')).toBe('check-circle');
+      expect(findResolveButton().props('icon')).toBe('check-circle');
     });
 
     it('renders a checkbox with Resolve thread text in reply form', async () => {
@@ -203,7 +202,7 @@ describe('Design discussions component', () => {
     });
 
     it('renders a correct icon to resolve a thread', () => {
-      expect(findResolveIcon().props('name')).toBe('check-circle-filled');
+      expect(findResolveButton().props('icon')).toBe('check-circle-filled');
     });
 
     it('emit todo:toggle when discussion is resolved', async () => {
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 35fd1273270..1f84fde9f7f 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
@@ -1,10 +1,10 @@
-import { shallowMount } from '@vue/test-utils';
 import { ApolloMutation } from 'vue-apollo';
 import { nextTick } from 'vue';
+import { GlAvatar, GlAvatarLink } from '@gitlab/ui';
+import { shallowMountExtended } from 'helpers/vue_test_utils_helper';
 import DesignNote from '~/design_management/components/design_notes/design_note.vue';
 import DesignReplyForm from '~/design_management/components/design_notes/design_reply_form.vue';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
-import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue';
 
 const scrollIntoViewMock = jest.fn();
 const note = {
@@ -12,6 +12,8 @@ const note = {
   author: {
     id: 'gid://gitlab/User/1',
     username: 'foo-bar',
+    avatarUrl: 'https://gitlab.com/avatar',
+    webUrl: 'https://gitlab.com/user',
   },
   body: 'test',
   userPermissions: {
@@ -30,14 +32,15 @@ const mutate = jest.fn().mockResolvedValue({ data: { updateNote: {} } });
 describe('Design note component', () => {
   let wrapper;
 
-  const findUserAvatar = () => wrapper.find(UserAvatarLink);
-  const findUserLink = () => wrapper.find('.js-user-link');
-  const findReplyForm = () => wrapper.find(DesignReplyForm);
-  const findEditButton = () => wrapper.find('.js-note-edit');
-  const findNoteContent = () => wrapper.find('.js-note-text');
+  const findUserAvatar = () => wrapper.findComponent(GlAvatar);
+  const findUserAvatarLink = () => wrapper.findComponent(GlAvatarLink);
+  const findUserLink = () => wrapper.findByTestId('user-link');
+  const findReplyForm = () => wrapper.findComponent(DesignReplyForm);
+  const findEditButton = () => wrapper.findByTestId('note-edit');
+  const findNoteContent = () => wrapper.findByTestId('note-text');
 
   function createComponent(props = {}, data = { isEditing: false }) {
-    wrapper = shallowMount(DesignNote, {
+    wrapper = shallowMountExtended(DesignNote, {
       propsData: {
         note: {},
         ...props,
@@ -71,12 +74,24 @@ describe('Design note component', () => {
     expect(wrapper.element).toMatchSnapshot();
   });
 
-  it('should render an author', () => {
+  it('should render avatar with correct props', () => {
+    createComponent({
+      note,
+    });
+
+    expect(findUserAvatar().props()).toMatchObject({
+      src: note.author.avatarUrl,
+      entityName: note.author.username,
+    });
+
+    expect(findUserAvatarLink().attributes('href')).toBe(note.author.webUrl);
+  });
+
+  it('should render author details', () => {
     createComponent({
       note,
     });
 
-    expect(findUserAvatar().exists()).toBe(true);
     expect(findUserLink().exists()).toBe(true);
   });
 
@@ -107,7 +122,7 @@ describe('Design note component', () => {
         },
       });
 
-      findEditButton().trigger('click');
+      findEditButton().vm.$emit('click');
 
       await nextTick();
       expect(findReplyForm().exists()).toBe(true);
diff --git a/spec/frontend/design_management/pages/index_spec.js b/spec/frontend/design_management/pages/index_spec.js
index a240a41959f..87531e8b645 100644
--- a/spec/frontend/design_management/pages/index_spec.js
+++ b/spec/frontend/design_management/pages/index_spec.js
@@ -183,7 +183,7 @@ describe('Design management index page', () => {
       [moveDesignMutation, moveDesignHandler],
     ];
 
-    fakeApollo = createMockApollo(requestHandlers);
+    fakeApollo = createMockApollo(requestHandlers, {}, { addTypename: true });
     wrapper = shallowMount(Index, {
       apolloProvider: fakeApollo,
       router,