diff options
Diffstat (limited to 'spec/frontend/vue_shared/issuable')
9 files changed, 73 insertions, 56 deletions
diff --git a/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js b/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js index 81362edaf37..7b0f0f7e344 100644 --- a/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js +++ b/spec/frontend/vue_shared/issuable/create/components/issuable_create_root_spec.js @@ -51,11 +51,11 @@ describe('IssuableCreateRoot', () => { }); it('renders issuable-form component', () => { - expect(wrapper.find(IssuableForm).exists()).toBe(true); + expect(wrapper.findComponent(IssuableForm).exists()).toBe(true); }); it('renders contents for slot "actions" within issuable-form component', () => { - const buttonEl = wrapper.find(IssuableForm).find('button.js-issuable-save'); + const buttonEl = wrapper.findComponent(IssuableForm).find('button.js-issuable-save'); expect(buttonEl.exists()).toBe(true); expect(buttonEl.text()).toBe('Submit issuable'); 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 cbfd05e7903..f98e7a678f4 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 @@ -65,9 +65,9 @@ describe('IssuableForm', () => { expect(titleFieldEl.exists()).toBe(true); expect(titleFieldEl.find('label').text()).toBe('Title'); - expect(titleFieldEl.find(GlFormInput).exists()).toBe(true); - expect(titleFieldEl.find(GlFormInput).attributes('placeholder')).toBe('Title'); - expect(titleFieldEl.find(GlFormInput).attributes('autofocus')).toBe('true'); + expect(titleFieldEl.findComponent(GlFormInput).exists()).toBe(true); + expect(titleFieldEl.findComponent(GlFormInput).attributes('placeholder')).toBe('Title'); + expect(titleFieldEl.findComponent(GlFormInput).attributes('autofocus')).toBe('true'); }); it('renders issuable description input field', () => { @@ -75,8 +75,8 @@ describe('IssuableForm', () => { expect(descriptionFieldEl.exists()).toBe(true); expect(descriptionFieldEl.find('label').text()).toBe('Description'); - expect(descriptionFieldEl.find(MarkdownField).exists()).toBe(true); - expect(descriptionFieldEl.find(MarkdownField).props()).toMatchObject({ + expect(descriptionFieldEl.findComponent(MarkdownField).exists()).toBe(true); + expect(descriptionFieldEl.findComponent(MarkdownField).props()).toMatchObject({ markdownPreviewPath: wrapper.vm.descriptionPreviewPath, markdownDocsPath: wrapper.vm.descriptionHelpPath, addSpacingClasses: false, @@ -94,8 +94,8 @@ describe('IssuableForm', () => { expect(labelsSelectEl.exists()).toBe(true); expect(labelsSelectEl.find('label').text()).toBe('Labels'); - expect(labelsSelectEl.find(LabelsSelect).exists()).toBe(true); - expect(labelsSelectEl.find(LabelsSelect).props()).toMatchObject({ + expect(labelsSelectEl.findComponent(LabelsSelect).exists()).toBe(true); + expect(labelsSelectEl.findComponent(LabelsSelect).props()).toMatchObject({ allowLabelEdit: true, allowLabelCreate: true, allowMultiselect: true, 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 80f14dffd08..f55d3156581 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 @@ -3,6 +3,7 @@ import { nextTick } from 'vue'; import { useFakeDate } from 'helpers/fake_date'; import { shallowMountExtended as shallowMount } from 'helpers/vue_test_utils_helper'; import IssuableItem from '~/vue_shared/issuable/list/components/issuable_item.vue'; +import WorkItemTypeIcon from '~/work_items/components/work_item_type_icon.vue'; import IssuableAssignees from '~/issuable/components/issue_assignees.vue'; import { mockIssuable, mockRegularLabel } from '../mock_data'; @@ -13,6 +14,7 @@ const createComponent = ({ issuable = mockIssuable, showCheckbox = true, slots = {}, + showWorkItemTypeIcon = false, } = {}) => shallowMount(IssuableItem, { propsData: { @@ -21,6 +23,7 @@ const createComponent = ({ issuable, showDiscussions: true, showCheckbox, + showWorkItemTypeIcon, }, slots, stubs: { @@ -40,6 +43,7 @@ describe('IssuableItem', () => { let wrapper; const findTimestampWrapper = () => wrapper.find('[data-testid="issuable-timestamp"]'); + const findWorkItemTypeIcon = () => wrapper.findComponent(WorkItemTypeIcon); beforeEach(() => { gon.gitlab_url = MOCK_GITLAB_URL; @@ -273,9 +277,9 @@ describe('IssuableItem', () => { const titleEl = wrapper.find('[data-testid="issuable-title"]'); expect(titleEl.exists()).toBe(true); - expect(titleEl.find(GlLink).attributes('href')).toBe(expectedHref); - expect(titleEl.find(GlLink).attributes('target')).toBe(expectedTarget); - expect(titleEl.find(GlLink).text()).toBe(mockIssuable.title); + expect(titleEl.findComponent(GlLink).attributes('href')).toBe(expectedHref); + expect(titleEl.findComponent(GlLink).attributes('target')).toBe(expectedTarget); + expect(titleEl.findComponent(GlLink).text()).toBe(mockIssuable.title); }, ); @@ -286,8 +290,8 @@ describe('IssuableItem', () => { await nextTick(); - expect(wrapper.find(GlFormCheckbox).exists()).toBe(true); - expect(wrapper.find(GlFormCheckbox).attributes('checked')).not.toBeDefined(); + expect(wrapper.findComponent(GlFormCheckbox).exists()).toBe(true); + expect(wrapper.findComponent(GlFormCheckbox).attributes('checked')).not.toBeDefined(); wrapper.setProps({ checked: true, @@ -295,7 +299,7 @@ describe('IssuableItem', () => { await nextTick(); - expect(wrapper.find(GlFormCheckbox).attributes('checked')).toBe('true'); + expect(wrapper.findComponent(GlFormCheckbox).attributes('checked')).toBe('true'); }); it('renders issuable title with `target` set as "_blank" when issuable.webUrl is external', async () => { @@ -308,9 +312,9 @@ describe('IssuableItem', () => { await nextTick(); - expect(wrapper.find('[data-testid="issuable-title"]').find(GlLink).attributes('target')).toBe( - '_blank', - ); + expect( + wrapper.find('[data-testid="issuable-title"]').findComponent(GlLink).attributes('target'), + ).toBe('_blank'); }); it('renders issuable confidential icon when issuable is confidential', async () => { @@ -323,7 +327,7 @@ describe('IssuableItem', () => { await nextTick(); - const confidentialEl = wrapper.find('[data-testid="issuable-title"]').find(GlIcon); + const confidentialEl = wrapper.find('[data-testid="issuable-title"]').findComponent(GlIcon); expect(confidentialEl.exists()).toBe(true); expect(confidentialEl.props('name')).toBe('eye-slash'); @@ -349,11 +353,23 @@ describe('IssuableItem', () => { wrapper = createComponent(); const taskStatus = wrapper.find('[data-testid="task-status"]'); - const expected = `${mockIssuable.taskCompletionStatus.completedCount} of ${mockIssuable.taskCompletionStatus.count} tasks completed`; + const expected = `${mockIssuable.taskCompletionStatus.completedCount} of ${mockIssuable.taskCompletionStatus.count} checklist items completed`; expect(taskStatus.text()).toBe(expected); }); + it('does not renders work item type icon by default', () => { + wrapper = createComponent(); + + expect(findWorkItemTypeIcon().exists()).toBe(false); + }); + + it('renders work item type icon when props passed', () => { + wrapper = createComponent({ showWorkItemTypeIcon: true }); + + expect(findWorkItemTypeIcon().props('workItemType')).toBe(mockIssuable.type); + }); + it('renders issuable reference', () => { wrapper = createComponent(); @@ -440,7 +456,7 @@ describe('IssuableItem', () => { it('renders gl-label component for each label present within `issuable` prop', () => { wrapper = createComponent(); - const labelsEl = wrapper.findAll(GlLabel); + const labelsEl = wrapper.findAllComponents(GlLabel); expect(labelsEl.exists()).toBe(true); expect(labelsEl).toHaveLength(mockLabels.length); @@ -476,18 +492,18 @@ describe('IssuableItem', () => { const discussionsEl = wrapper.find('[data-testid="issuable-discussions"]'); expect(discussionsEl.exists()).toBe(true); - expect(discussionsEl.find(GlLink).attributes()).toMatchObject({ + expect(discussionsEl.findComponent(GlLink).attributes()).toMatchObject({ title: 'Comments', href: `${mockIssuable.webUrl}#notes`, }); - expect(discussionsEl.find(GlIcon).props('name')).toBe('comments'); - expect(discussionsEl.find(GlLink).text()).toContain('2'); + expect(discussionsEl.findComponent(GlIcon).props('name')).toBe('comments'); + expect(discussionsEl.findComponent(GlLink).text()).toContain('2'); }); it('renders issuable-assignees component', () => { wrapper = createComponent(); - const assigneesEl = wrapper.find(IssuableAssignees); + const assigneesEl = wrapper.findComponent(IssuableAssignees); expect(assigneesEl.exists()).toBe(true); expect(assigneesEl.props()).toMatchObject({ diff --git a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js index 50e79dbe589..0c53f599d55 100644 --- a/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js +++ b/spec/frontend/vue_shared/issuable/list/components/issuable_list_root_spec.js @@ -359,7 +359,7 @@ describe('IssuableListRoot', () => { findIssuableTabs().vm.$emit('click'); - expect(wrapper.emitted('click-tab')).toBeTruthy(); + expect(wrapper.emitted('click-tab')).toHaveLength(1); }); it('sets all issuables as checked when filtered-search-bar component emits `checked-input` event', () => { @@ -369,7 +369,7 @@ describe('IssuableListRoot', () => { searchEl.vm.$emit('checked-input', true); - expect(searchEl.emitted('checked-input')).toBeTruthy(); + expect(searchEl.emitted('checked-input')).toHaveLength(1); expect(searchEl.emitted('checked-input').length).toBe(1); expect(wrapper.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({ @@ -384,9 +384,9 @@ describe('IssuableListRoot', () => { const searchEl = findFilteredSearchBar(); searchEl.vm.$emit('onFilter'); - expect(wrapper.emitted('filter')).toBeTruthy(); + expect(wrapper.emitted('filter')).toHaveLength(1); searchEl.vm.$emit('onSort'); - expect(wrapper.emitted('sort')).toBeTruthy(); + expect(wrapper.emitted('sort')).toHaveLength(1); }); it('sets an issuable as checked when issuable-item component emits `checked-input` event', () => { @@ -396,7 +396,7 @@ describe('IssuableListRoot', () => { issuableItem.vm.$emit('checked-input', true); - expect(issuableItem.emitted('checked-input')).toBeTruthy(); + expect(issuableItem.emitted('checked-input')).toHaveLength(1); expect(issuableItem.emitted('checked-input').length).toBe(1); expect(wrapper.vm.checkedIssuables[mockIssuables[0].iid]).toEqual({ @@ -425,7 +425,7 @@ describe('IssuableListRoot', () => { wrapper = createComponent({ data, props: { showPaginationControls: true } }); findGlPagination().vm.$emit('input'); - expect(wrapper.emitted('page-change')).toBeTruthy(); + expect(wrapper.emitted('page-change')).toHaveLength(1); }); it.each` diff --git a/spec/frontend/vue_shared/issuable/list/mock_data.js b/spec/frontend/vue_shared/issuable/list/mock_data.js index 8640f4a2cd5..b67bd0f42fe 100644 --- a/spec/frontend/vue_shared/issuable/list/mock_data.js +++ b/spec/frontend/vue_shared/issuable/list/mock_data.js @@ -57,6 +57,7 @@ export const mockIssuable = { count: 2, completedCount: 1, }, + type: 'issue', }; export const mockIssuables = [ diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js index 7c582360637..39a76a51191 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_body_spec.js @@ -154,7 +154,7 @@ describe('IssuableBody', () => { describe('template', () => { it('renders issuable-title component', () => { - const titleEl = wrapper.find(IssuableTitle); + const titleEl = wrapper.findComponent(IssuableTitle); expect(titleEl.exists()).toBe(true); expect(titleEl.props()).toMatchObject({ @@ -165,7 +165,7 @@ describe('IssuableBody', () => { }); it('renders issuable-description component', () => { - const descriptionEl = wrapper.find(IssuableDescription); + const descriptionEl = wrapper.findComponent(IssuableDescription); expect(descriptionEl.exists()).toBe(true); expect(descriptionEl.props('issuable')).toEqual(issuableBodyProps.issuable); @@ -184,7 +184,7 @@ describe('IssuableBody', () => { await nextTick(); - const editFormEl = wrapper.find(IssuableEditForm); + const editFormEl = wrapper.findComponent(IssuableEditForm); expect(editFormEl.exists()).toBe(true); expect(editFormEl.props()).toMatchObject({ issuable: issuableBodyProps.issuable, @@ -198,7 +198,7 @@ describe('IssuableBody', () => { describe('events', () => { it('component emits `edit-issuable` event bubbled via issuable-title', () => { - const issuableTitle = wrapper.find(IssuableTitle); + const issuableTitle = wrapper.findComponent(IssuableTitle); issuableTitle.vm.$emit('edit-issuable'); @@ -223,7 +223,7 @@ describe('IssuableBody', () => { await nextTick(); - const issuableEditForm = wrapper.find(IssuableEditForm); + const issuableEditForm = wrapper.findComponent(IssuableEditForm); issuableEditForm.vm.$emit(eventName, eventObj, issuableMeta); diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js index d3e484cf913..d843da4da5b 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_edit_form_spec.js @@ -124,7 +124,7 @@ describe('IssuableEditForm', () => { const titleInputEl = wrapper.find('[data-testid="title"]'); expect(titleInputEl.exists()).toBe(true); - expect(titleInputEl.find(GlFormInput).attributes()).toMatchObject({ + expect(titleInputEl.findComponent(GlFormInput).attributes()).toMatchObject({ 'aria-label': 'Title', placeholder: 'Title', }); @@ -134,7 +134,7 @@ describe('IssuableEditForm', () => { const descriptionEl = wrapper.find('[data-testid="description"]'); expect(descriptionEl.exists()).toBe(true); - expect(descriptionEl.find(MarkdownField).props()).toMatchObject({ + expect(descriptionEl.findComponent(MarkdownField).props()).toMatchObject({ markdownPreviewPath: issuableEditFormProps.descriptionPreviewPath, markdownDocsPath: issuableEditFormProps.descriptionHelpPath, enableAutocomplete: issuableEditFormProps.enableAutocomplete, @@ -161,7 +161,7 @@ describe('IssuableEditForm', () => { }; it('component emits `keydown-title` event with event object and issuableMeta params via gl-form-input', async () => { - const titleInputEl = wrapper.find(GlFormInput); + const titleInputEl = wrapper.findComponent(GlFormInput); titleInputEl.vm.$emit('keydown', eventObj, 'title'); diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js index e00bb184535..6a8b9ef77a9 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_header_spec.js @@ -86,7 +86,7 @@ describe('IssuableHeader', () => { const blockedEl = wrapper.findByTestId('blocked'); expect(blockedEl.exists()).toBe(true); - expect(blockedEl.find(GlIcon).props('name')).toBe('lock'); + expect(blockedEl.findComponent(GlIcon).props('name')).toBe('lock'); }); it('renders confidential icon when issuable is confidential', async () => { @@ -97,7 +97,7 @@ describe('IssuableHeader', () => { const confidentialEl = wrapper.findByTestId('confidential'); expect(confidentialEl.exists()).toBe(true); - expect(confidentialEl.find(GlIcon).props('name')).toBe('eye-slash'); + expect(confidentialEl.findComponent(GlIcon).props('name')).toBe('eye-slash'); }); it('renders issuable author avatar', () => { @@ -113,19 +113,19 @@ describe('IssuableHeader', () => { const avatarEl = wrapper.findByTestId('avatar'); expect(avatarEl.exists()).toBe(true); expect(avatarEl.attributes()).toMatchObject(avatarElAttrs); - expect(avatarEl.find(GlAvatarLabeled).attributes()).toMatchObject({ + expect(avatarEl.findComponent(GlAvatarLabeled).attributes()).toMatchObject({ size: '24', src: avatarUrl, label: name, }); - expect(avatarEl.find(GlAvatarLabeled).find(GlIcon).exists()).toBe(false); + expect(avatarEl.findComponent(GlAvatarLabeled).findComponent(GlIcon).exists()).toBe(false); }); it('renders task status text when `taskCompletionStatus` prop is defined', () => { createComponent(); expect(findTaskStatusEl().exists()).toBe(true); - expect(findTaskStatusEl().text()).toContain('0 of 5 tasks completed'); + expect(findTaskStatusEl().text()).toContain('0 of 5 checklist items completed'); }); it('does not render task status text when tasks count is 0', () => { @@ -172,7 +172,7 @@ describe('IssuableHeader', () => { ); const avatarEl = wrapper.findComponent(GlAvatarLabeled); - const icon = avatarEl.find(GlIcon); + const icon = avatarEl.findComponent(GlIcon); expect(icon.exists()).toBe(true); expect(icon.props('name')).toBe('external-link'); diff --git a/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js b/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js index f56064ed8e1..edfd55c8bb4 100644 --- a/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js +++ b/spec/frontend/vue_shared/issuable/show/components/issuable_show_root_spec.js @@ -63,7 +63,7 @@ describe('IssuableShowRoot', () => { }); it('renders issuable-header component', () => { - const issuableHeader = wrapper.find(IssuableHeader); + const issuableHeader = wrapper.findComponent(IssuableHeader); expect(issuableHeader.exists()).toBe(true); expect(issuableHeader.props()).toMatchObject({ @@ -84,7 +84,7 @@ describe('IssuableShowRoot', () => { }); it('renders issuable-body component', () => { - const issuableBody = wrapper.find(IssuableBody); + const issuableBody = wrapper.findComponent(IssuableBody); expect(issuableBody.exists()).toBe(true); expect(issuableBody.props()).toMatchObject({ @@ -99,38 +99,38 @@ describe('IssuableShowRoot', () => { }); it('renders issuable-sidebar component', () => { - const issuableSidebar = wrapper.find(IssuableSidebar); + const issuableSidebar = wrapper.findComponent(IssuableSidebar); expect(issuableSidebar.exists()).toBe(true); }); describe('events', () => { it('component emits `edit-issuable` event bubbled via issuable-body', () => { - const issuableBody = wrapper.find(IssuableBody); + const issuableBody = wrapper.findComponent(IssuableBody); issuableBody.vm.$emit('edit-issuable'); - expect(wrapper.emitted('edit-issuable')).toBeTruthy(); + expect(wrapper.emitted('edit-issuable')).toHaveLength(1); }); it('component emits `task-list-update-success` event bubbled via issuable-body', () => { - const issuableBody = wrapper.find(IssuableBody); + const issuableBody = wrapper.findComponent(IssuableBody); const eventParam = { foo: 'bar', }; issuableBody.vm.$emit('task-list-update-success', eventParam); - expect(wrapper.emitted('task-list-update-success')).toBeTruthy(); + expect(wrapper.emitted('task-list-update-success')).toHaveLength(1); expect(wrapper.emitted('task-list-update-success')[0]).toEqual([eventParam]); }); it('component emits `task-list-update-failure` event bubbled via issuable-body', () => { - const issuableBody = wrapper.find(IssuableBody); + const issuableBody = wrapper.findComponent(IssuableBody); issuableBody.vm.$emit('task-list-update-failure'); - expect(wrapper.emitted('task-list-update-failure')).toBeTruthy(); + expect(wrapper.emitted('task-list-update-failure')).toHaveLength(1); }); it.each(['keydown-title', 'keydown-description'])( @@ -145,11 +145,11 @@ describe('IssuableShowRoot', () => { issuableDescription: 'foobar', }; - const issuableBody = wrapper.find(IssuableBody); + const issuableBody = wrapper.findComponent(IssuableBody); issuableBody.vm.$emit(eventName, eventObj, issuableMeta); - expect(wrapper.emitted(eventName)).toBeTruthy(); + expect(wrapper.emitted()).toHaveProperty(eventName); expect(wrapper.emitted(eventName)[0]).toMatchObject([eventObj, issuableMeta]); }, ); |