From 3420ec15dd929ccf28efe8262b9a625a7cc080ed Mon Sep 17 00:00:00 2001
From: Paul Slaughter <pslaughter@gitlab.com>
Date: Tue, 15 Jan 2019 11:59:31 -0600
Subject: Handle emptyText in user_avatar_list

**Why?**
To reduce duplicate code, it's helpful to encapsulate this behavior
here.
---
 .../components/user_avatar/user_avatar_list.vue    |  8 +++-
 .../user_avatar/user_avatar_list_spec.js           | 54 ++++++++++++++++------
 2 files changed, 47 insertions(+), 15 deletions(-)

diff --git a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
index 7361867edc5..8eaf8386b99 100644
--- a/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
+++ b/app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue
@@ -23,6 +23,11 @@ export default {
       required: false,
       default: 20,
     },
+    emptyText: {
+      type: String,
+      required: false,
+      default: __('None'),
+    },
   },
   data() {
     return {
@@ -65,7 +70,8 @@ export default {
 </script>
 
 <template>
-  <div>
+  <div v-if="!items.length">{{ emptyText }}</div>
+  <div v-else>
     <user-avatar-link
       v-for="item in visibleItems"
       :key="item.id"
diff --git a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_list_spec.js b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_list_spec.js
index 64aa7e29718..96bc3b0cc17 100644
--- a/spec/javascripts/vue_shared/components/user_avatar/user_avatar_list_spec.js
+++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_list_spec.js
@@ -6,6 +6,8 @@ import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link
 
 const TEST_IMAGE_SIZE = 7;
 const TEST_BREAKPOINT = 5;
+const TEST_EMPTY_MESSAGE = 'Lorem ipsum empty';
+const DEFAULT_EMPTY_MESSAGE = 'None';
 
 const createUser = id => ({
   id,
@@ -21,14 +23,19 @@ const createList = n =>
 const localVue = createLocalVue();
 
 describe('UserAvatarList', () => {
-  let propsData;
+  let props;
   let wrapper;
 
-  const factory = options => {
+  const factory = (options = {}) => {
+    const propsData = {
+      ...props,
+      ...options.propsData,
+    };
+
     wrapper = shallowMount(localVue.extend(UserAvatarList), {
+      ...options,
       localVue,
       propsData,
-      ...options,
     });
   };
 
@@ -38,28 +45,47 @@ describe('UserAvatarList', () => {
   };
 
   beforeEach(() => {
-    propsData = { imgSize: TEST_IMAGE_SIZE };
+    props = { imgSize: TEST_IMAGE_SIZE };
   });
 
   afterEach(() => {
     wrapper.destroy();
   });
 
+  describe('empty text', () => {
+    it('shows when items are empty', () => {
+      factory({ propsData: { items: [] } });
+
+      expect(wrapper.text()).toContain(DEFAULT_EMPTY_MESSAGE);
+    });
+
+    it('does not show when items are not empty', () => {
+      factory({ propsData: { items: createList(1) } });
+
+      expect(wrapper.text()).not.toContain(DEFAULT_EMPTY_MESSAGE);
+    });
+
+    it('can be set in props', () => {
+      factory({ propsData: { items: [], emptyText: TEST_EMPTY_MESSAGE } });
+
+      expect(wrapper.text()).toContain(TEST_EMPTY_MESSAGE);
+    });
+  });
+
   describe('with no breakpoint', () => {
     beforeEach(() => {
-      propsData.breakpoint = 0;
+      props.breakpoint = 0;
     });
 
     it('renders avatars', () => {
       const items = createList(20);
-      propsData.items = items;
-      factory();
+      factory({ propsData: { items } });
 
       const links = wrapper.findAll(UserAvatarLink);
       const linkProps = links.wrappers.map(x => x.props());
 
       expect(linkProps).toEqual(
-        propsData.items.map(x =>
+        items.map(x =>
           jasmine.objectContaining({
             linkHref: x.web_url,
             imgSrc: x.avatar_url,
@@ -74,8 +100,8 @@ describe('UserAvatarList', () => {
 
   describe('with breakpoint and length equal to breakpoint', () => {
     beforeEach(() => {
-      propsData.breakpoint = TEST_BREAKPOINT;
-      propsData.items = createList(TEST_BREAKPOINT);
+      props.breakpoint = TEST_BREAKPOINT;
+      props.items = createList(TEST_BREAKPOINT);
     });
 
     it('renders all avatars if length is <= breakpoint', () => {
@@ -83,7 +109,7 @@ describe('UserAvatarList', () => {
 
       const links = wrapper.findAll(UserAvatarLink);
 
-      expect(links.length).toEqual(propsData.items.length);
+      expect(links.length).toEqual(props.items.length);
     });
 
     it('does not show button', () => {
@@ -95,8 +121,8 @@ describe('UserAvatarList', () => {
 
   describe('with breakpoint and length greater than breakpoint', () => {
     beforeEach(() => {
-      propsData.breakpoint = TEST_BREAKPOINT;
-      propsData.items = createList(TEST_BREAKPOINT + 1);
+      props.breakpoint = TEST_BREAKPOINT;
+      props.items = createList(TEST_BREAKPOINT + 1);
     });
 
     it('renders avatars up to breakpoint', () => {
@@ -116,7 +142,7 @@ describe('UserAvatarList', () => {
       it('renders all avatars', () => {
         const links = wrapper.findAll(UserAvatarLink);
 
-        expect(links.length).toEqual(propsData.items.length);
+        expect(links.length).toEqual(props.items.length);
       });
 
       it('with collapse clicked, it renders avatars up to breakpoint', () => {
-- 
cgit v1.2.1