diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar')
12 files changed, 20 insertions, 658 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js deleted file mode 100644 index 68ea94e72ce..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/base_spec.js +++ /dev/null @@ -1,127 +0,0 @@ -import { shallowMount } from '@vue/test-utils'; -import Vue from 'vue'; - -import LabelsSelect from '~/labels_select'; -import BaseComponent from '~/vue_shared/components/sidebar/labels_select/base.vue'; - -import { mockConfig, mockLabels } from './mock_data'; - -const createComponent = (config = mockConfig) => - shallowMount(BaseComponent, { - propsData: config, - }); - -describe('BaseComponent', () => { - let wrapper; - let vm; - - beforeEach((done) => { - wrapper = createComponent(); - - ({ vm } = wrapper); - - Vue.nextTick(done); - }); - - afterEach(() => { - wrapper.destroy(); - }); - - describe('computed', () => { - describe('hiddenInputName', () => { - it('returns correct string when showCreate prop is `true`', () => { - expect(vm.hiddenInputName).toBe('issue[label_names][]'); - }); - - it('returns correct string when showCreate prop is `false`', async () => { - await wrapper.setProps({ showCreate: false }); - - expect(vm.hiddenInputName).toBe('label_id[]'); - }); - }); - - describe('createLabelTitle', () => { - it('returns `Create project label` when `isProject` prop is true', () => { - expect(vm.createLabelTitle).toBe('Create project label'); - }); - - it('return `Create group label` when `isProject` prop is false', async () => { - await wrapper.setProps({ isProject: false }); - - expect(vm.createLabelTitle).toBe('Create group label'); - }); - }); - - describe('manageLabelsTitle', () => { - it('returns `Manage project labels` when `isProject` prop is true', () => { - expect(vm.manageLabelsTitle).toBe('Manage project labels'); - }); - - it('return `Manage group labels` when `isProject` prop is false', async () => { - await wrapper.setProps({ isProject: false }); - - expect(vm.manageLabelsTitle).toBe('Manage group labels'); - }); - }); - }); - - describe('methods', () => { - describe('handleClick', () => { - it('emits onLabelClick event with label and list of labels as params', () => { - jest.spyOn(vm, '$emit').mockImplementation(() => {}); - vm.handleClick(mockLabels[0]); - - expect(vm.$emit).toHaveBeenCalledWith('onLabelClick', mockLabels[0]); - }); - }); - - describe('handleCollapsedValueClick', () => { - it('emits toggleCollapse event on component', () => { - jest.spyOn(vm, '$emit').mockImplementation(() => {}); - vm.handleCollapsedValueClick(); - - expect(vm.$emit).toHaveBeenCalledWith('toggleCollapse'); - }); - }); - - describe('handleDropdownHidden', () => { - it('emits onDropdownClose event on component', () => { - jest.spyOn(vm, '$emit').mockImplementation(() => {}); - vm.handleDropdownHidden(); - - expect(vm.$emit).toHaveBeenCalledWith('onDropdownClose'); - }); - }); - }); - - describe('mounted', () => { - it('creates LabelsSelect object and assigns it to `labelsDropdon` as prop', () => { - expect(vm.labelsDropdown instanceof LabelsSelect).toBe(true); - }); - }); - - describe('template', () => { - it('renders component container element with classes `block labels`', () => { - expect(vm.$el.classList.contains('block')).toBe(true); - expect(vm.$el.classList.contains('labels')).toBe(true); - }); - - it('renders `.selectbox` element', () => { - expect(vm.$el.querySelector('.selectbox')).not.toBeNull(); - expect(vm.$el.querySelector('.selectbox').getAttribute('style')).toBe('display: none;'); - }); - - it('renders `.dropdown` element', () => { - expect(vm.$el.querySelector('.dropdown')).not.toBeNull(); - }); - - 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(); - expect(dropdownMenuEl.querySelector('.dropdown-loading')).not.toBeNull(); - }); - }); -}); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js deleted file mode 100644 index 79851e5db05..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_button_spec.js +++ /dev/null @@ -1,90 +0,0 @@ -import Vue from 'vue'; - -import mountComponent from 'helpers/vue_mount_component_helper'; -import dropdownButtonComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_button.vue'; - -import { mockConfig, mockLabels } from './mock_data'; - -const componentConfig = { - ...mockConfig, - fieldName: 'label_id[]', - labels: mockLabels, - showExtraOptions: false, -}; - -const createComponent = (config = componentConfig) => { - const Component = Vue.extend(dropdownButtonComponent); - - return mountComponent(Component, config); -}; - -describe('DropdownButtonComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('computed', () => { - describe('dropdownToggleText', () => { - it('returns text as `Label` when `labels` prop is empty array', () => { - const mockEmptyLabels = { ...componentConfig, labels: [] }; - const vmEmptyLabels = createComponent(mockEmptyLabels); - - expect(vmEmptyLabels.dropdownToggleText).toBe('Label'); - vmEmptyLabels.$destroy(); - }); - - it('returns first label name with remaining label count when `labels` prop has more than one item', () => { - const mockMoreLabels = { ...componentConfig, labels: mockLabels.concat(mockLabels) }; - const vmMoreLabels = createComponent(mockMoreLabels); - - expect(vmMoreLabels.dropdownToggleText).toBe( - `Foo Label +${mockMoreLabels.labels.length - 1} more`, - ); - vmMoreLabels.$destroy(); - }); - - it('returns first label name when `labels` prop has only one item present', () => { - const singleLabel = { ...componentConfig, labels: [mockLabels[0]] }; - const vmSingleLabel = createComponent(singleLabel); - - expect(vmSingleLabel.dropdownToggleText).toBe(mockLabels[0].title); - - vmSingleLabel.$destroy(); - }); - }); - }); - - describe('template', () => { - it('renders component container element of type `button`', () => { - expect(vm.$el.nodeName).toBe('BUTTON'); - }); - - it('renders component container element with required data attributes', () => { - expect(vm.$el.dataset.abilityName).toBe(vm.abilityName); - expect(vm.$el.dataset.fieldName).toBe(vm.fieldName); - expect(vm.$el.dataset.issueUpdate).toBe(vm.updatePath); - expect(vm.$el.dataset.labels).toBe(vm.labelsPath); - expect(vm.$el.dataset.namespacePath).toBe(vm.namespace); - expect(vm.$el.dataset.showAny).not.toBeDefined(); - }); - - 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 +1 more'); - }); - - it('renders dropdown button icon', () => { - const dropdownIconEl = vm.$el.querySelector('.dropdown-menu-toggle .gl-icon'); - - expect(dropdownIconEl).not.toBeNull(); - }); - }); -}); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js deleted file mode 100644 index 322e632da02..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_create_label_spec.js +++ /dev/null @@ -1,103 +0,0 @@ -import Vue from 'vue'; - -import mountComponent from 'helpers/vue_mount_component_helper'; -import dropdownCreateLabelComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_create_label.vue'; - -import { mockSuggestedColors } from './mock_data'; - -const createComponent = (headerTitle) => { - const Component = Vue.extend(dropdownCreateLabelComponent); - - return mountComponent(Component, { - headerTitle, - }); -}; - -describe('DropdownCreateLabelComponent', () => { - const colorsCount = Object.keys(mockSuggestedColors).length; - let vm; - - beforeEach(() => { - gon.suggested_label_colors = mockSuggestedColors; - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - describe('created', () => { - it('initializes `suggestedColors` prop on component from `gon.suggested_color_labels` object', () => { - expect(vm.suggestedColors.length).toBe(colorsCount); - }); - }); - - describe('template', () => { - it('renders component container element with classes `dropdown-page-two dropdown-new-label`', () => { - expect(vm.$el.classList.contains('dropdown-page-two', 'dropdown-new-label')).toBe(true); - }); - - it('renders `Go back` button on component header', () => { - const backButtonEl = vm.$el.querySelector('.dropdown-title .dropdown-menu-back'); - - expect(backButtonEl).not.toBe(null); - expect(backButtonEl.querySelector('[data-testid="arrow-left-icon"]')).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'); - }); - - it('renders component header element with value of `headerTitle` prop', () => { - 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 .dropdown-menu-close'); - - expect(closeButtonEl).not.toBe(null); - }); - - it('renders `Name new label` input element', () => { - expect(vm.$el.querySelector('.dropdown-labels-error.js-label-error')).not.toBe(null); - expect(vm.$el.querySelector('input#new_label_name.default-dropdown-input')).not.toBe(null); - }); - - 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(colorsCount); - - const colorItemEl = colorsListContainerEl.querySelectorAll('a')[0]; - - expect(colorItemEl.dataset.color).toBe(vm.suggestedColors[0].colorCode); - expect(colorItemEl.getAttribute('style')).toBe('background-color: rgb(0, 153, 102);'); - }); - - 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('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/frontend/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js deleted file mode 100644 index 7e9e242a4f5..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_footer_spec.js +++ /dev/null @@ -1,75 +0,0 @@ -import Vue from 'vue'; - -import mountComponent from 'helpers/vue_mount_component_helper'; -import dropdownFooterComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_footer.vue'; - -import { mockConfig } from './mock_data'; - -const createComponent = ( - labelsWebUrl = mockConfig.labelsWebUrl, - createLabelTitle, - manageLabelsTitle, -) => { - const Component = Vue.extend(dropdownFooterComponent); - - return mountComponent(Component, { - labelsWebUrl, - createLabelTitle, - manageLabelsTitle, - }); -}; - -describe('DropdownFooterComponent', () => { - const createLabelTitle = 'Create project label'; - const manageLabelsTitle = 'Manage project labels'; - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - 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', - ); - - 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'); - }); - - it('renders link element with value of `manageLabelsTitle` prop', () => { - const vmWithManageLabelsTitle = createComponent( - mockConfig.labelsWebUrl, - createLabelTitle, - manageLabelsTitle, - ); - const manageLabelsEl = vmWithManageLabelsTitle.$el.querySelector( - '.dropdown-footer-list .dropdown-external-link', - ); - - expect(manageLabelsEl.innerText.trim()).toBe(manageLabelsTitle); - vmWithManageLabelsTitle.$destroy(); - }); - }); -}); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js deleted file mode 100644 index 0b9a7262e41..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_header_spec.js +++ /dev/null @@ -1,39 +0,0 @@ -import Vue from 'vue'; - -import mountComponent from 'helpers/vue_mount_component_helper'; -import dropdownHeaderComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_header.vue'; - -const createComponent = () => { - const Component = Vue.extend(dropdownHeaderComponent); - - return mountComponent(Component); -}; - -describe('DropdownHeaderComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - 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', - ); - - expect(closeBtnEl).not.toBeNull(); - expect(closeBtnEl.querySelector('.dropdown-menu-close-icon')).not.toBeNull(); - }); - }); -}); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js deleted file mode 100644 index 510e537b1cd..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_search_input_spec.js +++ /dev/null @@ -1,39 +0,0 @@ -import Vue from 'vue'; - -import mountComponent from 'helpers/vue_mount_component_helper'; -import dropdownSearchInputComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_search_input.vue'; - -const createComponent = () => { - const Component = Vue.extend(dropdownSearchInputComponent); - - return mountComponent(Component); -}; - -describe('DropdownSearchInputComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.$destroy(); - }); - - 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'); - }); - - it('renders search icon element', () => { - expect(vm.$el.querySelector('.dropdown-input-search')).not.toBeNull(); - }); - - it('renders clear search icon element', () => { - expect(vm.$el.querySelector('.dropdown-input-clear.js-dropdown-input-clear')).not.toBeNull(); - }); - }); -}); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js deleted file mode 100644 index 30dd92b72a4..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_title_spec.js +++ /dev/null @@ -1,41 +0,0 @@ -import { GlLoadingIcon } from '@gitlab/ui'; -import { shallowMount } from '@vue/test-utils'; -import dropdownTitleComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_title.vue'; - -const createComponent = (canEdit = true) => - shallowMount(dropdownTitleComponent, { - propsData: { - canEdit, - }, - }); - -describe('DropdownTitleComponent', () => { - let wrapper; - - beforeEach(() => { - wrapper = createComponent(); - }); - - afterEach(() => { - wrapper.destroy(); - wrapper = null; - }); - - describe('template', () => { - it('renders title text', () => { - expect(wrapper.vm.$el.classList.contains('title', 'hide-collapsed')).toBe(true); - expect(wrapper.vm.$el.innerText.trim()).toContain('Labels'); - }); - - it('renders spinner icon element', () => { - expect(wrapper.find(GlLoadingIcon)).not.toBeNull(); - }); - - it('renders `Edit` button element', () => { - const editBtnEl = wrapper.vm.$el.querySelector('button.edit-link.js-sidebar-dropdown-toggle'); - - expect(editBtnEl).not.toBeNull(); - expect(editBtnEl.innerText.trim()).toBe('Edit'); - }); - }); -}); 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 deleted file mode 100644 index 37f59c108df..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_spec.js +++ /dev/null @@ -1,84 +0,0 @@ -import { GlLabel } from '@gitlab/ui'; -import { mount } from '@vue/test-utils'; -import DropdownValueComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value.vue'; - -import { mockConfig, mockLabels } from './mock_data'; - -const createComponent = ( - labels = mockLabels, - labelFilterBasePath = mockConfig.labelFilterBasePath, -) => - mount(DropdownValueComponent, { - propsData: { - labels, - labelFilterBasePath, - enableScopedLabels: true, - }, - stubs: { - GlLabel: true, - }, - }); - -describe('DropdownValueComponent', () => { - let vm; - - beforeEach(() => { - vm = createComponent(); - }); - - afterEach(() => { - vm.destroy(); - }); - - describe('computed', () => { - describe('isEmpty', () => { - it('returns true if `labels` prop is empty', () => { - const vmEmptyLabels = createComponent([]); - - expect(vmEmptyLabels.classes()).not.toContain('has-labels'); - vmEmptyLabels.destroy(); - }); - - it('returns false if `labels` prop is empty', () => { - expect(vm.classes()).toContain('has-labels'); - }); - }); - }); - - describe('methods', () => { - describe('labelFilterUrl', () => { - it('returns URL string starting with labelFilterBasePath and encoded label.title', () => { - expect(vm.find(GlLabel).props('target')).toBe( - '/gitlab-org/my-project/issues?label_name[]=Foo%20Label', - ); - }); - }); - - describe('showScopedLabels', () => { - it('returns true if the label is scoped label', () => { - const labels = vm.findAll(GlLabel); - expect(labels.length).toEqual(2); - expect(labels.at(1).props('scoped')).toBe(true); - }); - }); - }); - - describe('template', () => { - it('renders component container element with classes `hide-collapsed value issuable-show-labels`', () => { - 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.find('.text-secondary').text().trim()).toBe(mockConfig.emptyValueText); - vmEmptyLabels.destroy(); - }); - - it('renders DropdownValueComponent element', () => { - const labelEl = vm.find(GlLabel); - - expect(labelEl.exists()).toBe(true); - }); - }); -}); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/mock_data.js b/spec/frontend/vue_shared/components/sidebar/labels_select/mock_data.js deleted file mode 100644 index 73716d4edf3..00000000000 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/mock_data.js +++ /dev/null @@ -1,57 +0,0 @@ -export const mockLabels = [ - { - id: 26, - title: 'Foo Label', - description: 'Foobar', - color: '#BADA55', - text_color: '#FFFFFF', - }, - { - id: 27, - title: 'Foo::Bar', - description: 'Foobar', - color: '#0033CC', - text_color: '#FFFFFF', - }, -]; - -export const mockSuggestedColors = { - '#009966': 'Green-cyan', - '#8fbc8f': 'Dark sea green', - '#3cb371': 'Medium sea green', - '#00b140': 'Green screen', - '#013220': 'Dark green', - '#6699cc': 'Blue-gray', - '#0000ff': 'Blue', - '#e6e6fa': 'Lavendar', - '#9400d3': 'Dark violet', - '#330066': 'Deep violet', - '#808080': 'Gray', - '#36454f': 'Charcoal grey', - '#f7e7ce': 'Champagne', - '#c21e56': 'Rose red', - '#cc338b': 'Magenta-pink', - '#dc143c': 'Crimson', - '#ff0000': 'Red', - '#cd5b45': 'Dark coral', - '#eee600': 'Titanium yellow', - '#ed9121': 'Carrot orange', - '#c39953': 'Aztec Gold', -}; - -export const mockConfig = { - showCreate: true, - isProject: true, - abilityName: 'issue', - context: { - labels: mockLabels, - }, - namespace: 'gitlab-org', - updatePath: '/gitlab-org/my-project/issue/1', - labelsPath: '/gitlab-org/my-project/-/labels.json', - labelsWebUrl: '/gitlab-org/my-project/-/labels', - labelFilterBasePath: '/gitlab-org/my-project/issues', - canEdit: true, - suggestedColors: mockSuggestedColors, - emptyValueText: 'None', -}; diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js index 003f3d2b4e6..8c1693e8dcc 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed_spec.js @@ -1,9 +1,9 @@ import Vue from 'vue'; import mountComponent from 'helpers/vue_mount_component_helper'; -import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue'; +import dropdownValueCollapsedComponent from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue'; -import { mockLabels } from './mock_data'; +import { mockCollapsedLabels as mockLabels } from './mock_data'; const createComponent = (labels = mockLabels) => { const Component = Vue.extend(dropdownValueCollapsedComponent); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js index 3f00eab17b7..be849789667 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/labels_select_root_spec.js @@ -2,12 +2,12 @@ import { shallowMount, createLocalVue } from '@vue/test-utils'; import Vuex from 'vuex'; import { isInViewport } from '~/lib/utils/common_utils'; -import DropdownValueCollapsed from '~/vue_shared/components/sidebar/labels_select/dropdown_value_collapsed.vue'; import { DropdownVariant } from '~/vue_shared/components/sidebar/labels_select_vue/constants'; import DropdownButton from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_button.vue'; import DropdownContents from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_contents.vue'; import DropdownTitle from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_title.vue'; import DropdownValue from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value.vue'; +import DropdownValueCollapsed from '~/vue_shared/components/sidebar/labels_select_vue/dropdown_value_collapsed.vue'; import LabelsSelectRoot from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_vue/store'; diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js index f293b8422e7..730afcbecab 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_vue/mock_data.js @@ -33,6 +33,23 @@ export const mockLabels = [ }, ]; +export const mockCollapsedLabels = [ + { + id: 26, + title: 'Foo Label', + description: 'Foobar', + color: '#BADA55', + text_color: '#FFFFFF', + }, + { + id: 27, + title: 'Foo::Bar', + description: 'Foobar', + color: '#0033CC', + text_color: '#FFFFFF', + }, +]; + export const mockConfig = { allowLabelEdit: true, allowLabelCreate: true, |