Commit c01f6736 authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'user-avatar-list-empty-text' into 'master'

Handle emptyText in user_avatar_list

See merge request gitlab-org/gitlab-ce!24436
parents f22e4a36 3420ec15
...@@ -23,6 +23,11 @@ export default { ...@@ -23,6 +23,11 @@ export default {
required: false, required: false,
default: 20, default: 20,
}, },
emptyText: {
type: String,
required: false,
default: __('None'),
},
}, },
data() { data() {
return { return {
...@@ -65,7 +70,8 @@ export default { ...@@ -65,7 +70,8 @@ export default {
</script> </script>
<template> <template>
<div> <div v-if="!items.length">{{ emptyText }}</div>
<div v-else>
<user-avatar-link <user-avatar-link
v-for="item in visibleItems" v-for="item in visibleItems"
:key="item.id" :key="item.id"
......
...@@ -6,6 +6,8 @@ import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link ...@@ -6,6 +6,8 @@ import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link
const TEST_IMAGE_SIZE = 7; const TEST_IMAGE_SIZE = 7;
const TEST_BREAKPOINT = 5; const TEST_BREAKPOINT = 5;
const TEST_EMPTY_MESSAGE = 'Lorem ipsum empty';
const DEFAULT_EMPTY_MESSAGE = 'None';
const createUser = id => ({ const createUser = id => ({
id, id,
...@@ -21,14 +23,19 @@ const createList = n => ...@@ -21,14 +23,19 @@ const createList = n =>
const localVue = createLocalVue(); const localVue = createLocalVue();
describe('UserAvatarList', () => { describe('UserAvatarList', () => {
let propsData; let props;
let wrapper; let wrapper;
const factory = options => { const factory = (options = {}) => {
const propsData = {
...props,
...options.propsData,
};
wrapper = shallowMount(localVue.extend(UserAvatarList), { wrapper = shallowMount(localVue.extend(UserAvatarList), {
...options,
localVue, localVue,
propsData, propsData,
...options,
}); });
}; };
...@@ -38,28 +45,47 @@ describe('UserAvatarList', () => { ...@@ -38,28 +45,47 @@ describe('UserAvatarList', () => {
}; };
beforeEach(() => { beforeEach(() => {
propsData = { imgSize: TEST_IMAGE_SIZE }; props = { imgSize: TEST_IMAGE_SIZE };
}); });
afterEach(() => { afterEach(() => {
wrapper.destroy(); 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', () => { describe('with no breakpoint', () => {
beforeEach(() => { beforeEach(() => {
propsData.breakpoint = 0; props.breakpoint = 0;
}); });
it('renders avatars', () => { it('renders avatars', () => {
const items = createList(20); const items = createList(20);
propsData.items = items; factory({ propsData: { items } });
factory();
const links = wrapper.findAll(UserAvatarLink); const links = wrapper.findAll(UserAvatarLink);
const linkProps = links.wrappers.map(x => x.props()); const linkProps = links.wrappers.map(x => x.props());
expect(linkProps).toEqual( expect(linkProps).toEqual(
propsData.items.map(x => items.map(x =>
jasmine.objectContaining({ jasmine.objectContaining({
linkHref: x.web_url, linkHref: x.web_url,
imgSrc: x.avatar_url, imgSrc: x.avatar_url,
...@@ -74,8 +100,8 @@ describe('UserAvatarList', () => { ...@@ -74,8 +100,8 @@ describe('UserAvatarList', () => {
describe('with breakpoint and length equal to breakpoint', () => { describe('with breakpoint and length equal to breakpoint', () => {
beforeEach(() => { beforeEach(() => {
propsData.breakpoint = TEST_BREAKPOINT; props.breakpoint = TEST_BREAKPOINT;
propsData.items = createList(TEST_BREAKPOINT); props.items = createList(TEST_BREAKPOINT);
}); });
it('renders all avatars if length is <= breakpoint', () => { it('renders all avatars if length is <= breakpoint', () => {
...@@ -83,7 +109,7 @@ describe('UserAvatarList', () => { ...@@ -83,7 +109,7 @@ describe('UserAvatarList', () => {
const links = wrapper.findAll(UserAvatarLink); const links = wrapper.findAll(UserAvatarLink);
expect(links.length).toEqual(propsData.items.length); expect(links.length).toEqual(props.items.length);
}); });
it('does not show button', () => { it('does not show button', () => {
...@@ -95,8 +121,8 @@ describe('UserAvatarList', () => { ...@@ -95,8 +121,8 @@ describe('UserAvatarList', () => {
describe('with breakpoint and length greater than breakpoint', () => { describe('with breakpoint and length greater than breakpoint', () => {
beforeEach(() => { beforeEach(() => {
propsData.breakpoint = TEST_BREAKPOINT; props.breakpoint = TEST_BREAKPOINT;
propsData.items = createList(TEST_BREAKPOINT + 1); props.items = createList(TEST_BREAKPOINT + 1);
}); });
it('renders avatars up to breakpoint', () => { it('renders avatars up to breakpoint', () => {
...@@ -116,7 +142,7 @@ describe('UserAvatarList', () => { ...@@ -116,7 +142,7 @@ describe('UserAvatarList', () => {
it('renders all avatars', () => { it('renders all avatars', () => {
const links = wrapper.findAll(UserAvatarLink); 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', () => { it('with collapse clicked, it renders avatars up to breakpoint', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment