diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-09 18:11:41 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2023-08-09 18:11:41 +0300 |
commit | d56569ff3e73ae1dbcf93d2530925c4ecb8fd185 (patch) | |
tree | f89e6dd59d8d807201a9dd3ca46b5eee0ea5f438 /spec/frontend/work_items/components/work_item_links | |
parent | 1faea1c6a0464e44dca4477fb31846938c2ad871 (diff) |
Add latest changes from gitlab-org/gitlab@master
Diffstat (limited to 'spec/frontend/work_items/components/work_item_links')
3 files changed, 22 insertions, 232 deletions
diff --git a/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js deleted file mode 100644 index 07efb1c5ac8..00000000000 --- a/spec/frontend/work_items/components/work_item_links/work_item_link_child_metadata_spec.js +++ /dev/null @@ -1,55 +0,0 @@ -import { GlAvatarsInline } from '@gitlab/ui'; - -import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; - -import ItemMilestone from '~/issuable/components/issue_milestone.vue'; -import WorkItemLinkChildMetadata from '~/work_items/components/work_item_links/work_item_link_child_metadata.vue'; - -import { workItemObjectiveMetadataWidgets } from '../../mock_data'; - -describe('WorkItemLinkChildMetadata', () => { - const { MILESTONE, ASSIGNEES } = workItemObjectiveMetadataWidgets; - const mockMilestone = MILESTONE.milestone; - const mockAssignees = ASSIGNEES.assignees.nodes; - let wrapper; - - const createComponent = ({ metadataWidgets = workItemObjectiveMetadataWidgets } = {}) => { - wrapper = shallowMountExtended(WorkItemLinkChildMetadata, { - propsData: { - metadataWidgets, - }, - slots: { - default: `<div data-testid="default-slot">Foo</div>`, - }, - }); - }; - - beforeEach(() => { - createComponent(); - }); - - it('renders default slot contents', () => { - expect(wrapper.findByTestId('default-slot').text()).toBe('Foo'); - }); - - it('renders item milestone', () => { - const milestoneLink = wrapper.findComponent(ItemMilestone); - - expect(milestoneLink.exists()).toBe(true); - expect(milestoneLink.props('milestone')).toEqual(mockMilestone); - }); - - it('renders avatars for assignees', () => { - const avatars = wrapper.findComponent(GlAvatarsInline); - - expect(avatars.exists()).toBe(true); - expect(avatars.props()).toMatchObject({ - avatars: mockAssignees, - collapsed: true, - maxVisible: 2, - avatarSize: 24, - badgeTooltipProp: 'name', - badgeSrOnlyText: '', - }); - }); -}); 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, diff --git a/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js deleted file mode 100644 index f02a9fbd021..00000000000 --- a/spec/frontend/work_items/components/work_item_links/work_item_links_menu_spec.js +++ /dev/null @@ -1,30 +0,0 @@ -import { GlDropdown, GlDropdownItem } from '@gitlab/ui'; - -import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; -import WorkItemLinksMenu from '~/work_items/components/work_item_links/work_item_links_menu.vue'; - -describe('WorkItemLinksMenu', () => { - let wrapper; - - const createComponent = () => { - wrapper = shallowMountExtended(WorkItemLinksMenu); - }; - - const findDropdown = () => wrapper.findComponent(GlDropdown); - const findRemoveDropdownItem = () => wrapper.findComponent(GlDropdownItem); - - beforeEach(() => { - createComponent(); - }); - - it('renders dropdown and dropdown items', () => { - expect(findDropdown().exists()).toBe(true); - expect(findRemoveDropdownItem().exists()).toBe(true); - }); - - it('emits removeChild event on click Remove', () => { - findRemoveDropdownItem().vm.$emit('click'); - - expect(wrapper.emitted('removeChild')).toHaveLength(1); - }); -}); |