Add latest changes from gitlab-org/gitlab@master

3 files changed, 129 insertions, 27 deletions

diff --git a/spec/frontend/work_items/components/work_item_description_rendered_spec.js b/spec/frontend/work_items/components/work_item_description_rendered_spec.js
new file mode 100644
index 00000000000..01ab7824975
--- /dev/null
+++ b/spec/frontend/work_items/components/work_item_description_rendered_spec.js
@@ -0,0 +1,108 @@
+import { shallowMount } from '@vue/test-utils';
+import $ from 'jquery';
+import { nextTick } from 'vue';
+import WorkItemDescriptionRendered from '~/work_items/components/work_item_description_rendered.vue';
+import { descriptionTextWithCheckboxes, descriptionHtmlWithCheckboxes } from '../mock_data';
+
+describe('WorkItemDescription', () => {
+  let wrapper;
+
+  const findEditButton = () => wrapper.find('[data-testid="edit-description"]');
+  const findCheckboxAtIndex = (index) => wrapper.findAll('input[type="checkbox"]').at(index);
+
+  const defaultWorkItemDescription = {
+    description: descriptionTextWithCheckboxes,
+    descriptionHtml: descriptionHtmlWithCheckboxes,
+  };
+
+  const createComponent = ({
+    workItemDescription = defaultWorkItemDescription,
+    canEdit = false,
+  } = {}) => {
+    wrapper = shallowMount(WorkItemDescriptionRendered, {
+      propsData: {
+        workItemDescription,
+        canEdit,
+      },
+    });
+  };
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it('renders gfm', async () => {
+    const renderGFMSpy = jest.spyOn($.fn, 'renderGFM');
+
+    createComponent();
+
+    await nextTick();
+
+    expect(renderGFMSpy).toHaveBeenCalled();
+  });
+
+  describe('with checkboxes', () => {
+    beforeEach(() => {
+      createComponent({
+        canEdit: true,
+        workItemDescription: {
+          description: `- [x] todo 1\n- [ ] todo 2`,
+          descriptionHtml: `<ul dir="auto" class="task-list" data-sourcepos="1:1-4:0">
+<li class="task-list-item" data-sourcepos="1:1-2:15">
+<input checked="" class="task-list-item-checkbox" type="checkbox"> todo 1</li>
+<li class="task-list-item" data-sourcepos="2:1-2:15">
+<input class="task-list-item-checkbox" type="checkbox"> todo 2</li>
+</ul>`,
+        },
+      });
+    });
+
+    it('checks unchecked checkbox', async () => {
+      findCheckboxAtIndex(1).setChecked();
+
+      await nextTick();
+
+      const updatedDescription = `- [x] todo 1\n- [x] todo 2`;
+      expect(wrapper.emitted('descriptionUpdated')).toEqual([[updatedDescription]]);
+    });
+
+    it('disables checkbox while updating', async () => {
+      findCheckboxAtIndex(1).setChecked();
+
+      await nextTick();
+
+      expect(findCheckboxAtIndex(1).attributes().disabled).toBeDefined();
+    });
+
+    it('unchecks checked checkbox', async () => {
+      findCheckboxAtIndex(0).setChecked(false);
+
+      await nextTick();
+
+      const updatedDescription = `- [ ] todo 1\n- [ ] todo 2`;
+      expect(wrapper.emitted('descriptionUpdated')).toEqual([[updatedDescription]]);
+    });
+  });
+
+  describe('Edit button', () => {
+    it('is not visible when canUpdate = false', async () => {
+      await createComponent({
+        canUpdate: false,
+      });
+
+      expect(findEditButton().exists()).toBe(false);
+    });
+
+    it('toggles edit mode', async () => {
+      createComponent({
+        canEdit: true,
+      });
+
+      findEditButton().vm.$emit('click');
+
+      await nextTick();
+
+      expect(wrapper.emitted('startEditing')).toEqual([[]]);
+    });
+  });
+});
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 fafd129d356..ac8ed3a8d69 100644
--- a/spec/frontend/work_items/components/work_item_description_spec.js
+++ b/spec/frontend/work_items/components/work_item_description_spec.js
@@ -9,6 +9,7 @@ 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 WorkItemDescription from '~/work_items/components/work_item_description.vue';
+import WorkItemDescriptionRendered from '~/work_items/components/work_item_description_rendered.vue';
 import { TRACKING_CATEGORY_SHOW } from '~/work_items/constants';
 import workItemQuery from '~/work_items/graphql/work_item.query.graphql';
 import updateWorkItemMutation from '~/work_items/graphql/update_work_item.mutation.graphql';
