diff options
author | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-07 12:05:18 +0300 |
---|---|---|
committer | Kushal Pandya <kushalspandya@gmail.com> | 2019-01-07 12:05:18 +0300 |
commit | 77de0063195142f75b35bae6a9921ce5e39cb3dd (patch) | |
tree | 338fee6eac9db670087022d621538644ca8a529c /spec/javascripts | |
parent | 32f80629bdbd4d2fcd43b6220da373394ffd95b6 (diff) | |
parent | ed7f44aabab081fb1544d7160dd732645bd10261 (diff) |
Merge branch 'ee1979-user-avatar-list-component' into 'master'
Create shared user-avatar-list component
See merge request gitlab-org/gitlab-ce!24139
Diffstat (limited to 'spec/javascripts')
-rw-r--r-- | spec/javascripts/vue_shared/components/user_avatar/user_avatar_list_spec.js | 130 |
1 files changed, 130 insertions, 0 deletions
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 new file mode 100644 index 00000000000..64aa7e29718 --- /dev/null +++ b/spec/javascripts/vue_shared/components/user_avatar/user_avatar_list_spec.js @@ -0,0 +1,130 @@ +import { shallowMount, createLocalVue } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import { TEST_HOST } from 'spec/test_constants'; +import UserAvatarList from '~/vue_shared/components/user_avatar/user_avatar_list.vue'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; + +const TEST_IMAGE_SIZE = 7; +const TEST_BREAKPOINT = 5; + +const createUser = id => ({ + id, + name: 'Lorem', + web_url: `${TEST_HOST}/${id}`, + avatar_url: `${TEST_HOST}/${id}/avatar`, +}); +const createList = n => + Array(n) + .fill(1) + .map((x, id) => createUser(id)); + +const localVue = createLocalVue(); + +describe('UserAvatarList', () => { + let propsData; + let wrapper; + + const factory = options => { + wrapper = shallowMount(localVue.extend(UserAvatarList), { + localVue, + propsData, + ...options, + }); + }; + + const clickButton = () => { + const button = wrapper.find(GlButton); + button.vm.$emit('click'); + }; + + beforeEach(() => { + propsData = { imgSize: TEST_IMAGE_SIZE }; + }); + + afterEach(() => { + wrapper.destroy(); + }); + + describe('with no breakpoint', () => { + beforeEach(() => { + propsData.breakpoint = 0; + }); + + it('renders avatars', () => { + const items = createList(20); + propsData.items = items; + factory(); + + const links = wrapper.findAll(UserAvatarLink); + const linkProps = links.wrappers.map(x => x.props()); + + expect(linkProps).toEqual( + propsData.items.map(x => + jasmine.objectContaining({ + linkHref: x.web_url, + imgSrc: x.avatar_url, + imgAlt: x.name, + tooltipText: x.name, + imgSize: TEST_IMAGE_SIZE, + }), + ), + ); + }); + }); + + describe('with breakpoint and length equal to breakpoint', () => { + beforeEach(() => { + propsData.breakpoint = TEST_BREAKPOINT; + propsData.items = createList(TEST_BREAKPOINT); + }); + + it('renders all avatars if length is <= breakpoint', () => { + factory(); + + const links = wrapper.findAll(UserAvatarLink); + + expect(links.length).toEqual(propsData.items.length); + }); + + it('does not show button', () => { + factory(); + + expect(wrapper.find(GlButton).exists()).toBe(false); + }); + }); + + describe('with breakpoint and length greater than breakpoint', () => { + beforeEach(() => { + propsData.breakpoint = TEST_BREAKPOINT; + propsData.items = createList(TEST_BREAKPOINT + 1); + }); + + it('renders avatars up to breakpoint', () => { + factory(); + + const links = wrapper.findAll(UserAvatarLink); + + expect(links.length).toEqual(TEST_BREAKPOINT); + }); + + describe('with expand clicked', () => { + beforeEach(() => { + factory(); + clickButton(); + }); + + it('renders all avatars', () => { + const links = wrapper.findAll(UserAvatarLink); + + expect(links.length).toEqual(propsData.items.length); + }); + + it('with collapse clicked, it renders avatars up to breakpoint', () => { + clickButton(); + const links = wrapper.findAll(UserAvatarLink); + + expect(links.length).toEqual(TEST_BREAKPOINT); + }); + }); + }); +}); |