diff options
Diffstat (limited to 'spec/frontend/vue_shared/issuable')
4 files changed, 148 insertions, 17 deletions
diff --git a/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js b/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js index f98e7a678f4..ff21b3bc356 100644 --- a/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js +++ b/spec/frontend/vue_shared/issuable/create/components/issuable_form_spec.js @@ -3,7 +3,7 @@ import { shallowMount } from '@vue/test-utils'; import IssuableForm from '~/vue_shared/issuable/create/components/issuable_form.vue'; import MarkdownField from '~/vue_shared/components/markdown/field.vue'; -import LabelsSelect from '~/vue_shared/components/sidebar/labels_select_vue/labels_select_root.vue'; +import LabelsSelect from '~/sidebar/components/labels/labels_select_vue/labels_select_root.vue'; const createComponent = ({ descriptionPreviewPath = '/gitlab-org/gitlab-shell/preview_markdown', diff --git a/spec/frontend/vue_shared/issuable/create/components/issuable_label_selector_spec.js b/spec/frontend/vue_shared/issuable/create/components/issuable_label_selector_spec.js new file mode 100644 index 00000000000..76b6efa15b6 --- /dev/null +++ b/spec/frontend/vue_shared/issuable/create/components/issuable_label_selector_spec.js @@ -0,0 +1,141 @@ +import { shallowMount } from '@vue/test-utils'; +import { GlIcon } from '@gitlab/ui'; +import { + mockRegularLabel, + mockScopedLabel, +} from 'jest/sidebar/components/labels/labels_select_widget/mock_data'; +import IssuableLabelSelector from '~/vue_shared/issuable/create/components/issuable_label_selector.vue'; +import LabelsSelect from '~/sidebar/components/labels/labels_select_widget/labels_select_root.vue'; +import { + DropdownVariant, + LabelType, +} from '~/sidebar/components/labels/labels_select_widget/constants'; +import { WorkspaceType } from '~/issues/constants'; +import { __ } from '~/locale'; + +const allowLabelRemove = true; +const attrWorkspacePath = '/workspace-path'; +const fieldName = 'field_name[]'; +const fullPath = '/full-path'; +const labelsFilterBasePath = '/labels-filter-base-path'; +const initialLabels = []; +const issuableType = 'issue'; +const labelType = LabelType.project; +const variant = DropdownVariant.Embedded; +const workspaceType = WorkspaceType.project; + +describe('IssuableLabelSelector', () => { + let wrapper; + + const findTitle = () => wrapper.find('label').text().replace(/\s+/, ' '); + const findLabelIcon = () => wrapper.findComponent(GlIcon); + const findAllHiddenInputs = () => wrapper.findAll('input[type="hidden"]'); + const findLabelSelector = () => wrapper.findComponent(LabelsSelect); + + const createComponent = (injectedProps = {}) => { + return shallowMount(IssuableLabelSelector, { + provide: { + allowLabelRemove, + attrWorkspacePath, + fieldName, + fullPath, + labelsFilterBasePath, + initialLabels, + issuableType, + labelType, + variant, + workspaceType, + ...injectedProps, + }, + }); + }; + + afterEach(() => { + wrapper.destroy(); + }); + + const expectTitleWithCount = (count) => { + const title = findTitle(); + + expect(title).toContain(__('Labels')); + expect(title).toContain(count.toString()); + }; + + describe('by default', () => { + beforeEach(() => { + wrapper = createComponent(); + }); + + it('has the selected labels count', () => { + expectTitleWithCount(0); + expect(findLabelIcon().props('name')).toBe('labels'); + }); + + it('has the label selector', () => { + expect(findLabelSelector().props()).toMatchObject({ + allowLabelRemove, + allowMultiselect: true, + showEmbeddedLabelsList: true, + fullPath, + attrWorkspacePath, + labelsFilterBasePath, + dropdownButtonText: __('Select label'), + labelsListTitle: __('Select label'), + footerCreateLabelTitle: __('Create project label'), + footerManageLabelTitle: __('Manage project labels'), + variant, + workspaceType, + labelCreateType: labelType, + selectedLabels: initialLabels, + }); + + expect(findLabelSelector().text()).toBe(__('None')); + }); + }); + + it('passing initial labels applies them to the form', () => { + wrapper = createComponent({ initialLabels: [mockRegularLabel, mockScopedLabel] }); + + expectTitleWithCount(2); + expect(findLabelSelector().props('selectedLabels')).toStrictEqual([ + mockRegularLabel, + mockScopedLabel, + ]); + expect(findAllHiddenInputs().wrappers.map((input) => input.element.value)).toStrictEqual([ + `${mockRegularLabel.id}`, + `${mockScopedLabel.id}`, + ]); + }); + + it('updates the selected labels on the `updateSelectedLabels` event', async () => { + wrapper = createComponent(); + + expectTitleWithCount(0); + expect(findLabelSelector().props('selectedLabels')).toStrictEqual([]); + expect(findAllHiddenInputs()).toHaveLength(0); + + await findLabelSelector().vm.$emit('updateSelectedLabels', { labels: [mockRegularLabel] }); + + expectTitleWithCount(1); + expect(findLabelSelector().props('selectedLabels')).toStrictEqual([mockRegularLabel]); + expect(findAllHiddenInputs().wrappers.map((input) => input.element.value)).toStrictEqual([ + `${mockRegularLabel.id}`, + ]); + }); + + it('updates the selected labels on the `onLabelRemove` event', async () => { + wrapper = createComponent({ initialLabels: [mockRegularLabel] }); + + expectTitleWithCount(1); + expect(findLabelSelector().props('selectedLabels')).toStrictEqual([mockRegularLabel]); + expect(findAllHiddenInputs().wrappers.map((input) => input.element.value)).toStrictEqual([ + `${mockRegularLabel.id}`, + ]); + + await findLabelSelector().vm.$emit('onLabelRemove', mockRegularLabel.id); + + expectTitleWithCount(0); + expect(findLabelSelector().props('selectedLabels')).toStrictEqual([]); + expect(findAllHiddenInputs()).toHaveLength(0); + }); +}); diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js index e1c6020686c..2fac004875a 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_item_spec.js @@ -225,7 +225,7 @@ describe('IssuableItem', () => { }, }); - expect(wrapper.findByTestId('issuable-discussions').exists()).toBe(returnValue); + expect(wrapper.findByTestId('issuable-comments').exists()).toBe(returnValue); }, ); }); @@ -489,7 +489,7 @@ describe('IssuableItem', () => { it('renders discussions count', () => { wrapper = createComponent(); - const discussionsEl = wrapper.find('[data-testid="issuable-discussions"]'); + const discussionsEl = wrapper.findByTestId('issuable-comments'); expect(discussionsEl.exists()).toBe(true); expect(discussionsEl.findComponent(GlLink).attributes()).toMatchObject({ diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js index f2211e5b2bb..ea58cc2baf5 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_description_spec.js @@ -1,10 +1,12 @@ import { shallowMount } from '@vue/test-utils'; -import $ from 'jquery'; import IssuableDescription from '~/vue_shared/issuable/show/components/issuable_description.vue'; +import { renderGFM } from '~/behaviors/markdown/render_gfm'; import { mockIssuable } from '../mock_data'; +jest.mock('~/behaviors/markdown/render_gfm'); + const createComponent = ({ issuable = mockIssuable, enableTaskList = true, @@ -16,11 +18,9 @@ const createComponent = ({ }); describe('IssuableDescription', () => { - let renderGFMSpy; let wrapper; beforeEach(() => { - renderGFMSpy = jest.spyOn($.fn, 'renderGFM'); wrapper = createComponent(); }); @@ -30,17 +30,7 @@ describe('IssuableDescription', () => { describe('mounted', () => { it('calls `renderGFM`', () => { - expect(renderGFMSpy).toHaveBeenCalledTimes(1); - }); - }); - - describe('methods', () => { - describe('renderGFM', () => { - it('calls `renderGFM` on container element', () => { - wrapper.vm.renderGFM(); - - expect(renderGFMSpy).toHaveBeenCalled(); - }); + expect(renderGFM).toHaveBeenCalledTimes(1); }); }); |