159 lines
4.7 KiB
JavaScript
159 lines
4.7 KiB
JavaScript
import { GlBadge } from '@gitlab/ui';
|
|
import { shallowMount } from '@vue/test-utils';
|
|
import CiBadgeLink from '~/vue_shared/components/ci_badge_link.vue';
|
|
import CiIcon from '~/vue_shared/components/ci_icon.vue';
|
|
|
|
jest.mock('~/lib/utils/url_utility', () => ({
|
|
visitUrl: jest.fn(),
|
|
}));
|
|
|
|
describe('CI Badge Link Component', () => {
|
|
let wrapper;
|
|
|
|
const statuses = {
|
|
canceled: {
|
|
text: 'canceled',
|
|
label: 'canceled',
|
|
group: 'canceled',
|
|
icon: 'status_canceled',
|
|
details_path: 'status/canceled',
|
|
},
|
|
created: {
|
|
text: 'created',
|
|
label: 'created',
|
|
group: 'created',
|
|
icon: 'status_created',
|
|
details_path: 'status/created',
|
|
},
|
|
failed: {
|
|
text: 'failed',
|
|
label: 'failed',
|
|
group: 'failed',
|
|
icon: 'status_failed',
|
|
details_path: 'status/failed',
|
|
},
|
|
manual: {
|
|
text: 'manual',
|
|
label: 'manual action',
|
|
group: 'manual',
|
|
icon: 'status_manual',
|
|
details_path: 'status/manual',
|
|
},
|
|
pending: {
|
|
text: 'pending',
|
|
label: 'pending',
|
|
group: 'pending',
|
|
icon: 'status_pending',
|
|
details_path: 'status/pending',
|
|
},
|
|
preparing: {
|
|
text: 'preparing',
|
|
label: 'preparing',
|
|
group: 'preparing',
|
|
icon: 'status_preparing',
|
|
details_path: 'status/preparing',
|
|
},
|
|
running: {
|
|
text: 'running',
|
|
label: 'running',
|
|
group: 'running',
|
|
icon: 'status_running',
|
|
details_path: 'status/running',
|
|
},
|
|
scheduled: {
|
|
text: 'scheduled',
|
|
label: 'scheduled',
|
|
group: 'scheduled',
|
|
icon: 'status_scheduled',
|
|
details_path: 'status/scheduled',
|
|
},
|
|
skipped: {
|
|
text: 'skipped',
|
|
label: 'skipped',
|
|
group: 'skipped',
|
|
icon: 'status_skipped',
|
|
details_path: 'status/skipped',
|
|
},
|
|
success_warining: {
|
|
text: 'warning',
|
|
label: 'passed with warnings',
|
|
group: 'success-with-warnings',
|
|
icon: 'status_warning',
|
|
details_path: 'status/warning',
|
|
},
|
|
success: {
|
|
text: 'passed',
|
|
label: 'passed',
|
|
group: 'passed',
|
|
icon: 'status_success',
|
|
details_path: 'status/passed',
|
|
},
|
|
};
|
|
|
|
const findIcon = () => wrapper.findComponent(CiIcon);
|
|
const findBadge = () => wrapper.findComponent(GlBadge);
|
|
const findBadgeText = () => wrapper.find('[data-testid="ci-badge-text"');
|
|
|
|
const createComponent = (propsData) => {
|
|
wrapper = shallowMount(CiBadgeLink, { propsData });
|
|
};
|
|
|
|
it.each(Object.keys(statuses))('should render badge for status: %s', (status) => {
|
|
createComponent({ status: statuses[status] });
|
|
|
|
expect(wrapper.attributes('href')).toBe(statuses[status].details_path);
|
|
expect(wrapper.text()).toBe(statuses[status].text);
|
|
expect(findBadge().props('size')).toBe('md');
|
|
expect(findIcon().exists()).toBe(true);
|
|
});
|
|
|
|
it.each`
|
|
status | textColor | variant
|
|
${statuses.success} | ${'gl-text-green-700'} | ${'success'}
|
|
${statuses.success_warining} | ${'gl-text-orange-700'} | ${'warning'}
|
|
${statuses.failed} | ${'gl-text-red-700'} | ${'danger'}
|
|
${statuses.running} | ${'gl-text-blue-700'} | ${'info'}
|
|
${statuses.pending} | ${'gl-text-orange-700'} | ${'warning'}
|
|
${statuses.preparing} | ${'gl-text-gray-600'} | ${'muted'}
|
|
${statuses.canceled} | ${'gl-text-gray-700'} | ${'neutral'}
|
|
${statuses.scheduled} | ${'gl-text-gray-600'} | ${'muted'}
|
|
${statuses.skipped} | ${'gl-text-gray-600'} | ${'muted'}
|
|
${statuses.manual} | ${'gl-text-gray-700'} | ${'neutral'}
|
|
${statuses.created} | ${'gl-text-gray-600'} | ${'muted'}
|
|
`(
|
|
'should contain correct badge class and variant for status: $status.text',
|
|
({ status, textColor, variant }) => {
|
|
createComponent({ status });
|
|
|
|
expect(findBadgeText().classes()).toContain(textColor);
|
|
expect(findBadge().props('variant')).toBe(variant);
|
|
},
|
|
);
|
|
|
|
it('should not render label', () => {
|
|
createComponent({ status: statuses.canceled, showText: false });
|
|
|
|
expect(wrapper.text()).toBe('');
|
|
});
|
|
|
|
it('should emit ciStatusBadgeClick event', () => {
|
|
createComponent({ status: statuses.success });
|
|
|
|
findBadge().vm.$emit('click');
|
|
|
|
expect(wrapper.emitted('ciStatusBadgeClick')).toEqual([[]]);
|
|
});
|
|
|
|
it('should render dynamic badge size', () => {
|
|
createComponent({ status: statuses.success, size: 'lg' });
|
|
|
|
expect(findBadge().props('size')).toBe('lg');
|
|
});
|
|
|
|
it('should have class `gl-px-2` when `showText` is false', () => {
|
|
createComponent({ status: statuses.success, size: 'lg', showText: false });
|
|
|
|
expect(findBadge().classes()).toContain('gl-px-2');
|
|
});
|
|
});
|