diff options
Diffstat (limited to 'spec/frontend/work_items/components/work_item_links')
-rw-r--r-- | spec/frontend/work_items/components/work_item_links/work_item_actions_split_button_spec.js (renamed from spec/frontend/work_items/components/work_item_links/okr_actions_split_button_spec.js) | 34 | ||||
-rw-r--r-- | spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js | 44 |
2 files changed, 62 insertions, 16 deletions
diff --git a/spec/frontend/work_items/components/work_item_links/okr_actions_split_button_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_actions_split_button_spec.js index 55d5b34ae70..630ffa1a699 100644 --- a/spec/frontend/work_items/components/work_item_links/okr_actions_split_button_spec.js +++ b/spec/frontend/work_items/components/work_item_links/work_item_actions_split_button_spec.js @@ -1,12 +1,40 @@ import { GlDisclosureDropdown, GlDisclosureDropdownGroup } from '@gitlab/ui'; import { shallowMount } from '@vue/test-utils'; -import OkrActionsSplitButton from '~/work_items/components/work_item_links/okr_actions_split_button.vue'; +import WorkItemActionsSplitButton from '~/work_items/components/work_item_links/work_item_actions_split_button.vue'; import { extendedWrapper } from 'helpers/vue_test_utils_helper'; +const okrActions = [ + { + name: 'Objective', + items: [ + { + text: 'New objective', + }, + { + text: 'Existing objective', + }, + ], + }, + { + name: 'Key result', + items: [ + { + text: 'New key result', + }, + { + text: 'Existing key result', + }, + ], + }, +]; + const createComponent = () => { return extendedWrapper( - shallowMount(OkrActionsSplitButton, { + shallowMount(WorkItemActionsSplitButton, { + propsData: { + actions: okrActions, + }, stubs: { GlDisclosureDropdown, }, @@ -21,7 +49,7 @@ describe('RelatedItemsTree', () => { wrapper = createComponent(); }); - describe('OkrActionsSplitButton', () => { + describe('WorkItemActionsSplitButton', () => { describe('template', () => { it('renders objective and key results sections', () => { expect(wrapper.findAllComponents(GlDisclosureDropdownGroup).at(0).props('group').name).toBe( diff --git a/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js b/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js index 6c1d1035c3d..49a674e73c8 100644 --- a/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js +++ b/spec/frontend/work_items/components/work_item_links/work_item_tree_spec.js @@ -1,28 +1,36 @@ -import { nextTick } from 'vue'; +import Vue, { nextTick } from 'vue'; +import VueApollo from 'vue-apollo'; import { GlToggle } from '@gitlab/ui'; +import createMockApollo from 'helpers/mock_apollo_helper'; import { shallowMountExtended } from 'helpers/vue_test_utils_helper'; +import waitForPromises from 'helpers/wait_for_promises'; import WidgetWrapper from '~/work_items/components/widget_wrapper.vue'; import WorkItemTree from '~/work_items/components/work_item_links/work_item_tree.vue'; import WorkItemChildrenWrapper from '~/work_items/components/work_item_links/work_item_children_wrapper.vue'; import WorkItemLinksForm from '~/work_items/components/work_item_links/work_item_links_form.vue'; -import OkrActionsSplitButton from '~/work_items/components/work_item_links/okr_actions_split_button.vue'; +import WorkItemActionsSplitButton from '~/work_items/components/work_item_links/work_item_actions_split_button.vue'; +import getAllowedWorkItemChildTypes from '~/work_items//graphql/work_item_allowed_children.query.graphql'; import { FORM_TYPES, WORK_ITEM_TYPE_ENUM_OBJECTIVE, WORK_ITEM_TYPE_ENUM_KEY_RESULT, } from '~/work_items/constants'; -import { childrenWorkItems } from '../../mock_data'; +import { childrenWorkItems, allowedChildrenTypesResponse } from '../../mock_data'; + +Vue.use(VueApollo); describe('WorkItemTree', () => { let wrapper; const findEmptyState = () => wrapper.findByTestId('tree-empty'); - const findToggleFormSplitButton = () => wrapper.findComponent(OkrActionsSplitButton); + const findToggleFormSplitButton = () => wrapper.findComponent(WorkItemActionsSplitButton); const findForm = () => wrapper.findComponent(WorkItemLinksForm); const findWidgetWrapper = () => wrapper.findComponent(WidgetWrapper); const findWorkItemLinkChildrenWrapper = () => wrapper.findComponent(WorkItemChildrenWrapper); const findShowLabelsToggle = () => wrapper.findComponent(GlToggle); + const allowedChildrenTypesHandler = jest.fn().mockResolvedValue(allowedChildrenTypesResponse); + const createComponent = ({ workItemType = 'Objective', parentWorkItemType = 'Objective', @@ -31,6 +39,9 @@ describe('WorkItemTree', () => { canUpdate = true, } = {}) => { wrapper = shallowMountExtended(WorkItemTree, { + apolloProvider: createMockApollo([ + [getAllowedWorkItemChildTypes, allowedChildrenTypesHandler], + ]), propsData: { fullPath: 'test/project', workItemType, @@ -79,18 +90,25 @@ describe('WorkItemTree', () => { expect(findWidgetWrapper().props('error')).toBe(errorMessage); }); + it('fetches allowed children types for current work item', async () => { + createComponent(); + await waitForPromises(); + + expect(allowedChildrenTypesHandler).toHaveBeenCalled(); + }); + it.each` - option | event | formType | childType - ${'New objective'} | ${'showCreateObjectiveForm'} | ${FORM_TYPES.create} | ${WORK_ITEM_TYPE_ENUM_OBJECTIVE} - ${'Existing objective'} | ${'showAddObjectiveForm'} | ${FORM_TYPES.add} | ${WORK_ITEM_TYPE_ENUM_OBJECTIVE} - ${'New key result'} | ${'showCreateKeyResultForm'} | ${FORM_TYPES.create} | ${WORK_ITEM_TYPE_ENUM_KEY_RESULT} - ${'Existing key result'} | ${'showAddKeyResultForm'} | ${FORM_TYPES.add} | ${WORK_ITEM_TYPE_ENUM_KEY_RESULT} + option | formType | childType + ${'New objective'} | ${FORM_TYPES.create} | ${WORK_ITEM_TYPE_ENUM_OBJECTIVE} + ${'Existing objective'} | ${FORM_TYPES.add} | ${WORK_ITEM_TYPE_ENUM_OBJECTIVE} + ${'New key result'} | ${FORM_TYPES.create} | ${WORK_ITEM_TYPE_ENUM_KEY_RESULT} + ${'Existing key result'} | ${FORM_TYPES.add} | ${WORK_ITEM_TYPE_ENUM_KEY_RESULT} `( - 'when selecting $option from split button, renders the form passing $formType and $childType', - async ({ event, formType, childType }) => { + 'when triggering action $option, renders the form passing $formType and $childType', + async ({ formType, childType }) => { createComponent(); - findToggleFormSplitButton().vm.$emit(event); + wrapper.vm.showAddForm(formType, childType); await nextTick(); expect(findForm().exists()).toBe(true); @@ -122,7 +140,7 @@ describe('WorkItemTree', () => { it('emits `addChild` event when form emits `addChild` event', async () => { createComponent(); - findToggleFormSplitButton().vm.$emit('showCreateObjectiveForm'); + wrapper.vm.showAddForm(FORM_TYPES.create, WORK_ITEM_TYPE_ENUM_OBJECTIVE); await nextTick(); findForm().vm.$emit('addChild'); |