Set up markdown processing tests for the content editor

It creates a test that ensures the Content Editor knows
how to process the HTML Output of the Markdown API
and generate the exact original Markdown that the Markdown API
received as input in the first place.

app/assets/javascripts/content_editor/services/create_editor.js

+const createEditor = async ({ content }) => {
+  const { Editor } = await import(/* webpackChunkName: 'tiptap' */ 'tiptap');
+  const { Bold, Code } = await import(/* webpackChunkName: 'tiptap' */ 'tiptap-extensions');
+
+  return new Editor({
+    extensions: [new Bold(), new Code()],
+    content,
+  });
+};
+
+export default createEditor;

app/assets/javascripts/content_editor/services/to_markdown.js

+import { MarkdownSerializer, defaultMarkdownSerializer } from 'prosemirror-markdown';
+
+const toMarkdown = (document) => {
+  const serializer = new MarkdownSerializer(defaultMarkdownSerializer.nodes, {
+    ...defaultMarkdownSerializer.marks,
+    bold: {
+      // creates a bold alias for the strong mark converter
+      ...defaultMarkdownSerializer.marks.strong,
+    },
+  });
+
+  return serializer.serialize(document);
+};
+
+export default toMarkdown;

spec/frontend/content_editor/markdown_processing_examples.js

+import fs from 'fs';
+import path from 'path';
+import jsYaml from 'js-yaml';
+import { toArray } from 'lodash';
+import { getJSONFixture } from 'helpers/fixtures';
+
+export const loadMarkdownApiResult = (testName) => {
+  const fixturePathPrefix = `api/markdown/${testName}.json`;
+
+  return getJSONFixture(fixturePathPrefix);
+};
+
+export const loadMarkdownApiExamples = () => {
+  const apiMarkdownYamlPath = path.join(__dirname, '..', 'fixtures', 'api_markdown.yml');
+  const apiMarkdownYamlText = fs.readFileSync(apiMarkdownYamlPath);
+  const apiMarkdownExampleObjects = jsYaml.safeLoad(apiMarkdownYamlText);
+
+  return apiMarkdownExampleObjects.map((example) => toArray(example));
+};

spec/frontend/content_editor/markdown_processing_spec.js

+import createEditor from '~/content_editor/services/create_editor';
+import toMarkdown from '~/content_editor/services/to_markdown';
+import { loadMarkdownApiExamples, loadMarkdownApiResult } from './markdown_processing_examples';
+
+describe('markdown processing', () => {
+  // Ensure we generate same markdown that was provided to Markdown API.
+  it.each(loadMarkdownApiExamples())('correctly handles %s', async (testName, markdown) => {
+    const { html } = loadMarkdownApiResult(testName);
+    const editor = await createEditor({ content: html });
+
+    expect(toMarkdown(editor.state.doc)).toBe(markdown);
+  });
+});

spec/frontend/fixtures/api_markdown.rb

+# frozen_string_literal: true
+
+require 'spec_helper'
+
+RSpec.describe API::MergeRequests, '(JavaScript fixtures)', type: :request do
+  include ApiHelpers
+  include JavaScriptFixturesHelpers
+
+  fixture_subdir = 'api/markdown'
+
+  before(:all) do
+    clean_frontend_fixtures(fixture_subdir)
+  end
+
+  markdown_examples = begin
+    yaml_file_path = File.expand_path('api_markdown.yml', __dir__)
+    yaml = File.read(yaml_file_path)
+    YAML.safe_load(yaml, symbolize_names: true)
+  end
+
+  markdown_examples.each do |markdown_example|
+    name = markdown_example.fetch(:name)
+
+    context "for #{name}" do
+      let(:markdown) { markdown_example.fetch(:markdown) }
+
+      it "#{fixture_subdir}/#{name}.json" do
+        post api("/markdown"), params: { text: markdown }
+
+        expect(response).to be_successful
+      end
+    end
+  end
+end

spec/frontend/fixtures/api_markdown.yml

+# This data file drives the specs in
+# spec/frontend/fixtures/api_markdown.rb and
+# spec/frontend/rich_text_editor/extensions/markdown_processing_spec.js
+---
+- name: bold
+  markdown: '**bold**'
+- name: code
+  markdown: '`code`'

spec/support/helpers/javascript_fixtures_helpers.rb

@@ -31,7 +31,7 @@ module JavaScriptFixturesHelpers
   #
   def clean_frontend_fixtures(directory_name)
     full_directory_name = File.expand_path(directory_name, fixture_root_path)
-    Dir[File.expand_path('*.html', full_directory_name)].each do |file_name|
+    Dir[File.expand_path('*.{html,json,md}', full_directory_name)].each do |file_name|
       FileUtils.rm(file_name)
     end
   end