diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-15 15:09:30 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2020-09-15 15:09:30 +0300 |
commit | 33212c8ff1f99cdb896e8fc6f6450882287e0de5 (patch) | |
tree | b29afde4eaf9623cda57ef6520db363d2db8492e /spec/frontend/vue_shared/components/registry | |
parent | 03c73563048c1f808a4a3fb302f0dcbba37f5f76 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/vue_shared/components/registry')
-rw-r--r-- | spec/frontend/vue_shared/components/registry/metadata_item_spec.js | 101 |
1 files changed, 101 insertions, 0 deletions
diff --git a/spec/frontend/vue_shared/components/registry/metadata_item_spec.js b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js new file mode 100644 index 00000000000..ff968ff1831 --- /dev/null +++ b/spec/frontend/vue_shared/components/registry/metadata_item_spec.js @@ -0,0 +1,101 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon, GlLink } from '@gitlab/ui'; +import component from '~/vue_shared/components/registry/metadata_item.vue'; +import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue'; + +describe('Metadata Item', () => { + let wrapper; + const defaultProps = { + text: 'foo', + }; + + const mountComponent = (propsData = defaultProps) => { + wrapper = shallowMount(component, { + propsData, + }); + }; + + afterEach(() => { + wrapper.destroy(); + wrapper = null; + }); + + const findIcon = () => wrapper.find(GlIcon); + const findLink = (w = wrapper) => w.find(GlLink); + const findText = () => wrapper.find('[data-testid="metadata-item-text"]'); + const findTooltipOnTruncate = (w = wrapper) => w.find(TooltipOnTruncate); + + describe.each(['xs', 's', 'm', 'l', 'xl'])('size class', size => { + const className = `mw-${size}`; + + it(`${size} is assigned correctly to text`, () => { + mountComponent({ ...defaultProps, size }); + + expect(findText().classes()).toContain(className); + }); + + it(`${size} is assigned correctly to link`, () => { + mountComponent({ ...defaultProps, link: 'foo', size }); + + expect(findTooltipOnTruncate().classes()).toContain(className); + }); + }); + + describe('text', () => { + it('display a proper text', () => { + mountComponent(); + + expect(findText().text()).toBe(defaultProps.text); + }); + + it('uses tooltip_on_truncate', () => { + mountComponent(); + + const tooltip = findTooltipOnTruncate(findText()); + expect(tooltip.exists()).toBe(true); + expect(tooltip.attributes('title')).toBe(defaultProps.text); + }); + }); + + describe('link', () => { + it('if a link prop is passed shows a link and hides the text', () => { + mountComponent({ ...defaultProps, link: 'bar' }); + + expect(findLink().exists()).toBe(true); + expect(findText().exists()).toBe(false); + + expect(findLink().attributes('href')).toBe('bar'); + }); + + it('uses tooltip_on_truncate', () => { + mountComponent({ ...defaultProps, link: 'bar' }); + + const tooltip = findTooltipOnTruncate(); + expect(tooltip.exists()).toBe(true); + expect(tooltip.attributes('title')).toBe(defaultProps.text); + expect(findLink(tooltip).exists()).toBe(true); + }); + + it('hides the link and shows the test if a link prop is not passed', () => { + mountComponent(); + + expect(findText().exists()).toBe(true); + expect(findLink().exists()).toBe(false); + }); + }); + + describe('icon', () => { + it('if a icon prop is passed shows a icon', () => { + mountComponent({ ...defaultProps, icon: 'pencil' }); + + expect(findIcon().exists()).toBe(true); + expect(findIcon().props('name')).toBe('pencil'); + }); + + it('if a icon prop is not passed hides the icon', () => { + mountComponent(); + + expect(findIcon().exists()).toBe(false); + }); + }); +}); |