diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-28 21:06:11 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2019-11-28 21:06:11 +0300 |
commit | 4f05a630951858cc2b7dafada27f3dcf87ba29bd (patch) | |
tree | 1b87468300c53594465ca10f89e082651a08707c /spec/frontend | |
parent | 7cdd70dcec27402e89e65451b4b1feb75b5eb267 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend')
-rw-r--r-- | spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js | 108 |
1 files changed, 49 insertions, 59 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js index ec143fec5d9..52c0298603d 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js @@ -1,24 +1,31 @@ -import Vue from 'vue'; -import $ from 'jquery'; +import { mount } from '@vue/test-utils'; +import { hexToRgb } from '~/lib/utils/color_utils'; +import DropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue'; +import DropdownValueScopedLabel from '~/vue_shared/components/sidebar/labels_select/dropdown_value_scoped_label.vue'; -import dropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue'; - -import mountComponent from 'helpers/vue_mount_component_helper'; import { mockConfig, mockLabels, } from '../../../../../javascripts/vue_shared/components/sidebar/labels_select/mock_data'; +const labelStyles = { + textColor: '#FFFFFF', + color: '#BADA55', +}; const createComponent = ( labels = mockLabels, labelFilterBasePath = mockConfig.labelFilterBasePath, ) => { - const Component = Vue.extend(dropdownValueComponent); - - return mountComponent(Component, { - labels, - labelFilterBasePath, - enableScopedLabels: true, + labels.forEach(label => Object.assign(label, labelStyles)); + + return mount(DropdownValueComponent, { + propsData: { + labels, + labelFilterBasePath, + enableScopedLabels: true, + }, + attachToDocument: true, + sync: false, }); }; @@ -30,7 +37,7 @@ describe('DropdownValueComponent', () => { }); afterEach(() => { - vm.$destroy(); + vm.destroy(); }); describe('computed', () => { @@ -38,12 +45,12 @@ describe('DropdownValueComponent', () => { it('returns true if `labels` prop is empty', () => { const vmEmptyLabels = createComponent([]); - expect(vmEmptyLabels.isEmpty).toBe(true); - vmEmptyLabels.$destroy(); + expect(vmEmptyLabels.classes()).not.toContain('has-labels'); + vmEmptyLabels.destroy(); }); it('returns false if `labels` prop is empty', () => { - expect(vm.isEmpty).toBe(false); + expect(vm.classes()).toContain('has-labels'); }); }); }); @@ -51,88 +58,71 @@ describe('DropdownValueComponent', () => { describe('methods', () => { describe('labelFilterUrl', () => { it('returns URL string starting with labelFilterBasePath and encoded label.title', () => { - expect( - vm.labelFilterUrl({ - title: 'Foo bar', - }), - ).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20bar'); + expect(vm.find(DropdownValueScopedLabel).props('labelFilterUrl')).toBe( + '/gitlab-org/my-project/issues?label_name[]=Foo%3A%3ABar', + ); }); }); describe('labelStyle', () => { it('returns object with `color` & `backgroundColor` properties from label.textColor & label.color', () => { - const label = { - textColor: '#FFFFFF', - color: '#BADA55', - }; - const styleObj = vm.labelStyle(label); - - expect(styleObj.color).toBe(label.textColor); - expect(styleObj.backgroundColor).toBe(label.color); - }); - }); - - describe('scopedLabelsDescription', () => { - it('returns html for tooltip', () => { - const html = vm.scopedLabelsDescription(mockLabels[1]); - const $el = $.parseHTML(html); - - expect($el[0]).toHaveClass('scoped-label-tooltip-title'); - expect($el[2].textContent).toEqual(mockLabels[1].description); + expect(vm.find(DropdownValueScopedLabel).props('labelStyle')).toEqual({ + color: labelStyles.textColor, + backgroundColor: labelStyles.color, + }); }); }); describe('showScopedLabels', () => { it('returns true if the label is scoped label', () => { - expect(vm.showScopedLabels(mockLabels[1])).toBe(true); - }); - - it('returns false when label is a regular label', () => { - expect(vm.showScopedLabels(mockLabels[0])).toBe(false); + expect(vm.findAll(DropdownValueScopedLabel).length).toEqual(1); }); }); }); describe('template', () => { it('renders component container element with classes `hide-collapsed value issuable-show-labels`', () => { - expect(vm.$el.classList.contains('hide-collapsed', 'value', 'issuable-show-labels')).toBe( - true, - ); + expect(vm.classes()).toContain('hide-collapsed', 'value', 'issuable-show-labels'); }); it('render slot content inside component when `labels` prop is empty', () => { const vmEmptyLabels = createComponent([]); - expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe( - mockConfig.emptyValueText, - ); - vmEmptyLabels.$destroy(); + expect( + vmEmptyLabels + .find('.text-secondary') + .text() + .trim(), + ).toBe(mockConfig.emptyValueText); + vmEmptyLabels.destroy(); }); it('renders label element with filter URL', () => { - expect(vm.$el.querySelector('a').getAttribute('href')).toBe( + expect(vm.find('a').attributes('href')).toBe( '/gitlab-org/my-project/issues?label_name[]=Foo%20Label', ); }); it('renders label element and styles based on label details', () => { - const labelEl = vm.$el.querySelector('a span.badge.color-label'); + const labelEl = vm.find('a span.badge.color-label'); - expect(labelEl).not.toBeNull(); - expect(labelEl.getAttribute('style')).toBe('background-color: rgb(186, 218, 85);'); - expect(labelEl.innerText.trim()).toBe(mockLabels[0].title); + expect(labelEl.exists()).toBe(true); + expect(labelEl.attributes('style')).toContain( + `background-color: rgb(${hexToRgb(labelStyles.color).join(', ')});`, + ); + expect(labelEl.text().trim()).toBe(mockLabels[0].title); }); describe('label is of scoped-label type', () => { it('renders a scoped-label-wrapper span to incorporate 2 anchors', () => { - expect(vm.$el.querySelector('span.scoped-label-wrapper')).not.toBeNull(); + expect(vm.find('span.scoped-label-wrapper').exists()).toBe(true); }); it('renders anchor tag containing question icon', () => { - const anchor = vm.$el.querySelector('.scoped-label-wrapper a.scoped-label'); + const anchor = vm.find('.scoped-label-wrapper a.scoped-label'); - expect(anchor).not.toBeNull(); - expect(anchor.querySelector('i.fa-question-circle')).not.toBeNull(); + expect(anchor.exists()).toBe(true); + expect(anchor.find('i.fa-question-circle').exists()).toBe(true); }); }); }); |