debian-mirror-gitlab/spec/frontend/labels/labels_select_spec.js

147 lines
4.5 KiB
JavaScript
Raw Normal View History

2019-07-07 11:18:12 +05:30
import $ from 'jquery';
2022-01-26 12:08:38 +05:30
import LabelsSelect from '~/labels/labels_select';
2019-07-07 11:18:12 +05:30
const mockUrl = '/foo/bar/url';
const mockLabels = [
{
id: 26,
title: 'Foo Label',
description: 'Foobar',
color: '#BADA55',
text_color: '#FFFFFF',
},
];
const mockScopedLabels = [
{
id: 27,
title: 'Foo::Bar',
description: 'Foobar',
color: '#333ABC',
text_color: '#FFFFFF',
},
];
2020-04-08 14:13:33 +05:30
const mockScopedLabels2 = [
{
id: 28,
title: 'Foo::Bar2',
description: 'Foobar2',
color: '#FFFFFF',
2020-10-24 23:57:45 +05:30
text_color: '#333333',
2020-04-08 14:13:33 +05:30
},
];
2019-07-07 11:18:12 +05:30
describe('LabelsSelect', () => {
describe('getLabelTemplate', () => {
describe('when normal label is present', () => {
const label = mockLabels[0];
let $labelEl;
beforeEach(() => {
$labelEl = $(
LabelsSelect.getLabelTemplate({
labels: mockLabels,
issueUpdateURL: mockUrl,
enableScopedLabels: true,
}),
);
});
it('generated label item template has correct label URL', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
2019-07-07 11:18:12 +05:30
});
it('generated label item template has correct label title', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('span.gl-label-text').text()).toBe(label.title);
2019-07-07 11:18:12 +05:30
});
it('generated label item template has label description as title attribute', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('a').attr('title')).toBe(label.description);
2019-07-07 11:18:12 +05:30
});
2020-10-24 23:57:45 +05:30
it('generated label item template has correct label styles and classes', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
2020-10-24 23:57:45 +05:30
`background-color: ${label.color};`,
2019-07-07 11:18:12 +05:30
);
2020-10-24 23:57:45 +05:30
expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
2019-07-07 11:18:12 +05:30
});
2020-04-08 14:13:33 +05:30
it('generated label item has a gl-label-text class', () => {
expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
2019-07-07 11:18:12 +05:30
});
});
describe('when scoped label is present', () => {
const label = mockScopedLabels[0];
let $labelEl;
beforeEach(() => {
$labelEl = $(
LabelsSelect.getLabelTemplate({
labels: mockScopedLabels,
issueUpdateURL: mockUrl,
enableScopedLabels: true,
}),
);
});
it('generated label item template has correct label URL', () => {
expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%3A%3ABar');
});
it('generated label item template has correct label title', () => {
2020-04-08 14:13:33 +05:30
const scopedTitle = label.title.split('::');
expect($labelEl.find('span.gl-label-text').text()).toContain(scopedTitle[0]);
expect($labelEl.find('span.gl-label-text').text()).toContain(scopedTitle[1]);
2019-07-07 11:18:12 +05:30
});
it('generated label item template has html flag as true', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('a').attr('data-html')).toBe('true');
2019-07-07 11:18:12 +05:30
});
2022-08-27 11:52:29 +05:30
it('generated label item template has correct title for tooltip', () => {
expect($labelEl.find('a').attr('title')).toBe(
"<span class='font-weight-bold scoped-label-tooltip-title'>Scoped label</span><br>Foobar",
);
});
2020-10-24 23:57:45 +05:30
it('generated label item template has correct label styles and classes', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
2020-10-24 23:57:45 +05:30
`background-color: ${label.color};`,
2019-07-07 11:18:12 +05:30
);
2020-10-24 23:57:45 +05:30
expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light');
expect($labelEl.find('span.gl-label-text').last()).not.toHaveClass('gl-label-text-light');
2019-07-07 11:18:12 +05:30
});
it('generated label item has a badge class', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true);
});
});
describe('when scoped label is present, with text color not white', () => {
const label = mockScopedLabels2[0];
let $labelEl;
beforeEach(() => {
$labelEl = $(
LabelsSelect.getLabelTemplate({
labels: mockScopedLabels2,
issueUpdateURL: mockUrl,
enableScopedLabels: true,
}),
);
});
2020-10-24 23:57:45 +05:30
it('generated label item template has correct label styles and classes', () => {
2020-04-08 14:13:33 +05:30
expect($labelEl.find('span.gl-label-text').attr('style')).toBe(
2020-10-24 23:57:45 +05:30
`background-color: ${label.color};`,
2020-04-08 14:13:33 +05:30
);
2020-10-24 23:57:45 +05:30
expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-dark');
expect($labelEl.find('span.gl-label-text').last()).toHaveClass('gl-label-text-dark');
2019-07-07 11:18:12 +05:30
});
});
});
});