1 files changed, 248 insertions, 0 deletions
diff --git a/spec/frontend/content_editor/remark_markdown_processing_spec.js b/spec/frontend/content_editor/remark_markdown_processing_spec.js
new file mode 100644
index 00000000000..6348b97d918
--- /dev/null
+++ b/spec/frontend/content_editor/remark_markdown_processing_spec.js
@@ -0,0 +1,248 @@
+import Bold from '~/content_editor/extensions/bold';
+import Blockquote from '~/content_editor/extensions/blockquote';
+import BulletList from '~/content_editor/extensions/bullet_list';
+import Code from '~/content_editor/extensions/code';
+import CodeBlockHighlight from '~/content_editor/extensions/code_block_highlight';
+import HardBreak from '~/content_editor/extensions/hard_break';
+import Heading from '~/content_editor/extensions/heading';
+import HorizontalRule from '~/content_editor/extensions/horizontal_rule';
+import Image from '~/content_editor/extensions/image';
+import Italic from '~/content_editor/extensions/italic';
+import Link from '~/content_editor/extensions/link';
+import ListItem from '~/content_editor/extensions/list_item';
+import OrderedList from '~/content_editor/extensions/ordered_list';
+import Sourcemap from '~/content_editor/extensions/sourcemap';
+import remarkMarkdownDeserializer from '~/content_editor/services/remark_markdown_deserializer';
+import markdownSerializer from '~/content_editor/services/markdown_serializer';
+
+import { createTestEditor } from './test_utils';
+
+const tiptapEditor = createTestEditor({
+  extensions: [
+    Blockquote,
+    Bold,
+    BulletList,
+    Code,
+    CodeBlockHighlight,
+    HardBreak,
+    Heading,
+    HorizontalRule,
+    Image,
+    Italic,
+    Link,
+    ListItem,
+    OrderedList,
+    Sourcemap,
+  ],
+});
+
+describe('Client side Markdown processing', () => {
+  const deserialize = async (content) => {
+    const { document } = await remarkMarkdownDeserializer().deserialize({
+      schema: tiptapEditor.schema,
+      content,
+    });
+
+    return document;
+  };
+
+  const serialize = (document) =>
+    markdownSerializer({}).serialize({
+      doc: document,
+      pristineDoc: document,
+    });
+
+  it.each([
+    {
+      markdown: '__bold text__',
+    },
+    {
+      markdown: '**bold text**',
+    },
+    {
+      markdown: '<strong>bold text</strong>',
+    },
+    {
+      markdown: '<b>bold text</b>',
+    },
+    {
+      markdown: '_italic text_',
+    },
+    {
+      markdown: '*italic text*',
+    },
+    {
+      markdown: '<em>italic text</em>',
+    },
+    {
+      markdown: '<i>italic text</i>',
+    },
+    {
+      markdown: '`inline code`',
+    },
+    {
+      markdown: '**`inline code bold`**',
+    },
+    {
+      markdown: '__`inline code italics`__',
+    },
+    {
+      markdown: '[GitLab](https://gitlab.com "Go to GitLab")',
+    },
+    {
+      markdown: '**[GitLab](https://gitlab.com "Go to GitLab")**',
+    },
+    {
+      markdown: `
+This is a paragraph with a\\
+hard line break`,
+    },
+    {
+      markdown: '![GitLab Logo](https://gitlab.com/logo.png "GitLab Logo")',
+    },
+    {
+      markdown: '---',
+    },
+    {
+      markdown: '***',
+    },
+    {
+      markdown: '___',
+    },
+    {
+      markdown: '<hr>',
+    },
+    {
+      markdown: '# Heading 1',
+    },
+    {
+      markdown: '## Heading 2',
+    },
+    {
+      markdown: '### Heading 3',
+    },
+    {
+      markdown: '#### Heading 4',
+    },
+    {
+      markdown: '##### Heading 5',
+    },
+    {
+      markdown: '###### Heading 6',
+    },
+
+    {
+      markdown: `
+    Heading
+    one
+    ======
+    `,
+    },
+    {
+      markdown: `
+    Heading
+    two
+    -------
+    `,
+    },
+    {
+      markdown: `
+    - List item 1
+    - List item 2
+    `,
+    },
+    {
+      markdown: `
+    * List item 1
+    * List item 2
+    `,
+    },
+    {
+      markdown: `
+    + List item 1
+    + List item 2
+    `,
+    },
+    {
+      markdown: `
+    1. List item 1
+    1. List item 2
+    `,
+    },
+    {
+      markdown: `
+    1. List item 1
+    2. List item 2
+    `,
+    },
+    {
+      markdown: `
+    1) List item 1
+    2) List item 2
+    `,
+    },
+    {
+      markdown: `
+    - List item 1
+      - Sub list item 1
+    `,
+    },
+    {
+      markdown: `
+    - List item 1 paragraph 1
+
+      List item 1 paragraph 2
+    - List item 2
+    `,
+    },
+    {
+      markdown: `
+    > This is a blockquote
+    `,
+    },
+    {
+      markdown: `
+    > - List item 1
+    > - List item 2
+    `,
+    },
+    {
+      markdown: `
+        const fn = () => 'GitLab';
+    `,
+    },
+    {
+      markdown: `
+    \`\`\`javascript
+      const fn = () => 'GitLab';
+    \`\`\`\
+    `,
+    },
+    {
+      markdown: `
+    ~~~javascript
+      const fn = () => 'GitLab';
+    ~~~
+    `,
+    },
+    {
+      markdown: `
+    \`\`\`
+    \`\`\`\
+    `,
+    },
+    {
+      markdown: `
+    \`\`\`javascript
+      const fn = () => 'GitLab';
+
+    \`\`\`\
+    `,
+    },
+  ])('processes %s correctly', async ({ markdown }) => {
+    const trimmed = markdown.trim();
+    const document = await deserialize(trimmed);
+
+    expect(serialize(document)).toEqual(trimmed);
+  });
+});