Merge branch 'poc-generating-frontend-markdown-fixtures' into 'master'

Set up markdown processing tests for the content editor

See merge request gitlab-org/gitlab!55856

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