diff options
Diffstat (limited to 'spec/javascripts/vue_shared/components/sidebar/labels_select')
9 files changed, 70 insertions, 14 deletions
diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js index e8685ab48be..c44b04009ca 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/base_spec.js @@ -33,6 +33,7 @@ describe('BaseComponent', () => { it('returns correct string when showCreate prop is `false`', () => { const mockConfigNonEditable = Object.assign({}, mockConfig, { showCreate: false }); const vmNonEditable = createComponent(mockConfigNonEditable); + expect(vmNonEditable.hiddenInputName).toBe('label_id[]'); vmNonEditable.$destroy(); }); @@ -46,6 +47,7 @@ describe('BaseComponent', () => { it('return `Create group label` when `isProject` prop is false', () => { const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false }); const vmGroup = createComponent(mockConfigGroup); + expect(vmGroup.createLabelTitle).toBe('Create group label'); vmGroup.$destroy(); }); @@ -59,6 +61,7 @@ describe('BaseComponent', () => { it('return `Manage group labels` when `isProject` prop is false', () => { const mockConfigGroup = Object.assign({}, mockConfig, { isProject: false }); const vmGroup = createComponent(mockConfigGroup); + expect(vmGroup.manageLabelsTitle).toBe('Manage group labels'); vmGroup.$destroy(); }); @@ -70,6 +73,7 @@ describe('BaseComponent', () => { it('emits onLabelClick event with label and list of labels as params', () => { spyOn(vm, '$emit'); vm.handleClick(mockLabels[0]); + expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]); }); }); @@ -78,6 +82,7 @@ describe('BaseComponent', () => { it('emits toggleCollapse event on component', () => { spyOn(vm, '$emit'); vm.handleCollapsedValueClick(); + expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse'); }); }); @@ -86,6 +91,7 @@ describe('BaseComponent', () => { it('emits onDropdownClose event on component', () => { spyOn(vm, '$emit'); vm.handleDropdownHidden(); + expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose'); }); }); @@ -114,6 +120,7 @@ describe('BaseComponent', () => { it('renders `.dropdown-menu` element', () => { const dropdownMenuEl = vm.$el.querySelector('.dropdown-menu'); + expect(dropdownMenuEl).not.toBeNull(); expect(dropdownMenuEl.querySelector('.dropdown-page-one')).not.toBeNull(); expect(dropdownMenuEl.querySelector('.dropdown-content')).not.toBeNull(); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js index f25c70db125..5cf6afebd7e 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js @@ -34,6 +34,7 @@ describe('DropdownButtonComponent', () => { it('returns text as `Label` when `labels` prop is empty array', () => { const mockEmptyLabels = Object.assign({}, componentConfig, { labels: [] }); const vmEmptyLabels = createComponent(mockEmptyLabels); + expect(vmEmptyLabels.dropdownToggleText).toBe('Label'); vmEmptyLabels.$destroy(); }); @@ -43,6 +44,7 @@ describe('DropdownButtonComponent', () => { labels: mockLabels.concat(mockLabels), }); const vmMoreLabels = createComponent(mockMoreLabels); + expect(vmMoreLabels.dropdownToggleText).toBe('Foo Label +1 more'); vmMoreLabels.$destroy(); }); @@ -69,12 +71,14 @@ describe('DropdownButtonComponent', () => { it('renders dropdown toggle text element', () => { const dropdownToggleTextEl = vm.$el.querySelector('.dropdown-toggle-text'); + expect(dropdownToggleTextEl).not.toBeNull(); expect(dropdownToggleTextEl.innerText.trim()).toBe('Foo Label'); }); it('renders dropdown button icon', () => { const dropdownIconEl = vm.$el.querySelector('i.fa'); + expect(dropdownIconEl).not.toBeNull(); expect(dropdownIconEl.classList.contains('fa-chevron-down')).toBe(true); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js index ce559fe0335..b8f32f96332 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js @@ -6,7 +6,7 @@ import mountComponent from 'spec/helpers/vue_mount_component_helper'; import { mockSuggestedColors } from './mock_data'; -const createComponent = (headerTitle) => { +const createComponent = headerTitle => { const Component = Vue.extend(dropdownCreateLabelComponent); return mountComponent(Component, { @@ -38,13 +38,17 @@ describe('DropdownCreateLabelComponent', () => { }); it('renders `Go back` button on component header', () => { - const backButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-back'); + const backButtonEl = vm.$el.querySelector( + '.dropdown-title button.dropdown-title-button.dropdown-menu-back', + ); + expect(backButtonEl).not.toBe(null); expect(backButtonEl.querySelector('.fa-arrow-left')).not.toBe(null); }); it('renders component header element as `Create new label` when `headerTitle` prop is not provided', () => { const headerEl = vm.$el.querySelector('.dropdown-title'); + expect(headerEl.innerText.trim()).toContain('Create new label'); }); @@ -52,12 +56,16 @@ describe('DropdownCreateLabelComponent', () => { const headerTitle = 'Create project label'; const vmWithHeaderTitle = createComponent(headerTitle); const headerEl = vmWithHeaderTitle.$el.querySelector('.dropdown-title'); + expect(headerEl.innerText.trim()).toContain(headerTitle); vmWithHeaderTitle.$destroy(); }); it('renders `Close` button on component header', () => { - const closeButtonEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + const closeButtonEl = vm.$el.querySelector( + '.dropdown-title button.dropdown-title-button.dropdown-menu-close', + ); + expect(closeButtonEl).not.toBe(null); expect(closeButtonEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBe(null); }); @@ -69,23 +77,29 @@ describe('DropdownCreateLabelComponent', () => { it('renders suggested colors list elements', () => { const colorsListContainerEl = vm.$el.querySelector('.suggest-colors.suggest-colors-dropdown'); + expect(colorsListContainerEl).not.toBe(null); expect(colorsListContainerEl.querySelectorAll('a').length).toBe(mockSuggestedColors.length); const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0]; + expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0]); expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 51, 204);'); }); it('renders color input element', () => { expect(vm.$el.querySelector('.dropdown-label-color-input')).not.toBe(null); - expect(vm.$el.querySelector('.dropdown-label-color-preview.js-dropdown-label-color-preview')).not.toBe(null); + expect( + vm.$el.querySelector('.dropdown-label-color-preview.js-dropdown-label-color-preview'), + ).not.toBe(null); + expect(vm.$el.querySelector('input#new_label_color.default-dropdown-input')).not.toBe(null); }); it('renders component action buttons', () => { const createBtnEl = vm.$el.querySelector('button.js-new-label-btn'); const cancelBtnEl = vm.$el.querySelector('button.js-cancel-label-btn'); + expect(createBtnEl).not.toBe(null); expect(createBtnEl.innerText.trim()).toBe('Create'); expect(cancelBtnEl.innerText.trim()).toBe('Cancel'); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js index debeab25bd6..3711e9dac8c 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js @@ -36,19 +36,24 @@ describe('DropdownFooterComponent', () => { describe('template', () => { it('renders link element with `Create new label` when `createLabelTitle` prop is not provided', () => { const createLabelEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); + expect(createLabelEl).not.toBeNull(); expect(createLabelEl.innerText.trim()).toBe('Create new label'); }); it('renders link element with value of `createLabelTitle` prop', () => { const vmWithCreateLabelTitle = createComponent(mockConfig.labelsWebUrl, createLabelTitle); - const createLabelEl = vmWithCreateLabelTitle.$el.querySelector('.dropdown-footer-list .dropdown-toggle-page'); + const createLabelEl = vmWithCreateLabelTitle.$el.querySelector( + '.dropdown-footer-list .dropdown-toggle-page', + ); + expect(createLabelEl.innerText.trim()).toBe(createLabelTitle); vmWithCreateLabelTitle.$destroy(); }); it('renders link element with `Manage labels` when `manageLabelsTitle` prop is not provided', () => { const manageLabelsEl = vm.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); + expect(manageLabelsEl).not.toBeNull(); expect(manageLabelsEl.getAttribute('href')).toBe(vm.labelsWebUrl); expect(manageLabelsEl.innerText.trim()).toBe('Manage labels'); @@ -60,7 +65,10 @@ describe('DropdownFooterComponent', () => { createLabelTitle, manageLabelsTitle, ); - const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector('.dropdown-footer-list .dropdown-external-link'); + const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector( + '.dropdown-footer-list .dropdown-external-link', + ); + expect(manageLabelsEl.innerText.trim()).toBe(manageLabelsTitle); vmWithManageLabelsTitle.$destroy(); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js index cdf234bb0c4..115e21e4f9f 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js @@ -24,11 +24,15 @@ describe('DropdownHeaderComponent', () => { describe('template', () => { it('renders header text element', () => { const headerEl = vm.$el.querySelector('.dropdown-title span'); + expect(headerEl.innerText.trim()).toBe('Assign labels'); }); it('renders `Close` button element', () => { - const closeBtnEl = vm.$el.querySelector('.dropdown-title button.dropdown-title-button.dropdown-menu-close'); + const closeBtnEl = vm.$el.querySelector( + '.dropdown-title button.dropdown-title-button.dropdown-menu-close', + ); + expect(closeBtnEl).not.toBeNull(); expect(closeBtnEl.querySelector('.fa-times.dropdown-menu-close-icon')).not.toBeNull(); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js index 57608d957e7..c30e619e76b 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js @@ -24,6 +24,7 @@ describe('DropdownSearchInputComponent', () => { describe('template', () => { it('renders input element with type `search`', () => { const inputEl = vm.$el.querySelector('input.dropdown-input-field'); + expect(inputEl).not.toBeNull(); expect(inputEl.getAttribute('type')).toBe('search'); }); @@ -33,7 +34,9 @@ describe('DropdownSearchInputComponent', () => { }); it('renders clear search icon element', () => { - expect(vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull(); + expect( + vm.$el.querySelector('.fa-times.dropdown-input-clear.js-dropdown-input-clear'), + ).not.toBeNull(); }); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js index 7c3d2711f65..6c84d2e167c 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js @@ -35,6 +35,7 @@ describe('DropdownTitleComponent', () => { it('renders `Edit` button element', () => { const editBtnEl = vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle'); + expect(editBtnEl).not.toBeNull(); expect(editBtnEl.innerText.trim()).toBe('Edit'); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js index da74595bcdc..9a691116cf8 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js @@ -29,12 +29,14 @@ describe('DropdownValueCollapsedComponent', () => { describe('labelsList', () => { it('returns empty text when `labels` prop is empty array', () => { const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.labelsList).toBe(''); vmEmptyLabels.$destroy(); }); it('returns labels names separated by coma when `labels` prop has more than one item', () => { const vmMoreLabels = createComponent(mockLabels.concat(mockLabels)); + expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label'); vmMoreLabels.$destroy(); }); @@ -46,6 +48,7 @@ describe('DropdownValueCollapsedComponent', () => { } const vmMoreLabels = createComponent(mockMoreLabels); + expect(vmMoreLabels.labelsList).toBe('Foo Label, Foo Label, Foo Label, Foo Label, Foo Label, and 2 more'); vmMoreLabels.$destroy(); }); @@ -61,6 +64,7 @@ describe('DropdownValueCollapsedComponent', () => { it('emits onValueClick event on component', () => { spyOn(vm, '$emit'); vm.handleClick(); + expect(vm.$emit).toHaveBeenCalledWith('onValueClick'); }); }); diff --git a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js index 370a296bd8f..3fff781594f 100644 --- a/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js +++ b/spec/javascripts/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js @@ -33,6 +33,7 @@ describe('DropdownValueComponent', () => { describe('isEmpty', () => { it('returns true if `labels` prop is empty', () => { const vmEmptyLabels = createComponent([]); + expect(vmEmptyLabels.isEmpty).toBe(true); vmEmptyLabels.$destroy(); }); @@ -46,9 +47,11 @@ 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.labelFilterUrl({ + title: 'Foo bar', + }), + ).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20bar'); }); }); @@ -68,21 +71,29 @@ describe('DropdownValueComponent', () => { 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.$el.classList.contains('hide-collapsed', 'value', 'issuable-show-labels')).toBe( + true, + ); }); 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); + + expect(vmEmptyLabels.$el.querySelector('.text-secondary').innerText.trim()).toBe( + mockConfig.emptyValueText, + ); vmEmptyLabels.$destroy(); }); it('renders label element with filter URL', () => { - expect(vm.$el.querySelector('a').getAttribute('href')).toBe('/gitlab-org/my-project/issues?label_name[]=Foo%20Label'); + expect(vm.$el.querySelector('a').getAttribute('href')).toBe( + '/gitlab-org/my-project/issues?label_name[]=Foo%20Label', + ); }); it('renders label element with tooltip and styles based on label details', () => { const labelEl = vm.$el.querySelector('a span.badge.color-label'); + expect(labelEl).not.toBeNull(); expect(labelEl.dataset.placement).toBe('bottom'); expect(labelEl.dataset.container).toBe('body'); |