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 {
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"
......
......@@ -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', () => {
......
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