Add custom alt tag to project_avatar

Sometimes, we'll want to have a custom (e.g. none) alt tag
for project avatars. This commit extends project_avatar.vue
so that developers can override the default alt if they wish.

app/assets/javascripts/vue_shared/components/project_avatar.stories.js

@@ -8,7 +8,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   components: { ProjectAvatar },
   props: Object.keys(argTypes),
-  template: '<project-avatar v-bind="$props" v-on="$props" />',
+  template: '<project-avatar v-bind="$props" />',
 });
 
 export const Default = Template.bind({});
@@ -22,3 +22,9 @@ export const FallbackAvatar = Template.bind({});
 FallbackAvatar.args = {
   projectName: 'GitLab',
 };
+
+export const EmptyAltTag = Template.bind({});
+EmptyAltTag.args = {
+  ...Default.args,
+  alt: '',
+};

app/assets/javascripts/vue_shared/components/project_avatar.vue

@@ -13,13 +13,23 @@ export default {
     projectAvatarUrl: {
       type: String,
       required: false,
-      default: undefined,
+      default: '',
     },
     size: {
       type: Number,
       default: 32,
       required: false,
     },
+    alt: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+  },
+  computed: {
+    avatarAlt() {
+      return this.alt ?? this.projectName;
+    },
   },
 };
 </script>
@@ -29,7 +39,7 @@ export default {
     shape="rect"
     :entity-name="projectName"
     :src="projectAvatarUrl"
-    :alt="projectName"
+    :alt="avatarAlt"
     :size="size"
   />
 </template>

spec/frontend/vue_shared/components/project_avatar_spec.js

@@ -11,8 +11,8 @@ describe('ProjectAvatar', () => {
 
   const findGlAvatar = () => wrapper.findComponent(GlAvatar);
 
-  const createComponent = ({ props } = {}) => {
-    wrapper = shallowMount(ProjectAvatar, { propsData: { ...defaultProps, ...props } });
+  const createComponent = ({ props, attrs } = {}) => {
+    wrapper = shallowMount(ProjectAvatar, { propsData: { ...defaultProps, ...props }, attrs });
   };
 
   afterEach(() => {
@@ -51,4 +51,17 @@ describe('ProjectAvatar', () => {
       expect(avatar.props('src')).toBe(mockProjectAvatarUrl);
     });
   });
+
+  describe.each`
+    alt
+    ${''}
+    ${'custom-alt'}
+  `('when `alt` prop is "$alt"', ({ alt }) => {
+    it('renders GlAvatar with specified `alt` attribute', () => {
+      createComponent({ props: { alt } });
+
+      const avatar = findGlAvatar();
+      expect(avatar.props('alt')).toBe(alt);
+    });
+  });
 });