1 files changed, 89 insertions, 3 deletions

diff --git a/spec/frontend/work_items/components/notes/work_item_comment_form_spec.js b/spec/frontend/work_items/components/notes/work_item_comment_form_spec.js
index bf36e3999d4..87db3d4573b 100644
--- a/spec/frontend/work_items/components/notes/work_item_comment_form_spec.js
+++ b/spec/frontend/work_items/components/notes/work_item_comment_form_spec.js
@@ -1,11 +1,23 @@
 import { shallowMount } from '@vue/test-utils';
-import { nextTick } from 'vue';
+import Vue, { nextTick } from 'vue';
+import VueApollo from 'vue-apollo';
 import waitForPromises from 'helpers/wait_for_promises';
 import * as autosave from '~/lib/utils/autosave';
 import { ESC_KEY, ENTER_KEY } from '~/lib/utils/keys';
+import {
+  STATE_OPEN,
+  STATE_CLOSED,
+  STATE_EVENT_REOPEN,
+  STATE_EVENT_CLOSE,
+} from '~/work_items/constants';
 import * as confirmViaGlModal from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
 import WorkItemCommentForm from '~/work_items/components/notes/work_item_comment_form.vue';
 import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
+import createMockApollo from 'helpers/mock_apollo_helper';
+import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
+import { updateWorkItemMutationResponse, workItemQueryResponse } from 'jest/work_items/mock_data';
+
+Vue.use(VueApollo);
 
 const draftComment = 'draft comment';
 
@@ -18,6 +30,8 @@ jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal', () => ({
   confirmAction: jest.fn().mockResolvedValue(true),
 }));
 
+const workItemId = 'gid://gitlab/WorkItem/1';
+
 describe('Work item comment form component', () => {
   let wrapper;
 
@@ -27,16 +41,29 @@ describe('Work item comment form component', () => {
   const findCancelButton = () => wrapper.find('[data-testid="cancel-button"]');
   const findConfirmButton = () => wrapper.find('[data-testid="confirm-button"]');
 
-  const createComponent = ({ isSubmitting = false, initialValue = '' } = {}) => {
+  const mutationSuccessHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse);
+
+  const createComponent = ({
+    isSubmitting = false,
+    initialValue = '',
+    isNewDiscussion = false,
+    workItemState = STATE_OPEN,
+    workItemType = 'Task',
+    mutationHandler = mutationSuccessHandler,
+  } = {}) => {
     wrapper = shallowMount(WorkItemCommentForm, {
+      apolloProvider: createMockApollo([[updateWorkItemMutation, mutationHandler]]),
       propsData: {
-        workItemType: 'Issue',
+        workItemState,
+        workItemId,
+        workItemType,
         ariaLabel: 'test-aria-label',
         autosaveKey: mockAutosaveKey,
         isSubmitting,
         initialValue,
         markdownPreviewPath: '/group/project/preview_markdown?target_type=WorkItem',
         autocompleteDataSources: {},
+        isNewDiscussion,
       },
       provide: {
         fullPath: 'test-project-path',
@@ -163,4 +190,63 @@ describe('Work item comment form component', () => {
 
     expect(wrapper.emitted('submitForm')).toEqual([[draftComment]]);
   });
+
+  describe('when used as a top level/is a new discussion', () => {
+    describe('cancel button text', () => {
+      it.each`
+        workItemState   | workItemType    | buttonText
+        ${STATE_OPEN}   | ${'Task'}       | ${'Close task'}
+        ${STATE_CLOSED} | ${'Task'}       | ${'Reopen task'}
+        ${STATE_OPEN}   | ${'Objective'}  | ${'Close objective'}
+        ${STATE_CLOSED} | ${'Objective'}  | ${'Reopen objective'}
+        ${STATE_OPEN}   | ${'Key result'} | ${'Close key result'}
+        ${STATE_CLOSED} | ${'Key result'} | ${'Reopen key result'}
+      `(
+        'is "$buttonText" when "$workItemType" state is "$workItemState"',
+        ({ workItemState, workItemType, buttonText }) => {
+          createComponent({ isNewDiscussion: true, workItemState, workItemType });
+
+          expect(findCancelButton().text()).toBe(buttonText);
+        },
+      );
+    });
+
+    describe('Close/reopen button click', () => {
+      it.each`
+        workItemState   | stateEvent
+        ${STATE_OPEN}   | ${STATE_EVENT_CLOSE}
+        ${STATE_CLOSED} | ${STATE_EVENT_REOPEN}
+      `(
+        'calls mutation with "$stateEvent" when workItemState is "$workItemState"',
+        async ({ workItemState, stateEvent }) => {
+          createComponent({ isNewDiscussion: true, workItemState });
+
+          findCancelButton().vm.$emit('click');
+
+          await waitForPromises();
+
+          expect(mutationSuccessHandler).toHaveBeenCalledWith({
+            input: {
+              id: workItemQueryResponse.data.workItem.id,
+              stateEvent,
+            },
+          });
+        },
+      );
+
+      it('emits an error message when the mutation was unsuccessful', async () => {
+        createComponent({
+          isNewDiscussion: true,
+          mutationHandler: jest.fn().mockRejectedValue('Error!'),
+        });
+        findCancelButton().vm.$emit('click');
+
+        await waitForPromises();
+
+        expect(wrapper.emitted('error')).toEqual([
+          ['Something went wrong while updating the task. Please try again.'],
+        ]);
+      });
+    });
+  });
 });