diff options
Diffstat (limited to 'spec/frontend/packages/shared/components/package_tags_spec.js')
-rw-r--r-- | spec/frontend/packages/shared/components/package_tags_spec.js | 107 |
1 files changed, 0 insertions, 107 deletions
diff --git a/spec/frontend/packages/shared/components/package_tags_spec.js b/spec/frontend/packages/shared/components/package_tags_spec.js deleted file mode 100644 index d26e4e76b87..00000000000 --- a/spec/frontend/packages/shared/components/package_tags_spec.js +++ /dev/null @@ -1,107 +0,0 @@ -import { mount } from '@vue/test-utils'; -import PackageTags from '~/packages/shared/components/package_tags.vue'; -import { mockTags } from '../../mock_data'; - -describe('PackageTags', () => { - let wrapper; - - function createComponent(tags = [], props = {}) { - const propsData = { - tags, - ...props, - }; - - wrapper = mount(PackageTags, { - propsData, - }); - } - - const tagLabel = () => wrapper.find('[data-testid="tagLabel"]'); - const tagBadges = () => wrapper.findAll('[data-testid="tagBadge"]'); - const moreBadge = () => wrapper.find('[data-testid="moreBadge"]'); - - afterEach(() => { - if (wrapper) wrapper.destroy(); - }); - - describe('tag label', () => { - it('shows the tag label by default', () => { - createComponent(); - - expect(tagLabel().exists()).toBe(true); - }); - - it('hides when hideLabel prop is set to true', () => { - createComponent(mockTags, { hideLabel: true }); - - expect(tagLabel().exists()).toBe(false); - }); - }); - - it('renders the correct number of tags', () => { - createComponent(mockTags.slice(0, 2)); - - expect(tagBadges()).toHaveLength(2); - expect(moreBadge().exists()).toBe(false); - }); - - it('does not render more than the configured tagDisplayLimit', () => { - createComponent(mockTags); - - expect(tagBadges()).toHaveLength(2); - }); - - it('renders the more tags badge if there are more than the configured limit', () => { - createComponent(mockTags); - - expect(tagBadges()).toHaveLength(2); - expect(moreBadge().exists()).toBe(true); - expect(moreBadge().text()).toContain('2'); - }); - - it('renders the configured tagDisplayLimit when set in props', () => { - createComponent(mockTags, { tagDisplayLimit: 1 }); - - expect(tagBadges()).toHaveLength(1); - expect(moreBadge().exists()).toBe(true); - expect(moreBadge().text()).toContain('3'); - }); - - describe('tagBadgeStyle', () => { - const defaultStyle = ['badge', 'badge-info', 'gl-display-none']; - - it('shows tag badge when there is only one', () => { - createComponent([mockTags[0]]); - - const expectedStyle = [...defaultStyle, 'gl-display-flex', 'gl-ml-3']; - - expect(tagBadges().at(0).classes()).toEqual(expect.arrayContaining(expectedStyle)); - }); - - it('shows tag badge for medium or heigher resolutions', () => { - createComponent(mockTags); - - const expectedStyle = [...defaultStyle, 'd-md-flex']; - - expect(tagBadges().at(1).classes()).toEqual(expect.arrayContaining(expectedStyle)); - }); - - it('correctly prepends left and appends right when there is more than one tag', () => { - createComponent(mockTags, { - tagDisplayLimit: 4, - }); - - const expectedStyleWithoutAppend = [...defaultStyle, 'd-md-flex']; - const expectedStyleWithAppend = [...expectedStyleWithoutAppend, 'gl-mr-2']; - - const allBadges = tagBadges(); - - expect(allBadges.at(0).classes()).toEqual( - expect.arrayContaining([...expectedStyleWithAppend, 'gl-ml-3']), - ); - expect(allBadges.at(1).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend)); - expect(allBadges.at(2).classes()).toEqual(expect.arrayContaining(expectedStyleWithAppend)); - expect(allBadges.at(3).classes()).toEqual(expect.arrayContaining(expectedStyleWithoutAppend)); - }); - }); -}); |