Fix missing avatar in MR widget

Fixes a bug where default avatar image is not used
when avatar URL is missing for any user.

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_author.vue

@@ -27,7 +27,7 @@ export default {
       return this.author.webUrl || this.author.web_url;
     },
     avatarUrl() {
-      return this.author.avatarUrl || this.author.avatar_url;
+      return this.author.avatarUrl || this.author.avatar_url || gl.mrWidgetData.defaultAvatarUrl;
     },
   },
 };
@@ -40,6 +40,6 @@ export default {
     class="author-link inline"
   >
     <img :src="avatarUrl" class="avatar avatar-inline s16" />
-    <span v-if="showAuthorName" class="author"> {{ author.name }} </span>
+    <span v-if="showAuthorName" class="author">{{ author.name }}</span>
   </a>
 </template>

app/assets/javascripts/vue_merge_request_widget/index.js

@@ -8,6 +8,7 @@ export default () => {
   if (gl.mrWidget) return;
 
   gl.mrWidgetData.gitlabLogo = gon.gitlab_logo;
+  gl.mrWidgetData.defaultAvatarUrl = gon.default_avatar_url;
 
   const vm = new Vue(MrWidgetOptions);
 

changelogs/unreleased/225295-fix-missing-avatar.yml

+---
+title: Fix missing avatar in MR widget
+merge_request: 36034
+author:
+type: fixed

spec/frontend/vue_mr_widget/components/mr_widget_author_spec.js

-import Vue from 'vue';
-import mountComponent from 'helpers/vue_mount_component_helper';
+import { shallowMount } from '@vue/test-utils';
 import MrWidgetAuthor from '~/vue_merge_request_widget/components/mr_widget_author.vue';
 
+window.gl = window.gl || {};
+
 describe('MrWidgetAuthor', () => {
-  let vm;
+  let wrapper;
+  let oldWindowGl;
+  const mockAuthor = {
+    name: 'Administrator',
+    username: 'root',
+    webUrl: 'http://localhost:3000/root',
+    avatarUrl: 'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+  };
 
   beforeEach(() => {
-    const Component = Vue.extend(MrWidgetAuthor);
-
-    vm = mountComponent(Component, {
-      author: {
-        name: 'Administrator',
-        username: 'root',
-        webUrl: 'http://localhost:3000/root',
-        avatarUrl:
-          'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
+    oldWindowGl = window.gl;
+    window.gl = {
+      mrWidgetData: {
+        defaultAvatarUrl: 'no_avatar.png',
+      },
+    };
+    wrapper = shallowMount(MrWidgetAuthor, {
+      propsData: {
+        author: mockAuthor,
       },
     });
   });
 
   afterEach(() => {
-    vm.$destroy();
+    wrapper.destroy();
+    window.gl = oldWindowGl;
   });
 
   it('renders link with the author web url', () => {
-    expect(vm.$el.getAttribute('href')).toEqual('http://localhost:3000/root');
+    expect(wrapper.attributes('href')).toBe('http://localhost:3000/root');
   });
 
   it('renders image with avatar url', () => {
-    expect(vm.$el.querySelector('img').getAttribute('src')).toEqual(
+    expect(wrapper.find('img').attributes('src')).toBe(
       'http://www.gravatar.com/avatar/e64c7d89f26bd1972efa854d13d7dd61?s=80&d=identicon',
     );
   });
 
+  it('renders image with default avatar url when no avatarUrl is present in author', async () => {
+    wrapper.setProps({
+      author: {
+        ...mockAuthor,
+        avatarUrl: null,
+      },
+    });
+
+    await wrapper.vm.$nextTick();
+
+    expect(wrapper.find('img').attributes('src')).toBe('no_avatar.png');
+  });
+
   it('renders author name', () => {
-    expect(vm.$el.textContent.trim()).toEqual('Administrator');
+    expect(wrapper.find('span').text()).toBe('Administrator');
   });
 });

spec/frontend/vue_mr_widget/components/states/mr_widget_auto_merge_enabled_spec.js

@@ -8,6 +8,7 @@ import { MWPS_MERGE_STRATEGY } from '~/vue_merge_request_widget/constants';
 
 describe('MRWidgetAutoMergeEnabled', () => {
   let vm;
+  let oldWindowGl;
   const targetBranchPath = '/foo/bar';
   const targetBranch = 'foo';
   const sha = '1EA2EZ34';
@@ -16,6 +17,13 @@ describe('MRWidgetAutoMergeEnabled', () => {
     const Component = Vue.extend(autoMergeEnabledComponent);
     jest.spyOn(eventHub, '$emit').mockImplementation(() => {});
 
+    oldWindowGl = window.gl;
+    window.gl = {
+      mrWidgetData: {
+        defaultAvatarUrl: 'no_avatar.png',
+      },
+    };
+
     vm = mountComponent(Component, {
       mr: {
         shouldRemoveSourceBranch: false,
@@ -35,6 +43,7 @@ describe('MRWidgetAutoMergeEnabled', () => {
 
   afterEach(() => {
     vm.$destroy();
+    window.gl = oldWindowGl;
   });
 
   describe('computed', () => {