@@ -34,8 +35,8 @@ describe('WorkItemDescription', () => {
   const workItemByIidResponseHandler = jest.fn().mockResolvedValue(projectWorkItemResponse);
   let workItemResponseHandler;
 
-  const findEditButton = () => wrapper.find('[data-testid="edit-description"]');
   const findMarkdownField = () => wrapper.findComponent(MarkdownField);
+  const findRenderedDescription = () => wrapper.findComponent(WorkItemDescriptionRendered);
   const findEditedAt = () => wrapper.findComponent(EditedAt);
 
   const editDescription = (newText) => wrapper.find('textarea').setValue(newText);
@@ -75,7 +76,7 @@ describe('WorkItemDescription', () => {
     await waitForPromises();
 
     if (isEditing) {
-      findEditButton().vm.$emit('click');
+      findRenderedDescription().vm.$emit('startEditing');
 
       await nextTick();
     }
@@ -85,28 +86,6 @@ describe('WorkItemDescription', () => {
     wrapper.destroy();
   });
 
-  describe('Edit button', () => {
-    it('is not visible when canUpdate = false', async () => {
-      await createComponent({
-        canUpdate: false,
-      });
-
-      expect(findEditButton().exists()).toBe(false);
-    });
-
-    it('toggles edit mode', async () => {
-      await createComponent({
-        canUpdate: true,
-      });
-
-      findEditButton().vm.$emit('click');
-
-      await nextTick();
-
-      expect(findMarkdownField().exists()).toBe(true);
-    });
-  });
-
   describe('editing description', () => {
     it('shows edited by text', async () => {
       const lastEditedAt = '2022-09-21T06:18:42Z';
diff --git a/spec/frontend/work_items/mock_data.js b/spec/frontend/work_items/mock_data.js
index d6fcd029990..21f3a3067c4 100644
--- a/spec/frontend/work_items/mock_data.js
+++ b/spec/frontend/work_items/mock_data.js
@@ -180,6 +180,19 @@ export const mockParent = {
   },
 };
 
+export const descriptionTextWithCheckboxes = `- [ ] todo 1\n- [ ] todo 2`;
+
+export const descriptionHtmlWithCheckboxes = `
+  <ul dir="auto" class="task-list" data-sourcepos"1:1-2:12">
+    <li class="task-list-item" data-sourcepos="1:1-1:11">
+      <input class="task-list-item-checkbox" type="checkbox"> todo 1
+    </li>
+    <li class="task-list-item" data-sourcepos="2:1-2:12">
+      <input class="task-list-item-checkbox" type="checkbox"> todo 2
+    </li>
+  </ul>
+`;
+
 export const workItemResponseFactory = ({
   canUpdate = false,
   canDelete = false,
@@ -195,6 +208,7 @@ export const workItemResponseFactory = ({
   allowsScopedLabels = false,
   lastEditedAt = null,
   lastEditedBy = null,
+  withCheckboxes = false,
   parent = mockParent.parent,
 } = {}) => ({
   data: {
@@ -227,9 +241,10 @@ export const workItemResponseFactory = ({
         {
           __typename: 'WorkItemWidgetDescription',
           type: 'DESCRIPTION',
-          description: 'some **great** text',
-          descriptionHtml:
-            '<p data-sourcepos="1:1-1:19" dir="auto">some <strong>great</strong> text</p>',
+          description: withCheckboxes ? descriptionTextWithCheckboxes : 'some **great** text',
+          descriptionHtml: withCheckboxes
+            ? descriptionHtmlWithCheckboxes
+            : '<p data-sourcepos="1:1-1:19" dir="auto">some <strong>great</strong> text</p>',
           lastEditedAt,
           lastEditedBy,
         },