116 lines
3.3 KiB
JavaScript
116 lines
3.3 KiB
JavaScript
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));
|
|
});
|
|
});
|
|
});
|