summaryrefslogtreecommitdiff
path: root/spec/frontend/labels_select_spec.js
blob: d54e0eab8450699efdad2cd9f49038bf5faba545 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
import $ from 'jquery';
import LabelsSelect from '~/labels_select';

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',
  },
];

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,
            scopedLabelsDocumentationLink: 'docs-link',
          }),
        );
      });

      it('generated label item template has correct label URL', () => {
        expect($labelEl.attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label');
      });

      it('generated label item template has correct label title', () => {
        expect($labelEl.find('span.label').text()).toBe(label.title);
      });

      it('generated label item template has label description as title attribute', () => {
        expect($labelEl.find('span.label').attr('title')).toBe(label.description);
      });

      it('generated label item template has correct label styles', () => {
        expect($labelEl.find('span.label').attr('style')).toBe(
          `background-color: ${label.color}; color: ${label.text_color};`,
        );
      });

      it('generated label item has a badge class', () => {
        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
      });

      it('generated label item template does not have scoped-label class', () => {
        expect($labelEl.find('.scoped-label')).toHaveLength(0);
      });
    });

    describe('when scoped label is present', () => {
      const label = mockScopedLabels[0];
      let $labelEl;

      beforeEach(() => {
        $labelEl = $(
          LabelsSelect.getLabelTemplate({
            labels: mockScopedLabels,
            issueUpdateURL: mockUrl,
            enableScopedLabels: true,
            scopedLabelsDocumentationLink: 'docs-link',
          }),
        );
      });

      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', () => {
        expect($labelEl.find('span.label').text()).toBe(label.title);
      });

      it('generated label item template has html flag as true', () => {
        expect($labelEl.find('span.label').attr('data-html')).toBe('true');
      });

      it('generated label item template has question icon', () => {
        expect($labelEl.find('i.fa-question-circle')).toHaveLength(1);
      });

      it('generated label item template has scoped-label class', () => {
        expect($labelEl.find('.scoped-label')).toHaveLength(1);
      });

      it('generated label item template has correct label styles', () => {
        expect($labelEl.find('span.label').attr('style')).toBe(
          `background-color: ${label.color}; color: ${label.text_color};`,
        );
      });

      it('generated label item has a badge class', () => {
        expect($labelEl.find('span').hasClass('badge')).toEqual(true);
      });
    });
  });
});