diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-28 15:06:57 +0000 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-28 15:06:57 +0000 |
commit | 7cdd70dcec27402e89e65451b4b1feb75b5eb267 (patch) | |
tree | 1691c8e1afd469fa426ecf5bc127de8df16d4855 /spec/frontend/vue_shared/components/user_avatar | |
parent | 79348faced5e7e62103ad27f6a6594dfdca463e2 (diff) | |
download | gitlab-ce-7cdd70dcec27402e89e65451b4b1feb75b5eb267.tar.gz |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/user_avatar')
-rw-r--r-- | spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js | 113 |
1 files changed, 113 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js new file mode 100644 index 00000000000..bdd18110629 --- /dev/null +++ b/spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js @@ -0,0 +1,113 @@ +import _ from 'underscore'; +import { trimText } from 'helpers/text_helper'; +import { shallowMount } from '@vue/test-utils'; +import { GlLink } from '@gitlab/ui'; +import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; +import UserAvatarImage from '~/vue_shared/components/user_avatar/user_avatar_image.vue'; +import { TEST_HOST } from 'spec/test_constants'; + +describe('User Avatar Link Component', () => { + let wrapper; + + const defaultProps = { + linkHref: `${TEST_HOST}/myavatarurl.com`, + imgSize: 99, + imgSrc: `${TEST_HOST}/myavatarurl.com`, + imgAlt: 'mydisplayname', + imgCssClasses: 'myextraavatarclass', + tooltipText: 'tooltip text', + tooltipPlacement: 'bottom', + username: 'username', + }; + + const createWrapper = props => { + wrapper = shallowMount(UserAvatarLink, { + propsData: { + ...defaultProps, + ...props, + }, + sync: false, + attachToDocument: true, + }); + }; + + beforeEach(() => { + createWrapper(); + }); + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + it('should return a defined Vue component', () => { + expect(wrapper.isVueInstance()).toBe(true); + }); + + it('should have user-avatar-image registered as child component', () => { + expect(wrapper.vm.$options.components.userAvatarImage).toBeDefined(); + }); + + it('user-avatar-link should have user-avatar-image as child component', () => { + expect(wrapper.find(UserAvatarImage).exists()).toBe(true); + }); + + it('should render GlLink as a child element', () => { + const link = wrapper.find(GlLink); + + expect(link.exists()).toBe(true); + expect(link.attributes('href')).toBe(defaultProps.linkHref); + }); + + it('should return necessary props as defined', () => { + _.each(defaultProps, (val, key) => { + expect(wrapper.vm[key]).toBeDefined(); + }); + }); + + describe('no username', () => { + beforeEach(() => { + createWrapper({ + username: '', + }); + }); + + it('should only render image tag in link', () => { + const childElements = wrapper.vm.$el.childNodes; + + expect(wrapper.find('img')).not.toBe('null'); + + // Vue will render the hidden component as <!----> + expect(childElements[1].tagName).toBeUndefined(); + }); + + it('should render avatar image tooltip', () => { + expect(wrapper.vm.shouldShowUsername).toBe(false); + expect(wrapper.vm.avatarTooltipText).toEqual(defaultProps.tooltipText); + }); + }); + + describe('username', () => { + it('should not render avatar image tooltip', () => { + expect(wrapper.find('.js-user-avatar-image-toolip').exists()).toBe(false); + }); + + it('should render username prop in <span>', () => { + expect(trimText(wrapper.find('.js-user-avatar-link-username').text())).toEqual( + defaultProps.username, + ); + }); + + it('should render text tooltip for <span>', () => { + expect( + wrapper.find('.js-user-avatar-link-username').attributes('data-original-title'), + ).toEqual(defaultProps.tooltipText); + }); + + it('should render text tooltip placement for <span>', () => { + expect(wrapper.find('.js-user-avatar-link-username').attributes('tooltip-placement')).toBe( + defaultProps.tooltipPlacement, + ); + }); + }); +}); |