1 files changed, 83 insertions, 26 deletions

diff --git a/spec/frontend/content_editor/services/markdown_sourcemap_spec.js b/spec/frontend/content_editor/services/markdown_sourcemap_spec.js
index 2efc73ddef8..4428fa682e7 100644
--- a/spec/frontend/content_editor/services/markdown_sourcemap_spec.js
+++ b/spec/frontend/content_editor/services/markdown_sourcemap_spec.js
@@ -1,6 +1,8 @@
 import { Extension } from '@tiptap/core';
 import BulletList from '~/content_editor/extensions/bullet_list';
 import ListItem from '~/content_editor/extensions/list_item';
+import TaskList from '~/content_editor/extensions/task_list';
+import TaskItem from '~/content_editor/extensions/task_item';
 import Paragraph from '~/content_editor/extensions/paragraph';
 import markdownDeserializer from '~/content_editor/services/gl_api_markdown_deserializer';
 import { getMarkdownSource, getFullSource } from '~/content_editor/services/markdown_sourcemap';
@@ -18,6 +20,20 @@ const BULLET_LIST_HTML = `<ul data-sourcepos="1:1-3:24" dir="auto">
   </li>
 </ul>`;
 
+const BULLET_TASK_LIST_MARKDOWN = `- [ ] list item 1
++ [x] checked list item 2
+  + [ ] embedded list item 1
+  - [x] checked embedded list item 2`;
+const BULLET_TASK_LIST_HTML = `<ul data-sourcepos="1:1-4:36" class="task-list" dir="auto">
+  <li data-sourcepos="1:1-1:17" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> list item 1</li>
+  <li data-sourcepos="2:1-4:36" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked> checked list item 2
+    <ul data-sourcepos="3:3-4:36" class="task-list">
+      <li data-sourcepos="3:3-3:28" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox"> embedded list item 1</li>
+      <li data-sourcepos="4:3-4:36" class="task-list-item"><input type="checkbox" class="task-list-item-checkbox" checked> checked embedded list item 2</li>
+    </ul>
+  </li>
+</ul>`;
+
 const SourcemapExtension = Extension.create({
   // lets add `source` attribute to every element using `getMarkdownSource`
   addGlobalAttributes() {
@@ -38,19 +54,68 @@ const SourcemapExtension = Extension.create({
 });
 
 const tiptapEditor = createTestEditor({
-  extensions: [BulletList, ListItem, SourcemapExtension],
+  extensions: [BulletList, ListItem, TaskList, TaskItem, SourcemapExtension],
 });
 
 const {
-  builders: { doc, bulletList, listItem, paragraph },
+  builders: { doc, bulletList, listItem, taskList, taskItem, paragraph },
 } = createDocBuilder({
   tiptapEditor,
   names: {
     bulletList: { nodeType: BulletList.name },
     listItem: { nodeType: ListItem.name },
+    taskList: { nodeType: TaskList.name },
+    taskItem: { nodeType: TaskItem.name },
   },
 });
 
+const bulletListDoc = () =>
+  doc(
+    bulletList(
+      { bullet: '+', source: '+ list item 1\n+ list item 2\n  - embedded list item 3' },
+      listItem({ source: '+ list item 1' }, paragraph('list item 1')),
+      listItem(
+        { source: '+ list item 2\n  - embedded list item 3' },
+        paragraph('list item 2'),
+        bulletList(
+          { bullet: '-', source: '- embedded list item 3' },
+          listItem({ source: '- embedded list item 3' }, paragraph('embedded list item 3')),
+        ),
+      ),
+    ),
+  );
+
+const bulletTaskListDoc = () =>
+  doc(
+    taskList(
+      {
+        bullet: '-',
+        source:
+          '- [ ] list item 1\n+ [x] checked list item 2\n  + [ ] embedded list item 1\n  - [x] checked embedded list item 2',
+      },
+      taskItem({ source: '- [ ] list item 1' }, paragraph('list item 1')),
+      taskItem(
+        {
+          source:
+            '+ [x] checked list item 2\n  + [ ] embedded list item 1\n  - [x] checked embedded list item 2',
+          checked: true,
+        },
+        paragraph('checked list item 2'),
+        taskList(
+          {
+            bullet: '+',
+            source: '+ [ ] embedded list item 1\n  - [x] checked embedded list item 2',
+          },
+          taskItem({ source: '+ [ ] embedded list item 1' }, paragraph('embedded list item 1')),
+          taskItem(
+            { source: '- [x] checked embedded list item 2', checked: true },
+            paragraph('checked embedded list item 2'),
+          ),
+        ),
+      ),
+    ),
+  );
+
 describe('content_editor/services/markdown_sourcemap', () => {
   describe('getFullSource', () => {
     it.each`
@@ -72,29 +137,21 @@ describe('content_editor/services/markdown_sourcemap', () => {
     });
   });
 
-  it('gets markdown source for a rendered HTML element', async () => {
-    const { document } = await markdownDeserializer({
-      render: () => BULLET_LIST_HTML,
-    }).deserialize({
-      schema: tiptapEditor.schema,
-      markdown: BULLET_LIST_MARKDOWN,
-    });
-
-    const expected = doc(
-      bulletList(
-        { bullet: '+', source: '+ list item 1\n+ list item 2' },
-        listItem({ source: '+ list item 1' }, paragraph('list item 1')),
-        listItem(
-          { source: '+ list item 2' },
-          paragraph('list item 2'),
-          bulletList(
-            { bullet: '-', source: '- embedded list item 3' },
-            listItem({ source: '- embedded list item 3' }, paragraph('embedded list item 3')),
-          ),
-        ),
-      ),
-    );
+  it.each`
+    description           | sourceMarkdown               | sourceHTML               | expectedDoc
+    ${'bullet list'}      | ${BULLET_LIST_MARKDOWN}      | ${BULLET_LIST_HTML}      | ${bulletListDoc}
+    ${'bullet task list'} | ${BULLET_TASK_LIST_MARKDOWN} | ${BULLET_TASK_LIST_HTML} | ${bulletTaskListDoc}
+  `(
+    'gets markdown source for a rendered $description',
+    async ({ sourceMarkdown, sourceHTML, expectedDoc }) => {
+      const { document } = await markdownDeserializer({
+        render: () => sourceHTML,
+      }).deserialize({
+        schema: tiptapEditor.schema,
+        markdown: sourceMarkdown,
+      });
 
-    expect(document.toJSON()).toEqual(expected.toJSON());
-  });
+      expect(document.toJSON()).toEqual(expectedDoc().toJSON());
+    },
+  );
 });