debian-mirror-gitlab/spec/frontend/content_editor/markdown_snapshot_spec.js

// See https://docs.gitlab.com/ee/development/gitlab_flavored_markdown/specification_guide/#markdown-snapshot-testing
// for documentation on this spec.
//
// NOTE: Unlike the backend markdown_snapshot_spec.rb which has a CE and EE version, there is only
// one version of this spec. This is because the frontend markdown rendering does not require EE-only
// backend features.

import jsYaml from 'js-yaml';
import { pick } from 'lodash';
import glfmExampleStatusYml from '../../../glfm_specification/input/gitlab_flavored_markdown/glfm_example_status.yml';
import markdownYml from '../../../glfm_specification/output_example_snapshots/markdown.yml';
import htmlYml from '../../../glfm_specification/output_example_snapshots/html.yml';
import prosemirrorJsonYml from '../../../glfm_specification/output_example_snapshots/prosemirror_json.yml';
import {
  IMPLEMENTATION_ERROR_MSG,
  renderHtmlAndJsonForAllExamples,
} from './render_html_and_json_for_all_examples';

jest.mock('~/emoji');

const filterExamples = (examples) => {
  const focusedMarkdownExamples = process.env.FOCUSED_MARKDOWN_EXAMPLES?.split(',') || [];
  if (!focusedMarkdownExamples.length) {
    return examples;
  }
  return pick(examples, focusedMarkdownExamples);
};

const loadExamples = (yaml) => {
  const examples = jsYaml.safeLoad(yaml, {});
  return filterExamples(examples);
};

describe('markdown example snapshots in ContentEditor', () => {
  let actualHtmlAndJsonExamples;
  let skipRunningSnapshotWysiwygHtmlTests;
  let skipRunningSnapshotProsemirrorJsonTests;

  const exampleStatuses = loadExamples(glfmExampleStatusYml);
  const markdownExamples = loadExamples(markdownYml);
  const expectedHtmlExamples = loadExamples(htmlYml);
  const expectedProseMirrorJsonExamples = loadExamples(prosemirrorJsonYml);
  const exampleNames = Object.keys(markdownExamples);

  beforeAll(async () => {
    return renderHtmlAndJsonForAllExamples(markdownExamples).then((examples) => {
      actualHtmlAndJsonExamples = examples;
    });
  });

  describe.each(exampleNames)('%s', (name) => {
    const exampleNamePrefix = 'verifies conversion of GLFM to';
    skipRunningSnapshotWysiwygHtmlTests =
      exampleStatuses[name]?.skip_running_snapshot_wysiwyg_html_tests;
    skipRunningSnapshotProsemirrorJsonTests =
      exampleStatuses[name]?.skip_running_snapshot_prosemirror_json_tests;

    const markdown = markdownExamples[name];

    if (skipRunningSnapshotWysiwygHtmlTests) {
      it.todo(`${exampleNamePrefix} HTML: ${skipRunningSnapshotWysiwygHtmlTests}`);
    } else {
      it(`${exampleNamePrefix} HTML`, async () => {
        const expectedHtml = expectedHtmlExamples[name].wysiwyg;
        const { html: actualHtml } = actualHtmlAndJsonExamples[name];

        // noinspection JSUnresolvedFunction (required to avoid RubyMine type inspection warning, because custom matchers auto-imported via Jest test setup are not automatically resolved - see https://youtrack.jetbrains.com/issue/WEB-42350/matcher-for-jest-is-not-recognized-but-it-is-runable)
        expect(actualHtml).toMatchExpectedForMarkdown(
          'HTML',
          name,
          markdown,
          IMPLEMENTATION_ERROR_MSG,
          expectedHtml,
        );
      });
    }

    if (skipRunningSnapshotProsemirrorJsonTests) {
      it.todo(`${exampleNamePrefix} ProseMirror JSON: ${skipRunningSnapshotProsemirrorJsonTests}`);
    } else {
      it(`${exampleNamePrefix} ProseMirror JSON`, async () => {
        const expectedJson = expectedProseMirrorJsonExamples[name];
        const { json: actualJson } = actualHtmlAndJsonExamples[name];

        // noinspection JSUnresolvedFunction
        expect(actualJson).toMatchExpectedForMarkdown(
          'JSON',
          name,
          markdown,
          IMPLEMENTATION_ERROR_MSG,
          expectedJson,
        );
      });
    }
  });
});