1 files changed, 31 insertions, 13 deletions

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');