Handle emptyText in user_avatar_list
**Why?** To reduce duplicate code, it's helpful to encapsulate this behavior here.
This commit is contained in:
parent
d9e4e3f796
commit
3420ec15dd
|
@ -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 {
|
||||||
</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
|
||||||
|
|
||||||
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 =>
|
||||||
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', () => {
|
||||||
};
|
};
|
||||||
|
|
||||||
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', () => {
|
||||||
|
|
||||||
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', () => {
|
||||||
|
|
||||||
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', () => {
|
||||||
|
|
||||||
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', () => {
|
||||||
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', () => {
|
||||||
|
|
Loading…
Reference in New Issue