diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-28 18:06:57 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-28 18:06:57 +0300 |
commit | 7cdd70dcec27402e89e65451b4b1feb75b5eb267 (patch) | |
tree | 1691c8e1afd469fa426ecf5bc127de8df16d4855 /spec/frontend/vue_shared | |
parent | 79348faced5e7e62103ad27f6a6594dfdca463e2 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared')
-rw-r--r-- | spec/frontend/vue_shared/components/clipboard_button_spec.js | 60 | ||||
-rw-r--r-- | spec/frontend/vue_shared/components/user_avatar/user_avatar_link_spec.js | 113 |
2 files changed, 173 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/clipboard_button_spec.js b/spec/frontend/vue_shared/components/clipboard_button_spec.js new file mode 100644 index 00000000000..4fb6924daba --- /dev/null +++ b/spec/frontend/vue_shared/components/clipboard_button_spec.js @@ -0,0 +1,60 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlButton } from '@gitlab/ui'; +import ClipboardButton from '~/vue_shared/components/clipboard_button.vue'; +import Icon from '~/vue_shared/components/icon.vue'; + +describe('clipboard button', () => { + let wrapper; + + const createWrapper = propsData => { + wrapper = shallowMount(ClipboardButton, { + propsData, + sync: false, + attachToDocument: true, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + describe('without gfm', () => { + beforeEach(() => { + createWrapper({ + text: 'copy me', + title: 'Copy this value', + cssClass: 'btn-danger', + }); + }); + + it('renders a button for clipboard', () => { + expect(wrapper.find(GlButton).exists()).toBe(true); + expect(wrapper.attributes('data-clipboard-text')).toBe('copy me'); + expect(wrapper.find(Icon).props('name')).toBe('duplicate'); + }); + + it('should have a tooltip with default values', () => { + expect(wrapper.attributes('data-original-title')).toBe('Copy this value'); + }); + + it('should render provided classname', () => { + expect(wrapper.classes()).toContain('btn-danger'); + }); + }); + + describe('with gfm', () => { + it('sets data-clipboard-text with gfm', () => { + createWrapper({ + text: 'copy me', + gfm: '`path/to/file`', + title: 'Copy this value', + cssClass: 'btn-danger', + }); + + expect(wrapper.attributes('data-clipboard-text')).toBe( + '{"text":"copy me","gfm":"`path/to/file`"}', + ); + }); + }); +}); 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, + ); + }); + }); +}); |