diff options
Diffstat (limited to 'spec/frontend/vue_shared/components/sidebar/labels_select_widget')
4 files changed, 97 insertions, 60 deletions
diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_value_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_value_spec.js index 59f3268c000..b3ffee2d020 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_value_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/dropdown_value_spec.js @@ -1,88 +1,97 @@ import { GlLabel } from '@gitlab/ui'; -import { shallowMount, createLocalVue } from '@vue/test-utils'; -import Vuex from 'vuex'; +import { shallowMount } from '@vue/test-utils'; import DropdownValue from '~/vue_shared/components/sidebar/labels_select_widget/dropdown_value.vue'; -import labelsSelectModule from '~/vue_shared/components/sidebar/labels_select_widget/store'; - -import { mockConfig, mockRegularLabel, mockScopedLabel } from './mock_data'; - -const localVue = createLocalVue(); -localVue.use(Vuex); +import { mockRegularLabel, mockScopedLabel } from './mock_data'; describe('DropdownValue', () => { let wrapper; - const createComponent = (initialState = {}, slots = {}) => { - const store = new Vuex.Store(labelsSelectModule()); - - store.dispatch('setInitialState', { ...mockConfig, ...initialState }); + const findAllLabels = () => wrapper.findAllComponents(GlLabel); + const findRegularLabel = () => findAllLabels().at(0); + const findScopedLabel = () => findAllLabels().at(1); + const findWrapper = () => wrapper.find('[data-testid="value-wrapper"]'); + const findEmptyPlaceholder = () => wrapper.find('[data-testid="empty-placeholder"]'); + const createComponent = (props = {}, slots = {}) => { wrapper = shallowMount(DropdownValue, { - localVue, - store, slots, + propsData: { + selectedLabels: [mockRegularLabel, mockScopedLabel], + allowLabelRemove: true, + allowScopedLabels: true, + labelsFilterBasePath: '/gitlab-org/my-project/issues', + labelsFilterParam: 'label_name', + ...props, + }, }); }; afterEach(() => { wrapper.destroy(); - wrapper = null; }); - describe('methods', () => { - describe('labelFilterUrl', () => { - it('returns a label filter URL based on provided label param', () => { - createComponent(); - - expect(wrapper.vm.labelFilterUrl(mockRegularLabel)).toBe( - '/gitlab-org/my-project/issues?label_name[]=Foo%20Label', - ); - }); + describe('when there are no labels', () => { + beforeEach(() => { + createComponent( + { + selectedLabels: [], + }, + { + default: 'None', + }, + ); }); - describe('scopedLabel', () => { - beforeEach(() => { - createComponent(); - }); + it('does not apply `has-labels` class to the wrapping container', () => { + expect(findWrapper().classes()).not.toContain('has-labels'); + }); - it('returns `true` when provided label param is a scoped label', () => { - expect(wrapper.vm.scopedLabel(mockScopedLabel)).toBe(true); - }); + it('renders an empty placeholder', () => { + expect(findEmptyPlaceholder().exists()).toBe(true); + expect(findEmptyPlaceholder().text()).toBe('None'); + }); - it('returns `false` when provided label param is a regular label', () => { - expect(wrapper.vm.scopedLabel(mockRegularLabel)).toBe(false); - }); + it('does not render any labels', () => { + expect(findAllLabels().length).toBe(0); }); }); - describe('template', () => { - it('renders class `has-labels` on component container element when `selectedLabels` is not empty', () => { + describe('when there are labels', () => { + beforeEach(() => { createComponent(); + }); - expect(wrapper.attributes('class')).toContain('has-labels'); + it('applies `has-labels` class to the wrapping container', () => { + expect(findWrapper().classes()).toContain('has-labels'); }); - it('renders element containing `None` when `selectedLabels` is empty', () => { - createComponent( - { - selectedLabels: [], - }, - { - default: 'None', - }, - ); - const noneEl = wrapper.find('span.text-secondary'); + it('does not render an empty placeholder', () => { + expect(findEmptyPlaceholder().exists()).toBe(false); + }); - expect(noneEl.exists()).toBe(true); - expect(noneEl.text()).toBe('None'); + it('renders a list of two labels', () => { + expect(findAllLabels().length).toBe(2); }); - it('renders labels when `selectedLabels` is not empty', () => { - createComponent(); + it('passes correct props to the regular label', () => { + expect(findRegularLabel().props('target')).toBe( + '/gitlab-org/my-project/issues?label_name[]=Foo%20Label', + ); + expect(findRegularLabel().props('scoped')).toBe(false); + }); + + it('passes correct props to the scoped label', () => { + expect(findScopedLabel().props('target')).toBe( + '/gitlab-org/my-project/issues?label_name[]=Foo%3A%3ABar', + ); + expect(findScopedLabel().props('scoped')).toBe(true); + }); - expect(wrapper.findAll(GlLabel).length).toBe(2); + it('emits `onLabelRemove` event with the correct ID', () => { + findRegularLabel().vm.$emit('close'); + expect(wrapper.emitted('onLabelRemove')).toEqual([[mockRegularLabel.id]]); }); }); }); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js index ee1346c362f..66971446f47 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/labels_select_root_spec.js @@ -34,6 +34,10 @@ describe('LabelsSelectRoot', () => { stubs: { 'dropdown-contents': DropdownContents, }, + provide: { + iid: '1', + projectPath: 'test', + }, }); }; diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/actions_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/actions_spec.js index 7ef4b769b6b..27de7de2411 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/actions_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/actions_spec.js @@ -1,11 +1,14 @@ import MockAdapter from 'axios-mock-adapter'; import testAction from 'helpers/vuex_action_helper'; +import createFlash from '~/flash'; import axios from '~/lib/utils/axios_utils'; import * as actions from '~/vue_shared/components/sidebar/labels_select_widget/store/actions'; import * as types from '~/vue_shared/components/sidebar/labels_select_widget/store/mutation_types'; import defaultState from '~/vue_shared/components/sidebar/labels_select_widget/store/state'; +jest.mock('~/flash'); + describe('LabelsSelect Actions', () => { let state; const mockInitialState = { @@ -91,10 +94,6 @@ describe('LabelsSelect Actions', () => { }); describe('receiveLabelsFailure', () => { - beforeEach(() => { - setFixtures('<div class="flash-container"></div>'); - }); - it('sets value `state.labelsFetchInProgress` to `false`', (done) => { testAction( actions.receiveLabelsFailure, @@ -109,9 +108,7 @@ describe('LabelsSelect Actions', () => { it('shows flash error', () => { actions.receiveLabelsFailure({ commit: () => {} }); - expect(document.querySelector('.flash-container .flash-text').innerText.trim()).toBe( - 'Error fetching labels.', - ); + expect(createFlash).toHaveBeenCalledWith({ message: 'Error fetching labels.' }); }); }); diff --git a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/mutations_spec.js b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/mutations_spec.js index acb275b5d90..9e965cb33e8 100644 --- a/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/mutations_spec.js +++ b/spec/frontend/vue_shared/components/sidebar/labels_select_widget/store/mutations_spec.js @@ -120,7 +120,16 @@ describe('LabelsSelect Mutations', () => { }); describe(`${types.UPDATE_SELECTED_LABELS}`, () => { - const labels = [{ id: 1 }, { id: 2 }, { id: 3 }, { id: 4 }]; + let labels; + + beforeEach(() => { + labels = [ + { id: 1, title: 'scoped::test', set: true }, + { id: 2, set: false, title: 'scoped::one' }, + { id: 3, title: '' }, + { id: 4, title: '' }, + ]; + }); it('updates `state.labels` to include `touched` and `set` props based on provided `labels` param', () => { const updatedLabelIds = [2]; @@ -136,5 +145,23 @@ describe('LabelsSelect Mutations', () => { } }); }); + + describe('when label is scoped', () => { + it('unsets the currently selected scoped label and sets the current label', () => { + const state = { + labels, + }; + mutations[types.UPDATE_SELECTED_LABELS](state, { + labels: [{ id: 2, title: 'scoped::one' }], + }); + + expect(state.labels).toEqual([ + { id: 1, title: 'scoped::test', set: false }, + { id: 2, set: true, title: 'scoped::one', touched: true }, + { id: 3, title: '' }, + { id: 4, title: '' }, + ]); + }); + }); }); }); |