Add latest changes from gitlab-org/gitlab@master

1 files changed, 127 insertions, 167 deletions

diff --git a/spec/frontend/work_items/components/work_item_description_spec.js b/spec/frontend/work_items/components/work_item_description_spec.js
index 62cbb1bacb6..b910e9854f8 100644
--- a/spec/frontend/work_items/components/work_item_description_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_spec.js
@@ -1,3 +1,4 @@
+import { GlForm } from '@gitlab/ui';
 import { shallowMount } from '@vue/test-utils';
 import Vue, { nextTick } from 'vue';
 import VueApollo from 'vue-apollo';
@@ -7,7 +8,6 @@ import waitForPromises from 'helpers/wait_for_promises';
 import EditedAt from '~/issues/show/components/edited.vue';
 import { updateDraft } from '~/lib/utils/autosave';
 import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
-import MarkdownField from '~/vue_shared/components/markdown/field.vue';
 import MarkdownEditor from '~/vue_shared/components/markdown/markdown_editor.vue';
 import WorkItemDescription from '~/work_items/components/work_item_description.vue';
 import WorkItemDescriptionRendered from '~/work_items/components/work_item_description_rendered.vue';
@@ -36,22 +36,18 @@ describe('WorkItemDescription', () => {
   const mutationSuccessHandler = jest.fn().mockResolvedValue(updateWorkItemMutationResponse);
   const subscriptionHandler = jest.fn().mockResolvedValue(workItemDescriptionSubscriptionResponse);
   let workItemResponseHandler;
-  let workItemsMvc;
 
-  const findMarkdownField = () => wrapper.findComponent(MarkdownField);
+  const findForm = () => wrapper.findComponent(GlForm);
   const findMarkdownEditor = () => wrapper.findComponent(MarkdownEditor);
   const findRenderedDescription = () => wrapper.findComponent(WorkItemDescriptionRendered);
   const findEditedAt = () => wrapper.findComponent(EditedAt);
 
-  const editDescription = (newText) => {
-    if (workItemsMvc) {
-      return findMarkdownEditor().vm.$emit('input', newText);
-    }
-    return wrapper.find('textarea').setValue(newText);
-  };
+  const editDescription = (newText) => findMarkdownEditor().vm.$emit('input', newText);
 
-  const clickCancel = () => wrapper.find('[data-testid="cancel"]').vm.$emit('click');
-  const clickSave = () => wrapper.find('[data-testid="save-description"]').vm.$emit('click', {});
+  const findCancelButton = () => wrapper.find('[data-testid="cancel"]');
+  const findSubmitButton = () => wrapper.find('[data-testid="save-description"]');
+  const clickCancel = () => findForm().vm.$emit('reset', new Event('reset'));
+  const clickSave = () => findForm().vm.$emit('submit', new Event('submit'));
 
   const createComponent = async ({
     mutationHandler = mutationSuccessHandler,
@@ -75,12 +71,6 @@ describe('WorkItemDescription', () => {
       },
       provide: {
         fullPath: 'test-project-path',
-        glFeatures: {
-          workItemsMvc,
-        },
-      },
-      stubs: {
-        MarkdownField,
       },
     });
 
@@ -93,11 +83,15 @@ describe('WorkItemDescription', () => {
     }
   };
 
-  describe('editing description with workItemsMvc FF enabled', () => {
-    beforeEach(() => {
-      workItemsMvc = true;
+  it('has a subscription', async () => {
+    await createComponent();
+
+    expect(subscriptionHandler).toHaveBeenCalledWith({
+      issuableId: workItemQueryResponse.data.workItem.id,
     });
+  });
 
+  describe('editing description', () => {
     it('passes correct autocompletion data and preview markdown sources and enables quick actions', async () => {
       const {
         iid,
@@ -113,196 +107,162 @@ describe('WorkItemDescription', () => {
         autocompleteDataSources: autocompleteDataSources(fullPath, iid),
       });
     });
-  });
-
-  describe('editing description with workItemsMvc FF disabled', () => {
-    beforeEach(() => {
-      workItemsMvc = false;
-    });
-
-    it('passes correct autocompletion data and preview markdown sources', async () => {
-      const {
-        iid,
-        project: { fullPath },
-      } = workItemQueryResponse.data.workItem;
-
-      await createComponent({ isEditing: true });
+    it('shows edited by text', async () => {
+      const lastEditedAt = '2022-09-21T06:18:42Z';
+      const lastEditedBy = {
+        name: 'Administrator',
+        webPath: '/root',
+      };
+
+      await createComponent({
+        workItemResponse: workItemByIidResponseFactory({ lastEditedAt, lastEditedBy }),
+      });
 
-      expect(findMarkdownField().props()).toMatchObject({
-        autocompleteDataSources: autocompleteDataSources(fullPath, iid),
-        markdownPreviewPath: markdownPreviewPath(fullPath, iid),
-        quickActionsDocsPath: wrapper.vm.$options.quickActionsDocsPath,
+      expect(findEditedAt().props()).toMatchObject({
+        updatedAt: lastEditedAt,
+        updatedByName: lastEditedBy.name,
+        updatedByPath: lastEditedBy.webPath,
       });
     });
-  });
 
-  describe.each([true, false])(
-    'editing description with workItemsMvc %workItemsMvcEnabled',
-    (workItemsMvcEnabled) => {
-      beforeEach(() => {
-        beforeEach(() => {
-          workItemsMvc = workItemsMvcEnabled;
-        });
-      });
+    it('does not show edited by text', async () => {
+      await createComponent();
 
-      it('has a subscription', async () => {
-        await createComponent();
+      expect(findEditedAt().exists()).toBe(false);
+    });
 
-        expect(subscriptionHandler).toHaveBeenCalledWith({
-          issuableId: workItemQueryResponse.data.workItem.id,
-        });
+    it('cancels when clicking cancel', async () => {
+      await createComponent({
+        isEditing: true,
       });
 
-      describe('editing description', () => {
-        it('shows edited by text', async () => {
-          const lastEditedAt = '2022-09-21T06:18:42Z';
-          const lastEditedBy = {
-            name: 'Administrator',
-            webPath: '/root',
-          };
+      clickCancel();
 
-          await createComponent({
-            workItemResponse: workItemByIidResponseFactory({ lastEditedAt, lastEditedBy }),
-          });
+      await nextTick();
 
-          expect(findEditedAt().props()).toMatchObject({
-            updatedAt: lastEditedAt,
-            updatedByName: lastEditedBy.name,
-            updatedByPath: lastEditedBy.webPath,
-          });
-        });
+      expect(confirmAction).not.toHaveBeenCalled();
+      expect(findMarkdownEditor().exists()).toBe(false);
+    });
 
-        it('does not show edited by text', async () => {
-          await createComponent();
+    it('prompts for confirmation when clicking cancel after changes', async () => {
+      await createComponent({
+        isEditing: true,
+      });
 
-          expect(findEditedAt().exists()).toBe(false);
-        });
+      editDescription('updated desc');
 
-        it('cancels when clicking cancel', async () => {
-          await createComponent({
-            isEditing: true,
-          });
+      clickCancel();
 
-          clickCancel();
+      await nextTick();
 
-          await nextTick();
+      expect(confirmAction).toHaveBeenCalled();
+    });
 
-          expect(confirmAction).not.toHaveBeenCalled();
-          expect(findMarkdownField().exists()).toBe(false);
-        });
+    it('calls update widgets mutation', async () => {
+      const updatedDesc = 'updated desc';
 
-        it('prompts for confirmation when clicking cancel after changes', async () => {
-          await createComponent({
-            isEditing: true,
-          });
+      await createComponent({
+        isEditing: true,
+      });
 
-          editDescription('updated desc');
+      editDescription(updatedDesc);
 
-          clickCancel();
+      clickSave();
 
-          await nextTick();
+      await waitForPromises();
 
-          expect(confirmAction).toHaveBeenCalled();
-        });
+      expect(mutationSuccessHandler).toHaveBeenCalledWith({
+        input: {
+          id: workItemId,
+          descriptionWidget: {
+            description: updatedDesc,
+          },
+        },
+      });
+    });
 
-        it('calls update widgets mutation', async () => {
-          const updatedDesc = 'updated desc';
+    it('tracks editing description', async () => {
+      await createComponent({
+        isEditing: true,
+        markdownPreviewPath: '/preview',
+      });
+      const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
 
-          await createComponent({
-            isEditing: true,
-          });
+      clickSave();
 
-          editDescription(updatedDesc);
+      await waitForPromises();
 
-          clickSave();
+      expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_description', {
+        category: TRACKING_CATEGORY_SHOW,
+        label: 'item_description',
+        property: 'type_Task',
+      });
+    });
 
-          await waitForPromises();
+    it('emits error when mutation returns error', async () => {
+      const error = 'eror';
 
-          expect(mutationSuccessHandler).toHaveBeenCalledWith({
-            input: {
-              id: workItemId,
-              descriptionWidget: {
-                description: updatedDesc,
-              },
+      await createComponent({
+        isEditing: true,
+        mutationHandler: jest.fn().mockResolvedValue({
+          data: {
+            workItemUpdate: {
+              workItem: {},
+              errors: [error],
             },
-          });
-        });
-
-        it('tracks editing description', async () => {
-          await createComponent({
-            isEditing: true,
-            markdownPreviewPath: '/preview',
-          });
-          const trackingSpy = mockTracking(undefined, wrapper.element, jest.spyOn);
-
-          clickSave();
-
-          await waitForPromises();
-
-          expect(trackingSpy).toHaveBeenCalledWith(TRACKING_CATEGORY_SHOW, 'updated_description', {
-            category: TRACKING_CATEGORY_SHOW,
-            label: 'item_description',
-            property: 'type_Task',
-          });
-        });
-
-        it('emits error when mutation returns error', async () => {
-          const error = 'eror';
+          },
+        }),
+      });
 
-          await createComponent({
-            isEditing: true,
-            mutationHandler: jest.fn().mockResolvedValue({
-              data: {
-                workItemUpdate: {
-                  workItem: {},
-                  errors: [error],
-                },
-              },
-            }),
-          });
+      editDescription('updated desc');
 
-          editDescription('updated desc');
+      clickSave();
 
-          clickSave();
+      await waitForPromises();
 
-          await waitForPromises();
+      expect(wrapper.emitted('error')).toEqual([[error]]);
+    });
 
-          expect(wrapper.emitted('error')).toEqual([[error]]);
-        });
+    it('emits error when mutation fails', async () => {
+      const error = 'eror';
 
-        it('emits error when mutation fails', async () => {
-          const error = 'eror';
+      await createComponent({
+        isEditing: true,
+        mutationHandler: jest.fn().mockRejectedValue(new Error(error)),
+      });
 
-          await createComponent({
-            isEditing: true,
-            mutationHandler: jest.fn().mockRejectedValue(new Error(error)),
-          });
+      editDescription('updated desc');
 
-          editDescription('updated desc');
+      clickSave();
 
-          clickSave();
+      await waitForPromises();
 
-          await waitForPromises();
+      expect(wrapper.emitted('error')).toEqual([[error]]);
+    });
 
-          expect(wrapper.emitted('error')).toEqual([[error]]);
-        });
+    it('autosaves description', async () => {
+      await createComponent({
+        isEditing: true,
+      });
 
-        it('autosaves description', async () => {
-          await createComponent({
-            isEditing: true,
-          });
+      editDescription('updated desc');
 
-          editDescription('updated desc');
+      expect(updateDraft).toHaveBeenCalled();
+    });
 
-          expect(updateDraft).toHaveBeenCalled();
-        });
+    it('maps submit and cancel buttons to form actions', async () => {
+      await createComponent({
+        isEditing: true,
       });
 
-      it('calls the work item query', async () => {
-        await createComponent();
+      expect(findCancelButton().attributes('type')).toBe('reset');
+      expect(findSubmitButton().attributes('type')).toBe('submit');
+    });
+  });
+
+  it('calls the work item query', async () => {
+    await createComponent();
 
-        expect(workItemResponseHandler).toHaveBeenCalled();
-      });
-    },
-  );
+    expect(workItemResponseHandler).toHaveBeenCalled();
+  });
 });