diff options
Diffstat (limited to 'spec/frontend/labels/labels_select_spec.js')
-rw-r--r-- | spec/frontend/labels/labels_select_spec.js | 140 |
1 files changed, 140 insertions, 0 deletions
diff --git a/spec/frontend/labels/labels_select_spec.js b/spec/frontend/labels/labels_select_spec.js new file mode 100644 index 00000000000..f6e280564cc --- /dev/null +++ b/spec/frontend/labels/labels_select_spec.js @@ -0,0 +1,140 @@ +import $ from 'jquery'; +import LabelsSelect from '~/labels/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', + }, +]; + +const mockScopedLabels2 = [ + { + id: 28, + title: 'Foo::Bar2', + description: 'Foobar2', + color: '#FFFFFF', + text_color: '#333333', + }, +]; + +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', () => { + expect($labelEl.find('a').attr('href')).toBe('/foo/bar?label_name[]=Foo%20Label'); + }); + + it('generated label item template has correct label title', () => { + expect($labelEl.find('span.gl-label-text').text()).toBe(label.title); + }); + + it('generated label item template has label description as title attribute', () => { + expect($labelEl.find('a').attr('title')).toBe(label.description); + }); + + it('generated label item template has correct label styles and classes', () => { + expect($labelEl.find('span.gl-label-text').attr('style')).toBe( + `background-color: ${label.color};`, + ); + expect($labelEl.find('span.gl-label-text')).toHaveClass('gl-label-text-light'); + }); + + it('generated label item has a gl-label-text class', () => { + expect($labelEl.find('span').hasClass('gl-label-text')).toEqual(true); + }); + }); + + 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', () => { + 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]); + }); + + it('generated label item template has html flag as true', () => { + expect($labelEl.find('a').attr('data-html')).toBe('true'); + }); + + it('generated label item template has correct label styles and classes', () => { + expect($labelEl.find('span.gl-label-text').attr('style')).toBe( + `background-color: ${label.color};`, + ); + 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'); + }); + + it('generated label item has a badge class', () => { + 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, + }), + ); + }); + + it('generated label item template has correct label styles and classes', () => { + expect($labelEl.find('span.gl-label-text').attr('style')).toBe( + `background-color: ${label.color};`, + ); + 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'); + }); + }); + }); +}); |