diff options
Diffstat (limited to 'spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js')
| -rw-r--r-- | spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js | 169 |
1 files changed, 22 insertions, 147 deletions
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js index 71d1a0e253f..803ff950cbe 100644 --- a/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js +++ b/spec/frontend/work_items/components/work_item_links/work_item_link_child_spec.js @@ -1,20 +1,16 @@ -import { GlLabel, GlIcon } from '@gitlab/ui'; import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createMockApollo from 'helpers/mock_apollo_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; import waitForPromises from 'helpers/wait_for_promises'; -import WorkItemLinkChildMetadata from 'ee_else_ce/work_items/components/work_item_links/work_item_link_child_metadata.vue'; - import { createAlert } from '~/alert'; -import RichTimestampTooltip from '~/vue_shared/components/rich_timestamp_tooltip.vue'; import getWorkItemTreeQuery from '~/work_items/graphql/work_item_tree.query.graphql'; import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql'; import WorkItemLinkChild from '~/work_items/components/work_item_links/work_item_link_child.vue'; -import WorkItemLinksMenu from '~/work_items/components/work_item_links/work_item_links_menu.vue'; import WorkItemTreeChildren from '~/work_items/components/work_item_links/work_item_tree_children.vue'; +import WorkItemLinkChildContents from '~/work_items/components/shared/work_item_link_child_contents.vue'; import { WIDGET_TYPE_HIERARCHY, TASK_TYPE_NAME, @@ -24,12 +20,8 @@ import { import { workItemTask, workItemObjectiveWithChild, - workItemObjectiveNoMetadata, - confidentialWorkItemTask, - closedWorkItemTask, workItemHierarchyTreeResponse, workItemHierarchyTreeFailureResponse, - workItemObjectiveMetadataWidgets, changeIndirectWorkItemParentMutationResponse, workItemUpdateFailureResponse, } from '../../mock_data'; @@ -41,8 +33,6 @@ describe('WorkItemLinkChild', () => { let wrapper; let getWorkItemTreeQueryHandler; let mutationChangeParentHandler; - const { LABELS } = workItemObjectiveMetadataWidgets; - const mockLabels = LABELS.labels.nodes; const $toast = { show: jest.fn(), @@ -51,6 +41,8 @@ describe('WorkItemLinkChild', () => { Vue.use(VueApollo); + const findWorkItemLinkChildContents = () => wrapper.findComponent(WorkItemLinkChildContents); + const createComponent = ({ canUpdate = true, issuableGid = WORK_ITEM_ID, @@ -89,87 +81,7 @@ describe('WorkItemLinkChild', () => { createAlert.mockClear(); }); - it.each` - status | childItem | statusIconName | statusIconColorClass | rawTimestamp | tooltipContents - ${'open'} | ${workItemTask} | ${'issue-open-m'} | ${'gl-text-green-500'} | ${workItemTask.createdAt} | ${'Created'} - ${'closed'} | ${closedWorkItemTask} | ${'issue-close'} | ${'gl-text-blue-500'} | ${closedWorkItemTask.closedAt} | ${'Closed'} - `( - 'renders item status icon and tooltip when item status is `$status`', - ({ childItem, statusIconName, statusIconColorClass, rawTimestamp, tooltipContents }) => { - createComponent({ childItem }); - - const statusIcon = wrapper.findByTestId('item-status-icon').findComponent(GlIcon); - const statusTooltip = wrapper.findComponent(RichTimestampTooltip); - - expect(statusIcon.props('name')).toBe(statusIconName); - expect(statusIcon.classes()).toContain(statusIconColorClass); - expect(statusTooltip.props('rawTimestamp')).toBe(rawTimestamp); - expect(statusTooltip.props('timestampTypeText')).toContain(tooltipContents); - }, - ); - - it('renders confidential icon when item is confidential', () => { - createComponent({ childItem: confidentialWorkItemTask }); - - const confidentialIcon = wrapper.findByTestId('confidential-icon'); - - expect(confidentialIcon.props('name')).toBe('eye-slash'); - expect(confidentialIcon.attributes('title')).toBe('Confidential'); - }); - - describe('item title', () => { - let titleEl; - - beforeEach(() => { - createComponent(); - - titleEl = wrapper.findByTestId('item-title'); - }); - - it('renders item title', () => { - expect(titleEl.attributes('href')).toBe('/gitlab-org/gitlab-test/-/work_items/4'); - expect(titleEl.text()).toBe(workItemTask.title); - }); - - describe('renders item title correctly for relative instance', () => { - beforeEach(() => { - window.gon = { relative_url_root: '/test' }; - createComponent(); - titleEl = wrapper.findByTestId('item-title'); - }); - - it('renders item title with correct href', () => { - expect(titleEl.attributes('href')).toBe('/test/gitlab-org/gitlab-test/-/work_items/4'); - }); - - it('renders item title with correct text', () => { - expect(titleEl.text()).toBe(workItemTask.title); - }); - }); - - it.each` - action | event | emittedEvent - ${'doing mouseover on'} | ${'mouseover'} | ${'mouseover'} - ${'doing mouseout on'} | ${'mouseout'} | ${'mouseout'} - `('$action item title emit `$emittedEvent` event', ({ event, emittedEvent }) => { - titleEl.vm.$emit(event); - - expect(wrapper.emitted(emittedEvent)).toEqual([[]]); - }); - - it('emits click event with correct parameters on clicking title', () => { - const eventObj = { - preventDefault: jest.fn(), - }; - titleEl.vm.$emit('click', eventObj); - - expect(wrapper.emitted('click')).toEqual([[eventObj]]); - }); - }); - - describe('item metadata', () => { - const findMetadataComponent = () => wrapper.findComponent(WorkItemLinkChildMetadata); - + describe('renders WorkItemLinkChildContents', () => { beforeEach(() => { createComponent({ childItem: workItemObjectiveWithChild, @@ -177,67 +89,31 @@ describe('WorkItemLinkChild', () => { }); }); - it('renders item metadata component when item has metadata present', () => { - const metadataEl = findMetadataComponent(); - expect(metadataEl.exists()).toBe(true); - expect(metadataEl.props()).toMatchObject({ - metadataWidgets: workItemObjectiveMetadataWidgets, - }); - }); - - it('does not render item metadata component when item has no metadata present', () => { - createComponent({ - childItem: workItemObjectiveNoMetadata, - workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE, + it('with default props', () => { + expect(findWorkItemLinkChildContents().props()).toEqual({ + childItem: workItemObjectiveWithChild, + canUpdate: true, + parentWorkItemId: 'gid://gitlab/WorkItem/2', + workItemType: 'Objective', + childPath: '/gitlab-org/gitlab-test/-/work_items/12', }); - - expect(findMetadataComponent().exists()).toBe(false); }); - it('renders labels', () => { - const labels = wrapper.findAllComponents(GlLabel); - const mockLabel = mockLabels[0]; - - expect(labels).toHaveLength(mockLabels.length); - expect(labels.at(0).props()).toMatchObject({ - title: mockLabel.title, - backgroundColor: mockLabel.color, - description: mockLabel.description, - scoped: false, + describe('with relative instance', () => { + beforeEach(() => { + window.gon = { relative_url_root: '/test' }; + createComponent({ + childItem: workItemObjectiveWithChild, + workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE, + }); }); - expect(labels.at(1).props('scoped')).toBe(true); // Second label is scoped - }); - }); - - describe('item menu', () => { - let itemMenuEl; - - beforeEach(() => { - createComponent(); - - itemMenuEl = wrapper.findComponent(WorkItemLinksMenu); - }); - it('renders work-item-links-menu', () => { - expect(itemMenuEl.exists()).toBe(true); - - expect(itemMenuEl.attributes()).toMatchObject({ - 'work-item-id': workItemTask.id, - 'parent-work-item-id': WORK_ITEM_ID, + it('adds the relative url to child path value', () => { + expect(findWorkItemLinkChildContents().props('childPath')).toBe( + '/test/gitlab-org/gitlab-test/-/work_items/12', + ); }); }); - - it('does not render work-item-links-menu when canUpdate is false', () => { - createComponent({ canUpdate: false }); - - expect(wrapper.findComponent(WorkItemLinksMenu).exists()).toBe(false); - }); - - it('removeChild event on menu triggers `click-remove-child` event', () => { - itemMenuEl.vm.$emit('removeChild'); - - expect(wrapper.emitted('removeChild')).toEqual([[workItemTask]]); - }); }); describe('nested children', () => { @@ -252,7 +128,6 @@ describe('WorkItemLinkChild', () => { const findFirstItem = () => getChildrenNodes()[0]; beforeEach(() => { - getWorkItemTreeQueryHandler.mockClear(); createComponent({ childItem: workItemObjectiveWithChild, workItemType: WORK_ITEM_TYPE_VALUE_OBJECTIVE, |