diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-18 06:48:24 +0000 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-18 06:48:24 +0000 |
commit | c01f673610804005988c3fbb0082886157cedc09 (patch) | |
tree | b148a996e7173eec8a7ca53a656ab7537b371afe | |
parent | f22e4a368b0eca538b384a73597f2bd5578a82f2 (diff) | |
parent | 3420ec15dd929ccf28efe8262b9a625a7cc080ed (diff) | |
download | gitlab-ce-c01f673610804005988c3fbb0082886157cedc09.tar.gz |
Merge branch 'user-avatar-list-empty-text' into 'master'
Handle emptyText in user_avatar_list
See merge request gitlab-org/gitlab-ce!24436
-rw-r--r-- | app/assets/javascripts/vue_shared/components/user_avatar/user_avatar_list.vue | 8 | ||||
-rw-r--r-- | spec/javascripts/vue_shared/components/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', () => { |