Create spec/frontend/content_editor/markdown_snapshot_spec.js

What does this MR do and why?

Related: Tracking Issue: Implement GLFM scripts per the ... (#361241 - closed)

NOTE: Please do not squash commits when merging

Create spec/frontend/content_editor/markdown_snapshot_spec.js and spec/frontend/content_editor/markdown_snapshot_spec_helper.js

• This is the first iteration of replacing the existing spec/frontend/content_editor/markdown_processing_spec.js and spec/frontend/content_editor/markdown_processing_spec_helper.js with a new spec based on the GLFM specification example snapshots.
• Currently there are only standard CommonMark/GitHub markdown examples, no GitLab-specific examples. This should mean no variable HTML like styles or reference IDs, and therefore this spec is stable and safe to commit to master. The examples and cases will be handled by future MRs (see Tracking Issue: Implement GLFM scripts per the ... (#361241 - closed))

Features:

• Runs tests for all WYSIWYG HTML and ProseMirror JSON example snapshots.
• Support for FOCUSED_MARKDOWN_EXAMPLES to focus one or more example names.
• Support for the following properties in glfm_specification/input/gitlab_flavored_markdown/glfm_example_status.yml (see related documentation:
  • skip_running_snapshot_wysiwyg_html_tests: Skip reason description text
  • skip_running_snapshot_prosemirror_json_tests: Skip reason description text

See https://docs.gitlab.com/ee/development/gitlab_flavored_markdown/specification_guide/#update-example-snapshotsrb-script for more context on this and related scripts.

Follow-up Tasks

• Document usage of FOCUSED_MARKDOWN_EXAMPLES
  • Separate MR: TODO - create MR

Known Issues

• Had to handle custom matcher for expect.extend in a different way than the existing ones. See TODO note in code.

Screenshots

JetBrains HTML failed test example:

JetBrains ProseMirror JSON failed test example:

Terminal failed test example:

JetBrains skipped tests example:

Terminal skipped tests example:

How to set up and validate locally

1. Run spec/frontend/content_editor/markdown_processing_spec.js, it should pass.
2. Try running it again with FOCUSED_MARKDOWN_EXAMPLES set to 02_01__preliminaries__tabs__001, it should run only that example.
3. Try running it again with FOCUSED_MARKDOWN_EXAMPLES set to 02_01__preliminaries__tabs__001,02_01__preliminaries__tabs__003, it should run only those two examples.
4. In spec/fixtures/glfm/example_snapshots/html.yml, add some invalid text like XXX to the beginning of the class in the first 02_01__preliminaries__tabs__001 example.
5. In spec/fixtures/glfm/example_snapshots/prosemirror_json.yml, add some invalid text like XXX to the beginning of the type in the first 02_01__preliminaries__tabs__001 example.
6. Run it again, see nicely formatted custom matcher messages which include the example name and original markdown.
7. Edit glfm_specification/input/gitlab_flavored_markdown/glfm_example_status.yml (see related documentation, and add skip_running_snapshot_wysiwyg_html_tests: HTML skip reason description text to one example.
8. Add skip_running_snapshot_prosemirror_json_tests: JSON skip reason description text to a different example name. E.g.:

   02_01__preliminaries__tabs__003:
     skip_running_snapshot_prosemirror_json_tests: JSON skip reason description text

9. Run the spec again, see those examples marked as pending with the description reasons you gave.

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.